/* ============================================================================
   SeQontrol — static marketing site
   Single stylesheet, no build step, no external requests.

   Neutrals are lifted from the platform shell's theme.css (dark variant) so the
   site and the product UI read as one system:
     --bg #0b0f17 · --surface #0f172a · --border #334155
     --text #e5e7eb · --muted #94a3b8
     --danger #f87171 · --warn #fbbf24 · --ok #4ade80

   The accent is NOT the shell's blue: SeQontrol's colour is the logo purple,
   #6b4de2, sampled straight from the artwork. White on it is 5.55:1, so it
   carries buttons; as text on --bg it is only 3.46:1, so links and labels use
   the lighter --accent (#a78bfa, 7.05:1) instead.
   Dark only, by design. No light theme.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  /* --- neutrals, from the platform shell --- */
  --bg:         #0b0f17;
  --surface:    #0f172a;
  --border:     #334155;
  --text:       #e5e7eb;
  --muted:      #94a3b8;
  --danger:     #f87171;
  --warn:       #fbbf24;
  --ok:         #4ade80;

  /* --- SeQontrol purple, sampled from the logo --- */
  --brand:      #6b4de2;   /* the logo purple — solid fills */
  --brand-dark: #7658e6;   /* hover — lifted, not darkened, and still 4.87:1 on white */
  --brand-deep: #5b40c9;   /* pressed / borders needing more weight */
  --focus:      #a78bfa;

  /* --- marketing-surface extensions --- */
  --bg-deep:      #080c13;
  --surface-2:    #161a2e;
  --border-soft:  #1e2439;
  --border-strong:#4b5169;
  /* The boundary of a control is not decoration: WCAG 1.4.11 wants 3:1 for anything you need in
     order to tell where an input or a button is. --border is 1.85:1 and --border-strong only
     2.45:1, so both fail that bar - fine for a divider or a card edge, which the criterion
     explicitly exempts, but not for the edge of a text field. #5f6987 is the lightest step that
     still reads as the same slate and clears 3:1 on all three grounds it sits on (bg 3.52,
     bg-deep 3.60, surface 3.28). Decorative borders deliberately keep using --border. */
  --border-control:#5f6987;

  /* The header is sticky, so every in-page jump - the skip link to #main, and every
     coming.html#product and pricing.html#product deep link - would otherwise scroll its target to
     y=0 and leave it sitting underneath the header. That is WCAG 2.2 2.4.11 Focus Not Obscured
     when the skip link lands there, and plain broken navigation the rest of the time. Declared
     once and used by both .nav and scroll-padding-top so the two cannot drift apart. */
  --header-h:   62px;
  /* #6b7490 measured 3.71–4.22:1 across the four surfaces it actually sits on —
     under the 4.5 WCAG AA wants for body text, on every one of them. Same hue
     and saturation, lifted until the worst case is 4.79. It carries hints,
     captions and the footer line, all of which are small text. */
  --dim:          #7c87a3;
  --accent:       #a78bfa;  /* readable purple for links + labels on dark */
  --accent-soft:  #c4b5fd;
  --glow:         rgba(107, 77, 226, .22);

  /* JeffOps' own brand cyan, taken from its --cyan token and logo. Used only
     for links back to the parent company, never for SeQontrol's own chrome. */
  --jeffops:      #00d9ff;
  --jeffops-soft: #6ee9ff;

  /* product tones — the same 400-step ramp the shell uses for warn/ok/danger */
  --t-sharecare: #fbbf24;
  --t-security:  #38bdf8;
  --t-compliance:#c084fc;
  --t-posture:   #818cf8;
  --t-mailtrust: #4ade80;
  /* pink, because every neighbouring hue was taken: amber is ShareCare, sky is
     SecurityPortal, the purples are Compliance and Posture, red is Dredd, and
     cyan belongs to JeffOps. */
  --t-webscan:   #f472b6;
  --t-dredd:     #f87171;
  --t-condaccess:#fb923c;
  --t-soon:      #94a3b8;

  --radius-sm: 6px;
  --radius:    10px;   /* platform tokens.radius */
  --radius-lg: 16px;

  /* THE SPACE BESIDE THE CONTENT, CUT BY 30% AT EVERY WIDTH. Two tokens govern it and they take
     turns: below ~1190px the content fills the viewport and --gut is the whole margin; above it the
     content is centred at --maxw and the margin is whatever is left over. Changing one alone would
     have moved the edge on half the screens and left the other half untouched.

     The formula is the request, solved. Old margin each side is (vw - 1140) / 2; 70% of that is
     (vw - maxw) / 2, which rearranges to maxw = 0.3vw + 798px. At 1440 that is 1230px, at 1920 it is
     1374px -- 273px of margin where there used to be 390.

     Clamped at both ends and neither bound is arbitrary. The floor keeps it from ever being NARROWER
     than it was. The ceiling stops an ultrawide monitor stretching tables and grids to a width nobody
     designed for -- prose is already capped in ch and does not care, but a ten-column table does. */
  --maxw: clamp(1140px, calc(30vw + 798px), 1500px);
  --gut: 17px;   /* was 24px */

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* platform elevation ramp */
  --el-sm: 0 1px 3px rgba(0,0,0,.12);
  --el-md: 0 8px 28px rgba(0,0,0,.20);
  --el-lg: 0 20px 60px rgba(0,0,0,.28);
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keeps anchored targets clear of the sticky header - see --header-h */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* rem, not px. This was 16.5px and it was the only px font-size in the sheet, so headings,
     .lede, .section-head p and .card p all scaled with the reader's browser default while the
     body copy beside them did not - at a 20px default a card paragraph rendered LARGER than the
     prose around it. Browser default font size, not page zoom, is the setting low-vision readers
     actually change. 1.03rem is 16.48px at the 16px default: visually identical today. */
  font-size: 1.03rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; letter-spacing: -.021em; font-weight: 640; }
