/* Software product page (Tessera) — shares .bp/.bpl/.crumb from blog.css and .page-hero/.sec-head from site.css. */
.page-software main > section { padding-top: 0; padding-bottom: 0; }
.sw-eyebrow { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
.sw-eyebrow--orange { color: #FF8A57; }

.sw-hero { display: flex; gap: 56px; align-items: center; padding: 64px var(--pad) 72px !important; }
.sw-hero__text { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sw-hero h1 { margin: 0; font-family: Archivo, sans-serif; font-weight: 800; font-size: 54px; line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.sw-hero__intro { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.6; color: #C3CCE2; }
.sw-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-badges span { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .06em; color: #C3CCE2; border: 1px solid #2A3D75; border-radius: 3px; padding: 6px 10px; }
.sw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sw-hero__fig { position: relative; width: 420px; flex-shrink: 0; }
.sw-btn { display: inline-block; padding: 15px 22px; border-radius: 4px; background: var(--blue); color: #fff !important; font-weight: 600; font-size: 15px; }
.sw-btn:hover { background: #fff; color: var(--navy) !important; }
.sw-btn--ghost { background: transparent; border: 1px solid #3A4B7A; }
.sw-btn--ghost:hover { background: #fff; }
button.sw-btn--send, button.sw-btn--send:hover { border: 0; font-family: "IBM Plex Sans", sans-serif; letter-spacing: 0; cursor: pointer; align-self: flex-start; }
button.sw-btn--send:hover { background: var(--navy); color: #fff !important; }

.sw-why { padding: 80px var(--pad) 88px !important; }
.sw-pains { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sw-pain { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; padding: 20px; }
.sw-pain__n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--orange); }
.sw-pain b { font-size: 17px; color: var(--navy); }
.sw-pain span:last-child { font-size: 14.5px; line-height: 1.55; color: #4A5570; }

.sw-how { padding: 80px var(--pad) 0 !important; }
.sw-principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sw-principles li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.sw-principles__n { font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; color: var(--blue); }
.sw-principles li > div { display: flex; flex-direction: column; gap: 8px; }
.sw-principles b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px; color: var(--navy); }
.sw-principles span { font-size: 15.5px; line-height: 1.6; color: #4A5570; max-width: 74ch; }
.sw-principles em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--navy); background: var(--paper-alt); border-radius: 3px; padding: 6px 10px; align-self: flex-start; }

.sw-edge { margin-top: 90px; padding: 80px var(--pad) 88px !important; color: #fff; }
.sw-edge__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 30px; }
.sw-edge h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; color: #fff; }
.sw-edge__note { margin: 0; font-size: 15px; line-height: 1.6; color: #A9B4CF; }

.sw-team { padding: 88px var(--pad) 0 !important; }
.sw-team__text { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.sw-team h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.12; color: var(--navy); }
.sw-team p { margin: 0; font-size: 17px; line-height: 1.65; color: #4A5570; }
.sw-team__link { font-weight: 600; color: var(--blue); align-self: flex-start; }

.sw-tools-strip { margin-top: 90px; padding: 64px var(--pad) 70px !important; }
.sw-tools-strip h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 30px; color: var(--navy); }
.sw-tools-strip p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4A5570; }
.sw-tools-strip__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 24px; }
.sw-tools-strip__head > div { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.sw-tools-strip__all { flex-shrink: 0; font-weight: 600; font-size: 15px; color: var(--blue); white-space: nowrap; }
.sw-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
.sw-tools a { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; min-height: 66px; padding: 12px 16px;
              background: #fff; border: 1px solid #D5DCEA; border-radius: 5px; color: var(--navy); }
.sw-tools a:hover, .sw-tools a:focus-visible { border-color: var(--navy); box-shadow: 0 8px 20px -12px rgba(10, 22, 51, .4); color: var(--navy); }
.sw-tools i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: var(--orange); }
.sw-tools span { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
@media (max-width: 1000px) { .sw-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sw-tools-strip__head { flex-direction: column; align-items: flex-start; gap: 14px; } }

.sw-modules { padding: 88px var(--pad) 0 !important; }
.sw-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #4A5570; }
.sw-legend span { display: flex; align-items: center; gap: 6px; }
.sw-st { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.st-running { background: #2E7D45; } .st-build { background: var(--blue); } .st-planned { background: #A9B2C1; }
.sw-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.sw-mod { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; }
.sw-mod--running { border-color: #BFE3CB; background: #F6FBF7; }
.sw-mod--build { border-color: #C9D6FF; background: #F7F9FF; }
.sw-mod__tag { display: flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6A7490; }
.sw-mod b { font-size: 17px; color: var(--navy); }
.sw-mod__w { font-size: 14px; line-height: 1.55; color: #4A5570; }
.sw-mod__note { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--blue); }

.sw-road { margin-top: 90px; padding: 80px var(--pad) 88px !important; }
.sw-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; position: relative; }
.sw-stages::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--line-strong); }
.sw-stage { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 52px; }
.sw-stage__k { position: absolute; top: 0; left: 0; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .08em; color: #6A7490; }
.sw-stage__dot { position: absolute; top: 28px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); }
.sw-stage--running .sw-stage__dot { background: #2E7D45; border-color: #2E7D45; }
.sw-stage--build .sw-stage__dot { background: var(--blue); border-color: var(--blue); }
.sw-stage b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; color: var(--navy); }
.sw-stage > span:not(.sw-stage__k):not(.sw-stage__dot) { font-size: 14px; line-height: 1.55; color: #4A5570; }
.sw-stage__c { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 13px !important; }
.sw-stage__c i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--orange); }

.sw-signup { display: flex; gap: 56px; align-items: flex-start; padding: 90px var(--pad) 100px !important; scroll-margin-top: 20px; }
.sw-signup__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sw-signup h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--navy); }
.sw-signup p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #4A5570; max-width: 60ch; }
.sw-promises { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-promises li { display: grid; grid-template-columns: 24px 1fr; font-size: 14.5px; color: #4A5570; }
.sw-promises li::before { content: "✓"; color: #2E7D45; font-weight: 700; }
.sw-form { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--navy); border-radius: 6px; padding: 26px; }
.sw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sw-f { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.sw-f span { font-weight: 400; color: #6A7490; }
.sw-signup input[type=text], .sw-signup input[type=email], .sw-signup textarea { width: 100%; max-width: none; height: 44px; padding: 0 12px; border: 1px solid #C9D1E3; border-radius: 4px; font-size: 14px; font-family: "IBM Plex Sans", sans-serif; }
.sw-signup textarea { height: auto; padding: 10px 12px; resize: vertical; }
.sw-interest { margin: 0; padding: 0; border: 0; }
.sw-interest legend { padding: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--navy); }
.sw-interest > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-interest label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border: 1px solid #C9D1E3; border-radius: 3px; font-size: 13.5px; color: var(--navy); cursor: pointer; }
.sw-interest label:has(input:checked) { border-color: var(--blue); background: #EEF2FF; }
.sw-check { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.5; color: #4A5570; cursor: pointer; }
.sw-signup input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; }
.sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sw-flash { margin: 0; padding: 11px 13px; border-radius: 4px; font-size: 14px; }
.sw-flash--success { background: #EEF8F1; color: #14532D; } .sw-flash--error { background: #FDEEEE; color: var(--orange); }
.sw-legal { font-size: 12px; line-height: 1.5; color: #6A7490; }
.sw-legal p { margin: 0; font-size: 12px; }

@media (max-width: 1000px) {
  .sw-hero, .sw-signup { flex-direction: column; }
  .sw-hero__fig, .sw-form { width: 100%; }
  .sw-hero h1 { font-size: 40px; }
  .sw-stages::before { display: none; }
}
@media (max-width: 860px) {
  .sw-modules .sec-head, .sw-why .sec-head, .sw-road .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 720px) {
  .sw-hero h1 { font-size: 32px; }
  .sw-edge h2, .sw-signup h2 { font-size: 28px; }
  .sw-team h2 { font-size: 26px; }
  .sw-why, .sw-edge, .sw-road, .sw-signup, .sw-tools-strip { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sw-how, .sw-modules, .sw-team { padding-top: 56px !important; }
  .sw-pair { grid-template-columns: 1fr; }
  .sw-principles li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}

/* ---------------------------------------------------------- the program (canvas option A, 9 Oct)
   On the light grid band: one large capture in a dark window frame, equal tabs under it, the chosen
   capture's words on a white card, justified. software.js shows one pane and one text at a time; without it
   all of them stack. */
.sw-screens { padding: 88px var(--pad) 96px !important; }
.sw-prog { display: flex; flex-direction: column; gap: 16px; }
.sw-prog__pane { position: relative; display: block; border-radius: 8px; overflow: hidden; background: #0D1A3A; border: 1px solid #22346A;
                 box-shadow: 0 30px 70px -40px rgba(10, 22, 51, .55); }
.sw-prog__pane + .sw-prog__pane { margin-top: 16px; }
.sw-prog.is-js .sw-prog__pane { margin-top: 0; }
.sw-prog.is-js .sw-prog__pane:not(.is-on), .sw-prog.is-js .sw-prog__text:not(.is-on) { display: none; }
.sw-prog__pane img { display: block; width: 100%; height: auto; }
.sw-prog__bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid #22346A;
                font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .04em; color: #7C89AD; }
.sw-prog__bar i { width: 8px; height: 8px; border-radius: 50%; background: #2E3F6E; }
.sw-prog__bar span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-prog__zoom { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
                 justify-content: center; background: rgba(10, 22, 51, .8); color: #fff; opacity: 0; transition: opacity .2s ease; }
.sw-prog__pane:hover .sw-prog__zoom, .sw-prog__pane:focus-visible .sw-prog__zoom { opacity: 1; }
.sw-prog__tabs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.sw-prog__tabs[hidden] { display: none; }
.sw-prog__tab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 20px; border-radius: 8px; border: 1px solid #D5DCEA;
                background: #fff; color: var(--navy); text-align: left; cursor: pointer; font: inherit; }
.sw-prog__tab span { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em; color: var(--orange); }
.sw-prog__tab b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; }
/* The site-wide button:hover turns the background navy; the label is navy too and vanished. Keep it white. */
.sw-prog__tab { letter-spacing: 0; }
.sw-prog__tab:hover, .sw-prog__tab:focus-visible { background: #fff; color: var(--navy); border-color: #9AA6C2; }
.sw-prog__tab.is-on { border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--blue); }
.sw-prog__text { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; padding: 28px 32px;
                 background: #fff; border: 1px solid #D5DCEA; border-radius: 8px; }
.sw-prog__text > div { display: flex; flex-direction: column; gap: 8px; }
.sw-prog__n { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em; color: var(--orange); }
.sw-prog__text h3 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--navy); }
.sw-prog__text p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #4A5570; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 900px) {
  .sw-screens { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sw-screens .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sw-prog__tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sw-prog__tab { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .sw-prog__tab b { font-size: 16px; }
  .sw-prog__text { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 20px 24px; }
  .sw-prog__zoom { opacity: 1; }
}

/* ---------------------------------------------------------- where we will be different
   A comparison table on a light sheet: every principle on its own row, "usually" and ours beside it. Rows
   are full width, so five (or any number) of them line up — the old 3 + 2 card grid did not, and the
   cards grew to their own text. */
.sw-cmp { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .6); }
.sw-cmp__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.sw-cmp__row > * { padding: 22px 26px; }
.sw-cmp__row--head { border-top: 0; background: var(--paper-alt); }
.sw-cmp__row--head span { padding-top: 14px; padding-bottom: 14px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; color: #6A7490; }
.sw-cmp__row--head .is-ours, .sw-cmp__ours { background: #FFF7F2; }
.sw-cmp__row--head .is-ours { color: var(--orange); }
.sw-cmp__what { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.sw-cmp__what > div { display: flex; flex-direction: column; gap: 6px; }
.sw-cmp__n { padding-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--orange); }
.sw-cmp__what b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--navy); }
.sw-cmp__what span { font-size: 14.5px; line-height: 1.6; color: #4A5570; }
.sw-cmp__today, .sw-cmp__ours { display: flex; flex-direction: column; justify-content: center; font-size: 15px; line-height: 1.5; }
.sw-cmp__today { color: #6A7490; border-left: 1px solid var(--line); }
.sw-cmp__ours { color: var(--navy); font-weight: 600; border-left: 1px solid #F3D9CB; }
.sw-cmp__label { display: none; font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 400; letter-spacing: .1em; margin-bottom: 4px; }
.sw-cmp__ours .sw-cmp__label { color: var(--orange); }
@media (max-width: 860px) {
  .sw-cmp__row--head { display: none; }
  .sw-cmp__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sw-cmp__row:nth-child(2) { border-top: 0; }
  .sw-cmp__what { grid-column: 1 / -1; padding-bottom: 12px; }
  .sw-cmp__today, .sw-cmp__ours { justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
  .sw-cmp__today { border-left: 0; }
  .sw-cmp__label { display: block; }
}
@media (max-width: 520px) {
  .sw-cmp__row { grid-template-columns: minmax(0, 1fr); }
  .sw-cmp__ours { border-left: 0; }
  .sw-cmp__row > * { padding-left: 18px; padding-right: 18px; }
}

/* ------------------------------------------- yol haritası ve "neden" ızgaraları
   İki hata düzeltiliyor.

   1) Zaman çizgisi konteynerin en üstüne TEK parça çiziliyordu
      (.sw-stages::before, top: 34px). Izgara ikinci satıra sardığı anda o
      satırdaki noktalar çizgisiz kalıyor ve bölüm bozuk görünüyor. Çizgi
      artık her kartın kendi üstünde: kaç satır olursa olsun her satırda var.

   2) auto-fit ile altı öğe geniş ekranda 4+2 sarıyordu. Üç sütunla sınırlayınca
      3+3 oluyor; dört öğede ise :has() ile 2+2'ye düşüyor, çünkü 3+1 tek başına
      kalan bir kart demek.

   Bu blok dosyanın en sonunda: yukarıdaki @media blokları eşit özgüllükte,
   sonra gelen kazanır. */

.sw-pains,
.sw-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-pains:has(> :nth-child(4):last-child),
.sw-stages:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sw-stages { overflow: hidden; }          /* satır sonundaki çizgi payını kırpar */
.sw-stages::before { display: none; }     /* tek parça çizgi — yerini alttaki aldı */
.sw-stage::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  right: -18px;                           /* ızgara boşluğu kadar: kartlar arası kopmasın */
  height: 1px;
  background: var(--line-strong);
}
/* Serbest bırakma koşulu kutuları kartın altına yaslansın; metin uzunluğu
   farklı olduğu için aksi hâlde her biri başka yükseklikte duruyor. */
.sw-stage__c { margin-top: auto; }

@media (max-width: 1000px) {
  .sw-pains,
  .sw-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sw-pains,
  .sw-stages { grid-template-columns: minmax(0, 1fr); }
  .sw-stage::before { display: none; }    /* tek sütunda çizginin anlamı yok */
  .sw-stage__c { margin-top: 0; }
}

/* ---------------------------------------------------------- product showcase (canvas option D)
   templates/software/_showcase.html + js/software.js. Every picture is a Tessera capture; the frames
   around them are kept quiet so the program's own window carries the colour. Without JS all eight
   capability panels are shown one under another; with it the list on the left turns them into tabs. */

/* Hero with the program window on the right */
.sw-hero--video { align-items: center; }
.sw-hero--video .sw-hero__text { flex: 0.85 1 0; }
.sw-hero__win { position: relative; flex: 1.3 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-win { border-radius: 8px; overflow: hidden; background: #0A1633; border: 1px solid #22346A; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.sw-win__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: #0D1A3A; border-bottom: 1px solid #22346A;
               font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #7C89AD; }
.sw-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2E3F6E; }
.sw-win__bar span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-video { display: block; width: 100%; height: auto; background: #101E44; object-fit: cover; }
.sw-video--hero { aspect-ratio: 16 / 10; }
.sw-hero__win figcaption { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .04em; line-height: 1.5; color: #8A97BA; }
.sw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-tags a { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border: 1px solid #3A4B7A; border-radius: 15px;
             font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .04em; color: #C3CCE2; }
.sw-tags a:hover, .sw-tags a:focus-visible { border-color: #fff; color: #fff; }

/* 01 · workflow strip */
.sw-flow-sec { padding: 80px var(--pad) 76px !important; }
.sw-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
           border: 1px solid #C9D0DE; border-radius: 6px; overflow: hidden; background: #fff; }
.sw-flow li { border-right: 1px solid var(--line); }
.sw-flow li:last-child { border-right: 0; }
.sw-flow__step { display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 14px 14px 18px; color: inherit; }
a.sw-flow__step[href]:hover { background: var(--paper-alt); color: inherit; }
.sw-flow__step.is-on { box-shadow: inset 0 -3px 0 var(--blue); background: var(--paper-alt); }
.sw-flow__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.sw-flow__n { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em; color: var(--orange); }
.sw-flow__step b { font-size: 16px; color: var(--navy); }
.sw-flow__t { font-size: 13.5px; line-height: 1.5; color: #4A5470; }

/* 02 · capability workbench */
.sw-bench-sec { padding: 84px var(--pad) 92px !important; scroll-margin-top: 20px; }
.sw-bench { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; scroll-margin-top: 20px; }
/* Nothing in the workbench sits straight on the grid (owner's call, canvas 9 Oct): the list is a white card,
   each still is on a card, and the words, facts, spec and log share one white card. */
.sw-bench__nav { position: sticky; top: calc(var(--hdr, 0px) + 24px); display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #fff;
                 border: 1px solid #DCE2EC; border-radius: 12px; box-shadow: 0 18px 40px -30px rgba(10, 22, 51, .4); }
.sw-bench__grp { margin: 14px 6px 4px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .14em; color: #8A93A8; }
.sw-bench__grp:first-child { margin-top: 0; }
.sw-bench__btn { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
                 border-radius: 7px; background: transparent; font-size: 14.5px; font-weight: 600; color: #3A4460; }
.sw-bench__btn:hover { background: var(--paper-alt); color: var(--navy); }
.sw-bench__btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sw-bench__n { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 500; color: var(--orange); }
.sw-bench__btn.is-on .sw-bench__n { color: #FF8A57; }
.sw-bench__legend { list-style: none; margin: 12px 6px 4px; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px;
                    font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #6A7490; }
.sw-bench__legend li { display: flex; align-items: center; gap: 7px; }
.sw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #A9B2C1; }
.sw-dot--running { background: #1E8A4C; } .sw-dot--partly { background: #B7791F; } .sw-dot--build { background: var(--blue); }

.sw-cap { min-width: 0; scroll-margin-top: 20px; }
.sw-cap + .sw-cap { margin-top: 72px; }                         /* no JS: one under another */
.sw-bench.is-js .sw-cap { margin-top: 0; }
.sw-bench.is-js .sw-cap:not(.is-on) { display: none; }
.sw-cap__video video, .sw-cap__video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
                                           border-radius: 10px; background: #101E44; box-shadow: 0 30px 70px -36px rgba(10, 22, 51, .6); }
.sw-cap__stills { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sw-cap__stills figure { margin: 0; height: 100%; padding: 6px; background: #fff; border: 1px solid #DCE2EC; border-radius: 10px; }
.sw-cap__stills img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #F1F3F7; }
.sw-cap__stills figcaption { padding: 8px 4px 2px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.45; color: #6A7490; }
.sw-cap__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 24px;
                 padding: 30px 32px 32px; background: #fff; border: 1px solid #DCE2EC; border-radius: 12px;
                 box-shadow: 0 1px 2px rgba(10, 22, 51, .06), 0 24px 50px -34px rgba(10, 22, 51, .45); }
.sw-cap__text { display: flex; flex-direction: column; gap: 14px; }
.sw-cap h3 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 30px; line-height: 1.12; color: var(--navy); }
.sw-cap__text > p { margin: 0; font-size: 16px; line-height: 1.6; color: #4A5470; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.sw-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 13px;
           font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: #6A7490; background: #EEF0F4; }
.sw-pill .sw-dot { width: 8px; height: 8px; }
.sw-pill--running { color: #11663A; background: #E5F4EA; } .sw-pill--partly { color: #8A5A0F; background: #FBF1DF; }
.sw-pill--build { color: var(--blue); background: #EEF2FF; }
.sw-facts { list-style: none; margin: 0; padding: 0; }
.sw-facts li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: #3A4460; }
.sw-facts b { color: var(--navy); font-weight: 600; }
.sw-facts__n { flex-shrink: 0; padding-top: 2px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--orange); }
.sw-cap__side { display: flex; flex-direction: column; gap: 14px; padding-left: 32px; border-left: 1px solid var(--line); }
.sw-spec { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #DCE2EC; border-radius: 8px; overflow: hidden; background: #F8F9FB;
           font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.sw-spec div { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sw-spec div:nth-child(odd) { border-right: 1px solid var(--line); }
.sw-spec div:nth-last-child(-n+2):nth-child(odd), .sw-spec div:last-child { border-bottom: 0; }
.sw-spec dt { font-size: 10.5px; letter-spacing: .06em; color: #8A93A8; margin-bottom: 3px; }
.sw-spec dd { margin: 0; line-height: 1.45; color: var(--navy); }
.sw-log { padding: 14px 16px; border-radius: 8px; background: var(--navy); font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.6; color: #C3CCE2; }
.sw-log span { display: block; margin-bottom: 6px; font-size: 10.5px; letter-spacing: .1em; color: #7C89AD; }
.sw-log code { font: inherit; overflow-wrap: anywhere; }
.sw-cap__more { font-size: 14px; font-weight: 600; color: var(--blue); }

/* 03 · one screen, read closely */
.sw-annot { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 52px; align-items: center; padding: 88px var(--pad) !important; }
.sw-annot__text { display: flex; flex-direction: column; gap: 16px; }
.sw-annot h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); }
.sw-annot__intro { margin: 0; font-size: 16px; line-height: 1.6; color: #4A5470; }
.sw-annot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-annot__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: #F8F9FB; cursor: pointer; }
.sw-annot__list.is-js li:not(.is-on) { display: none; }
.sw-annot__list li > div { display: flex; flex-direction: column; gap: 6px; }
.sw-annot__list b { font-size: 17px; color: var(--navy); }
.sw-annot__list span:not(.sw-annot__n) { font-size: 15px; line-height: 1.55; color: #4A5470; }
.sw-annot__n { font-family: "IBM Plex Mono", monospace; font-size: 28px; line-height: 1; color: var(--orange); }
.sw-annot__fig { position: relative; margin: 0; }
.sw-annot__fig img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid #D5DCEA; box-shadow: 0 24px 60px -30px rgba(10, 22, 51, .45); }
.sw-pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--orange);
          color: #fff; font: 600 12px/26px "IBM Plex Mono", monospace; text-align: center; cursor: pointer; box-shadow: 0 0 0 6px rgba(194, 65, 12, .25); }
.sw-pin:hover, .sw-pin.is-on { background: #fff; color: var(--orange); }
.sw-pin:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* 04 · gallery — light grid band, each capture on its own white card (canvas, 9 Oct): the picture inset in
   the card, the category with its group's colour dot, the title and a quiet running number under it. */
.sw-gal { padding: 76px var(--pad) 84px !important; }
.sw-gal__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.sw-gal h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--navy); }
.sw-gal__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sw-gal__chips[hidden] { display: none; }
.sw-gal__chip { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid #C9D0DE; background: #fff; color: #3A4460;
                font: 13px "IBM Plex Sans", sans-serif; cursor: pointer; }
.sw-gal__chip:hover { background: #fff; border-color: var(--navy); color: var(--navy); }
.sw-gal__chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sw-gal__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sw-gal__grid li[hidden] { display: none; }
.sw-gal figure { margin: 0; height: 100%; display: flex; flex-direction: column; padding: 8px; background: #fff; border: 1px solid #DCE2EC; border-radius: 12px;
                 box-shadow: 0 1px 2px rgba(10, 22, 51, .06), 0 18px 40px -28px rgba(10, 22, 51, .45); transition: transform .2s ease, box-shadow .2s ease; }
.sw-gal figure:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 22, 51, .06), 0 24px 48px -26px rgba(10, 22, 51, .5); }
.sw-gal__media { position: relative; aspect-ratio: 4 / 3; border-radius: 7px; overflow: hidden; background: #F1F3F7; }
.sw-gal__media img, .sw-gal__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-gal__kind { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px;
                border-radius: 12px; background: rgba(10, 22, 51, .82); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em;
                color: #fff; pointer-events: none; }
.sw-gal figcaption { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px 8px; }
.sw-gal__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sw-gal__row b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.sw-gal__n { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #A3ABBD; }
.sw-gal__cat { display: flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .08em; color: #6A7490; }
.sw-gal__cat i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 1100px) {
  .sw-bench { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sw-bench__nav { position: static; flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
  .sw-bench__grp, .sw-bench__legend { display: none; }
  .sw-bench__btn { flex: 0 0 auto; height: 42px; grid-template-columns: auto auto auto; }
  .sw-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw-flow li:nth-child(3n) { border-right: 0; }
  .sw-flow li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .sw-gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .sw-hero__win { width: 100%; flex: none; }
  .sw-annot { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sw-cap__body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px 20px 24px; }
  .sw-cap__side { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--line); }
  .sw-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sw-flow-sec, .sw-bench-sec, .sw-annot, .sw-gal { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-flow li, .sw-flow li:nth-child(3n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sw-flow li:nth-child(2n) { border-right: 0; }
  .sw-flow li:nth-last-child(-n+2) { border-bottom: 0; }
  .sw-cap h3 { font-size: 24px; }
  .sw-annot h2, .sw-gal h2 { font-size: 28px; }
  .sw-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 10px; line-height: 20px; box-shadow: 0 0 0 4px rgba(194, 65, 12, .25); }
  .sw-cap__stills figcaption { display: none; }
}
@media (max-width: 560px) {
  .sw-gal__grid { gap: 12px; }                                    /* two columns stay: one would make twelve screen-high tiles */
  .sw-gal figure { padding: 6px; border-radius: 10px; }
  .sw-gal figcaption { gap: 5px; padding: 10px 4px 4px; }
  .sw-gal__row b { font-size: 13px; }
  .sw-gal__cat { font-size: 9.5px; }
  .sw-spec { grid-template-columns: minmax(0, 1fr); }
  .sw-spec div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .sw-spec div:last-child { border-bottom: 0 !important; }
}

/* ---------------------------------------------------------- viewer (software.js) and zoom layers
   A full-screen <dialog>: the large capture, or the video with controls. Videos everywhere fill their tile
   (object-fit: cover); in the browser's own full screen that cropped the top and bottom of a 4:3 clip on a
   16:9 screen — there they are shown whole. */
.sw-video:fullscreen, .sw-gal__media video:fullscreen, .sw-cap__video video:fullscreen { object-fit: contain !important; background: #000; }
.sw-video:-webkit-full-screen { object-fit: contain !important; background: #000; }

.sw-zoom { display: block; cursor: zoom-in; }
.sw-zoom--video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sw-zoom__play { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 3px;
                 background: rgba(10, 22, 51, .72); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); opacity: 0;
                 transform: scale(.9); transition: opacity .2s ease, transform .2s ease; }
.sw-zoom--video:hover .sw-zoom__play, .sw-zoom--video:focus-visible .sw-zoom__play { opacity: 1; transform: scale(1); }
@media (hover: none) { .sw-zoom__play { opacity: .9; transform: none; width: 40px; height: 40px; } }
.sw-cap__video { position: relative; }
.sw-cap__stills .sw-zoom img, .sw-gal__media .sw-zoom img { transition: transform .3s ease; }
.sw-gal__media .sw-zoom { height: 100%; }
.sw-gal__media .sw-zoom:hover img { transform: scale(1.03); }
.sw-cap__stills .sw-zoom:hover img { border-color: var(--navy); }

html.sw-lb-open { overflow: hidden; }
.sw-lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
         background: rgba(5, 10, 26, .95); color: #fff; }
.sw-lb::backdrop { background: rgba(5, 10, 26, .6); }
.sw-lb[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; }
.sw-lb__fig { grid-column: 2; margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 56px 0 28px; min-height: 0; }
.sw-lb__media { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.sw-lb__media img, .sw-lb__media video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
                                         border-radius: 6px; background: #0A1633; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sw-lb__media video { width: 100%; }
.sw-lb figcaption { display: flex; gap: 18px; align-items: baseline; font-size: 15px; color: #E3E8F5; }
.sw-lb__count { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #8A97BA; }
/* The site's generic button rule adds 15 × 26 px padding and letter-spacing — on a 48 px circle that pushed
   the × and the arrows off centre. Reset here and centre the glyph with flex. */
.sw-lb__btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
              border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff;
              font: 400 30px/1 "IBM Plex Sans", sans-serif; letter-spacing: 0; cursor: pointer; justify-self: center; }
.sw-lb__close { font-size: 28px; }
.sw-lb__btn:hover, .sw-lb__btn:focus-visible { background: #fff; color: var(--navy); }
.sw-lb__prev { grid-column: 1; grid-row: 1; }
.sw-lb__next { grid-column: 3; grid-row: 1; }
.sw-lb__fig { grid-row: 1; }
.sw-lb__close { position: absolute; top: 16px; right: 18px; }
.sw-lb.is-single .sw-lb__prev, .sw-lb.is-single .sw-lb__next { visibility: hidden; }
@media (max-width: 720px) {
  .sw-lb[open] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .sw-lb__fig { padding: 64px 10px 84px; }
  .sw-lb__prev, .sw-lb__next { position: absolute; bottom: 18px; grid-column: auto; grid-row: auto; }   /* placed against the dialog, not a 0-wide grid column */
  .sw-lb__prev { left: calc(50% - 60px); } .sw-lb__next { right: calc(50% - 60px); }
}

/* ---------------------------------------------------------- verification (NAFEMS), right under the hero
   templates/software/_verify.html. On the light band, every block on a white card. Deviations beyond 1 %
   are amber — the same rule the explanations below the table answer. */
.sw-verify { padding: 84px var(--pad) 92px !important; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 20px; }
.sw-verify__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; max-width: 860px; }
.sw-verify__head h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 42px; line-height: 1.1; letter-spacing: -.01em; color: var(--navy); }
.sw-vcard { background: #fff; border: 1px solid #DCE2EC; border-radius: 12px; box-shadow: 0 1px 2px rgba(10, 22, 51, .06), 0 24px 50px -34px rgba(10, 22, 51, .45); }
.sw-verify__intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding: 28px; }
.sw-verify__lead { display: flex; flex-direction: column; gap: 18px; padding: 4px; }
.sw-verify__lead p { margin: 0; font-size: 16px; line-height: 1.7; color: #4A5570; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.sw-verify__keys { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px;
                   font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #4A5570; }
.sw-verify__keys li { display: flex; align-items: center; gap: 8px; }
.sw-vkey { display: inline-block; width: 14px; height: 10px; }
.sw-vkey--bar { background: #2A6FD6; border-radius: 2px; }
.sw-vkey--ref { width: 9px; height: 9px; background: #E8622A; transform: rotate(45deg); }
.sw-vkey--band { background: #E6E8EC; border-radius: 2px; }
.sw-verify__data { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--blue); }
.sw-verify__chart { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.sw-verify__chart img { display: block; width: 100%; height: auto; }

.sw-vtable-wrap { padding: 6px 0 0; overflow-x: auto; }
.sw-vtable { width: 100%; border-collapse: collapse; font-size: 14px; color: #3A4460; min-width: 900px; }
.sw-vtable th, .sw-vtable td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sw-vtable thead th { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #6A7490;
                      background: var(--paper-alt); border-bottom: 1px solid #DCE2EC; }
.sw-vtable thead th span { display: block; text-transform: none; letter-spacing: 0; color: #8A93A8; }
.sw-vtable tbody tr:hover { background: #F8F9FB; }
.sw-vtable tbody th a { font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--navy); border-bottom: 1px dashed #9AA6C2; }
.sw-vtable tbody th a:hover { color: var(--blue); border-color: var(--blue); }
.sw-vtable .num { font-family: "IBM Plex Mono", monospace; font-size: 13px; white-space: nowrap; color: var(--navy); }
.sw-vtable .num span { color: #8A93A8; }
.sw-vtable tbody tr:last-child > * { border-bottom: 0; }
.sw-vtable__foot { margin: 0; padding: 14px 16px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: #6A7490; }
.sw-dev { display: inline-block; padding: 2px 7px; border-radius: 10px; background: #E5F4EA; color: #11663A !important; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.sw-dev.is-far { background: #FBF1DF; color: #8A5A0F !important; }

.sw-vnotes { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.sw-vnotes h3 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 24px; color: var(--navy); }
.sw-vnotes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.sw-vnotes li { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.sw-vnotes b { font-family: Archivo, sans-serif; font-size: 17px; color: var(--navy); }
.sw-vnotes p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4A5570; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.sw-bview { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; scroll-margin-top: 20px; }
.sw-bview__nav { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 6px; padding: 10px; }
.sw-bview__nav[hidden] { display: none; }
.sw-bview__chip { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 12px; border-radius: 8px; color: var(--navy); }
.sw-bview__chip b { font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.sw-bview__chip:hover { background: var(--paper-alt); color: var(--navy); }
.sw-bview__chip.is-on { background: var(--navy); color: #fff; }
.sw-btest { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; padding: 24px; scroll-margin-top: 20px; }
.sw-btest + .sw-btest { margin-top: 0; }
.sw-bview.is-js .sw-btest:not(.is-on) { display: none; }
.sw-btest__media { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sw-btest__video { position: relative; }
.sw-btest__video video, .sw-btest__media > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #101E44; }
.sw-btest__thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sw-btest__thumbs figure { margin: 0; padding: 6px; border: 1px solid #DCE2EC; border-radius: 10px; background: #fff; }
.sw-btest__thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.sw-btest__thumbs figcaption { padding: 8px 4px 2px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #6A7490; }
.sw-btest__body { display: flex; flex-direction: column; gap: 12px; }
.sw-btest__code { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .1em; color: var(--orange); }
.sw-btest h3 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--navy); }
.sw-btest__what { margin: 0; font-size: 15px; line-height: 1.55; color: #4A5570; }
.sw-btest__vals { margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #DCE2EC; border-radius: 8px; overflow: hidden; background: #F8F9FB; }
.sw-btest__vals div { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sw-btest__vals div:first-child { border-right: 1px solid var(--line); }
.sw-btest__vals div.is-wide { grid-column: 1 / -1; border-bottom: 0; }
.sw-btest__vals dt { margin-bottom: 4px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .08em; color: #8A93A8; }
.sw-btest__vals dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 15px; color: var(--navy); line-height: 1.45; }
.sw-btest__vals dd > span:not(.sw-dev) { font-size: 11.5px; color: #8A93A8; }
.sw-btest__vals .is-wide dd { font-family: "IBM Plex Sans", sans-serif; font-size: 14px; }

@media (max-width: 1100px) {
  .sw-verify__intro, .sw-btest { grid-template-columns: minmax(0, 1fr); }
  .sw-bview__nav { grid-template-columns: repeat(7, minmax(84px, 1fr)); overflow-x: auto; }
}
@media (max-width: 860px) {
  .sw-vnotes ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sw-verify { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sw-verify__head h2 { font-size: 28px; }
  .sw-verify__intro, .sw-btest { padding: 16px; gap: 20px; }
  .sw-btest h3 { font-size: 22px; }
}

/* NAFEMS summary chart, drawn in the page from the table's rows (so it speaks the page's language). */
.sw-vchart { margin: 0; padding: 18px 18px 8px; background: #fff; }
.sw-vchart__cap { display: grid; gap: 4px; margin-bottom: 10px; }
.sw-vchart__cap b { font: 700 15px/1.3 "Archivo", sans-serif; color: var(--navy, #0A1633); }
.sw-vchart__cap span { font-size: 11.5px; color: #6A7490; }
.sw-vchart svg { display: block; width: 100%; height: auto; font-family: "IBM Plex Mono", monospace; }
.sw-vchart__band { fill: #EEF0EC; }
.sw-vchart__grid { stroke: #E3E7EF; stroke-width: 1; }
.sw-vchart__zero { stroke: #3A4460; stroke-width: 1; }
.sw-vchart__tick { font-size: 10px; fill: #6A7490; text-anchor: middle; }
.sw-vchart__code { font-size: 11px; fill: #3A4460; text-anchor: end; dominant-baseline: middle; }
.sw-vchart__bar { fill: #2E6FD8; }
.sw-vchart__val { font-size: 10px; fill: #0A1633; dominant-baseline: middle; }
.sw-vchart__ref { fill: #E0703A; stroke: #fff; stroke-width: 1; }
.sw-vchart__axis { font-size: 10.5px; fill: #3A4460; text-anchor: middle; }