/* Tsera — site styles. Palette from the Tsera Brand Toolkit v2. Fonts are self-hosted (IBM Plex, SIL OFL; see fonts/OFL.txt): no third-party requests. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/plex-mono-500.woff2) format("woff2"); }
:root {
  --deep-ocean: #214E6E;
  --electric-teal: #00AFA0;
  --signal-orange: #F47A20;
  --graphite: #1A1F23;

  --brand: #173A57;              /* headings, primary buttons */
  --brand-2: #0F2A40;            /* bands and footer */
  --brand-3: #2A5D80;
  --ink: #1A1F23;
  --ink-2: #3D454C;
  --muted: #5C646C;
  --line: #DDE2E7;
  --line-2: #C5CDD4;
  --bg: #FFFFFF;
  --bg-soft: #F3F5F7;
  --bg-tint: #EAF4F2;
  --teal-ink: #007F74;           /* teal for text on white (AA) */
  --teal-lt: #5FD6CB;            /* teal for text on navy */
  --on-dark: #D3DEE6;
  --on-dark-2: #A9BCCA;
  --night-line: #2B4A63;
  --radius: 2px;
  --wrap: 80rem;
  --gut: clamp(1rem, 3vw, 2rem);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
a { color: var(--teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }
:focus-visible { outline: 2px solid var(--electric-teal); outline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); }
p code, li code, td code, dd code { font-size: .86em; background: var(--bg-soft); border: 1px solid var(--line); padding: .05em .35em; color: var(--brand); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
@media (max-width: 560px) { body { font-size: 16px; } }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: .5rem; }

