/* =============================================================================
   Scitools — shared stylesheet for the Understand product pages.

   Every page under pages/ other than the Understand landing page and Onboard
   loads css/style.css followed by this file. style.css carries the tokens,
   buttons, cards, sitewide navbar, footer and reveal animations; this file
   adds two things:

     0. The Understand product nav, copied from understand.css so these pages
        carry the same SciTools + Understand double bar. It is a copy rather
        than a shared import because understand.css is a finished, verified
        file and splitting it carried more risk than duplicating ~11KB that
        is never loaded alongside it. Consolidating the two is worth doing
        once the conversion settles.

     1. A library of section patterns (.p-*) that the converted pages compose
        from, so forty-odd pages stay consistent without forty stylesheets.

   Vanilla CSS, system fonts, no external requests. Anything theme-sensitive
   is written against a token rather than a literal colour, so light and dark
   both work. Breakpoints match the rest of the site: monitor (>=1440),
   laptop (1024-1439), tablet (640-1023), mobile (<640).

   Pages using this file set <body class="u-page p-page"> — u-page because the
   nav rules below are scoped to it, p-page for the section library.

   Sections:
     0. Product nav (copied)
     1. Page hero
     2. Feature rows and card grids
     3. Tables
     4. Quotes and proof
     5. Case study cards
     6. FAQ, prose and forms
     7. Closing CTA
     8. Breakpoints
   ============================================================================= */

/* -----------------------------------------------------------------------
   0. Product nav — copied from css/understand.css, see note above.
   ----------------------------------------------------------------------- */
/* =============================================================================
   Understand — product landing page.

   Page-specific styles only. Everything structural (tokens, buttons, cards,
   navbar, footer, logo strip, reveal animations) comes from css/style.css;
   this file adds the hero composition and the workbench mock.

   Vanilla CSS, system fonts, no external requests. Light and dark are both
   driven by the token layer — anything theme-sensitive is written against a
   token rather than a literal color.

   Sections:
     0. Product nav
     1. Hero layout
     2. Hero type + rotator
     3. Workbench mock
     4. Hero logo strip
     5. Breakpoints
   ============================================================================= */

/* -----------------------------------------------------------------------
   0. Product nav

   Same arrangement Onboard uses — the sitewide bar scrolls away, this one
   sticks — but built on the sitewide tokens rather than a private palette,
   so it stays part of the system while reading as Understand's own bar:
   site blue instead of Onboard green, pill-shaped actions instead of 14px
   rounded rectangles, and a mono release pill as a nod to the product.
   ----------------------------------------------------------------------- */

/* The sitewide navbar is sticky by default; on this page the product bar is
   the one that pins, so the sitewide bar reverts to normal flow. */
.u-page .navbar { position: relative; z-index: 1000; }
.u-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: linear-gradient(180deg, rgba(var(--card-rgb), 0.9), rgba(var(--surface-rgb), 0.82));
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--navbar-highlight);
}
.u-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.u-nav-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.u-nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.u-nav-brand img { height: 27px; width: auto; }
/* A 27px logo is under the 44px touch target; the negative margin hands the
   space back to the layout so the bar does not grow. */
@media (max-width: 860px) {
  .u-nav-brand { min-height: 44px; margin-block: -4px; }
}
.u-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  flex-shrink: 0;
}
.u-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.u-nav-links a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
  transition: color 0.15s var(--ease);
}
.u-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transition: width 0.2s var(--ease);
}
.u-nav-links a:hover { color: var(--text-primary); }
.u-nav-links a:hover::after { width: 100%; }
/* Features dropdown — sits in the link row, so its trigger is styled as one of
   the links (same size, weight and hover underline) rather than as a button.
   The panel borrows the split menu's surface so the two read as one family. */