h1 { font-size: clamp(2.05rem, 1.35rem + 2.7vw, 3.3rem); letter-spacing: -.033em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); letter-spacing: -.026em; }
h3 { font-size: 1.14rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); text-decoration: underline; }

/* Inline prose links carry an underline, because colour alone does not distinguish them. --accent
   against --text is 2.20:1 and against --muted - which td, .note p and .note li all use - it is
   1.06:1, both under the 3:1 WCAG technique G183 requires when colour is the sole signal. The
   sheet's own palette notes check --accent against the BACKGROUND, which is the wrong comparison
   for this: what matters is the surrounding text. A hover underline does not help a touch user or
   anyone scanning. Scoped to <main> so header, footer and nav keep their current look. */
main p a, main li a, main td a, main th a, main figcaption a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
/* Anything already shaped like a control is exempt: it does not read as body copy to begin with. */
/* :not(:hover) on the crumb, because main .breadcrumb a (0,1,2) outranks a:hover (0,1,1) in every
   state - and .breadcrumb a already overrides the hover colour change, so without this these links
   had no hover feedback at all. They are the only upward link on a guide page. */
main .btn, main .arrow-link, main .tag, main .breadcrumb a:not(:hover), main .subnav a {
  text-decoration: none;
}

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .5em; }

strong { font-weight: 620; color: var(--text); }

code, kbd {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: .1em .38em;
  color: var(--accent-soft);
}

hr { border: 0; border-top: 1px solid var(--border-soft); margin: 3rem 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: .7rem 1.1rem;
  font-weight: 620; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 1100px; }   /* was 820px */

/* Body prose that has to sit in a full-width section. wrap-narrow cannot do this job: it is also
   margin-inline:auto, so a lone narrow section between two wide ones steps inward at both edges and
   reads as misaligned. Pages built entirely on wrap-narrow do not have that problem; the product
   pages, where only "Why it matters" used it, did. Same 730px measure as .section-head. */
.measure { max-width: 730px; }

section { padding-block: clamp(3.4rem, 6.5vw, 5.8rem); }
section.tight { padding-block: clamp(2.4rem, 4vw, 3.4rem); }
.band { background: var(--bg-deep); border-block: 1px solid var(--border-soft); }

.section-head { max-width: 730px; margin-bottom: 2.5rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }
.section-head p + p { margin-top: .8rem; }

.eyebrow {
  display: inline-block;
  font-size: .73rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .85rem;
}

.lede { font-size: clamp(1.04rem, 1rem + .35vw, 1.2rem); color: var(--muted); }
.lede strong { color: var(--text); }

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: .9rem; }
.center { text-align: center; }
.mb0 { margin-bottom: 0; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 15, 23, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.nav { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }

/* The brand lockup is the supplied artwork: extracted symbol + wordmark.
   Both are the "on-dark" variants — the delivered logo is navy, which is
   unreadable on --bg, so the navy is lifted to --text and the purple kept. */
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--text); text-decoration: none; margin-right: auto;
}
.brand:hover { text-decoration: none; opacity: .88; }
.brand-mark { width: 32px; height: auto; flex: none; }
.brand-word { width: 142px; height: auto; flex: none; }