/* ---------- header ---------- */
.site-hd { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.site-hd > .wrap { display: flex; align-items: stretch; gap: 2rem; height: 80px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { display: block; width: 112px; height: auto; }
.nav { display: flex; align-items: stretch; flex: 1; gap: .25rem; }
.nav-item { display: flex; align-items: stretch; }
.nav-item > a, .nav-item > button { font: 500 16px/1 var(--sans); color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0 .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.nav-item > button::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .15s; }
.nav-item.open > button::after { transform: translateY(1px) rotate(-135deg); }
.nav-item > a:hover, .nav-item > button:hover, .nav-item.open > button { color: var(--brand); border-bottom-color: var(--line-2); }
.nav-item > a[aria-current="page"], .nav-item.current > button { color: var(--brand); border-bottom-color: var(--electric-teal); }
.menu { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgba(15,42,64,.35); display: none; }
.nav-item.open .menu { display: block; }
.menu > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 3rem; padding-top: 2.2rem; padding-bottom: 2.4rem; }
.menu-intro .menu-title { font-size: 1.6rem; line-height: 1.2; color: var(--brand); margin: 0 0 .7rem; }
.menu-intro p { margin: 0 0 1rem; color: var(--ink-2); font-size: 15.5px; max-width: 22rem; }
.menu-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-content: start; }
.menu-links a { display: block; padding: .8rem 0; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); }
.menu-links a:hover b { color: var(--teal-ink); }
.menu-links a b { display: block; font-weight: 500; font-size: 16px; color: var(--brand); }
.menu-links a span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: .15rem; }
.hd-login { margin: auto 0 auto auto; flex: none; display: inline-flex; align-items: center; gap: .45rem; font: 500 16px/1 var(--sans); color: var(--brand); text-decoration: none; padding: 0 .4rem; height: 50px; }
.hd-login:hover { color: var(--teal-ink); }
.hd-cta { margin: auto 0; flex: none; }
.nav-toggle { display: none; margin: auto 0 auto auto; font: 500 15px var(--sans); background: none; border: 1px solid var(--line-2); padding: .55rem .9rem; color: var(--ink); cursor: pointer; }
.mobile-cta { display: none; }
@media (max-width: 1100px) {
  .nav, .site-hd .hd-cta, .site-hd .hd-login { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .nav { display: block; position: fixed; inset: 80px 0 0 0; background: #fff; overflow-y: auto; padding: .5rem var(--gut) 3rem; border-top: 1px solid var(--line); }
  body.nav-open .nav-item { display: block; border-bottom: 1px solid var(--line); }
  body.nav-open .nav-item > a, body.nav-open .nav-item > button { width: 100%; justify-content: space-between; padding: 1.1rem 0; font-size: 18px; border: 0; }
  body.nav-open .menu { position: static; box-shadow: none; border: 0; display: none; }
  body.nav-open .nav-item.open .menu { display: block; }
  body.nav-open .nav-item.has-menu { display: flex; flex-wrap: wrap; }
  body.nav-open .nav-item > .nav-top { width: auto; flex: 1; }
  body.nav-open .nav-item > .nav-x { width: auto; padding: 1.1rem .6rem; }
  body.nav-open .nav-item.has-menu > .menu { flex-basis: 100%; }
  body.nav-open .menu > .wrap { display: block; padding: 0 0 1rem; }
  body.nav-open .menu-intro { display: none; }
  body.nav-open .menu-links { grid-template-columns: 1fr; }
  body.nav-open .mobile-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
}

/* ---------- type ---------- */
h1, h2, h3, h4 { color: var(--brand); margin: 0; font-weight: 400; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.015em; }
h3 { font-size: 1.3rem; line-height: 1.3; font-weight: 500; letter-spacing: -.005em; }
h4 { font-size: 1.02rem; font-weight: 600; }
.eyebrow { font: 500 15px/1.3 var(--sans); color: var(--teal-ink); margin: 0 0 1rem; }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 46rem; }
.muted { color: var(--muted); }
.prose p { margin: 0 0 1.1rem; max-width: 46rem; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; font: 500 16px/1 var(--sans); text-decoration: none; padding: 0 1.5rem; height: 50px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); color: #fff; }
.btn-ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn-ghost:hover { background: var(--brand); color: #fff; }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: var(--bg-tint); color: var(--brand); }
.btn-line-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-line-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.textlink { font-weight: 500; text-decoration: none; color: var(--teal-ink); display: inline-flex; align-items: center; gap: .45rem; }
.textlink::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.textlink:hover { color: var(--brand); }
.textlink:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- sections ---------- */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section.tight { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.section.soft { background: var(--bg-soft); }
.section + .section:not(.soft):not(.night) { border-top: 1px solid var(--line); }
.sec-head { max-width: 50rem; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.sec-head h2 + p { margin-top: 1.1rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .lead { margin-left: auto; margin-right: auto; }

.night { background: var(--brand); color: var(--on-dark); }
.night h1, .night h2, .night h3, .night h4 { color: #fff; }
.night .eyebrow { color: var(--teal-lt); }
.night .lead { color: var(--on-dark); }
.night a:not(.btn) { color: var(--teal-lt); }
.night .muted { color: var(--on-dark-2); }

/* home hero: inside the header's grid, so the text lines up with the logo and the artwork ends under Contact us */
.hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--gut) clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.hero-text { padding: clamp(2rem, 5vw, 4rem) 0; display: flex; flex-direction: column; justify-content: center; }
.hero-text h1 { font-size: clamp(2.3rem, 4vw, 3.5rem); }
.hero-text .lead { margin-top: 1.6rem; }
.hero-art { position: relative; background: var(--brand-2); overflow: hidden; min-height: min(70vh, 620px); }
.hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-art figcaption { position: absolute; left: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); bottom: clamp(1.5rem, 3vw, 2.2rem); color: var(--on-dark-2); font-size: 14px; max-width: 24rem; line-height: 1.5; }
.hero-art figcaption b { display: block; color: #fff; font-weight: 500; font-size: 16px; margin-bottom: .2rem; }
.hero + .section { border-top: 1px solid var(--line); }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 0; padding-top: 0; } .hero-art { min-height: 340px; } }

/* inner-page hero */
.page-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 56rem; }
.page-hero .lead { margin-top: 1.4rem; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 2.2rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs .sep { margin: 0 .5rem; color: var(--line-2); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

/* in-page subnav */
.subnav { position: sticky; top: 80px; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; font: 400 15px var(--sans); color: var(--muted); text-decoration: none; padding: 1rem 0; border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a.on { color: var(--brand); border-bottom-color: var(--electric-teal); }

/* grids and cards */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card { border-top: 1px solid var(--line-2); padding: 1.5rem 0 0; position: relative; }
.card h3 { margin-bottom: .65rem; }
.card p { margin: 0; color: var(--ink-2); font-size: 16px; }
.card p + p { margin-top: .75rem; }
.card .tag { font: 500 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .9rem; }
a.card { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
a.card:hover { border-top-color: var(--electric-teal); }
a.card:hover h3 { color: var(--teal-ink); }
a.card .more { display: inline-flex; margin-top: 1.1rem; font-weight: 500; font-size: 15.5px; color: var(--teal-ink); }
.card.box { border: 1px solid var(--line); padding: 1.6rem 1.6rem 1.7rem; background: #fff; }
.soft .card.box { border-color: #fff; }
.card.accent { border-top: 3px solid var(--electric-teal); }
.night .card { border-top-color: var(--night-line); }
.night .card p { color: var(--on-dark); }
.night .card .tag { color: var(--teal-lt); }

/* capability list */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.values > div { border-top: 1px solid var(--line-2); padding: 1.4rem 0 1.8rem; }
.values .n { font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .6rem; }
.values h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.values p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.values a { text-decoration: none; color: inherit; display: block; }
.values a:hover h3 { color: var(--teal-ink); }
@media (max-width: 960px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .values { grid-template-columns: 1fr; } }

/* feature rows */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature + .feature { margin-top: clamp(4rem, 8vw, 6.5rem); }
.feature.flip > :first-child { order: 2; }
.feature h2 { margin-bottom: 1.2rem; }
.feature h3 { font-size: 1.65rem; font-weight: 400; margin-bottom: 1rem; color: var(--brand); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature.flip > :first-child { order: 0; } }
.means { margin-top: 1.5rem; padding: 0 0 0 1.2rem; border-left: 3px solid var(--electric-teal); font-size: 16px; color: var(--ink-2); }
.means b { color: var(--brand); font-weight: 600; }
.night .means { color: var(--on-dark); }
.night .means b { color: #fff; }

.checks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.checks li { position: relative; padding: .7rem 0 .7rem 1.8rem; border-top: 1px solid var(--line); color: var(--ink-2); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: .15rem; top: 1.2em; width: 10px; height: 6px; border-left: 2px solid var(--electric-teal); border-bottom: 2px solid var(--electric-teal); transform: rotate(-45deg); }
.checks li b { color: var(--ink); font-weight: 600; }
.night .checks li { color: var(--on-dark); border-color: var(--night-line); }
.night .checks li b { color: #fff; }

/* key figures */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.stats > div { border-top: 1px solid var(--line-2); padding-top: 1.5rem; }
.stats b { display: block; font: 400 clamp(2.4rem, 4.4vw, 3.4rem)/1 var(--sans); color: var(--brand); letter-spacing: -.03em; }
.stats span { display: block; margin-top: .8rem; font-size: 15.5px; color: var(--ink-2); max-width: 17rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
.night .stats > div { border-top-color: var(--night-line); }
.night .stats b { color: #fff; }
.night .stats span { color: var(--on-dark); }

/* principle statement */
.principle { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.18; letter-spacing: -.02em; color: var(--brand); margin: 0; max-width: 60rem; }
.principle span { color: var(--teal-ink); }
.night .principle { color: #fff; }
.night .principle span { color: var(--teal-lt); }

/* diagrams */
.diagram { background: #fff; border: 1px solid var(--line); padding: clamp(1rem, 2.4vw, 2rem); }
.soft .diagram { border-color: #fff; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { font-size: 14px; color: var(--muted); margin-top: 1rem; line-height: 1.5; }
.diagram.bare { background: none; border: 0; padding: 0; }
figure { margin: 0; }
.dg text { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.dg .mono { font-family: var(--sans); font-size: 10.5px; font-weight: 500; fill: var(--muted); letter-spacing: .08em; }
.dg .lbl { font-weight: 500; fill: var(--brand); }
.dg .sub { font-size: 11.5px; fill: var(--muted); }
.dg .box { fill: #fff; stroke: var(--line-2); stroke-width: 1; rx: 2px; }
.dg .box-soft { fill: var(--bg-soft); stroke: var(--line); stroke-width: 1; rx: 2px; }
.dg .box-core { fill: var(--brand); stroke: none; rx: 2px; }
.dg .box-core-2 { fill: var(--brand-3); stroke: none; rx: 2px; }
.dg .core-t { fill: #fff; font-weight: 500; }
.dg .core-s { fill: #BFD3E1; font-size: 11.5px; }
.dg .core-m { fill: var(--teal-lt); font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.dg .ln { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.dg .ln-t { fill: none; stroke: var(--electric-teal); stroke-width: 1.6; }
.dg .ln-o { fill: none; stroke: var(--signal-orange); stroke-width: 1.6; }
.dg .ln-d { fill: none; stroke: var(--line-2); stroke-width: 1.4; stroke-dasharray: 4 4; }
.dg .ah { fill: var(--line-2); }
.dg .ah-t { fill: var(--electric-teal); }
.dg .ah-o { fill: var(--signal-orange); }
.dg .dot-t { fill: var(--electric-teal); }
.dg .dot-o { fill: var(--signal-orange); }
.dg .pill { fill: var(--bg-tint); stroke: #BFE3DD; rx: 2px; }
.dg .pill-o { fill: #FEF1E7; stroke: #F8C9A4; rx: 2px; }
.dg .bad { fill: #A3341A; }
.dg .x { stroke: #A3341A; stroke-width: 2; }
.diagram > svg { max-width: 880px; margin: 0 auto; }
.flow-dot { opacity: .95; }
@media (prefers-reduced-motion: reduce) { .flow-dot, .art-flow { display: none; } }

/* code */
.code { background: #0F2231; border-radius: var(--radius); overflow: hidden; color: #D3E1EA; }
.code-tabs { display: flex; border-bottom: 1px solid #22394B; background: #132A3B; overflow-x: auto; }
.code-tabs button { flex: none; font: 500 13px var(--sans); color: #9DB2C1; background: none; border: 0; padding: .85rem 1.1rem; cursor: pointer; border-bottom: 2px solid transparent; }
.code-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--electric-teal); }
.code-tabs .fname { margin-left: auto; font: 400 12.5px var(--mono); color: #6C8798; padding: .85rem 1.1rem; white-space: nowrap; }
.code pre { margin: 0; padding: 1.3rem 1.4rem 1.4rem; overflow-x: auto; font-size: 13px; line-height: 1.7; tab-size: 2; }
.code .c { color: #7290A2; }
.code .k { color: #8CCBF0; }
.code .s { color: #8FE3C3; }
.code .n { color: #FFB27A; }
.code .p { color: #B9C9D4; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--line); }
.tbl th { font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-2); }
.tbl td:first-child { font-weight: 500; color: var(--brand); white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { border-bottom: 1px solid var(--line); padding: .9rem 0; }
  .tbl td { border: 0; padding: 0; }
  .tbl td:first-child { white-space: normal; margin-bottom: .35rem; }
}
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0 2.5rem; margin: 0; }
.facts dt, .facts dd { border-top: 1px solid var(--line); padding: .85rem 0; margin: 0; }
.facts dt { font: 500 13px/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 1rem; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } .facts dd { border-top: 0; padding-top: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.chip { font: 500 14px/1.4 var(--sans); color: var(--ink-2); text-decoration: none; padding: .2rem 0; border-bottom: 1px solid var(--line-2); }
a.chip:hover { color: var(--teal-ink); border-bottom-color: var(--electric-teal); }

/* tabs (industries) */
.vtabs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.vtabs [role="tablist"] { display: flex; flex-direction: column; position: sticky; top: 110px; border-left: 1px solid var(--line); }
.vtabs [role="tab"] { text-align: left; font: 400 16px var(--sans); color: var(--muted); background: none; border: 0; border-left: 3px solid transparent; margin-left: -1px; padding: .65rem 1.1rem; cursor: pointer; }
.vtabs [role="tab"]:hover { color: var(--brand); }
.vtabs [role="tab"][aria-selected="true"] { color: var(--brand); border-left-color: var(--electric-teal); font-weight: 500; }
.ind h2 { margin-bottom: 1.8rem; }
.ind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.ind-grid > div { border-top: 1px solid var(--line-2); padding: 1.3rem 0 1.6rem; }
.ind-grid h4 { font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.ind-grid p { margin: 0; font-size: 16px; color: var(--ink-2); }
.ind-grid .helps { border-top: 3px solid var(--electric-teal); }
.ind-grid .helps h4 { color: var(--teal-ink); }
.ind + .ind { margin-top: 4rem; }
.js .vtabs .ind + .ind { margin-top: 0; }
@media (max-width: 860px) {
  .vtabs { grid-template-columns: 1fr; }
  .vtabs [role="tablist"] { position: static; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .vtabs [role="tab"] { flex: none; border-left: 0; border-bottom: 3px solid transparent; margin: 0 0 -1px; }
  .vtabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--electric-teal); }
  .ind-grid { grid-template-columns: 1fr; }
}

/* steps */
.steps { counter-reset: s; display: grid; }
.steps > div { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.steps > div::before { content: counter(s); font: 400 1.6rem/1 var(--sans); color: var(--teal-ink); }
.steps h4 { margin-bottom: .3rem; font-weight: 500; color: var(--brand); }
.steps p { margin: 0; color: var(--ink-2); font-size: 16px; }

blockquote.pull { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--electric-teal); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.45; color: var(--brand); max-width: 46rem; }
.night blockquote.pull { color: #fff; }

/* CTA band */
.cta-band { background: var(--brand); color: var(--on-dark); padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem 4rem; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { margin: 1rem 0 0; max-width: 40rem; color: var(--on-dark); font-size: 1.1rem; }
.cta-band .btns { margin: 0; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* form */
.form-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .form-shell { grid-template-columns: 1fr; } }
.subscribe { background: #fff; border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2.2rem); }
.subscribe .row { display: flex; gap: 1rem; }
.subscribe .f { flex: 1; margin: 0 0 1.1rem; }
.subscribe label { display: block; font-weight: 500; font-size: 15px; margin-bottom: .4rem; }
.subscribe .req { color: var(--muted); font-weight: 400; }
.subscribe input[type=text], .subscribe input[type=email], .subscribe select { width: 100%; font: 16px var(--sans); padding: .75rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); }
.subscribe input:focus, .subscribe select:focus { outline: 2px solid var(--electric-teal); outline-offset: 0; border-color: var(--electric-teal); }
.f-set { border: 0; padding: 0; margin: .3rem 0 1.4rem; }
.f-set legend { font-weight: 500; font-size: 15px; margin-bottom: .5rem; padding: 0; }
.hint { margin: -.2rem 0 .7rem; font-size: 14px; color: var(--muted); }
.checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; }
.check { display: flex !important; align-items: center; gap: .55rem; font-weight: 400 !important; font-size: 15px !important; margin: 0 !important; padding: .55rem .7rem; border: 1px solid var(--line); cursor: pointer; }
.check:hover { border-color: var(--line-2); }
.check input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.trap { position: absolute; left: -9999px; }
.actions { margin: .5rem 0 1rem; }
.subscribe button.cta { font: 500 16px/1 var(--sans); background: var(--brand); color: #fff; border: 0; border-radius: var(--radius); padding: 0 1.6rem; height: 50px; cursor: pointer; }
.subscribe button.cta:hover { background: var(--brand-2); }
.subscribe button.cta:disabled { opacity: .6; cursor: default; }
.fineprint { font-size: 14px; color: var(--muted); margin: 0; }
@media (max-width: 560px) { .subscribe .row { flex-direction: column; gap: 0; } .checkgrid { grid-template-columns: 1fr; } }

/* resource library */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; align-items: center; }
.filters button { font: 400 15px var(--sans); padding: .5rem .95rem; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; }
.filters button[aria-pressed="true"], .filter.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.filters-label { font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: .4rem; }
.filter-set { display: flex; flex-wrap: wrap; gap: .5rem; }
.empty { border-top: 3px solid var(--electric-teal); padding: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.res-grid:empty { display: none; }
@media (max-width: 960px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .res-grid { grid-template-columns: 1fr; } }
.res-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: 14px; color: var(--muted); margin: 0 0 .9rem !important; }
.pill { font: 500 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); }
.pill-ext { color: #9A4A0E; }
.res-action { margin-top: 1rem !important; font-weight: 500; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-error { color: #A3341A !important; }

.legal { max-width: 46rem; }
.legal h2 { font-size: 1.5rem; margin: 2.6rem 0 .9rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin: .5rem 0; }
.legal .byline { color: var(--muted); font-size: 14px; }

/* footer */
.site-ft { background: var(--brand-2); color: var(--on-dark-2); padding: clamp(3.5rem, 6vw, 5rem) 0 2.5rem; font-size: 15px; }
.ft-top { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.ft-top img { width: 112px; height: auto; display: block; margin-bottom: 1.2rem; }
.ft-top p { margin: 0; max-width: 20rem; line-height: 1.55; color: var(--on-dark); }
.ft-top h4 { color: #fff; font: 500 15px var(--sans); margin: .3rem 0 1rem; }
.ft-top ul { list-style: none; margin: 0; padding: 0; }
.ft-top li { margin: .55rem 0; }
.site-ft a { color: var(--on-dark); text-decoration: none; }
.site-ft a:hover { color: #fff; text-decoration: underline; }
.ft-bot { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: 14px; }
.ft-bot .sep { margin: 0 .7rem; opacity: .4; }
@media (max-width: 900px) { .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-top > :first-child { grid-column: 1 / -1; } }

/* misc */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.note { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.2rem; max-width: 46rem; }
.logo-row { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.logo-row span { font: 500 15px var(--sans); color: var(--brand); padding: .3rem 0; border-bottom: 1px solid var(--line-2); }

/* platform family */
.family { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.family .core { background: var(--brand); color: var(--on-dark); padding: clamp(1.6rem, 3vw, 2.4rem); }
.family .core h3 { color: #fff; font-size: 1.7rem; font-weight: 400; margin-bottom: .9rem; }
.family .core p { margin: 0 0 1rem; }
.family .core .tag { color: var(--teal-lt); font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 1rem; }
.family .parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.family .parts > div { border-top: 1px solid var(--line-2); padding: 1.2rem 0 1.5rem; }
.family .parts h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.family .parts p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 860px) { .family { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .family .parts { grid-template-columns: 1fr; } }

/* ---------- film ---------- */
.film { max-width: 1120px; margin: 0 auto; }
.film-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.film-stage svg { display: block; width: 100%; height: 100%; }
.film-stage:fullscreen { border: 0; }
.film-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(15,42,64,.78); border: 0; color: #fff; font: 400 clamp(1.2rem, 2.6vw, 1.9rem) var(--sans); cursor: pointer; width: 100%; }
.film-poster .pp { width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px); border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .15s; }
.film-poster:hover .pp { transform: scale(1.05); }
.film-poster .pp::before { content: ""; border-left: 24px solid var(--brand); border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 7px; }
.film-poster small { font: 400 15px var(--sans); color: var(--on-dark); }
.film.started .film-poster { display: none; }
.film-cc { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); max-width: 82%; text-align: center; background: rgba(15,34,49,.86); color: #fff; font: 400 clamp(12px, 1.7vw, 19px)/1.4 var(--sans); padding: .35em .75em; pointer-events: none; }
.film-bar { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; color: var(--muted); font: 400 14px var(--sans); }
.film-bar button { font: 500 14px var(--sans); color: var(--brand); background: #fff; border: 1px solid var(--line-2); padding: .45rem .75rem; cursor: pointer; }
.film-bar button:hover { border-color: var(--brand); }
.film-bar button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.film-play { width: 2.5rem; display: grid; place-items: center; }
.film-play::before { content: ""; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
.film.playing .film-play::before { border: 0; width: 10px; height: 13px; margin: 0; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }
.film-track { position: relative; flex: 1; height: 4px; background: var(--line); cursor: pointer; }
.film-track:focus-visible { outline: 2px solid var(--electric-teal); outline-offset: 4px; }
.film-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--electric-teal); }
.film-tick { position: absolute; top: -3px; width: 1px; height: 10px; background: var(--line-2); }
.film-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .film-time, .film-fs { display: none; } .film-bar { gap: .5rem; } }
.film-transcript { max-width: 1120px; margin: 1.4rem auto 0; color: var(--ink-2); font-size: 16px; }
.film-transcript summary { cursor: pointer; color: var(--teal-ink); font-weight: 500; }
.film-transcript p { margin: .8rem 0 0; max-width: 62rem; }
/* film artwork (SVG, 1280 × 720) */
.fm-bg { fill: #FFFFFF; }
.fm-k { font: 500 15px var(--sans); letter-spacing: .1em; fill: #007F74; }
.fm-h { font: 400 46px var(--sans); letter-spacing: -.02em; fill: #173A57; }
.fm-s { font: 400 26px var(--sans); fill: #3D454C; }
.fm-lbl { font: 500 19px var(--sans); fill: #173A57; }
.fm-sub { font: 400 16px var(--sans); fill: #5C646C; }
.fm-mono { font: 500 13.5px var(--sans); letter-spacing: .08em; fill: #5C646C; }
.fm-code { font: 400 16px var(--mono); fill: #9FB5C4; white-space: pre; }
.fm-code.fm-dkc { fill: #3D454C; }
.fm-wh { fill: #E6EEF3; }
.fm-teal { fill: #007F74; }
.fm-tl { fill: #5FD6CB; }
.fm-or { fill: #C85A0E; }
.fm-red { fill: #B4441F; }
.fm-dk { fill: #FFFFFF; }
.fm-box { fill: #FFFFFF; stroke: #C5CDD4; stroke-width: 1.2; }
.fm-box2 { fill: #F3F5F7; stroke: #DDE2E7; stroke-width: 1.2; }
.fm-panel { fill: #F3F5F7; stroke: #DDE2E7; }
.fm-term { fill: #0F2231; stroke: #0F2231; }
.fm-core { fill: #173A57; }
.fm-core-t { font: 400 64px var(--sans); fill: #FFFFFF; letter-spacing: -.02em; }
.fm-core-t2 { font: 500 30px var(--sans); fill: #FFFFFF; }
.fm-core-s { font: 400 19px var(--sans); fill: #BFD3E1; }
.fm-pill { fill: #EAF4F2; stroke: #BFE3DD; }
.fm-corepill { fill: #173A57; }
.fm-chip { font: 500 17px var(--sans); fill: #FFFFFF; }
.fm-chip2 { font: 500 20px var(--sans); fill: #FFFFFF; }
.fm-ln { fill: none; stroke: #A9B6C1; stroke-width: 2; }
.fm-dot { fill: #00AFA0; }
.fm-orf { fill: #F47A20; }
.fm-ring { fill: none; stroke: #00AFA0; stroke-width: 2; opacity: 0; }
.fm-screen { fill: #00AFA0; }
.fm-big { font: 400 40px var(--sans); fill: #173A57; letter-spacing: -.02em; }
.fm-big.fm-dk { fill: #FFFFFF; }
.fm-cell { font: 500 21px var(--mono); fill: #173A57; }
.fm-cellb { font: 500 26px var(--sans); fill: #007F74; }
.fm-cellw { font: 500 16px var(--sans); fill: #007F74; }
.fm-trend { fill: none; stroke: #00AFA0; stroke-width: 2.5; stroke-linejoin: round; }
.fm-word { font: 400 44px var(--sans); fill: #173A57; letter-spacing: .02em; }
.fm-wall { fill: #F47A20; }
.fm-strike { stroke: #F47A20; stroke-width: 3; }
.fm-deny { fill: #FCEDE6; stroke: #D9704A; }
.fm-okb { fill: #EAF4F2; stroke: #00AFA0; }
.fm-redb { font: 500 16px var(--sans); fill: #B4441F; }
.fm-tealb { font: 500 16px var(--sans); fill: #007F74; }
.fm-divide { stroke: #F47A20; stroke-width: 2; stroke-dasharray: 7 7; }
.fm-count { font: 400 64px var(--sans); fill: #173A57; letter-spacing: -.03em; }
.fm-stamp { fill: none; stroke: #F47A20; stroke-width: 2; }
.fm-quote { font: 400 44px var(--sans); fill: #173A57; letter-spacing: -.02em; }
.fm-tag { font: 400 30px var(--sans); fill: #3D454C; }
.fm-url { font-size: 18px; letter-spacing: .16em; }
.fm-rule { fill: #00AFA0; }
.fm-pbar { fill: #DDE2E7; }
.fm-pbar.done { fill: #A9B6C1; }
.fm-pbar.on { fill: #00AFA0; }
.fm-word.fm-teal { fill: #007F74; }

/* ---------- client login ---------- */
.site-hd.slim > .wrap { max-width: none; height: 72px; align-items: center; }
.portal-name { font: 400 16px var(--sans); color: var(--muted); padding-left: 1.2rem; border-left: 1px solid var(--line); }
.portal-ver { font: 500 13px var(--mono, var(--sans)); color: var(--muted); padding: .1rem .5rem; margin-left: .8rem; border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; }
.hd-back { margin-left: auto; font: 500 15px var(--sans); color: var(--brand); text-decoration: none; }
.hd-back::before { content: "\2190\00a0"; }
.hd-back:hover { color: var(--teal-ink); }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: calc(100vh - 72px - 57px); }
.login-art { position: relative; background: var(--brand-2); overflow: hidden; }
.login-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-art-text { position: absolute; left: clamp(2rem, 5vw, 4rem); right: clamp(2rem, 5vw, 4rem); bottom: clamp(2rem, 5vw, 4rem); }
.login-art-text .eyebrow { color: var(--teal-lt); }
.login-art-h { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; color: #fff; margin: 0; max-width: 28rem; letter-spacing: -.015em; }
.login-main { display: flex; align-items: center; justify-content: center; padding: clamp(2.5rem, 6vw, 5rem) var(--gut); }
.login-box { width: 100%; max-width: 25rem; }
.login-box h1 { font-size: 2.2rem; margin-bottom: .6rem; }
.login-box > div > .muted { margin: 0 0 1.8rem; font-size: 15.5px; }
.login-form .f { margin: 0 0 1.1rem; }
.login-form label { display: block; font-weight: 500; font-size: 15px; margin-bottom: .4rem; }
.login-form input[type=email], .login-form input[type=password] { width: 100%; font: 16px var(--sans); padding: .8rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); background: #fff; }
.login-form input:focus { outline: 2px solid var(--electric-teal); outline-offset: 0; border-color: var(--electric-teal); }
.login-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .2rem 0 1.4rem; font-size: 15px; }
.remember { display: inline-flex !important; align-items: center; gap: .5rem; font-weight: 400 !important; margin: 0 !important; }
.remember input { accent-color: var(--brand); width: 16px; height: 16px; }
.linkbtn { background: none; border: 0; padding: 0; font: 500 15px var(--sans); color: var(--teal-ink); cursor: pointer; }
.linkbtn:hover { color: var(--brand); text-decoration: underline; }
.login-submit { width: 100%; justify-content: center; }
.login-status { margin: .9rem 0 0; font-size: 14.5px; min-height: 1.2em; }
.login-status.is-ok { color: var(--teal-ink); }
.login-or { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0; color: var(--muted); font-size: 14px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-help { margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.slim-ft { border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.slim-ft .wrap { max-width: none; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.slim-ft a { color: var(--muted); text-decoration: none; }
.slim-ft a:hover { color: var(--brand); text-decoration: underline; }
.slim-ft .sep { margin: 0 .6rem; opacity: .5; }
@media (max-width: 860px) { .login-shell { grid-template-columns: 1fr; } .login-art { min-height: 120px; } .login-art-text { display: none; } .portal-name { display: none; } }

/* API reference (api.html): operations fold open one at a time; examples use the dark code style. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card h3 code { font-size: .82em; color: var(--brand); word-break: break-word; }
.ref-aside { margin-top: 2rem; max-width: 48rem; color: var(--muted); }
.ref-facts { max-width: 64rem; }
.ref-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-bottom: 2rem; }
.ref-find input { width: min(24rem, 100%); font: 400 16px var(--sans); padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.ref-find input:focus { outline: 2px solid var(--teal-ink); outline-offset: 1px; border-color: var(--brand); }
.ref-find { flex: 1 1 16rem; max-width: 24rem; }
.ref-jump { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 2.2rem; }
.ref-jump a { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.ref-jump a:hover { color: var(--brand); text-decoration: underline; }
.ref-none { color: var(--muted); }
.ref-group { margin-top: 3rem; scroll-margin-top: 140px; }
.ref-group:first-of-type { margin-top: 0; }
.ref-gh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.5rem; align-items: baseline; padding-bottom: .9rem; border-bottom: 1px solid var(--brand); }
.ref-gh h3 { margin: 0; font-size: 1.5rem; font-weight: 400; color: var(--brand); }
.ref-gh p { grid-column: 1; margin: 0; color: var(--muted); }
.ref-count { grid-row: 1; grid-column: 2; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ref-op { border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.ref-op > summary { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr); gap: .3rem 1.5rem; align-items: baseline; padding: .95rem 2rem .95rem 0; cursor: pointer; list-style: none; position: relative; }
.ref-op > summary::-webkit-details-marker { display: none; }
.ref-op > summary::after { content: ""; position: absolute; right: .4rem; top: 1.35rem; width: .5rem; height: .5rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.ref-op[open] > summary::after { transform: rotate(-135deg); top: 1.55rem; }
.ref-op > summary:hover code { color: var(--teal-ink); }
.ref-op > summary:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.ref-op > summary code { font: 500 14.5px var(--mono); color: var(--brand); word-break: break-word; }
.ref-sum { color: var(--ink); font-size: 15.5px; min-width: 0; }
.ref-badge { display: inline-block; margin-left: .6rem; font: 500 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: .3rem .45rem; vertical-align: 1px; }
.ref-badge.is-push { color: var(--teal-ink); border-color: currentColor; }
.ref-body { padding: 0 0 1.6rem; display: grid; gap: .9rem; }
.ref-body > p { margin: 0; max-width: 52rem; }
.ref-body p code { font-size: .9em; }
.ref-note { color: var(--muted); }
.ref-rpc { font-size: 14px; color: var(--muted); }
.ref-exs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; margin-top: .3rem; }
.ref-ex { background: #0F2231; border-radius: var(--radius); min-width: 0; color: #D3E1EA; }
.ref-ex-h { margin: 0; padding: .7rem 1.1rem; font: 500 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #9DB2C1; border-bottom: 1px solid #22394B; }
.ref-ex pre { margin: 0; padding: 1rem 1.1rem 1.2rem; overflow-x: auto; font-size: 13px; line-height: 1.65; max-height: 32rem; }
.ref-ex .k { color: #8CCBF0; } .ref-ex .s { color: #8FE3C3; } .ref-ex .n { color: #FFB27A; } .ref-ex .p { color: #B9C9D4; }
@media (max-width: 760px) { .ref-op > summary { grid-template-columns: minmax(0, 1fr); } .ref-gh { grid-template-columns: minmax(0, 1fr); } .ref-count { grid-row: auto; grid-column: 1; } }
.ref-m { display: inline-block; min-width: 2.9rem; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--teal-ink); }
.soft .ref-find input { background: #fff; }
.dg .pill-d { fill: #fff; stroke: var(--line-2); stroke-dasharray: 3 3; rx: 2px; }
.dg .chip { font-size: 12.5px; font-weight: 500; fill: var(--brand); }
.dg .chip-x { font-size: 12.5px; font-weight: 500; fill: var(--teal-ink); }
/* Phones: diagrams keep a readable size and scroll sideways inside their frame instead of shrinking to fit. */
@media (max-width: 640px) { .diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; } .diagram > svg { min-width: 560px; } }
.fm-box-d { fill: #FFFFFF; stroke: #A9B6C1; stroke-width: 1.2; stroke-dasharray: 5 4; }
.fm-gw { font: 500 17px var(--sans); fill: #173A57; }

/* A menu's label is a link to its section page; the chevron beside it opens the menu. */
.nav-item > .nav-top { padding-right: .2rem; }
.nav-item > .nav-x { padding: 0 .9rem 0 .35rem; }
.nav-item.open > .nav-top, .nav-item.open > .nav-x { color: var(--brand); border-bottom-color: var(--line-2); }
.nav-item.current > .nav-top, .nav-item.current > .nav-x { color: var(--brand); border-bottom-color: var(--electric-teal); }
.commit-note { margin: 2.5rem 0 0; max-width: 46rem; font-size: 1.1rem; color: var(--on-dark); }
.fm-wm { fill: #FFFFFF; }
.fm-wm.fm-wm-teal { fill: #00AFA0; }

/* ---------- client portal (mock-up) ---------- */
.pt { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: calc(100vh - 72px - 57px); background: var(--bg-soft); }
.pt-side { background: var(--brand-2); color: var(--on-dark); display: flex; flex-direction: column; gap: 1.6rem; padding: 1.6rem 0; }
.pt-k { display: block; font: 500 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.pt-org, .pt-user { padding: 0 1.4rem; display: flex; flex-direction: column; gap: .25rem; font-size: 15px; }
.pt-org strong { color: #fff; font-weight: 600; font-size: 17px; }
.pt-demo { align-self: flex-start; margin-top: .35rem; font: 500 12px/1 var(--sans); letter-spacing: .04em; color: var(--graphite); background: var(--signal-orange); padding: .3rem .5rem; border-radius: var(--radius); }
.pt-nav { display: flex; flex-direction: column; }
.pt-nav a { color: var(--on-dark); text-decoration: none; font: 500 15.5px/1.2 var(--sans); padding: .75rem 1.4rem; border-left: 3px solid transparent; }
.pt-nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.pt-nav a.is-on { color: #fff; border-left-color: var(--electric-teal); background: rgba(255,255,255,.07); }
.pt-user { margin-top: auto; font-size: 14px; }
.pt-user-x { display: flex; gap: 1rem; margin-top: .3rem; }
.pt-user-x a, .pt-user .linkbtn { color: var(--teal-lt); font: 500 14px var(--sans); }
.pt-main { padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; min-width: 0; outline: none; display: flex; flex-direction: column; gap: 1.25rem; }
.pt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.pt-head h1 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin: 0 0 .3rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; text-wrap: balance; }
.pt-head p { margin: 0; max-width: 48rem; }
.pt-crumbs { margin: 0 0 -.6rem; font-size: 14px; color: var(--muted); position: relative; z-index: 1; }
.pt-crumbs a { color: var(--muted); }
.pt-card { background: #fff; border: 1px solid var(--line); padding: 1.3rem 1.4rem; min-width: 0; }
.pt-card h2 { font-size: 15px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pt-card h3 { font-size: 17px; margin: 0 0 .4rem; color: var(--brand); }
.pt-h2 { font-size: 1.35rem; margin: .8rem 0 0; }
.pt-h3 { font-size: 16px !important; margin: 1.2rem 0 .5rem !important; display: flex; align-items: center; gap: .6rem; }
.pt-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pt-span2 { grid-column: span 2; }
.pt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pt-kpi { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--electric-teal); padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.pt-kpi-v { font: 600 2rem/1.1 var(--sans); color: var(--brand); font-variant-numeric: tabular-nums; }
.pt-kpi-v small { font-size: 15px; font-weight: 400; color: var(--muted); }
.pt-kpi-s { font-size: 14px; color: var(--muted); }
.pt-big { font: 600 2rem/1 var(--mono); color: var(--brand); margin: 0 0 .5rem; }
.pt-small { font-size: 14.5px; }
.pt-more { margin: 1rem 0 0; font-size: 15px; }
.pt-tw { overflow-x: auto; }
.pt-t { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pt-t th { text-align: left; font: 500 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .5rem .75rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.pt-t td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pt-t tr[data-href] { cursor: pointer; }
.pt-t tbody tr:hover td { background: var(--bg-tint); }
.pt-t td a { text-decoration: none; color: var(--brand); }
.pt-t .r { text-align: right; }
.pt-t code, .pt-dl code { font-size: 13.5px; color: var(--ink-2); }
.pt-sub { display: block; font-size: 13.5px; color: var(--muted); }
.pt-upd { font-size: 12.5px; color: var(--teal-ink); font-weight: 500; }
.pt-chip { display: inline-flex; align-items: center; gap: .4rem; font: 500 13px/1 var(--sans); padding: .32rem .55rem; border-radius: 999px; white-space: nowrap; background: var(--bg-soft); color: var(--ink-2); }
.pt-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pt-chip.is-ok { background: #E3F4F1; color: #00695F; }
.pt-chip.is-late, .pt-chip.is-warn { background: #FDEEDF; color: #9A4A0C; }
.pt-chip.is-down { background: #FBE5E3; color: #A3271C; }
.pt-chip.is-info, .pt-chip.is-isolated { background: #E6EEF5; color: var(--deep-ocean); }
.pt-chip.is-muted, .pt-chip.is-retired { background: var(--bg-soft); color: var(--muted); }
.pt-head h1 .pt-chip { font-size: 14px; }
.pt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; background: #1F9D55; }
.pt-dot.is-down { background: #C0392B; }
.pt-bar { display: block; height: 6px; background: var(--line); margin-top: .35rem; min-width: 4rem; }
.pt-bar i { display: block; height: 100%; background: var(--electric-teal); }
.pt-bar.is-warn i { background: var(--signal-orange); }
.pt-bar.is-open i { background: repeating-linear-gradient(90deg, var(--electric-teal) 0 6px, transparent 6px 10px); opacity: .5; }
.pt-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .55rem 1rem; margin: 0; font-size: 15px; }
.pt-dl dt { color: var(--muted); }
.pt-dl dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pt-dl-stack { grid-template-columns: 1fr; gap: .2rem; }
.pt-dl-stack dt { color: var(--brand); font-weight: 600; margin-top: .6rem; }
.pt-dl-stack dt:first-child { margin-top: 0; }
.pt-dl-stack dd { text-align: left; color: var(--ink-2); }
.pt-id { font-size: 12.5px !important; }
.pt-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pt-alerts li { border-left: 3px solid var(--line-2); padding: .35rem 0 .35rem .8rem; font-size: 14.5px; display: flex; flex-direction: column; gap: .15rem; }
.pt-alerts li a { color: var(--brand); text-decoration: none; }
.pt-alerts li span { color: var(--muted); }
.pt-alerts li.is-down { border-left-color: #C0392B; }
.pt-alerts li.is-warn { border-left-color: var(--signal-orange); }
.pt-alerts li.is-info { border-left-color: var(--deep-ocean); }
.pt-alerts-row { flex-direction: row; flex-wrap: wrap; }
.pt-alerts-row li { background: #fff; border: 1px solid var(--line); border-left-width: 3px; padding: .7rem .9rem; flex: 1 1 16rem; }
.pt-alerts-row li.is-down { border-left-color: #C0392B; } .pt-alerts-row li.is-warn { border-left-color: var(--signal-orange); } .pt-alerts-row li.is-info { border-left-color: var(--deep-ocean); }
.pt-note { margin: 0; font-size: 14.5px; color: var(--ink-2); background: #fff; border: 1px dashed var(--line-2); padding: .6rem .85rem; }
.pt-note.is-q { background: #FFF6EC; border: 1px solid #F6C9A1; }
.pt-acts { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.pt-acts .btn, .pt-head .btn, .pt-card .btn { height: 42px; padding: 0 1.1rem; font-size: 15px; }
.pt-danger { border-color: #A3271C; color: #A3271C; }
.pt-danger:hover { background: #A3271C; color: #fff; }
.pt-danger-fill { background: #A3271C; }
.pt-danger-fill:hover { background: #7E1D15; }
.pt-confirm { background: #fff; border: 1px solid #E8B4AE; padding: 1rem 1.2rem; }
.pt-confirm p { margin: 0 0 .8rem; }
.pt-tools { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.pt-find { flex: 1 1 18rem; }
.pt-find input, .pt input:not([type=radio]):not([type=checkbox]):not([type=file]), .pt textarea, .pt select { width: 100%; font: 16px var(--sans); padding: .65rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); }
.pt textarea { font: 14px/1.5 var(--mono); resize: vertical; }
.pt input:focus, .pt textarea:focus, .pt select:focus { outline: 2px solid var(--electric-teal); outline-offset: 0; border-color: var(--electric-teal); }
.pt-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); background: #fff; }
.pt-seg button { font: 500 14.5px var(--sans); padding: .6rem .95rem; border: 0; border-right: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer; }
.pt-seg button:last-child { border-right: 0; }
.pt-seg button[aria-pressed=true] { background: var(--brand); color: #fff; }
.pt-seg-lg button { padding: .75rem 1.2rem; font-size: 15.5px; }
.pt-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; counter-reset: none; }
.pt-steps li { display: flex; align-items: center; gap: .55rem; font: 500 15px var(--sans); color: var(--muted); padding: .5rem 1rem .5rem .5rem; background: #fff; border: 1px solid var(--line); }
.pt-steps li span { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-soft); font-size: 13px; }
.pt-steps li.is-on { color: var(--brand); border-color: var(--brand); }
.pt-steps li.is-on span { background: var(--brand); color: #fff; }
.pt-steps li.is-done span { background: var(--electric-teal); color: #fff; }
.pt-form form { max-width: 52rem; }
.pt .f { margin: 0 0 1.2rem; border: 0; padding: 0; }
.pt .f label, .pt .f legend { display: block; font-weight: 500; font-size: 15px; margin-bottom: .4rem; padding: 0; }
.pt-hint { display: block; font-size: 13.5px; color: var(--muted); margin-top: .3rem; }
.pt-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.pt-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt .f .pt-opt { position: relative; display: flex; flex-direction: column; gap: .25rem; border: 1px solid var(--line-2); padding: .85rem .9rem .85rem 2.3rem; cursor: pointer; font-weight: 400; margin: 0; }
.pt-opt input { position: absolute; left: .85rem; top: 1.05rem; margin: 0; accent-color: var(--brand); }
.pt-opt strong { color: var(--brand); font-size: 15.5px; }
.pt-opt span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.pt-opt:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--bg-tint); }
.pt-cap { font-size: 14.5px; color: var(--muted); }
.pt-status { font-size: 14.5px; min-height: 1.2em; margin: 0 0 .8rem; }
.pt-status.is-error { color: #A3271C; }
.pt-status.is-ok { color: var(--teal-ink); }
.pt-code { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pt-code code { font: 500 clamp(1.3rem, 3vw, 1.9rem)/1 var(--mono); letter-spacing: .06em; color: var(--brand); background: var(--bg-tint); border: 1px solid #BFE3DE; padding: .7rem 1rem; }
.pt-pre { background: var(--brand-2); color: #E6EEF5; font: 13.5px/1.6 var(--mono); padding: 1rem 1.1rem; overflow-x: auto; margin: 0 0 .8rem; white-space: pre; }
.pt-ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; font-size: 15.5px; max-width: 52rem; }
.pt-wait p, .pt-done p { max-width: 46rem; }
.pt-pulse { display: flex; align-items: center; gap: .8rem; }
.pt-pulse span { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--electric-teal); animation: ptpulse 1.4s ease-out infinite; }
@keyframes ptpulse { 0% { box-shadow: 0 0 0 0 rgba(0,175,160,.55); } 100% { box-shadow: 0 0 0 14px rgba(0,175,160,0); } }
@media (prefers-reduced-motion: reduce) { .pt-pulse span { animation: none; } }
.pt-done { border-top: 3px solid var(--electric-teal); }
.pt-file { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; }
.pt-spark { width: 100%; height: auto; display: block; min-width: 26rem; }
.pt-area { fill: var(--bg-tint); }
.pt-line { fill: none; stroke: var(--teal-ink); stroke-width: 2; }
.pt-lim { stroke: var(--signal-orange); stroke-dasharray: 5 4; }
.pt-lbl { font: 12px var(--sans); fill: var(--muted); }
.pt-strip { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 2px; height: 28px; }
.pt-strip i { background: var(--electric-teal); opacity: .8; }
.pt-strip i.miss { background: #E8B4AE; opacity: 1; }
.pt-strip-k { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: .4rem 0 0; }
.pt-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.pt-plan { background: #fff; border: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.pt-plan.is-hi { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--electric-teal); }
.pt-plan h2 { font-size: 1.3rem; margin: 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pt-price { font: 600 1.6rem/1.2 var(--mono); color: var(--muted); margin: 0; }
.pt-price span { display: block; font: 400 14px var(--sans); color: var(--muted); }
.pt-plan ul { margin: 0; padding-left: 1.1rem; font-size: 15px; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pt-plan .btn { height: 44px; justify-content: center; }
.pt-buy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pt-buy p { margin: 0 0 .4rem; font-size: 15px; }
.pt-row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; max-width: 40rem; }
.pt-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--graphite); color: #fff; padding: .8rem 1.2rem; font-size: 15px; z-index: 80; max-width: min(36rem, calc(100vw - 2rem)); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
@media (max-width: 1180px) { .pt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pt { grid-template-columns: minmax(0, 1fr); }
  .pt-side { padding: .9rem 0 0; gap: .7rem; }
  .pt-org { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 0 var(--gut); }
  .pt-org .pt-k { display: none; }
  .pt-demo { margin: 0; }
  .pt-nav { flex-direction: row; overflow-x: auto; }
  .pt-nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: .7rem .9rem; }
  .pt-nav a.is-on { border-bottom-color: var(--electric-teal); }
  .pt-user { display: none; }
  .pt-cols, .pt-buy { grid-template-columns: minmax(0, 1fr); }
  .pt-span2 { grid-column: auto; }
}
@media (max-width: 560px) { .pt-kpis, .pt-opts, .pt-opts-2, .pt-row2 { grid-template-columns: minmax(0, 1fr); } .pt-kpi-v { font-size: 1.6rem; } }
.pt-full { grid-column: 1 / -1; }
.pt-nm strong { white-space: nowrap; }
.pt-of { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pt .pt-dl code, .pt .pt-t code { background: none; border: 0; padding: 0; }
.pt-t td:has(.pt-chip) { white-space: nowrap; }
.pt-seg { align-self: flex-start; }
.pt input[readonly] { background: var(--bg-soft); }
.pt-t td:first-child code, .pt-t td:nth-child(2):not(.pt-nm) { white-space: nowrap; }
/* portal: organizations and sharing */
.pt-org select { width: 100%; font: 500 15px var(--sans); color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--night-line); border-radius: var(--radius); padding: .55rem .6rem; margin-top: .2rem; }
.pt-org select:focus { outline: 2px solid var(--electric-teal); }
.pt-org option { color: var(--ink); background: #fff; }
.pt-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; margin-left: .4rem; border-radius: 10px; background: var(--signal-orange); color: var(--graphite); font: 600 12px var(--sans); }
body.pt-staff .pt-side { background: #1A1F23; }
body.pt-staff .pt-nav a.is-on { border-left-color: var(--signal-orange); }
.pt-count { margin: 0 0 .6rem; font-size: 14px; color: var(--muted); }
.pt-inbox { border-left: 3px solid var(--signal-orange); }
.pt-inrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 0; border-top: 1px solid var(--line); }
.pt-inrow:first-of-type { border-top: 0; padding-top: 0; }
.pt-inrow > div:first-child { min-width: 0; flex: 1 1 22rem; }
.pt-partner { padding: .8rem 0; border-top: 1px solid var(--line); }
.pt-partner:first-of-type { border-top: 0; padding-top: 0; }
.pt-partner-h { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.pt-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.pt-tagc { display: inline-flex; align-items: center; gap: .3rem; font-size: 14px; background: var(--bg-tint); border: 1px solid #BFE3DE; padding: .2rem .3rem .2rem .6rem; }
.pt-x { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 .2rem; }
.pt-x:hover { color: #A3271C; }
.pt-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem 1rem; }
.pt .f .pt-checks label { display: flex; gap: .45rem; align-items: center; font-weight: 400; font-size: 15px; margin: 0; }
.pt-checks input { accent-color: var(--brand); }
.pt-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pt-f-end { display: flex; align-items: flex-end; }
.pt-offer td { background: var(--bg-soft); }
.pt-log { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.pt-log li { padding: .5rem 0; border-top: 1px solid var(--line); display: flex; gap: .8rem; }
.pt-log li:first-child { border-top: 0; }
.pt-log li span { flex: none; width: 6.5rem; color: var(--muted); }
.pt-dl-who { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pt-dl-who dd { text-align: left; color: var(--ink-2); }
@media (max-width: 860px) { .pt-org select { color: #fff; } .pt-row3 { grid-template-columns: minmax(0, 1fr); } .pt-log li { flex-direction: column; gap: 0; } }
.pt-orgtype { font-size: 13.5px; color: var(--teal-lt); margin-top: .2rem; }
.pt-spark { min-width: 34rem; }
/* portal: grants, manufacturer access, phone licensing (revision j) */
.pt-inl { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-top: .55rem; font-size: 15px; }
.pt-inl label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; margin: 0; }
.pt-inl select { width: auto; font: 400 15px var(--sans); padding: .35rem .5rem; border: 1px solid var(--line-2); background: #fff; color: var(--ink); max-width: 100%; }
.pt .f label.pt-ck, label.pt-ck { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; font-size: 15px; }
.pt-ck input { accent-color: var(--brand); }
.pt-oemacc { border: 1px solid var(--line); background: var(--bg-soft); padding: .6rem .9rem .7rem; margin: .7rem 0 0; min-width: 0; }
.pt-oemacc legend { font: 500 14px var(--sans); color: var(--brand); padding: 0 .3rem; }
.pt-oemacc .pt-inl { margin-top: .1rem; }
.pt-oemacc .pt-hint { display: block; margin-top: .35rem; }
.pt-upd-who { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); font-size: 15px; }
.pt-partner-h .pt-chip { margin-right: .2rem; }
.pt-phone { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.pt-phone > .f { margin: 0; max-width: 26rem; }
.pt-phone-g { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1.5rem; align-items: start; }
.pt-phsteps { list-style: none; padding: 0; counter-reset: ph; gap: .7rem; }
.pt-phsteps li { counter-increment: ph; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .6rem; color: var(--muted); }
.pt-phsteps li::before { content: counter(ph); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); font: 500 13px var(--sans); }
.pt-phsteps li strong { color: var(--ink-2); font-weight: 500; }
.pt-phsteps li.is-on { color: var(--ink-2); }
.pt-phsteps li.is-on strong { color: var(--brand); }
.pt-phsteps li.is-on::before { background: var(--brand); color: #fff; }
.pt-phsteps li.is-done::before { content: "✓"; background: var(--electric-teal); color: #fff; }
.pt-qr { margin: 0; border: 1px solid var(--line); background: #fff; padding: .8rem; text-align: center; }
.pt-qr svg { display: block; width: 100%; max-width: 11rem; margin: 0 auto; }
.pt-qr-bg { fill: #fff; }
.pt-qr-fg { fill: var(--brand-2); }
.pt-qr figcaption { font: 500 14px var(--sans); color: var(--brand); margin-top: .5rem; }
.pt-qr figcaption span { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
@media (max-width: 700px) { .pt-phone-g { grid-template-columns: minmax(0, 1fr); } .pt-qr { max-width: 14rem; } }
@media (min-width: 700px) { .pt-inl label { white-space: nowrap; } }
/* portal: compute allocation, online/offline switch (revision k) */
.pt-cef input[type=number] { width: 6.5rem; font: 400 15px var(--sans); padding: .35rem .5rem; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.pt-card .pt-cef { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.pt-cef .pt-status { margin: 0; font-size: 14px; }
.pt-switch { border-left: 3px solid var(--brand); }
.pt-switch .pt-acts { margin-top: 1rem; }
.pt-t .pt-chip { white-space: normal; }
.pt-t td .btn { white-space: nowrap; }
.pt-nm .linkbtn { display: block; margin-top: .3rem; font-size: 14px; }
.pt-mac { white-space: nowrap; font-size: 12.5px; }
.pt-gm input:not([type]) { width: 100%; min-width: 9rem; font: 400 14px var(--mono, ui-monospace, monospace); padding: .35rem .5rem; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.pt-opt select, .pt-opt input[name=phost] { position: static; margin-top: .6rem; width: 100%; font: 400 15px var(--sans); padding: .35rem .5rem; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.pt-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.pt-vid video { display: block; width: 100%; aspect-ratio: 16 / 10; background: #11161c; }
.pt-vid .pt-vid-h { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: .9rem 0 .3rem; }
.pt-vid .pt-vid-h .muted { font-size: 15px; font-weight: 400; }
#pt-grpf fieldset { min-width: 0; }
#pt-grpf .pt-row2 input { width: 100%; box-sizing: border-box; }
@media (min-width: 561px) { #pt-grpf .pt-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 52rem; } }

/* Getting started, for a new customer */
.pt-start { margin-bottom: 1.25rem; }
.pt-start h2 .pt-small { font-weight: 400; margin-left: .4rem; }
.pt-startl { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; }
.pt-startl li { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--line); background: #fff; min-width: 0; }
.pt-startl li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-soft); font: 600 13px var(--sans); }
.pt-startl li.is-done > span { background: var(--electric-teal); color: #fff; }
.pt-startl li.is-done strong { color: var(--muted); }
.pt-startl .pt-sub { display: block; }
.pt-invl { margin-left: .5rem; }
#o-betaf[hidden] { display: none; }
.login-form input[type=text] { width: 100%; font: 16px var(--sans); padding: .8rem .85rem; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); background: #fff; }
.login-form input[readonly] { background: var(--bg-soft); color: var(--muted); }
.login-hint { display: block; font-size: 13.5px; color: var(--muted); margin-top: .3rem; }
@media (min-width:561px){ #pt-orgf .pt-row2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); max-width: 52rem; } }
#pt-orgf .pt-row2 input, #pt-orgf .pt-row2 select { width: 100%; box-sizing: border-box; }
.pt-log li { overflow-wrap: anywhere; }
.pt-opts.pt-opts-1 { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
#o-custf[hidden], #o-oemf[hidden] { display: none; }
#pt-orgf .pt-opts:not(.pt-opts-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { #pt-orgf .pt-opts:not(.pt-opts-2) { grid-template-columns: minmax(0, 1fr); } }
.pt-t td > .pt-chip { white-space: nowrap; }

/* Lists at scale (revision y): paged, filtered, with live values for the rows on screen */
.pt-plist { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pt-plsel { flex: 0 1 13rem; min-width: 0; }
.pt-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.pt-pager .pt-count { margin: 0; }
.pt-took { color: var(--muted); font-size: 13px; margin-left: .4rem; }
.pt-livec { margin: 0; font-size: 13.5px; color: var(--muted); flex: 1 1 16rem; }
.pt-pgb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pt-pgb span { font-size: 14px; color: var(--ink-2); padding: 0 .3rem; white-space: nowrap; }
.pt-pgb .btn { height: 36px; padding: 0 .8rem; font-size: 14px; }
.pt-pgb .btn:disabled { opacity: .4; cursor: default; }
.pt-lv { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-meter { display: inline-block; width: 44px; height: 6px; background: var(--bg-soft); margin-right: .5rem; vertical-align: middle; }
.pt-meter i { display: block; height: 100%; background: var(--electric-teal); }
.pt-h2 { font-size: 1.25rem; margin: .5rem 0 -.25rem; }
@media (max-width: 640px) { .pt-plsel { flex: 1 1 45%; } .pt-pgb { width: 100%; justify-content: space-between; } }

/* ---------- the team's desk: enquiries, knowledge base, team activity (revision z) ---------- */
.pt-reply textarea, #pt-enqf textarea, #pt-askf textarea { font: 15px/1.5 var(--sans); }
.pt-thread { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.pt-thread li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; }
.pt-thread li > span { font-size: 13px; color: var(--muted); padding-top: .7rem; }
.pt-thread li > div { border: 1px solid var(--line); background: #fff; padding: .7rem .9rem; min-width: 0; }
.pt-thread li > div p { margin: 0; overflow-wrap: anywhere; }
.pt-thread li > div p + p { margin-top: .4rem; }
.pt-thread .is-in > div { background: var(--bg-soft); }
.pt-thread .is-out > div { border-left: 3px solid var(--teal-ink); }
.pt-thread .is-note > div { background: #FFF6EC; border-color: #F6C9A1; }
.pt-thread .is-sys > span { padding-top: 0; }
.pt-thread .is-sys p { margin: 0; font-size: 14px; color: var(--muted); }
.pt-th-h { font-size: 13.5px; color: var(--muted); }
.pt-th-h strong { color: var(--ink); }
.pt-vchip { display: inline-flex; align-items: center; gap: .35rem; font-size: 13.5px; padding: .3rem .6rem; border: 1px solid var(--line-2); background: #fff; color: var(--brand); text-decoration: none; }
.pt-vchip:hover { border-color: var(--brand); }
.pt-reply { border-top: 1px solid var(--line); padding-top: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.pt-reply .f { margin: 0; }
.pt-seg { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 15px; }
.pt-seg label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.pt-vpicks summary { cursor: pointer; color: var(--brand); font-weight: 500; font-size: 15px; }
.pt-vpicks > div { display: flex; flex-direction: column; gap: .5rem; margin-top: .7rem; max-height: 20rem; overflow-y: auto; }
.pt-vpick { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); padding: .55rem .7rem; cursor: pointer; font-size: 14.5px; }
.pt-vpick input { margin-top: .2rem; accent-color: var(--brand); }
.pt-vpick:has(input:checked) { border-color: var(--brand); background: var(--bg-tint); }
.pt-vpick.is-off { cursor: default; opacity: .7; }
.pt-gap { border-left: 3px solid var(--signal-orange); margin-bottom: 1.25rem; }
.pt-gaps { list-style: none; margin: .6rem 0 0; padding: 0; }
.pt-gaps li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.pt-gaps li:first-child { border-top: 0; }
.pt-gaps li span { color: var(--muted); font-size: 14px; flex: 1 1 auto; }
.pt-kbth { display: block; }
.pt-vid .pt-vid-h a { color: inherit; text-decoration: none; }
.pt-vid .pt-vid-h a:hover { text-decoration: underline; }
.pt-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .4rem 1rem; font-size: 15px; }
.pt-checks label { display: flex; gap: .45rem; align-items: center; font-weight: 400; margin: 0; }
.pt-elist { list-style: none; margin: 0; padding: 0; }
.pt-elist li { padding: .5rem 0; border-top: 1px solid var(--line); }
.pt-elist li:first-child { border-top: 0; }
.pt-elist li span { display: block; font-size: 13.5px; color: var(--muted); }
.pt-qs { list-style: none; margin: 0; padding: 0; }
.pt-qs li { padding: .8rem 0; border-top: 1px solid var(--line); }
.pt-qs li:first-child { border-top: 0; padding-top: 0; }
.pt-qs p { margin: 0 0 .3rem; }
.pt-q-h { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Enquiries a week: two series, validated (#1F6FA8 opened, #00A396 answered, both 3:1 on white). */
.pt-wkbox { position: relative; }
.pt-wk { display: block; width: 100%; height: auto; min-width: 30rem; }
.pt-wk-opened { fill: #1F6FA8; }
.pt-wk-answered { fill: #00A396; }
.pt-wk-g { stroke: var(--line); stroke-width: 1; }
.pt-wk-base { stroke: var(--line-2); stroke-width: 1; }
.pt-wk-t { font: 11px var(--sans); fill: var(--muted); }
.pt-wk-hit { fill: transparent; }
.pt-wk-hit:hover { fill: rgba(23, 58, 87, .05); }
.pt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: 14px; color: var(--ink-2); margin: 0 0 .5rem; }
.pt-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.pt-key.is-opened { background: #1F6FA8; }
.pt-key.is-answered { background: #00A396; }
.pt-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 4px 14px rgba(15, 42, 64, .12); padding: .5rem .7rem; font-size: 13.5px; display: flex; flex-direction: column; gap: .15rem; min-width: 150px; z-index: 2; }
.pt-tip[hidden] { display: none; }
.pt-tip i { display: inline-block; }
@media (max-width: 640px) {
  .pt-thread li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .pt-thread li > span { padding-top: 0; }
}
.res-video { display: block; width: 100%; aspect-ratio: 16 / 10; background: #11161c; margin-top: 1rem; }
.res .linkbtn { font: inherit; font-weight: 500; }

/* Choosing an organization: a search box with the first matches below it (revision 29a) */
.pt-pick { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.pt-pick-w { position: relative; }
.pt-pick-q { width: 100%; }
.pt-pick-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pt-pick-chips:empty { display: none; }
.pt-pick-lb { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(10, 37, 64, .14); max-height: 22rem; overflow-y: auto; }
.pt-pick-lb li { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .75rem; cursor: pointer; font-size: 15px; line-height: 1.3; }
.pt-pick-lb li span { font-size: 13px; color: var(--muted); }
.pt-pick-lb li:hover, .pt-pick-lb li.is-act { background: var(--bg-tint); }
.pt-pick-lb li.is-act { box-shadow: inset 3px 0 0 var(--brand); }
.pt-pick-lb li.is-on strong::after { content: " ✓"; color: var(--brand); }
.pt-pick-lb .pt-pick-none { border-top: 1px solid var(--line-2); margin-top: .25rem; }
.pt-pick-lb .pt-pick-none strong { font-weight: 500; color: var(--brand); }
.pt-pick-lb .pt-pick-empty { cursor: default; color: var(--muted); }
.pt-pick-lb .pt-pick-foot { cursor: default; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-2); margin-top: .25rem; padding-top: .5rem; }
.pt-pick-lb .pt-pick-none + .pt-pick-foot { margin-top: 0; }

/* The organization switcher in the sidebar, and the bar shown while staff view another organization's portal (29d) */
.pt-org .pt-pick { width: 100%; }
.pt-org #pt-orgsel-q { font: 500 15px var(--sans); color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--night-line); border-radius: var(--radius); padding: .55rem .7rem; }
.pt-org #pt-orgsel-q::placeholder { color: rgba(255,255,255,.55); }
.pt-org #pt-orgsel-q:focus { outline: 2px solid var(--electric-teal); outline-offset: 0; }
.pt-org .pt-pick-lb strong { color: var(--ink); font-weight: 600; font-size: 15px; }
.pt-org .pt-pick-lb .pt-pick-none strong { color: var(--brand); font-weight: 500; }
.pt-org .pt-pick-lb { color: var(--ink); width: max(100%, 19rem); right: auto; max-width: calc(100vw - 2rem); }
@media (max-width: 860px) { .pt-org .pt-pick { flex: 1 1 16rem; width: auto; min-width: 0; } }
.pt-viewas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1.4rem; padding: .75rem 1rem; background: #FFF6E5; border: 1px solid #F2C46B; border-left: 4px solid #E08A00; }
.pt-viewas p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); min-width: 0; flex: 1 1 22rem; }
.pt-viewas .btn { white-space: nowrap; }

/* Issues: routing roles on the Team page, and where each kind of issue goes (29e) */
.pt-matrix th.c, .pt-matrix td.c { text-align: center; }
.pt-matrix th.c { white-space: nowrap; }
.pt-matrix th .pt-x { margin-left: .2rem; vertical-align: middle; }
.pt-matrix input { width: 18px; height: 18px; accent-color: var(--brand); }
.pt-addrole { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: 1rem 0 0; }
.pt-addrole .f { flex: 1 1 16rem; margin: 0; min-width: 0; }
.pt .pt-rules { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 22rem); gap: .6rem 1.2rem; align-items: center; }
.pt .pt-rules dt, .pt .pt-rules dd { margin: 0; text-align: left; color: var(--ink); }
.pt .pt-rules dt label { margin: 0; font-weight: 500; }
@media (max-width: 560px) { .pt .pt-rules { grid-template-columns: minmax(0, 1fr); gap: .25rem; } .pt .pt-rules dd { margin-bottom: .6rem; } }
#pt-icf { margin-top: 1.2rem; border-top: 1px solid var(--line-2); padding-top: 1rem; }
.pt .pt-form form#pt-routef { max-width: none; }
/* 29f: what a server raises */
.pt .pt-help .pt-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); max-width: 48rem; }
.pt .pt-help .pt-log .pt-sub { display: block; }
@media (max-width: 560px) { .pt .pt-help .pt-row2 { grid-template-columns: minmax(0, 1fr); } }
/* Hosts (31a) */
.pt-hsteps { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .4rem 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.pt-hsteps li.is-done { color: #00695F; }
.pt-hbar { max-width: 9rem; }
.pt-err { color: #A3271C; }
.pt-hacts { white-space: nowrap; }
.pt-hacts .linkbtn { font-size: 14px; }
.pt-hacts .linkbtn + .linkbtn { margin-left: .6rem; }
.pt-htab td { min-width: 7rem; }
.pt-hspec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.pt-hspec .pt-pre, .pt-hlogs { max-height: 24rem; overflow: auto; font-size: 12.5px; }
.pt-tokrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pt-tokrow input { flex: 1 1 14rem; min-width: 0; }
.pt-hverf .pt-inl { margin-top: 0; }
#pt-hostadd .pt-steps { margin-bottom: 1rem; }
#pt-hostadd .pt-note .pt-inl { margin-top: .4rem; }
@media (max-width: 860px) { .pt-hspec { grid-template-columns: minmax(0, 1fr); } .pt-hacts { white-space: normal; } }
.pt-htab td:nth-child(3) code { white-space: nowrap; }
/* Live enrolment cards (02b): a button link in a table keeps its own colours; the settings checkboxes sit inline
   beside their words, not placed like the big option cards. */
.pt-t td a.btn-primary, .pt-t td a.btn-primary:hover { color: #fff; }
#pt-enrol .pt-form { display: grid; gap: .55rem; justify-items: start; margin-top: .8rem; }
#pt-enrol .pt-form .pt-opt { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
#pt-enrol .pt-form .pt-opt input { position: static; margin: .2rem 0 0; flex: none; }
#pt-enrol .pt-form > label:not(.pt-opt) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 400; margin: 0; }
#pt-enrol .pt-form > label select { width: auto; max-width: 100%; }
/* 20261102c: the hosts summary has five tiles (engines joined servers and gateways) */
.pt-kpis.pt-kpis-5 { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
/* 20261103: a gateway's configuration panel, in the portal (portal/face-embed.js) */
.pt-face { padding: .6rem; }
.pt-face-frame.is-board { background: #0f141b; pointer-events: none; }
.pt-face-frame.is-board.is-status, .pt-face-frame.is-board.can-press { pointer-events: auto; }
.pt-face-frame { display: block; width: 100%; aspect-ratio: 900 / 625; max-width: 100%; max-height: max(26rem, calc(100vh - 9.5rem)); border: 0; background: #fff; }
.pt-face-wait { padding: 3rem 1rem; text-align: center; }
/* 0.5.0: a project's page, drawn dark at its own proportions, and the Projects card */
.pt-page { padding: 0; background: #0d1117; }
.pt-page .pt-face-wait { color: #c9d1d9; }
.pt-page-frame { aspect-ratio: 1488 / 948; background: #0d1117; max-height: none; }
.pt-page-frame:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.pt-proj + .pt-proj { border-top: 1px solid var(--line, #DDE2E7); margin-top: .8rem; padding-top: .8rem; }
.pt-proj-pages { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; margin: .5rem 0 0; }
.pt-face-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .6rem; border-bottom: 1px solid var(--line, #DDE2E7); position: sticky; top: 73px; z-index: 20; background: #fff; }
.pt-face-tabs[hidden] { display: none; }
.pt-face-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .55rem .9rem; font: 500 14px/1.2 var(--sans); color: #5C646C; cursor: pointer; }
.pt-face-tab:hover { color: var(--brand, #173A57); background: var(--bg-tint, #EAF4F2); }
.pt-face-tab[aria-selected="true"] { color: var(--brand, #173A57); border-bottom-color: var(--teal-ink, #007F74); font-weight: 600; }
.pt-face-tab:focus-visible { outline: 2px solid var(--teal-ink, #007F74); outline-offset: -2px; }
.pt-face-dlg { border: 0; border-radius: 2px; padding: 1.2rem; width: min(30rem, calc(100vw - 2rem)); box-shadow: 0 12px 40px rgba(15, 42, 64, .25); font: 400 15px/1.45 var(--sans); color: #1A1F23; }
.pt-face-dlg::backdrop { background: rgba(15, 42, 64, .35); }
.pt-face-dlg p { margin: 0 0 .8rem; }
.pt-face-dlg .pt-input { display: block; box-sizing: border-box; width: 100%; padding: .55rem .7rem; border: 1px solid #C5CDD4; border-radius: 2px; font: inherit; margin-bottom: 1rem; }
.pt-face-dlg .pt-acts { display: flex; justify-content: flex-end; gap: .5rem; }
.pt-face-kind { font: 500 14px/1 var(--sans); color: var(--teal-ink); background: var(--bg-tint); padding: .35rem .6rem; border-radius: 999px; }
.pt-face-foot { margin-top: -.4rem; }

/* the portal's organization choice when a mount serves several */
.pt-morg{width:100%;padding:.4rem .5rem;font:inherit;border:1px solid var(--line,#d5dbe1);background:#fff}

/* Sign-in and account pages */
.signin-main { display: flex; justify-content: center; padding: clamp(2rem, 6vw, 4.5rem) var(--gut, 1rem); min-height: calc(100vh - 130px); }
.signin-box { max-width: 26rem; }
.signin-box input[type=email], .signin-box input[type=text], .signin-box input[type=password] { width: 100%; box-sizing: border-box; }
.signin-go { width: 100%; }
.signin-hint { font-size: 13.5px; margin: .4rem 0 0; }
.signin-alt { margin: .9rem 0 0; }
.signin-qr img { display: block; margin: 0 auto .6rem; image-rendering: pixelated; }
.signin-codes pre { background: #f3f5f7; padding: .9rem 1rem; font-size: 15px; line-height: 1.7; margin: 0 0 .8rem; }
.signin-check { display: flex !important; gap: .5rem; align-items: center; font-weight: 400 !important; }
.brand-img { display: block; height: 32px; width: auto; }
.login-status.is-ok { color: #0a6b55; }
.login-status.is-error { color: #a4262c; }
.ac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.ac-grid label { display: block; font-weight: 500; font-size: 14.5px; }
.ac-grid input:not([type=checkbox]), .ac-grid select { display: block; width: 100%; box-sizing: border-box; margin-top: .3rem; }
.ac-grid .ac-go, .ac-grid .ac-check { grid-column: 1 / -1; margin: 0; }
.ac-check { font-weight: 400 !important; }
.ac-inline { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: .9rem; }
.ac-inline label { font-weight: 500; font-size: 14.5px; }
.ac-inline input, .ac-inline select { display: block; margin-top: .3rem; min-width: 16rem; }
.ac-linkval { width: 100%; box-sizing: border-box; font-family: var(--mono, monospace); font-size: 13px; }
.ac-acts { text-align: right; white-space: nowrap; }
.ac-step { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1.02rem; }
.ac-link { margin-bottom: 1.25rem; }
.pt-danger { color: #a4262c; }
#ac-msg { margin-bottom: 1rem; }
@media (max-width: 720px) { .ac-grid { grid-template-columns: minmax(0, 1fr); } .ac-inline input, .ac-inline select { min-width: 0; width: 100%; } }
/* 0.5.1: on a wide screen the portal is an app shell. The header, the side panel and the footer stay where they are,
   and only the view area scrolls. Narrow screens keep the stacked page, where the side panel is a row of tabs. */
@media (min-width: 861px) {
  html:has(body.pt-app), body.pt-app { height: 100%; overflow: hidden; }
  body.pt-app { display: flex; flex-direction: column; }
  body.pt-app > .site-hd, body.pt-app > .slim-ft { flex: none; }
  body.pt-app > main { flex: 1 1 auto; min-height: 0; display: flex; }
  body.pt-app .pt { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.pt-app .pt-side { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  body.pt-app .pt-main { overflow-y: auto; overscroll-behavior: contain; min-height: 0; scroll-padding-top: 1rem; }
  body.pt-app .pt-face-tabs { top: 0; }
}
/* 0.5.1: the console under a project's page: Alarms, Trend, Line log */
.pt-con { padding: 0; }
.pt-con-tabs { display: flex; align-items: flex-end; gap: .2rem; border-bottom: 1px solid var(--line); padding: 0 1rem; flex-wrap: wrap; }
.pt-con-tab { font: 500 15px var(--sans); color: var(--ink-2); background: none; border: 0; border-bottom: 3px solid transparent; padding: .85rem .9rem .7rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.pt-con-tab:hover { color: var(--brand); }
.pt-con-tab.is-on { color: var(--brand); border-bottom-color: var(--electric-teal); }
.pt-con-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 10px; background: #A3271C; color: #fff; font: 600 12px var(--sans); }
.pt-con-st { margin-left: auto; padding-bottom: .75rem; }
.pt-con-body { padding: 1rem 1.2rem 1.2rem; min-height: 12rem; }
.pt-con-sum { margin: 0 0 .7rem; }
.pt-con-bar { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.pt-cseg { display: inline-flex; border: 1px solid var(--line-2); background: #fff; }
.pt-cseg button { font: 500 14px var(--sans); padding: .45rem .8rem; border: 0; border-right: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer; }
.pt-cseg button:last-child { border-right: 0; }
.pt-cseg button[aria-pressed=true] { background: var(--brand); color: #fff; }
.btn.btn-sm { height: 34px; padding: 0 .9rem; font-size: 14px; border-color: var(--line-2); background: #fff; color: var(--brand); }
.btn.btn-sm:hover { border-color: var(--brand); }
.btn.btn-sm:disabled { opacity: .6; cursor: default; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-con-al td { vertical-align: middle; }
.pt-al-chip { display: inline-flex; align-items: center; gap: .4rem; font: 500 13px/1.2 var(--sans); padding: .32rem .6rem; border-radius: 999px; white-space: nowrap; }
.pt-al-chip.is-crit { background: #A3271C; color: #fff; }
.pt-al-chip.is-warn { background: #FBE5E3; color: #A3271C; }
.pt-al-chip.is-info { background: #E6EEF5; color: var(--deep-ocean); }
.pt-al-chip.is-ok { background: #E3F4F1; color: #00695F; }
.pt-al-chip.is-mute { background: var(--bg-soft); color: var(--muted); }
tr.pt-al-activeUnack td { background: #FFF6F5; }
tr.pt-al-activeUnack strong { color: #7A1D15; }
/* trend: small multiples on one time axis */
.pt-tr { position: relative; overflow-x: auto; }
.pt-tr-row { margin: 0 0 .5rem; }
.pt-tr-h { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; align-items: baseline; font-size: 14px; color: var(--ink-2); margin: 0 0 .15rem 56px; }
.pt-tr-h b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-tr-k i, .pt-tr-tip i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: .4rem; }
.pt-tr-u { color: var(--muted); }
.pt-tr-svg, .pt-tr-axis { display: block; overflow: visible; }
.pt-tr-grid { stroke: #EEF1F4; stroke-width: 1; }
.pt-tr-ax { font: 12px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.pt-tr-x { stroke: var(--ink-2); stroke-width: 1; }
.pt-tr-tip { position: absolute; z-index: 5; pointer-events: none; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .5rem .7rem; font-size: 13.5px; color: var(--ink); min-width: 12rem; font-variant-numeric: tabular-nums; }
.pt-tr-tip strong { display: block; margin-bottom: .25rem; }
/* line log */
.pt-llog { list-style: none; margin: 0; padding: 0; }
.pt-llog li { display: grid; grid-template-columns: 9.5rem 7.5rem minmax(0, 1fr); gap: .3rem 1rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.pt-llog time { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-llog-k { justify-self: start; font: 500 12.5px/1.2 var(--sans); padding: .22rem .5rem; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); }
.pt-llog-k.is-crit { background: #FBE5E3; color: #A3271C; }
.pt-llog-k.is-ok { background: #E3F4F1; color: #00695F; }
.pt-llog-k.is-info { background: #E6EEF5; color: var(--deep-ocean); }
.pt-llog-k.is-warn { background: #FDEEDF; color: #9A4A0C; }
.pt-llog-k.is-chg { background: #EFEAF8; color: #4B3A8F; }
@media (max-width: 640px) { .pt-llog li { grid-template-columns: auto minmax(0, 1fr); } .pt-llog-x { grid-column: 1 / -1; } .pt-con-st { margin-left: 0; } }

/* licensing (take 6): forms whose inputs line up whatever their labels, and the organization type choice */
.ac-grid.lic-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.ac-grid.lic-3 > [data-for] { min-width: 0; }
.ac-grid.lic-3 [hidden] { display: none; }
.lic-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.lic-kind { display: block; border: 1px solid var(--line, #d7dde3); border-radius: 6px; padding: .7rem .8rem; cursor: pointer; }
.lic-kind input { margin-right: .4rem; }
.lic-kind .muted { display: block; font-size: 13.5px; margin-top: .25rem; }
.lic-agr td { vertical-align: top; }
@media (max-width: 720px) { .ac-grid.lic-3, .lic-kinds { grid-template-columns: minmax(0, 1fr); } }
.lic-w2 { grid-column: span 2; }
.lic-kpis { margin-bottom: 1rem; }
.lic-needs { list-style: none; padding: 0; margin: 0; }
.lic-needs li { padding: .45rem 0; border-top: 1px solid var(--line, #e3e7eb); }
.lic-needs li:first-child { border-top: 0; }
.lic-srv td, .lic-srv th { vertical-align: top; }
.lic-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.lic-sort { margin-bottom: .6rem; }
.lic-when { white-space: nowrap; }
.lic-g { margin: 1.1rem 0 .4rem; font-size: 15px; }
@media (max-width: 720px) { .lic-w2 { grid-column: auto; } }
.lic-acts { display: block; margin-top: .3rem; font-size: 13.5px; white-space: nowrap; }
.lic-acts .linkbtn { font-size: inherit; display: inline; width: auto; padding: 0; margin: 0; }
.lic-srv .pt-sub, .lic-srv td.r { white-space: nowrap; }
.lic-kpis .pt-kpi { min-width: 15rem; }

/* 0.6: service partners and contracts */
.lic-fs { border: 0; padding: 0; margin: 1rem 0 0; }
.lic-fs legend { font-weight: 500; font-size: 14.5px; margin-bottom: .45rem; padding: 0; }
.pa-inv { padding: .6rem 0; border-top: 1px solid var(--line, #e3e7eb); }
.pa-inv:first-of-type { border-top: 0; }
.pa-inv p { margin: .2rem 0; }
.lic-fs + .pt-note { margin-top: 1rem; }
.lic-k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lic-dl { max-width: 36rem; }
.lic-dl dd { text-align: left; }
.ac-grid [data-co][hidden] { display: none; }
.pt-note + .lic-dl { margin-top: .9rem; }
/* 0.6.1: a support cell with a date and a note wraps under its chip, so the customer list fits */
.pt-t td.ac-sup { white-space: normal; min-width: 13ch; max-width: 22ch; }

/* 0.6.2: the Support FAQ (portal-faq.js): one card per section, each question opens in place */
.pt-faq { display: grid; gap: 1.2rem; }
.pt-faq-q { border-top: 1px solid var(--line); }
.pt-faq-q:first-of-type { border-top: 0; }
.pt-faq-q > summary { cursor: pointer; list-style: none; padding: .75rem 1.6rem .75rem 0; font-weight: 600; color: var(--brand); position: relative; }
.pt-faq-q > summary::-webkit-details-marker { display: none; }
.pt-faq-q > summary::after { content: '+'; position: absolute; right: .2rem; top: .7rem; font-weight: 400; color: var(--muted); }
.pt-faq-q[open] > summary::after { content: '\2212'; }
.pt-faq-q > summary:focus-visible { outline: 2px solid var(--brand-3); outline-offset: 2px; }
.pt-faq-a { padding: 0 0 1rem; max-width: 72ch; }
.pt-faq-a p, .pt-faq-a ul, .pt-faq-a ol { margin: 0 0 .7rem; }
.pt-faq-a li { margin: 0 0 .35rem; }