.u-nav-drop { position: relative; display: flex; align-items: center; }
.u-nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.u-nav-drop-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  transition: width 0.2s var(--ease);
}
.u-nav-drop-trigger:hover,
.u-nav-drop.is-open .u-nav-drop-trigger { color: var(--text-primary); }
.u-nav-drop-trigger:hover::after { width: calc(100% - 14px); }
.u-nav-drop-trigger:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; }
.u-nav-drop-chev {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.u-nav-drop.is-open .u-nav-drop-chev { transform: rotate(180deg); }
.u-nav-drop-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: -0.75rem;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.u-nav-drop.is-open .u-nav-drop-panel { opacity: 1; visibility: visible; transform: none; }
.u-nav-drop-panel a {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.u-nav-drop-panel a:hover { background: var(--navbar-highlight); color: var(--text-primary); }
.u-nav-drop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding-top: 0.6rem !important;
  border-top: 1px solid var(--border);
  border-radius: 0 !important;
  color: var(--accent-1) !important;
  font-weight: 700;
}
.u-nav-drop-foot:hover { background: none !important; }
.u-nav-drop-foot svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.15s var(--ease); }
.u-nav-drop-foot:hover svg { transform: translateX(3px); }
/* In the hamburger panel the same list is simply indented under Features. */
.u-nav-mobile-sub { display: flex; flex-direction: column; }
.u-nav-mobile .u-nav-mobile-sub a {
  padding-left: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.u-nav-right { display: flex; align-items: center; gap: 0.85rem; }
/* Split action — the shape Onboard established, restyled to a pill and the
   site's blue, offering install targets rather than demo projects. */
.u-nav-get-btn {
  display: flex;
  flex-shrink: 0;
  text-decoration: none;
  align-items: center;
  gap: 0.6rem;
  background: rgba(var(--accent-1-rgb), 0.12);
  border: 1px solid rgba(var(--accent-1-rgb), 0.35);
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.u-nav-get-btn:hover {
  background: rgba(var(--accent-1-rgb), 0.2);
  border-color: var(--accent-1);
}
.u-nav-get-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.u-nav-get-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.u-nav-get-kicker {
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  line-height: 1;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .u-nav-get-kicker { color: #047857; }
}
:root[data-theme="light"] .u-nav-get-kicker { color: #047857; }
.u-nav-get-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* Mobile section menu */
.u-nav-menu {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.u-nav-mobile {
  display: none;
  flex-direction: column;
  padding: 0.5rem 1.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.u-nav-mobile.is-open { display: flex; }
.u-nav-mobile a {
  padding: 0.8rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.u-nav-mobile a:hover { color: var(--text-primary); }
/* Selector carries the element too: `.u-nav-mobile a` above would otherwise
   out-specify a lone class and repaint the button's label muted. */
.u-nav-mobile a.u-nav-mobile-cta {
  margin-top: 1rem;
  border-bottom: none;
  color: #fff;
  justify-content: center;
}
.u-nav-mobile a.u-nav-mobile-cta:hover { color: #fff; }
/* Anchor targets clear the pinned product bar. */
/* Anchor targets clear whichever bar is sticky: the product nav on a
   .u-page, the sitewide navbar on a page without one (pricing). */
.u-page [id],
.p-page [id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: reduce) {
  .u-nav-links a::after { transition: none; }
}
@media (min-width: 1024px) {
  /* Brand, section links and the trial action read as one centred cluster.
     Only here: below this the links collapse into the hamburger, and a bare
     wordmark centred next to a menu button looks like a mistake. */
  .u-nav-inner { justify-content: center; gap: 1.75rem; }
}
@media (max-width: 1023px) {
  .u-nav-links, .u-nav-divider, .u-nav-drop { display: none; }
  .u-nav-menu { display: flex; }
}
@media (max-width: 720px) {
  .u-nav-inner { padding: 0.5rem 1.25rem; }
  .u-nav-mobile { padding: 0.5rem 1.25rem 1.25rem; }
  /* A phone bar fits the wordmark and one control. The split action folds
     into the panel below, where it becomes the full-width trial button. */
  .u-nav-get-btn { display: none; }
}
:root[data-theme="light"] .u-page .eyebrow,
:root[data-theme="light"] .u-page .u-qa-num { color: #047857; }
:root[data-theme="light"] .u-page .u-vision-heading .eyebrow { color: #1D4ED8; }
:root[data-theme="light"] .u-page .u-view-btn.is-active .u-view-btn-name,
:root[data-theme="light"] .u-page .u-tag.is-read { color: #1D4ED8; }

/* -----------------------------------------------------------------------
   1. Page hero

   Converted pages open on copy rather than the landing page's 50/50 split:
   a short eyebrow, the h1, one paragraph of lede, and a button row. The
   media variant (.p-hero.has-media) puts a screenshot or diagram beside it
   on laptop and up, and below it on tablet and down.
   ----------------------------------------------------------------------- */
.p-hero {
  position: relative;
  padding-top: 4.5rem;
  padding-bottom: 3.5rem;
  overflow: hidden;   /* clips the glow blob below, so it can't force
                         horizontal overflow on a narrow viewport */
}
.p-hero-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 760px;
  height: 420px;
  transform: translateX(-55%);
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.16;
  pointer-events: none;
  background: radial-gradient(circle, var(--accent-1), var(--accent-2));
}
.p-hero > .container { position: relative; }
.p-hero h1 { margin-bottom: 1.1rem; }
.p-hero .lead { max-width: 62ch; }
.p-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* Without media the copy is centred rather than left-aligned. Left-aligned
   with an empty right half reads as a missing image; centred reads as a
   deliberate text hero. The media variant below re-aligns it left. */
.p-hero:not(.has-media) > .container { text-align: center; }
.p-hero:not(.has-media) .lead { margin-left: auto; margin-right: auto; }
.p-hero:not(.has-media) .p-hero-actions { justify-content: center; }
.p-hero-note { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--text-muted); }

.p-hero.has-media > .container {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.p-hero-media {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.p-hero-media img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; }

/* -----------------------------------------------------------------------
   2. Feature rows and card grids
   ----------------------------------------------------------------------- */

/* Alternating copy/media rows. .is-flipped swaps the columns; the markup
   order stays copy-then-media either way so the reading order on a phone
   (where they stack) is always copy first. */
.p-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.p-row + .p-row { margin-top: clamp(3.5rem, 6vw, 6rem); }
/* Grid items default to min-width:auto, so anything with a wide min-content
   size inside a row (a nowrap button, a long code token) pushes the column
   past the viewport once the row collapses to one column. */
.p-row-copy,
.p-row-media { min-width: 0; }
.p-row.is-flipped .p-row-copy { order: 2; }
.p-row.is-flipped .p-row-media { order: 1; }
.p-row-copy h3 { margin-bottom: 0.85rem; }
.p-row-copy p { margin-bottom: 0.85rem; }
.p-row-copy p:last-child { margin-bottom: 0; }
.p-row-media {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-md);
}
/* Screenshots coming across from the old site are all shapes — some are wide
   diagrams, some are tall context menus 485px across and 870 high. Capping the
   height and letterboxing keeps any of them from turning a two-column row into
   a 900px-tall column with three lines of copy beside it. */
.p-row-media img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  object-position: center;
  display: block;
}
.p-row-media.is-tall img { max-height: 620px; }
.p-row-media figcaption {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Checklist — the tick lists the old pages used, without the literal ✓
   character, so the mark is a themed shape rather than a glyph that
   renders differently on every platform. */
.p-check { display: grid; gap: 0.85rem; margin: 1.75rem 0 0; }
.p-check li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.p-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: rgba(var(--accent-2-rgb), 0.16);
}
.p-check li::after {
  content: "";
  position: absolute;
  left: 0.33rem;
  top: 0.68rem;
  width: 0.38rem;
  height: 0.2rem;
  border-left: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
}
.p-check b { color: var(--text-primary); font-weight: 600; }

/* Card grid — logo or icon, title, body. Used for supported languages,
   plugins, graph types and anywhere the old page had a tile wall. */
.p-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-tile-mark {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  background: rgba(var(--accent-1-rgb), 0.12);
  flex-shrink: 0;
}
.p-tile-mark.is-accent-2 { background: rgba(var(--accent-2-rgb), 0.14); }
/* Vendor logos come in every colour and several are near-white, so they get
   a neutral plate rather than the accent wash, and are capped by height so
   wide wordmarks and square icons read at a similar weight. */
.p-tile-mark.is-logo { background: var(--navbar-highlight); }
.p-tile-mark img { max-width: 1.9rem; max-height: 1.9rem; width: auto; height: auto; }
.p-tile-mark svg { width: 1.4rem; height: 1.4rem; color: var(--accent-1); }
.p-tile h3 { font-size: 1.0625rem; margin-bottom: 0.45rem; }
.p-tile h4 { margin-bottom: 0.4rem; }
.p-tile p { font-size: 0.9375rem; margin: 0; }
.p-tile p + p { margin-top: 0.6rem; }
.p-tile dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 0.9rem;
}
.p-tile dd { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; }
/* <dl> is not in style.css's reset, so a definition list inside a tile would
   otherwise pick up the browser's default 1em block margins. */
.p-tile dl { margin: 0; }

/* Compact numbered steps, for the "how it works" strips. */
.p-steps { counter-reset: p-step; display: grid; gap: 1.5rem; }
.p-step { position: relative; padding-left: 3.25rem; }
.p-step::before {
  counter-increment: p-step;
  content: counter(p-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-step h4 { margin-bottom: 0.35rem; }
.p-step p { font-size: 0.9375rem; margin: 0; }

/* -----------------------------------------------------------------------
   3. Tables — metric lists, language support matrices, rule counts.
   The wrapper scrolls rather than the page, so a wide table never causes
   horizontal overflow on the document itself.
   ----------------------------------------------------------------------- */
.p-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow-x: auto;
}
.p-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.p-table caption {
  text-align: left;
  padding: 1.1rem 1.25rem 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.p-table th,
.p-table td {
  text-align: left;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.p-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
  z-index: 1;
}
.p-table tbody tr:last-child td { border-bottom: none; }
.p-table tbody tr:hover { background: var(--navbar-highlight); }
.p-table td:first-child { color: var(--text-primary); font-weight: 600; }
.p-table code { font-size: 0.8125rem; }
.p-table-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.p-table-filter .input { min-width: 240px; flex: 1 1 240px; }
.p-table-count { font-size: 0.8125rem; color: var(--text-muted); }

/* -----------------------------------------------------------------------
   4. Quotes and proof
   ----------------------------------------------------------------------- */
.p-quote {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-quote blockquote {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
}
.p-quote-who { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.p-quote-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--navbar-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.p-quote-logo img { max-width: 1.7rem; max-height: 1.7rem; width: auto; height: auto; }
.p-quote-name { font-size: 0.875rem; font-weight: 700; }
.p-quote-org { font-size: 0.8125rem; color: var(--text-muted); }

/* Pull quote — one large quotation standing alone between sections. */
.p-pullquote {
  border-left: 3px solid var(--accent-1);
  padding: 0.35rem 0 0.35rem 1.75rem;
  margin: 0;
  max-width: 62ch;
}
.p-pullquote p {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-primary);
}
.p-pullquote footer { margin-top: 0.85rem; font-size: 0.875rem; color: var(--text-muted); }

/* -----------------------------------------------------------------------
   5. Case study cards
   ----------------------------------------------------------------------- */
.p-case {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-case-logo { height: 2.25rem; margin-bottom: 1.25rem; display: flex; align-items: center; }
.p-case-logo img { max-height: 2.25rem; max-width: 9rem; width: auto; }
.p-case blockquote { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }
.p-case-meta { margin-top: auto; padding-top: 1rem; font-size: 0.8125rem; color: var(--text-muted); }

/* -----------------------------------------------------------------------
   6. FAQ, prose and forms
   ----------------------------------------------------------------------- */
.p-faq { display: grid; gap: 0.75rem; }
/* Two columns, one product each. They stay two separate .p-faq grids rather
   than one grid spanning both: a single grid would interleave the products'
   questions row by row, and the two lists aren't the same length. */
.p-faq-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.p-faq-col { min-width: 0; }
.p-faq-col-title {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
/* Stacks below 1000px rather than the usual 860px. Between those two widths
   the columns are narrow enough that a summary wraps to two lines on one side
   and not the other, which -- now that the columns are independent -- leaves
   the pairs up to 45px out of step. One full-width column reads better there
   anyway. At 1000px and up every summary fits on one line and the two columns
   line up on their own. */
@media (max-width: 999px) {
  .p-faq-split { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* The two columns used to share the split's rows through subgrid, so each
   product's question sat level with its opposite number even when one summary
   wrapped to two lines. That coupling had to go: sharing a row means the row
   is as tall as its tallest item, so opening a question on one side stretched
   its closed partner on the other to match -- a 60px card became 200px of
   mostly empty space. Removed 2026-10-12.

   The columns are now two independent grids. .p-faq-split keeps
   align-items: start (above), so neither column stretches to the other's
   height, and each one expands on its own. Losing subgrid means nothing keeps
   the pairs level if one summary wraps -- so the split now stacks below
   1000px (see the query above), which is the only range where that happened.
   Above it the rows line up by themselves and opening one side moves nothing
   on the other. */
.p-faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}
.p-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.35rem;
  position: relative;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after {
  content: "";
  position: absolute;
  right: 1.35rem;
  top: 1.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.p-faq details[open] summary::after { transform: rotate(-135deg); }
.p-faq details > p,
.p-faq details > ul { padding: 0 1.35rem 1.25rem; margin: 0; font-size: 0.9375rem; }

/* Long-form legal and policy text. Capped measure, generous rhythm. */
/* break-word, not anywhere: it only breaks a word that would otherwise
   overflow, which here is the bare https://tools.google.com/dlpage/gaoptout
   URL in the privacy policy. Normal prose still wraps at spaces. */
.p-prose { max-width: 72ch; overflow-wrap: break-word; }
.p-prose h2 { margin: 2.75rem 0 0.9rem; font-size: 1.375rem; }
.p-prose h2:first-child { margin-top: 0; }
.p-prose h3 { margin: 1.75rem 0 0.6rem; font-size: 1.0625rem; }
.p-prose p { margin-bottom: 1rem; }
.p-prose ul, .p-prose ol { margin: 0 0 1rem 1.25rem; list-style: disc; }
.p-prose ol { list-style: decimal; }
.p-prose li { color: var(--text-muted); line-height: 1.7; margin-bottom: 0.35rem; }
.p-prose a { color: var(--accent-1); font-weight: 600; }

/* Sticky table of contents beside long prose. */
.p-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; align-items: start; }
.p-toc { position: sticky; top: 96px; display: grid; gap: 0.5rem; }
.p-toc-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.p-toc a {
  font-size: 0.875rem;
  color: var(--text-muted);
  padding: 0.3rem 0 0.3rem 0.75rem;
  border-left: 2px solid var(--border);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.p-toc a:hover { color: var(--text-primary); border-left-color: var(--accent-1); }

/* Forms. The converted pages keep the original field names and POST targets
   so the existing PHP handlers keep working; only the chrome changes. */
.p-form { display: grid; gap: 0; max-width: 560px; }
.p-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.p-form-actions { margin-top: 0.75rem; }
.p-form-note { margin-top: 1rem; font-size: 0.8125rem; color: var(--text-muted); }
.p-form-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
/* Once a multi-field form has gone through, only its confirmation stays. */
.p-form.is-sent > :not(.form-status) { display: none; }
.p-form.is-sent > .form-status { margin-top: 0; }

/* Pricing quote: copy beside the form, the form panel taking the wider column. */
.p-request { align-items: start; }
.p-request .p-row-copy { padding-top: 0.5rem; }
.p-request .p-row-copy h2 { margin: 0.35rem 0 1rem; }
.p-request .p-row-copy .lead { margin-bottom: 1.25rem; }
.p-request .p-form { max-width: none; }
.p-request > .p-form-panel { min-width: 0; }
.p-request .p-form-grid { align-items: end; } /* a wrapped label keeps paired inputs level */

/* Email capture in the primary slot of a hero or closing-CTA action row
   (custom CodeChecks, DO-330). It takes a line of its own and the secondary
   button follows underneath; centered rows keep both centered. */
.p-capture { flex: 0 0 100%; min-width: 0; }
.p-capture > .inline-form-row,
.p-capture > .form-status { max-width: 32rem; }
.p-hero:not(.has-media) .p-capture > *,
.p-cta-row .p-capture > * { margin-inline: auto; }
.p-hero:not(.has-media) .p-capture .form-status,
.p-cta-row .p-capture .form-status { justify-content: center; text-align: center; }

/* -----------------------------------------------------------------------
   7. Closing CTA — same band the Understand page ends on, shared here so
   every converted page closes identically.
   ----------------------------------------------------------------------- */
.p-cta-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(900px circle at 50% -25%, rgba(var(--accent-1-rgb), 0.18), transparent 62%),
    var(--card);
  padding: clamp(2.75rem, 5vw, 4.25rem) clamp(1.5rem, 4vw, 3rem);
}
.p-cta-panel h2 { margin-bottom: 0.9rem; }
.p-cta-panel p.lead { max-width: 58ch; margin: 0 auto; }
.p-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2.1rem;
}
.p-cta-note { margin-top: 1.35rem; font-size: 0.8125rem; color: var(--text-muted); }

/* Section-level "learn more" link, matching the Understand page's. */
/* .btn is nowrap sitewide, which is right for "Start free trial" but not for
   the descriptive labels these section links carry ("See what CodeCheck
   enforces in these languages" measured 415px against a 390px viewport).
   Inside the page-level CTA wrappers a long label wraps instead. */
.p-section-cta .btn,
.p-hero-actions .btn,
.p-cta-row .btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}
.p-section-cta { display: flex; justify-content: center; margin-top: 2.75rem; }
.p-section-cta .btn svg { width: 14px; height: 14px; transition: transform 0.15s var(--ease); }
.p-section-cta .btn:hover svg { transform: translateX(3px); }

/* -----------------------------------------------------------------------
   8. Breakpoints
   ----------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-hero.has-media > .container { grid-template-columns: 1fr; gap: 2.5rem; }
  .p-row,
  .p-row.is-flipped { grid-template-columns: 1fr; gap: 2rem; }
  /* Stacked, the media always follows its copy regardless of .is-flipped. */
  .p-row.is-flipped .p-row-copy,
  .p-row.is-flipped .p-row-media { order: initial; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr) and cannot
     shrink below the table of contents' min-content width, which pushed the
     whole legal page 34px off a 320px screen. Same trap as .p-form-grid. */
  .p-doc { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .p-toc { position: static; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .p-toc a { border-left: none; padding-left: 0; }
}

@media (max-width: 639px) {
  .p-hero { padding-top: 3rem; }
  .p-hero-actions .btn { flex: 1 1 100%; }
  /* minmax(0,…), not 1fr: a bare 1fr floors the track at the widest
     item's min-content width, and the country select's longest option
     is wider than a 320px screen. */
  .p-form-grid { grid-template-columns: minmax(0, 1fr); }
  .p-table th, .p-table td { padding: 0.65rem 0.9rem; }
  .p-step { padding-left: 2.85rem; }
}

@media (max-width: 460px) {
  .p-cta-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .p-faq summary::after,
  .p-section-cta .btn svg { transition: none; }
}

/* Light-mode legibility, same treatment as the Understand page: both brand
   accents are mid-tones tuned for the dark surface and fall below 4.5:1 on
   the pale one at small sizes. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .p-page .eyebrow,
  :root:not([data-theme="dark"]) .p-page .p-step::before { color: #047857; }
  :root:not([data-theme="dark"]) .p-page .p-prose a,
  :root:not([data-theme="dark"]) .p-page .card-link { color: #1D4ED8; }
}
:root[data-theme="light"] .p-page .eyebrow,
:root[data-theme="light"] .p-page .p-step::before { color: #047857; }
:root[data-theme="light"] .p-page .p-prose a,
:root[data-theme="light"] .p-page .card-link { color: #1D4ED8; }

/* -----------------------------------------------------------------------
   9. Pricing band — three product panes sitting over the quote form.

   The top of the pricing page is one band holding Understand, Onboard and
   the free tier as three cells of a single panel, with the quote section
   underneath, positioned so only its top edge shows above the fold.

   Understand and Onboard are told apart by their backgrounds rather than by
   extra chrome: Understand carries the faint graph grid its own page is
   built around, Onboard the layered glow orbs from css/onboard.css. The
   free cell is deliberately plain — that is what makes the other two read.
   All of it is gradients and masks, so no new assets or requests.
   ----------------------------------------------------------------------- */

/* --- the fold ---
   The band is floored at viewport minus the navbar stack minus the peek, so
   the quote section's top edge lands --pr-peek above the bottom of the
   viewport. --pr-chrome is measured in js/main.js, because dismissing the
   announcement bar changes it. Below 1024px the cells stack and are taller
   than a viewport anyway, so the floor is dropped and the page just flows. */
:root { --pr-chrome: 190px; --pr-peek: 10rem; }

.pr-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--pr-chrome) - var(--pr-peek));
  /* The content is centred, so trimming one side alone only moves it half as
     far. The 20px comes off the top and goes back onto the bottom: the band
     keeps its height, the peek below is untouched, and the heading sits a
     true 20px higher. */
  padding-top: calc(clamp(1.75rem, 3.5vw, 3rem) - 1.25rem);
  padding-bottom: calc(clamp(1.75rem, 3.5vw, 3rem) + 1.25rem);
}
@supports not (height: 100svh) {
  .pr-band { min-height: calc(100vh - var(--pr-chrome) - var(--pr-peek)); }
}
@media (max-width: 900px) {
  .pr-band { min-height: 0; padding-block: var(--section-py-sm); }
}

/* --- band heading: two columns, so it costs as little height as possible --- */
.pr-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.pr-head h1 { margin: 0.3rem 0 0; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1; }
.pr-head p { color: var(--text-muted); margin: 0; }
@media (max-width: 860px) { .pr-head { grid-template-columns: 1fr; gap: 0.75rem; } }

/* --- the panel: three cells joined, so they read as one price list --- */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* clips each cell's wash to the panel's rounded corners */
}
@media (max-width: 1023px) { .pr-plans { grid-template-columns: 1fr; } }

.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0; /* a long price would otherwise set the column's min width */
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border-left: 1px solid var(--border);
}
.pr-plan:first-child { border-left: none; }
@media (max-width: 1023px) {
  .pr-plan { border-left: none; border-top: 1px solid var(--border); }
  .pr-plan:first-child { border-top: none; }
}

/* min-height so the badge on one cell cannot drop its price a row below the
   other two — the three prices have to sit on one line. */
.pr-plan-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; min-height: 34px; }
.pr-plan-name { font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; }
/* Understand and Onboard are shown as their own wordmarks; the free tier has
   no mark, so it keeps the text name. Both wordmarks carry theme variants —
   the Understand one's "by SciTools" line is white and vanishes on a light
   panel, and Onboard's is white-on-transparent — swapped the same way the
   sitewide navbar logo is (.nav-logo .logo-dark/.logo-light in style.css). */
.pr-plan-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.pr-logo-light { display: none; }
:root[data-theme="light"] .pr-logo-dark { display: none; }
:root[data-theme="light"] .pr-logo-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pr-logo-dark { display: none; }
  :root:not([data-theme="dark"]) .pr-logo-light { display: block; }
}
/* "Starting at" rides above the number rather than beside it, so the figure
   keeps the weight the other two cells give theirs. */
/* Inline, not block: on its own line it added a row to the tallest cell,
   which pushed the band past its floor and ate into the peek. */
.pr-price-prefix {
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-right: 0.4rem;
}
.pr-plan-price { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 680; letter-spacing: -0.025em; line-height: 1.15; }
.pr-plan-price .pr-unit {
  display: block;
  font-size: 0.8125rem;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.pr-plan-desc { color: var(--text-muted); font-size: 0.9375rem; margin: 0.9rem 0 0; }
.pr-plan-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pr-plan-list li { position: relative; padding-left: 1.5rem; font-size: 0.875rem; color: var(--text-primary); }
/* Inline mask: no network request, and the tick follows the cell's accent. */
.pr-plan-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 0.95rem; height: 0.95rem;
  background: var(--pr-accent);
  -webkit-mask: var(--pr-tick) center / contain no-repeat;
  mask: var(--pr-tick) center / contain no-repeat;
}
.pr-plan-cta { margin-top: auto; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pr-plan-cta .btn { flex: 1 1 auto; justify-content: center; }
.pr-plan-note { margin: 0.7rem 0 0; font-size: 0.75rem; color: var(--text-muted); }

:root {
  --pr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- per-product identity ---
   Onboard's mint is darkened in light mode: the pale value it uses on its own
   dark page drops below contrast on white. The rgb triplet is left alone
   because it is only ever used translucent, in the glows. */
:root {
  --pr-mint: #82e3b1;
  --pr-mint-rgb: 130, 227, 177;
  --pr-mint-on: #06241a;
  --pr-sky: 126, 162, 255;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --pr-mint: #17946b; --pr-mint-on: #ffffff; }
}
:root[data-theme="light"] { --pr-mint: #17946b; --pr-mint-on: #ffffff; }

.pr-plan[data-p="understand"] { --pr-accent: var(--accent-1); --pr-accent-rgb: var(--accent-1-rgb); }
.pr-plan[data-p="onboard"]    { --pr-accent: var(--pr-mint); --pr-accent-rgb: var(--pr-mint-rgb); }
.pr-plan[data-p="free"]       { --pr-accent: var(--text-muted); }
.pr-plan[data-p="free"] .pr-plan-list li::before { opacity: 0.55; }

/* Onboard's actions take its own 8px corners rather than the sitewide pill. */
.pr-plan[data-p="onboard"] .btn-primary { background: var(--pr-mint); color: var(--pr-mint-on); border-radius: 8px; }
.pr-plan[data-p="onboard"] .btn-outline { border-radius: 8px; }
.pr-plan[data-p="free"] .btn-primary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }

/* --- the washes ---
   .pr-plan-wash is an empty span, so the grid and the orbs can be masked and
   layered without touching the cell's own background or its content. */
.pr-plan-wash { position: absolute; inset: 0; pointer-events: none; }
.pr-plan > *:not(.pr-plan-wash) { position: relative; z-index: 1; }

.pr-plan[data-p="understand"]::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 320px at 22% -12%, rgba(var(--accent-1-rgb), 0.15), transparent 72%);
}
.pr-plan[data-p="understand"] .pr-plan-wash {
  background-image:
    linear-gradient(rgba(var(--accent-1-rgb), 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-1-rgb), 0.17) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(140% 105% at 50% 0%, #000 18%, transparent 85%);
  mask-image: radial-gradient(140% 105% at 50% 0%, #000 18%, transparent 85%);
}
.pr-plan[data-p="onboard"] .pr-plan-wash {
  background:
    radial-gradient(400px 260px at 88% -12%, rgba(var(--pr-mint-rgb), 0.34), transparent 70%),
    radial-gradient(360px 260px at 4% 112%, rgba(var(--pr-sky), 0.26), transparent 70%);
}

/* --- quote section: copy left, form right, opening flush so the form panel's
   own top edge is the first thing under the fold line --- */
.pr-quote { padding-block: 0 clamp(2.5rem, 5vw, var(--section-py)); }
@media (max-width: 1023px) { .pr-quote { padding-top: var(--section-py-sm); } }
.pr-quote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 1023px) { .pr-quote-row { grid-template-columns: 1fr; } }
.pr-quote-copy h2 { margin: 0.35rem 0 1rem; }
.pr-quote-copy .lead { margin-bottom: 1.1rem; }
.pr-quote-points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.pr-quote-points li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--text-muted); }
.pr-quote-points li::before {
  content: "";
  position: absolute; left: 0; top: 0.3em;
  width: 0.95rem; height: 0.95rem;
  background: var(--accent-1);
  -webkit-mask: var(--pr-tick) center / contain no-repeat;
  mask: var(--pr-tick) center / contain no-repeat;
}
/* Required and optional fields are split into labelled groups. A fieldset
   has an intrinsic min-width that would stop the grid inside it from
   shrinking, hence min-width: 0. The legend is display:block rather than
   floated: the field rows below it are grid containers, and a grid container
   establishes its own formatting context, so it will not overlap a float --
   it gets placed beside it instead, which pushed every input off-screen. */
.pr-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.pr-group + .pr-group { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.pr-group-legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* The ring that marks the field a plan button just filled in. Animating
   box-shadow and border-color only, so nothing reflows; the class is pulled
   back off in JS after it finishes, which is also what ends it for anyone on
   reduced motion, where there is no animation to run out. */
.field.pr-flagged .input {
  animation: pr-flag 2.6s var(--ease) forwards;
}
@keyframes pr-flag {
  0%, 55% { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(var(--accent-1-rgb), 0.3); }
  100%    { border-color: var(--border); box-shadow: 0 0 0 3px rgba(var(--accent-1-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .field.pr-flagged .input {
    animation: none;
    border-color: var(--accent-1);
    box-shadow: 0 0 0 3px rgba(var(--accent-1-rgb), 0.3);
  }
}

/* The third route out of the quote section, under the form's copy: the form
   is the default, this is for anyone who would rather talk first. Sits
   between the two notes, so it reads as the answer to "rather talk?" rather
   than as a competing call to action. */
.pr-quote-alt { margin: 0.6rem 0 0.9rem; }
.pr-quote-alt .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* the product select spans both columns of the form's two-up grid */
.pr-form-full { grid-column: 1 / -1; }

/* --- short viewports ---
   The floor only guarantees a minimum. If the cells' natural height runs past
   it the quote section is pushed below the fold and the peek is lost, which is
   what a 1440x900 laptop does, so the band's rhythm tightens until it fits. */
@media (min-width: 1024px) and (max-height: 960px) {
  .pr-band { padding-top: 0; padding-bottom: 2.5rem; }
  .pr-head { margin-bottom: 1.25rem; }
  .pr-head h1 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin: 0.3rem 0 0.5rem; }
  .pr-plan { padding: 1.25rem; }
  .pr-plan-top { margin-bottom: 0.65rem; }
  .pr-plan-price { font-size: clamp(1.375rem, 1.9vw, 1.625rem); }
  .pr-plan-desc { margin-top: 0.7rem; font-size: 0.9rem; }
  .pr-plan-list { margin-top: 0.85rem; gap: 0.35rem; }
  .pr-plan-cta { padding-top: 1rem; }
}

/* ---------------------------------------------------------------------------
   Touch target sizes (added 2026-10-09)

   On a 320px screen the audit found 503 non-inline links and buttons under
   40px tall. These are the shared ones. 44px is the usual floor; where an
   element's painted size is deliberate (the logo, the social circles) the
   rule grows the hit area rather than the artwork, except where the artwork
   IS the hit area and growing it is harmless.

   Inline text links are left alone on purpose — the target-size guidance
   exempts a link inside a run of text, and padding them out would break the
   line spacing of the paragraphs they sit in.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Table-of-contents links on the legal pages were 31px. They are already
     flex items in a wrapping row, so this only changes their height. */
  .p-toc a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The product-nav hamburger. It is declared in both pages.css and
     understand.css; the 43 pages that carry the product bar load this file,
     not understand.css, so the rule has to exist in both. */
  .u-nav-menu { min-height: 44px; min-width: 44px; }
}

/* =============================================================================
   10. DO-330 qualification kits — layout carried over from the original
   scitools.com page so the rebuilt page keeps its shape.

   The original leans on asymmetric two-column sections: an eyebrow + headline
   rail on the left with the substance to its right, rather than the centered
   stack the rest of the converted pages use. Everything here is scoped to
   .dq-* so it cannot leak into those pages.

   Ratios below are the original's, converted from px gaps to rem.
   ============================================================================= */

/* ---- Hero: copy rail + artifact card ---- */
.dq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 3rem 4rem;
  align-items: center;
}
.dq-hero-copy > .eyebrow { display: block; margin-bottom: 0.9rem; }
.dq-hero-copy h1 { margin-bottom: 1.1rem; }
.dq-hero-copy .lead { margin-bottom: 1.6rem; }
.dq-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.dq-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.dq-hero-form { max-width: 30rem; }
.dq-hero-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}
.dq-hero-jump:hover { color: var(--accent-1); border-bottom-color: currentColor; }
.dq-hero-jump svg { width: 0.9rem; height: 0.9rem; }

.dq-artifact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  min-width: 0;
}
.dq-artifact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.35rem 0.9rem;
}
.dq-artifact-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dq-status-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
}
.dq-doc-list { display: grid; gap: 0.6rem; }
.dq-doc-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-rgb), 0.55);
}
.dq-doc-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-1);
  font-variant-numeric: tabular-nums;
}
.dq-doc-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); min-width: 0; }
.dq-doc-code {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.dq-artifact-foot {
  padding: 1rem 0.35rem 0.2rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ---- Credibility: headline rail + three ruled columns ---- */
.dq-cred-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(180px, 1fr));
  gap: 1.9rem;
  align-items: start;
}
.dq-cred-intro { min-width: 0; }
.dq-cred-intro .eyebrow { display: block; margin-bottom: 0.7rem; }
.dq-cred-intro h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.dq-proof { border-left: 1px solid var(--border-strong); padding-left: 1.4rem; min-width: 0; }
.dq-proof h3 { font-size: 1rem; margin-bottom: 0.45rem; }
.dq-proof p { margin: 0; font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* ---- Intro: headline rail + body ---- */
.dq-intro-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 2.6rem 4.5rem;
  align-items: start;
}
.dq-intro-grid .eyebrow { display: block; margin-bottom: 0.8rem; }
.dq-intro-head h2 { margin: 0; }
.dq-intro-body p { margin: 0 0 1.1rem; font-size: 1.0625rem; line-height: 1.7; }
.dq-intro-body p:last-child { margin-bottom: 0; }