@media (max-width: 400px) {
  .brand-word { width: 118px; }
  .brand-mark { width: 27px; }
}

.footer-tagline {
  width: 235px; height: auto;
  margin: .1rem 0 .9rem;
  opacity: .85;
}

.nav-links { display: flex; align-items: center; gap: 1.45rem; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  color: var(--muted); font-size: .94rem; font-weight: 520;
  text-decoration: none; padding: .35rem 0; border-bottom: 1.5px solid transparent;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; background: var(--surface); border: 1px solid var(--border-control);
  color: var(--text); border-radius: var(--radius-sm); padding: .45rem .6rem;
  cursor: pointer; font: inherit; line-height: 1;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-deep); border-bottom: 1px solid var(--border-soft);
    padding: .5rem var(--gut) 1.1rem;
    /* The panel is absolutely positioned inside a position:sticky header, so it is pinned to the
       viewport and scrolling the page behind it moves nothing. At this breakpoint the submenu is
       rendered inline and visible (see .subnav below), so the panel carries 14 rows and stands
       roughly 650px tall - taller than an iPhone SE viewport, and far taller than any phone in
       landscape. Without these four lines the bottom entries, Guides and Contact among them,
       cannot be reached by any gesture. dvh second so it wins where supported. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: .72rem 0; border-bottom: 1px solid var(--border-soft); }
  .nav-links .btn { margin-top: .9rem; text-align: center; border-bottom: 0; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .94rem; font-weight: 600;
  padding: .68rem 1.25rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, filter .12s ease, transform .05s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

.btn-ghost { background: transparent; border-color: var(--border-control); color: var(--text); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

.arrow-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 570; font-size: .93rem; }
.arrow-link::after { content: "→"; transition: transform .15s ease; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; padding-block: clamp(3.8rem, 8vw, 7rem); border-bottom: 1px solid var(--border-soft); }
.hero::before {
  content: ""; position: absolute; inset: -45% -10% auto -10%; height: 540px;
  background:
    radial-gradient(52% 58% at 22% 45%, var(--glow), transparent 70%),
    radial-gradient(44% 54% at 78% 28%, rgba(167,139,250,.12), transparent 70%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero h1 { max-width: 17ch; }
.hero .lede { max-width: 60ch; }

.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 3rem; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; } }

.oneline {
  margin-top: 1.9rem; padding: 1rem 1.15rem;
  /* honours a --tone set on the element, so a product's own colour carries
     through; falls back to the site accent everywhere else. */
  border-left: 3px solid var(--tone, var(--accent)); background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.01rem;
}
.oneline strong { color: var(--accent-soft); font-weight: 620; }

/* stepped "how it works" panel */
.flow { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.35rem; box-shadow: var(--el-md); }
.flow-step { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem .2rem; }
.flow-step + .flow-step { border-top: 1px solid var(--border-soft); }
.flow-num {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--accent); font-size: .77rem; font-weight: 700; font-family: var(--mono);
}
.flow-step h3 { margin: 0 0 .15rem; font-size: .95rem; font-weight: 620; }
.flow-step p { margin: 0; font-size: .88rem; color: var(--muted); }

/* ---------------------------------------------------------------- grids + cards */

.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.35rem 1.4rem; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: .94rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* product card */
.pcard {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 1.4rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--tone, var(--accent)); opacity: .85; }
.pcard:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: var(--el-md); }
/* flex-wrap matters: .status is nowrap and .pcard is overflow:hidden, and a product name is one
   unbreakable word, so neither flex item can shrink. Without wrapping, the badge on a long name
   (ConditionalAccessPortal, CompliancePortal, PosturePortal) runs past the padding box and is
   clipped away on every common phone width - and those are the cards whose badge carries news. */
.pcard h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem;
  margin-bottom: .1rem; font-size: 1.1rem;
}
.pcard h3 a { color: var(--text); text-decoration: none; }
.pcard h3 a:hover { color: var(--tone, var(--accent)); }
.pcard .kicker {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--tone, var(--accent)); margin-bottom: .7rem;
}
.pcard p { color: var(--muted); font-size: .93rem; flex: 1; }
.pcard .arrow-link { color: var(--tone, var(--accent)); margin-top: .3rem; align-self: flex-start; }
.pcard.soon { opacity: .82; }
.pcard.soon:hover { transform: none; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone, var(--accent)); flex: none; }