/* ---- Packages ---- */
.dq-pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: stretch;
}
.dq-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.9rem;
}
.dq-pkg-featured { border-color: rgba(var(--accent-1-rgb), 0.55); box-shadow: var(--shadow-md); }
.dq-ribbon {
  position: absolute;
  top: 0; right: 1.75rem;
  transform: translateY(-50%);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--accent-1);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dq-pkg-head { display: flex; align-items: center; gap: 0.9rem; }
.dq-pkg-number {
  flex: none;
  width: 2.625rem; height: 2.625rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-1-rgb), 0.14);
  color: var(--accent-1);
  font-size: 0.8125rem;
  font-weight: 800;
}
.dq-pkg-head .eyebrow { display: block; margin-bottom: 0.2rem; }
.dq-pkg-head h3 { margin: 0; font-size: 1.1875rem; }
.dq-price {
  margin: 1.6rem 0 0.9rem;
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.dq-pkg-summary { margin: 0; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }
.dq-pkg .p-check { margin-top: 1.4rem; }
.dq-pkg-note {
  margin-top: auto;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-rgb), 0.55);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.dq-pkg .p-check + .dq-pkg-note { margin-top: 1.5rem; }

/* ---- Included: headline rail + ruled feature rows ---- */
.dq-inc-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: 2.6rem 4.75rem;
  align-items: start;
}
.dq-inc-head .eyebrow { display: block; margin-bottom: 0.8rem; }
.dq-inc-head h2 { margin: 0 0 1rem; }
.dq-inc-head p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.dq-feature-list { border-top: 1px solid var(--border); }
.dq-feature {
  display: grid;
  grid-template-columns: 3.125rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.55rem 0;
  border-bottom: 1px solid var(--border);
}
.dq-feature-mark {
  width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-1-rgb), 0.14);
  color: var(--accent-1);
  flex: none;
}
.dq-feature-mark svg { width: 0.85rem; height: 0.85rem; }
.dq-feature h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.dq-feature p { margin: 0; font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* ---- Add-on panel ---- */
.dq-addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 2rem 4.25rem;
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(var(--accent-1-rgb), 0.10), rgba(var(--accent-1-rgb), 0.04)),
    var(--card);
}
.dq-addon .eyebrow { display: block; margin-bottom: 0.8rem; }
.dq-addon h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.dq-addon p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.dq-addon-price { border-top: 1px solid var(--border-strong); padding-top: 1.5rem; }
.dq-addon-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.dq-addon-value {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-1);
}
.dq-addon-note { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }

/* ---- Scope cards ---- */
.dq-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.dq-scope-card {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.dq-scope-card h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.dq-scope-card p { margin: 0; font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }

/* ---- Final CTA: dark panel, copy left, form right ----
   This one panel stays dark in both themes, as on the original. Its colors are
   literal rather than tokenized for exactly that reason, so the light-theme
   token swap leaves it alone. */
.dq-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
  gap: 2rem 3.5rem;
  align-items: center;
  padding: clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #16263D, #101C2E);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dq-final .eyebrow { display: block; margin-bottom: 0.85rem; color: #7FB2EC; }
.dq-final h2 { margin: 0 0 0.9rem; color: #F2F5FA; }
.dq-final > div > p { margin: 0; color: #B8C4D6; line-height: 1.7; }
.dq-final .input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #F2F5FA;
}
.dq-final .input::placeholder { color: #9FADC2; }
.dq-final .form-status { color: #9FADC2; }
.dq-final-actions { min-width: 0; }
.dq-final-extra { margin-top: 1rem; font-size: 0.8125rem; color: #9FADC2; }
.dq-final-extra a { color: #BFD6F2; }

/* ---- Breakpoints ----
   The original drops to one column at 991px. The rails here hold a little
   longer because the type scale is smaller, so they break at 960px, with the
   credibility row going 2-up first and the package and scope grids following
   at the site's usual 860px. */
@media (max-width: 1100px) {
  .dq-cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dq-cred-intro { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .dq-hero-grid,
  .dq-intro-grid,
  .dq-inc-grid,
  .dq-addon,
  .dq-final { grid-template-columns: 1fr; }
  .dq-hero-grid { gap: 2.75rem; }
  .dq-addon-price { padding-top: 1.25rem; }
  .dq-final-actions { width: 100%; }
}
@media (max-width: 860px) {
  .dq-pkg-grid { grid-template-columns: 1fr; }
  .dq-pkg-featured { margin-top: 0.75rem; }
  .dq-scope-grid { grid-template-columns: 1fr; }
  .dq-cred-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .dq-proof { padding-left: 1.1rem; }
}
@media (max-width: 520px) {
  .dq-doc-row { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: 0.3rem; }
  .dq-doc-code { grid-column: 2; }
  .dq-ribbon { right: 1rem; font-size: 0.625rem; }
  .dq-feature { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; }
}

/* The shared hero centers its container, its lead and its capture form when
   the hero carries no media (.p-hero:not(.has-media), above). This hero has a
   card beside the copy instead, so it opts out of those three rules by name.
   It does not claim .has-media, because that modifier imposes its own 1fr/1fr
   container grid, which would fight .dq-hero-grid. Equal specificity to the
   rules it overrides, so it has to stay after them in this file. */
.p-hero.dq-hero > .container { text-align: left; }
.p-hero.dq-hero .lead { margin-left: 0; margin-right: 0; }
.p-hero.dq-hero .p-capture > * { margin-inline: 0; }
.p-hero.dq-hero .p-capture .form-status { justify-content: flex-start; text-align: left; }