/* the three-portal group */
.suite {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(107,77,226,.09), transparent 60%),
    var(--bg-deep);
}
.suite-head { margin-bottom: 1.35rem; }
.suite-head h2, .suite-head h3 {
  margin: 0 0 .3rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  letter-spacing: -.025em;
}
.suite-head h2 .sep, .suite-head h3 .sep { color: var(--accent); font-weight: 400; }
.suite-head p { margin: 0; color: var(--muted); font-size: .96rem; max-width: 68ch; }
.suite .grid { gap: 1rem; }

/* ---------------------------------------------------------------- tables */

.table-wrap { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 540px; }
th, td { text-align: left; padding: .78rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
/* Column headers only. Row headers (<th scope="row">) are styled below — they
   are body cells and must not inherit the uppercase header treatment. */
thead th {
  color: var(--text); font-weight: 620; font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface); border-bottom-color: var(--border);
}
tbody th { font-weight: 500; color: var(--text); text-align: left; }
td { color: var(--muted); }
td:first-child { color: var(--text); font-weight: 520; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(148,163,184,.03); }

.tick { color: var(--ok); font-weight: 700; }
.no { color: var(--dim); }

/* screen-reader-only text: the tick columns read as "included" / "not
   included" rather than as a bare glyph or nothing at all */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------ per-product licence grid */

.matrix { min-width: 580px; }
.matrix th:not(:first-child),
.matrix td:not(:first-child) { text-align: center; width: 8.5rem; }
.matrix tbody td { font-family: var(--mono); font-size: .88rem; color: var(--text); }
.matrix .tier-head { color: var(--text); }
.matrix .tier-head small {
  display: block; font-weight: 500; font-size: .72rem; letter-spacing: .04em;
  text-transform: none; color: var(--dim); margin-top: .15rem;
}
.matrix tr.group th {
  background: var(--surface); color: var(--dim);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* Tabs. The panels are plain divs, not <section>, so the global section
   padding does not apply inside them. Without JS the tab strip stays hidden and
   every panel renders stacked — the content is never gated behind script. */
.tablist { display: none; }
[data-tabs-ready] .tablist {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 1.9rem;
}
.tablist button {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: .95rem; font-weight: 560;
  padding: .7rem .95rem; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.tablist button::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px;
  background: var(--tone, var(--accent)); opacity: .55; flex: none;
  transition: opacity .12s ease;
}
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--tone, var(--accent));
}
.tablist button[aria-selected="true"]::before { opacity: 1; }

[data-tabs-ready] .product-licence { margin-bottom: 0; }
[data-tabs-ready] .product-licence h3::before { display: none; }

/* Vertical tab set. Seven product names is too many for a horizontal strip —
   it overflows, and a tab strip that hides its own options is the one thing a
   tab strip must not do. A left-hand rail gives every label full width.
   The rail sticks, because the panels are long enough to scroll past it.

   All panels occupy the same grid cell: only one is ever without [hidden],
   and [hidden] is display:none, so they never fight for space. */
[data-tabs-ready].tabs-v {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
[data-tabs-ready].tabs-v .tablist {
  grid-column: 1; grid-row: 1;
  position: sticky; top: calc(var(--header-h) + 1rem);
  flex-direction: column;
  align-items: stretch;
  gap: .12rem;
  overflow: visible;
  border-bottom: 0;
  border-right: 1px solid var(--border-soft);
  margin-bottom: 0;
  padding-right: .35rem;
}
[data-tabs-ready].tabs-v .tablist button {
  justify-content: flex-start;
  text-align: left;
  padding: .58rem .8rem;
  margin: 0 -1px 0 0;
  border-bottom: 0;
  border-right: 2px solid transparent;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  /* The rail is capped at 210px and the longest label today is
     "CompliancePortal". Allow wrapping so a longer product name later spills
     onto a second line instead of over the rail's border. */
  white-space: normal;
}
[data-tabs-ready].tabs-v .tablist button[aria-selected="true"] {
  border-right-color: var(--tone, var(--accent));
  background: var(--surface);
}
[data-tabs-ready].tabs-v .product-licence { grid-column: 2; grid-row: 1; }

/* Narrow screens: the rail would eat the width the tables need, so it becomes
   a WRAPPING row above the panel. Wrapping, not scrolling — every tab stays
   visible, which was the whole reason for moving off the horizontal strip. */
@media (max-width: 820px) {
  [data-tabs-ready].tabs-v { display: block; }
  [data-tabs-ready].tabs-v .tablist {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .2rem .35rem;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 1.7rem;
    padding-right: 0;
  }
  [data-tabs-ready].tabs-v .tablist button {
    margin: 0 0 -1px 0;
    border-right: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  [data-tabs-ready].tabs-v .tablist button[aria-selected="true"] {
    border-right-color: transparent;
    border-bottom-color: var(--tone, var(--accent));
    background: none;
  }
}

/* Supported technologies */
.tech { margin: 0 0 1.4rem; }
.tech h4 {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .55rem;
}
.tech .tags { margin-bottom: .9rem; }
.tech .tags:last-child { margin-bottom: 0; }
.tech .tag.on { color: var(--text); border-color: var(--border-strong); }
.tech .tag.off { color: var(--dim); border-style: dashed; }
.tech .group-label {
  display: block; font-size: .8rem; color: var(--muted);
  margin: 0 0 .35rem;
}

.product-licence { margin-bottom: 3.2rem; }
.product-licence:last-child { margin-bottom: 0; }
.product-licence > header { margin-bottom: 1rem; }
.product-licence h3 {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .2rem; font-size: 1.3rem;
}
.product-licence h3::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--tone, var(--accent)); flex: none;
}
.product-licence .counted {
  margin: 0; font-size: .9rem; color: var(--dim);
}
.product-licence .after { margin: .9rem 0 0; font-size: .92rem; color: var(--muted); }

/* ---------------------------------------------------------------- notes */

.note {
  border: 1px solid var(--border-soft); border-left: 3px solid var(--tone, var(--accent));
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.15rem 1.35rem; margin-block: 1.7rem;
}
.note h2, .note h3, .note h4 { margin-bottom: .4rem; font-size: 1rem; font-weight: 640; letter-spacing: -.01em; }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note p, .note li { color: var(--muted); }
.note.scope { --tone: var(--warn); }
.note.honest { --tone: var(--dim); }
.note.plain { --tone: var(--border-strong); }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.55rem; color: var(--muted); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--tone, var(--accent));
}
.checklist li strong { color: var(--text); }


/* tags + status */

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.tag {
  display: inline-block; margin: 0; font-size: .77rem; font-weight: 540;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 100px; padding: .22rem .7rem;
}

.status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 660; letter-spacing: .09em; text-transform: uppercase;
  border-radius: 100px; padding: .18rem .6rem;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.status.built { color: var(--ok);   border-color: rgba(74,222,128,.35);  background: rgba(74,222,128,.07); }
.status.early { color: var(--warn); border-color: rgba(251,191,36,.35);  background: rgba(251,191,36,.07); }
.status.soon  { color: var(--muted); border-color: var(--border); }

/* ---------------------------------------------------------------- product hero */

.phero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-soft); padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.phero::before {
  content: ""; position: absolute; inset: -60% -20% auto -20%; height: 470px;
  background: radial-gradient(48% 58% at 28% 50%, color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.phero > .wrap { position: relative; }
.phero .eyebrow { color: var(--tone, var(--accent)); }
.phero h1 { max-width: 21ch; }
.phero .oneline { border-left-color: var(--tone, var(--accent)); }
.phero .oneline strong { color: var(--tone, var(--accent)); }

.breadcrumb { font-size: .85rem; color: var(--dim); margin-bottom: 1.1rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb span { padding-inline: .45rem; }

.split { display: grid; grid-template-columns: 1.55fr .85fr; gap: 3rem; align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

.aside { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.3rem; position: sticky; top: calc(var(--header-h) + 1.4rem); }
@media (max-width: 940px) { .aside { position: static; } }
.aside h3 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); margin-bottom: .6rem; font-weight: 700; }
.aside h3:not(:first-child) { margin-top: 1.35rem; }
.aside ul { list-style: none; padding: 0; margin: 0; }
.aside li { font-size: .91rem; color: var(--muted); margin-bottom: .4rem; }
.aside li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- licensing */

.flavours { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.15rem; align-items: stretch; }
@media (max-width: 900px) { .flavours { grid-template-columns: 1fr; } }

.flavour {
  display: flex; flex-direction: column; position: relative;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 1.5rem 1.45rem;
}
.flavour.featured { border-color: var(--brand-dark); box-shadow: 0 0 0 1px rgba(107,77,226,.30), var(--el-md); }
.flavour .tier {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: .55rem;
}
.flavour h3 { font-size: 1.22rem; margin-bottom: .3rem; }
.flavour .verb { color: var(--accent); font-size: .93rem; font-weight: 560; margin-bottom: 1rem; }
.flavour .price { font-size: 1.9rem; font-weight: 660; letter-spacing: -.03em; margin-bottom: .1rem; }
.flavour .price small { font-size: .82rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.flavour .price-note { font-size: .82rem; color: var(--dim); margin-bottom: 1.15rem; }
.flavour ul { flex: 1; }
.flavour .badge-top {
  position: absolute; top: -.7rem; right: 1.2rem;
  background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 100px;
}


/* ---------------------------------------------------------------- CTA */

.cta {
  text-align: center;
  background: radial-gradient(62% 130% at 50% 0%, rgba(107,77,226,.16), transparent 68%), var(--bg-deep);
  border-block: 1px solid var(--border-soft);
}
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta p { max-width: 58ch; margin-inline: auto; color: var(--muted); }
.cta .btn-row { justify-content: center; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--border-soft); background: var(--bg); padding-block: 3rem 2rem; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); gap: 2rem; margin-bottom: 2.4rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: none; }
.site-footer .brand { margin-bottom: .8rem; }
.site-footer .brand-word { width: 132px; }
.site-footer .blurb { color: var(--dim); max-width: 36ch; margin: 0; font-size: .9rem; }

.footer-bottom {
  border-top: 1px solid var(--border-soft); padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--dim); font-size: .86rem;
}

/* ------------------------------------------------------ links to JeffOps */
/* SeQontrol is a JeffOps product, so every link back to the parent brand wears
   the JeffOps cyan instead of the SeQontrol purple. Matched on the href, so a
   new mention picks it up with no extra markup. The footer selector is here to
   out-specify `.site-footer a`, which would otherwise mute them to --muted. */
a[href^="https://jeffops.com"],
.site-footer a[href^="https://jeffops.com"] {
  color: var(--jeffops);
}
a[href^="https://jeffops.com"]:hover,
.site-footer a[href^="https://jeffops.com"]:hover {
  color: var(--jeffops-soft);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- forms */

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .87rem; font-weight: 570; margin-bottom: .35rem; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .94rem; color: var(--text);
  background: var(--bg-deep); border: 1px solid var(--border-control);
  border-radius: var(--radius-sm); padding: .6rem .75rem;
}
.field textarea { min-height: 140px; resize: vertical; }
/* No outline:none here. It used to sit alongside a 28%-opacity shadow that composited to 1.28:1
   against the field background - a focus indicator you could not see, on the only form the site
   has. Without it the global :focus-visible rule applies: 2px of --focus at 7.20:1. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--focus);
}
.field .hint { font-size: .82rem; color: var(--dim); margin: .3rem 0 0; }
/* Browser default placeholder grey fails contrast on this background. */
.field ::placeholder { color: var(--dim); opacity: 1; }

/* ------------------------------------------------- coverage map (homepage)
   Not a screenshot and not pretending to be one: a map of the surfaces that
   actually get crawled, so the page has something to look at and the claim
   is checkable rather than decorative. Real screenshots replace this. */
.coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .55rem;
  margin: 1.6rem 0 .8rem;
}
.plane {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--tone, var(--accent));
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
}
.plane b {
  display: block; font-size: .92rem; font-weight: 620; color: var(--text);
  margin-bottom: .12rem;
}
.plane span { font-size: .8rem; color: var(--muted); }
.plane.off { border-left-style: dashed; opacity: .72; }
.coverage-note { font-size: .86rem; color: var(--dim); margin: 0; }

/* ------------------------------------------------------- products submenu
   Opens on hover and on :focus-within, so it works for a mouse and for a
   keyboard without any JavaScript. The parent link still navigates to the
   products index — the submenu is an addition, not a replacement, which is
   why it is not a button.

   On narrow screens the nav is already a stacked list, so the submenu simply
   renders inline and indented: no hover to depend on, nothing hidden behind
   an interaction a touchscreen cannot perform. */
.has-sub { position: relative; }

.subnav {
  list-style: none;
  margin: 0;
  padding: .4rem;
  position: absolute;
  top: 100%;
  left: -.6rem;
  min-width: 15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--el-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
  z-index: 120;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* a forgiving gap between the trigger and the panel, so the pointer can cross
   the border without the menu closing under it */
.has-sub::after {
  content: "";
  position: absolute;
  inset: 100% -.6rem auto -.6rem;
  height: .55rem;
}
.subnav a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  border-bottom: 0;
  font-size: .92rem;
  color: var(--muted);
  white-space: nowrap;
}
.subnav a:hover { background: var(--surface-2); color: var(--text); }
.subnav .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--tone, var(--accent)); flex: none; }
.subnav .soon-tag {
  margin-left: auto; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim);
}

@media (max-width: 900px) {
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none;
    padding: 0 0 .4rem .9rem; min-width: 0;
  }
  .has-sub::after { display: none; }
  .subnav a { padding: .5rem 0; border-bottom: 1px solid var(--border-soft); }
  .subnav a:hover { background: none; }
}

/* ----------------------------------------------------------- screenshots
   Real product UI, on a dark ground that already matches the site, so the
   frame stays out of the way: a hairline border and a soft lift, nothing
   skeuomorphic. Captions carry the claim the image is evidence for. */
.shot {
  margin: 0;
  /* CAPPED AT THE OLD CONTENT WIDTH, AND NOT AS A STYLE CHOICE. `.shot img` is width:100%, so a shot
     sitting directly in a .wrap renders at whatever --maxw is. The source images top out at 1212px
     intrinsic, so widening --maxw would have upscaled 24 of them -- softening product UI full of
     small type, which is the one thing on this site that has to survive being looked at closely.
     Capped and centred, every screenshot renders at or below its natural size exactly as before;
     text, tables and grids get the extra width. */
  max-width: 1140px;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--el-md);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  font-size: .86rem;
  color: var(--muted);
  padding: .7rem .9rem;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-deep);
}
.shot figcaption b { color: var(--text); font-weight: 620; }

.hero .shot { box-shadow: var(--el-lg); }

/* Annotated shots: numbered pins over the image, the same numbers down the
   caption. The pins are drawn in CSS rather than burnt into the PNG so they
   stay sharp at any width and the words stay selectable, translatable and
   readable by a screen reader. Coordinates are percentages of the frame, so
   they hold as the image scales. The pins are decoration — every one of them
   repeats a numbered line below — so they are hidden from assistive tech. */
.shot-frame { position: relative; }
.shot-frame img { display: block; width: 100%; }

/* A 1200px-wide capture squeezed into a phone is back to being texture. Below
   the width where it can be read, the shot holds its own size and pans instead
   — the same bargain the wide tables make, focusable so it works from the
   keyboard as well as the thumb. --w is the capture's own width. */
.shot-pan { overflow-x: auto; }
.shot-pan .shot-frame { width: 100%; }
@media (max-width: 60rem) {
  .shot-pan .shot-frame { width: var(--w); }
}
.pin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  /* the outer ring lifts the pin off whatever product UI sits under it */
  box-shadow: 0 0 0 2px var(--bg-deep), 0 2px 6px rgba(0, 0, 0, .55);
}
.notes {
  list-style: none;
  counter-reset: pin;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
/* The marker is positioned out of flow rather than given its own grid column:
   an <li> laid out as a grid splits "<b>lead.</b> trailing text" into two items
   and squeezes the sentence into a 1.5rem column. */
.notes li {
  counter-increment: pin;
  position: relative;
  margin: 0;
  padding-left: 2.05rem;
}
.notes li::before {
  content: counter(pin);
  position: absolute;
  left: 0; top: .02rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.notes b { color: var(--text); font-weight: 620; }

@media (max-width: 34rem) {
  .pin { width: 1.25rem; height: 1.25rem; font-size: .68rem; }
}

/* One screenshot given the room to carry a section on its own: the image on
   one side, what it proves and what to do next on the other. A tall portrait
   shot stretched edge to edge would only be upscaled, so the image column is
   capped and the argument takes the space instead. */
.shot-feature {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin: 1.6rem 0 0;
}
/* The image column is sized to the capture's own width. Shrinking a screenshot
   to fit a tidy column is how it stopped being readable in the first place, so
   the split only happens once there is room for the image at full size. */
@media (min-width: 72rem) {
  .shot-feature { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); gap: 2.4rem; }
}
/* h4 as well as h3: both screenshot captions on the site are one level deeper than they were,
   because the section heading above them was promoted. Sized here, not by level. */
.shot-feature h3, .shot-feature h4 { margin: 0 0 .5rem; font-size: 1.24rem; }
.shot-feature > div > p { color: var(--muted); }
.shot-feature .notes { margin-top: 1.1rem; }
.shot-feature .cta-under { margin: 1.4rem 0 0; }

/* Cap a shot at the width it was captured at. Stretching a capture past its own
   pixels blurs exactly the small type the crop existed to rescue. */
.shot-cap { max-width: var(--w); margin-inline: auto; }

/* side-by-side pair on wide screens, stacked below */

/* Availability headings in the products grid. The site sells eight products and four of them cannot be
   bought yet, so the grid is grouped by what a visitor can actually do rather than by the narrative the
   suite was originally written around. */
.avail-head {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.1rem; font-weight: 600;
}

/* One line per tier inside a pricing panel. The figures and the capabilities live on two different
   pages by design, and the panels used to send the reader to licensing.html for every question —
   these answer the common one in place so only the buyer who wants the full matrix leaves. */
.tier-lines { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.tier-lines li {
  margin: 0; font-size: .93rem; color: var(--muted);
  padding-left: .9rem; border-left: 2px solid var(--tone, var(--border));
}
.tier-lines b { color: var(--text); font-weight: 620; }

/* Product tone as a class rather than an inline custom property. It was written inline 299
   times across the site — the same eight values, repeated per element, in the markup. As a
   class the tone is set in one place per product and the pages stop carrying it.

   The annotation pins keep their inline --x / --y: those are genuine per-element data and a
   class for each would be worse than the attribute it replaced. */
.tone-sharecare { --tone: var(--t-sharecare); }
.tone-security { --tone: var(--t-security); }
.tone-condaccess { --tone: var(--t-condaccess); }
.tone-webscan { --tone: var(--t-webscan); }
.tone-compliance { --tone: var(--t-compliance); }
.tone-posture { --tone: var(--t-posture); }
.tone-mailtrust { --tone: var(--t-mailtrust); }
.tone-dredd { --tone: var(--t-dredd); }
.tone-soon { --tone: var(--t-soon); }


/* --------------------------------------------------- unreleased-state note

   Sits directly under the lede on the four product pages you cannot buy yet, and is written by
   build_nav.py from the PRODUCTS list. It has to read as a warning rather than as a feature box:
   a page per unreleased product is a better read than the shared roadmap page it replaced, but it
   also looks exactly like a page for something you can order, which is the risk this closes.

   Tone-coloured left edge rather than a filled panel — loud enough to stop the eye, quiet enough
   that it does not read as an advertisement for the thing it is warning you about. */
.state-note {
  margin: 1.4rem 0 0;
  padding: .95rem 1.15rem;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--tone, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 62ch;
}
.state-note:empty { display: none; }
.state-note .state-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin: 0 0 .45rem; font-weight: 620; color: var(--text);
}
.state-note p { color: var(--muted); font-size: .93rem; }

/* ----------------------------------------------------------------- print */

/* site.js collapses the pricing page into tabs by setting [hidden] on every panel but one, and
   the UA sheet's [hidden]{display:none} holds through printing - so Save as PDF produced a
   pricing document containing one product out of seven, with nothing to indicate the other six
   existed. Pricing is the page a buyer prints and circulates for sign-off, which makes a silently
   truncated PDF the worst possible failure on it.

   The tab strip is navigation and means nothing on paper, so it goes. Everything here is scoped to
   [data-tabs-ready], which site.js sets, so with JavaScript off the markup is already expanded and
   none of this has anything to do.

   Un-hiding the panels is not sufficient on its own, because three other rules assume exactly one
   panel is visible at a time and all three had to be undone:

     .tabs-v places every panel at grid-column 2 / grid-row 1 — one cell, seven panels. The sheet's
     own comment says they never fight for space because only one lacks [hidden]. Un-hide them and
     they superimpose. A narrow-screen breakpoint at 820px happened to save portrait output, but
     landscape Letter/A4, A3, Tabloid or a reduced print Scale all exceed it and printed six
     products on top of a seventh.

     margin-bottom: 0 and the suppressed h3::before tone dot exist for the same single-panel reason.
     Without them restored the seven products ran together with a measured 0px join and no colour
     marker — the tab strip having been the only other thing distinguishing them.

   Colours are set because the sheet is dark-only and browsers print colour but not backgrounds:
   #e5e7eb text on the printer's white is 1.24:1. That was true before this block existed, but a
   printable pricing PDF is only a deliverable now that the panels actually print. */
@media print {
  [data-tabs-ready] [role="tabpanel"][hidden] { display: block !important; }
  [data-tabs-ready] .tablist { display: none; }
  [data-tabs-ready].tabs-v { display: block; }
  [data-tabs-ready] .product-licence { margin-bottom: 3.2rem; break-inside: avoid; }
  [data-tabs-ready] .product-licence h3::before { display: inline-block; }

  body { background: #fff; color: #111; }
  a { color: #111; }
  .muted, .dim, .small, td, .note p, .note li { color: #333; }
  h1, h2, h3, h4, th { color: #000; }
}