/* ==========================================================================
   LightBridge redesign — PHASE P pilot stylesheet
   v3.2 (2026-08-13): drift decisions applied. Adopted: A1 (v2 font stack
   Noto Sans JP first, Inter removed sitewide), A7 (body copy 16px).
   v3.3 (2026-08-15): the FONT half of A1 is REVERSED by Red1's typography
   ruling. The .lb-ds body stack is now `Inter, "Noto Sans JP", sans-serif`
   (Latin -> Inter, Japanese -> Noto Sans JP); Inter is re-enqueued in
   functions.php and is a declared face in DESIGN.md. A7's 16px still stands.
   See section 23 at the foot of this file before changing any font-family.
   Held as canonical (documented, no longer drift): A2 mono fallback,
   A3 v2 rhythm 64/80px, A4-A6 v2 type scale (H2 34/1.45/700, io-H3 22px,
   eyebrow 13.5px), B1-B5 v2 colours (#C25A15, #1A222B, #C6CED6, #2C3742,
   #55677A), C1 pilot .lb-sec clamp(72px, 9vw, 128px).
   Phase 0.1 audit (2026-08-13): the shared classes .lb-card / .lb-eyebrow /
   .lb-lead / .lb-tag contain NO same-scope duplicates. Apparent duplicates in
   flat text scans are @media / prefers-reduced-motion overrides; the eyebrow
   size split (12px base / 15px in .lb-sec per rule 15.1 / 13.5px in .lb-v2)
   is deliberate. Audit rule: any duplicate check on this file must track
   at-rule nesting before reporting conflicts.
   Phase 0.2 (2026-08-13): the 20 orphan classes used by the Lumerical Hub
   draft (19739) get NO CSS - the Phase 1 rebuild re-points that page at this
   file's existing vocabulary. One deliberate addition only: the on-warm
   button treatment in section 12b. Orphan-check rule: match class names on a
   token boundary, not with a bare strpos - `.lb-ds-h` is otherwise hidden by
   `.lb-ds-hero` and the check under-reports.
   Phase 0.3 (2026-08-13): responsive baseline. Canonical stops are 1120 and
   600; Enfold's 479/767/989 are justified in place, block by block. Section 16
   adds only what was missing (table scroll floor, full-width buttons at 600,
   hub touch targets). Browser QA at 1440/1120/768/600/390 also caught the
   floated closing H2 - see section 12c.
   Child theme: enfold-child  ·  target: Enfold 7.1.6 / WP 7.0.3 (staging)

   Scope: every rule is scoped to .lb-* classes emitted by the pilot page's
   ALB elements, so nothing here can affect existing pages.
   Token values are taken verbatim from the export's
   _ds/lightbridge-design-system-.../tokens/*.css (source of truth).
   Selector convention: every rule is prefixed with #top (Enfold's page wrapper)
   so it outranks the theme's own #top-prefixed rules without needing !important.
   Order: tokens > global type > layout > components > utilities >
          media queries > reduced motion.
   ========================================================================== */

/* --------------------------------------------------------------- 1 TOKENS */
:root {
  /* brand */
  --lb-brand-navy: #072c50;
  --lb-brand-orange: #ec7628;

  /* dark surfaces */
  --lb-canvas-deep: #101820;
  --lb-canvas-charcoal: #222222;
  --lb-surface-default: #323232;
  --lb-surface-raised: #383838;
  --lb-surface-navy: #0c385f;
  --lb-border-subtle: #484848;
  --lb-border-navy: #285276;

  /* light surfaces (reserved for later phases) */
  --lb-surface-light: #f5f7f9;
  --lb-surface-white: #ffffff;
  --lb-border-light: #dce3e9;

  /* type colours */
  --lb-text-primary-dark: #f4f2ef;
  --lb-text-secondary-dark: #c9c9c9;
  --lb-text-muted-dark: #9e9e9e;

  /* warm accents */
  --lb-accent-orange: #ec7628;
  --lb-accent-light-orange: #f39a55;
  --lb-accent-coral: #d94a2b;
  --lb-accent-deep-red: #a82b17;
  --lb-accent-dark-red: #6d2618;

  /* gradients */
  --lb-gradient-warm: linear-gradient(115deg, #f39a55 0%, #ec7628 28%, #d94a2b 54%, #a82b17 76%, #6d2618 100%);
  --lb-gradient-navy: linear-gradient(135deg, #072c50 0%, #0c385f 52%, #101820 100%);

  /* type */
  --lb-font-sans: "Noto Sans JP", "Noto Sans", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
  --lb-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --lb-weight-regular: 400;
  --lb-weight-medium: 500;
  --lb-weight-semibold: 600;
  --lb-weight-bold: 700;
  --lb-tracking-eyebrow: 0.12em;
  --lb-tracking-mono: 0.02em;
  --lb-body-lh-ja: 1.9;
  --lb-heading-lh-ja: 1.4;

  /* space */
  --lb-space-2: 8px;
  --lb-space-3: 12px;
  --lb-space-4: 16px;
  --lb-space-5: 24px;
  --lb-space-6: 32px;
  --lb-space-7: 48px;
  --lb-container: min(90vw, 1480px);
  /* 2026-08-14, Red1: the pilot family joins the one section rhythm used by
     the approved product pages and the hub. This supersedes v3.2 item C1
     (clamp(72px, 9vw, 128px)), which Red1 ruled personally and has now
     reversed. Changed here at the token so it lands on every .lb-sec page at
     once rather than per page or per section. Mobile step in the max-600
     block below, mirroring --hub-sec 64 -> 44. */
  --lb-section-pad: 64px;

  /* effects */
  --lb-radius-sm: 6px;
  --lb-radius-md: 8px;
  --lb-radius-lg: 12px;
  --lb-duration-fast: 180ms;
  --lb-duration-base: 240ms;
  --lb-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --lb-shadow-screenshot: 0 24px 64px rgba(0, 0, 0, 0.45);
  --lb-touch-target: 44px;
}

/* ------------------------------------------------- 2 SECTION SHELL / GRID */

/* Enfold's fixed content container is replaced by the design's fluid one.
   Only inside .lb-sec, so other pages keep the theme's container. */
#top .lb-sec > .container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#top .lb-sec .content,
#top .lb-sec .template-page {
  /* Enfold renders this wrapper as <main>, which computes to display:inline
     here - vertical padding on an inline box creates no layout height, so the
     section background would end short of its content. */
  display: block;
  width: 100%;
  float: none;
  padding-top: var(--lb-section-pad);
  padding-bottom: var(--lb-section-pad);
  margin: 0;
  border: 0;
}
#top .lb-sec .post-entry { margin: 0; }
#top .lb-sec .entry-content-wrapper {
  width: var(--lb-container);
  margin: 0 auto;
  font-family: var(--lb-font-sans);
  color: var(--lb-text-secondary-dark);
}

/* Enfold separates ALB elements with <br>; harmless in flow, but they would
   become stray grid/flex items. Only direct-child breaks are removed. */
#top .lb-sec .entry-content-wrapper > br,
#top .lb-sec .flex_column > br { display: none; }

/* .entry-content-wrapper carries Enfold's .clearfix, whose ::before/::after
   float-clearing boxes become real grid/flex items once the wrapper becomes a
   grid. They are unnecessary here (nothing floats inside these sections). */
#top .lb-sec .entry-content-wrapper::before,
#top .lb-sec .entry-content-wrapper::after,
#top .lb-sec .flex_column::before,
#top .lb-sec .flex_column::after { content: none; }

/* Enfold decorative heading rule is not part of this design */
#top .lb-sec .special-heading-border { display: none; }

/* two-column split sections ------------------------------------------------
   Reproduces the source's repeat(auto-fit, minmax(min(100%, X), 1fr)) so the
   stacking breakpoint matches the design exactly, at every width, without
   media queries. Enfold's float/percentage column sizing is neutralised. */
#top .lb-split .entry-content-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: start;
}
#top .lb-sec .flex_column {
  width: 100%;
  margin: 0;
  float: none;
}
#top .lb-hero .entry-content-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  align-items: center;
}
#top .lb-audience .entry-content-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

/* card grid sections ------------------------------------------------------- */
#top .lb-cards .entry-content-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: stretch;
}
#top .lb-cards-tight .entry-content-wrapper { gap: 16px; }
/* Four cards since 2026-09-03 (Ansys Speos added). auto-fit cannot express
   "4 up, then 2x2, then stacked" -- at the tablet band it drops to 3 and
   orphans the fourth card. Explicit tracks + the canonical 1120/600 stops.
   Steps live in block 84.3. */
#top .lb-products .entry-content-wrapper  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#top .lb-resources .entry-content-wrapper { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
#top .lb-solutions .entry-content-wrapper { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
#top .lb-workflow .entry-content-wrapper  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* section backgrounds the ALB colour picker cannot express
   (multi-stop / arbitrary-angle gradients) */
/* 2026-09-03: 19513's hero now carries a real Media Library background image on
   the av_section (attachment 20098). Enfold emits that as
   `.avia-section.av-lbp0013-<hash> { background-image: url(...) }` = (0,2,0),
   which this (1,1,0) rule would silently outrank, leaving the image invisible.
   Excluding the one page hands the layer back to Enfold, so the asset stays
   editable in the builder and is not duplicated as a URL in this file. The
   approved gradient is re-applied over the image in block 84.1 -- same custom
   property, same direction, same stops. Every other .lb-hero is unchanged. */
#top:not(.page-id-19513) .lb-hero      { background-image: var(--lb-gradient-navy); }
#top .lb-cta       { background-image: linear-gradient(135deg, #072c50 0%, #0c385f 60%, #101820 100%); }
#top .lb-photonica { background-image: linear-gradient(295deg, #f39a55 0%, #ec7628 28%, #d94a2b 54%, #a82b17 76%, #6d2618 100%); }

/* ------------------------------------------------------------ 3 TYPOGRAPHY */
#top .lb-sec .entry-content-wrapper p,
#top .lb-sec .entry-content-wrapper li,
#top .lb-sec .entry-content-wrapper span,
#top .lb-sec .entry-content-wrapper a { font-family: var(--lb-font-sans); }

#top .lb-sec h1,
#top .lb-sec h2,
#top .lb-sec h3,
#top .lb-sec h4 {
  font-family: var(--lb-font-sans);
  color: var(--lb-text-primary-dark);
  margin: 0;
  letter-spacing: 0;
  line-height: var(--lb-heading-lh-ja);
  word-break: normal;
  line-break: strict;
  overflow-wrap: normal;
}
#top .lb-sec :lang(ja) { line-break: strict; word-break: normal; }

#top .lb-h1 h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.4;
  font-weight: var(--lb-weight-bold);
  max-width: 24ch;
  text-wrap: pretty;
}
#top .lb-h2 h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.4;
  font-weight: var(--lb-weight-semibold);
}
#top .lb-h2-display h2 {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.3;
  font-weight: var(--lb-weight-medium);
  max-width: 20ch;
  text-wrap: pretty;
}
#top .lb-cta .lb-h2-display h2 { font-size: clamp(28px, 3.6vw, 52px); max-width: 18ch; }
#top .lb-h3 h3 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  font-weight: var(--lb-weight-semibold);
}
#top .lb-h3-lg h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  font-weight: var(--lb-weight-semibold);
}

#top .lb-eyebrow {
  font-family: var(--lb-font-mono);
  font-size: 12px;
  letter-spacing: var(--lb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lb-brand-orange);
  margin: 0;
  line-height: 1.4;
}
#top .lb-eyebrow-light  { color: var(--lb-text-primary-dark); font-size: 11px; }
#top .lb-eyebrow-muted  { color: var(--lb-text-muted-dark); font-size: 11px; text-transform: uppercase; }
#top .lb-eyebrow-accent { color: var(--lb-accent-light-orange); }

#top .lb-lead p {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: var(--lb-body-lh-ja);
  color: var(--lb-text-secondary-dark);
  max-width: 52ch;
}
#top .lb-hero .lb-lead p { font-size: clamp(16px, 1.4vw, 19px); }
#top .lb-body p {
  margin: 0 0 var(--lb-space-4);
  font-size: 16px; /* v3.2: drift A7 adopted */
  line-height: var(--lb-body-lh-ja);
  color: var(--lb-text-secondary-dark);
  max-width: 52ch;
}
#top .lb-body p:last-child { margin-bottom: 0; }

/* copy sitting on the warm Photonica gradient */
#top .lb-on-warm p { color: var(--lb-text-primary-dark); }

#top .lb-note { margin: 0; font-size: 13px; line-height: 1.8; color: var(--lb-text-muted-dark); }

/* ------------------------------------------------------ 4 COLUMN CONTAINERS */
#top .lb-sec .flex_column.lb-hero-copy,
#top .lb-sec .flex_column.lb-photonica-copy,
#top .lb-sec .flex_column.lb-photonica-panel,
#top .lb-sec .flex_column.lb-audience-copy,
#top .lb-sec .flex_column.lb-cta-copy,
#top .lb-sec .flex_column.lb-panel-navy,
#top .lb-sec .flex_column.lb-panel-card,
#top .lb-sec .flex_column.lb-head {
  display: flex;
  flex-direction: column;
}
#top .lb-hero-copy       { gap: 28px; }
#top .lb-photonica-copy  { gap: 20px; }
#top .lb-audience-copy   { gap: 24px; }
#top .lb-cta-copy        { gap: 20px; }
#top .lb-head            { gap: var(--lb-space-4); max-width: 760px; margin-bottom: var(--lb-space-6) !important; }
#top .lb-cards .lb-head  { grid-column: 1 / -1; }

/* section header with a trailing "see all" link on the same baseline */
#top .lb-sec .flex_column.lb-head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--lb-space-5);
  align-items: baseline;
  justify-content: space-between;
  max-width: none;
}
#top .lb-head-row > section:has(.lb-eyebrow-wrap) { flex: 0 0 100%; }
#top .lb-head-row > .av-special-heading           { flex: 1 1 400px; max-width: 640px; }
#top .lb-head-row > section:has(.lb-head-link)    { flex: 0 0 auto; margin-left: auto; }

#top .lb-head-link p,
#top .lb-arrowlink p { margin: 0; font-size: 14px; font-weight: var(--lb-weight-semibold); }
#top .lb-head-link a,
#top .lb-arrowlink a { color: var(--lb-brand-orange); text-decoration: none; }
#top .lb-head-link a:hover,
#top .lb-arrowlink a:hover { color: var(--lb-accent-light-orange); }

/* ------------------------------------------------------------- 5 HERO PANEL */
#top .lb-sec .flex_column.lb-hero-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--lb-space-6);
  border: 1px solid var(--lb-border-navy);
  border-radius: var(--lb-radius-lg);
  background: rgba(12, 56, 95, 0.55);
  padding: clamp(24px, 3vw, 40px);
}
#top .lb-stat { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#top .lb-stat > .avia-promocontent { padding: 0; background: none; border: 0; }
#top .lb-stat-num {
  font-family: var(--lb-font-mono);
  font-size: clamp(28px, 3vw, 38px);
  color: var(--lb-brand-orange);
  line-height: 1;
  margin: 0;
}
#top .lb-stat-label {
  font-size: 13px;
  line-height: 1.8;
  color: var(--lb-text-secondary-dark);
  margin: var(--lb-space-2) 0 0;
}
#top .lb-stat-label:has(span) { color: var(--lb-text-primary-dark); }
#top .lb-stat-label span { color: var(--lb-text-secondary-dark); }

/* Enfold runs wpautop over COLUMN content (columns.php -> avia_apply_autop) but
   not over SECTION content, so an enclosing shortcode placed inside a column
   picks up one empty trailing <p>. It only affects the four hero stat tiles,
   whose real paragraphs are both classed, so this rule is exact and cannot
   swallow editor-authored content anywhere else on the page. */
#top .lb-stat > .avia-promocontent > p:not([class]) { display: none; }

/* ------------------------------------------------------------------ 6 CARDS */
#top .lb-card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  display: flex;
  /* Enfold's promobox.css sets overflow:hidden on .av_promobox (for its own
     absolutely-positioned button, which this card does not use). That clips the
     2px hover lift below, cutting the top off the highlighted border. */
  overflow: visible;
}
#top .lb-card > .avia-promocontent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
  background: var(--lb-surface-default);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-6);
  transition: border-color var(--lb-duration-fast) var(--lb-ease),
              transform var(--lb-duration-base) var(--lb-ease);
}
#top .lb-card:hover > .avia-promocontent { border-color: var(--lb-brand-orange); transform: translateY(-2px); }
#top .lb-card .avia-promocontent > p { margin: 0; font-size: 14px; line-height: var(--lb-body-lh-ja); color: var(--lb-text-secondary-dark); }
#top .lb-card .avia-promocontent > p:empty { display: none; }
#top .lb-card h3 { font-size: 20px; line-height: 1.4; font-weight: var(--lb-weight-semibold); }
#top .lb-card a { color: var(--lb-text-primary-dark); text-decoration: none; }
#top .lb-card:hover a { color: var(--lb-brand-orange); }

#top .lb-card-lg > .avia-promocontent { padding: 36px; gap: var(--lb-space-4); }
#top .lb-card-lg h3 { font-size: 24px; }
#top .lb-card-lg .lb-tags { margin-top: auto; padding-top: var(--lb-space-3); }

#top .lb-card-sm > .avia-promocontent { padding: 28px; gap: 10px; }
#top .lb-card-sm .avia-promocontent > p { font-size: 13px; line-height: 1.8; }

#top .lb-card-res > .avia-promocontent { background: var(--lb-canvas-charcoal); gap: 14px; }
#top .lb-card-res .avia-promocontent > p { font-size: 13px; line-height: 1.8; }

#top .lb-card-navy > .avia-promocontent { background: var(--lb-surface-navy); border-color: var(--lb-border-navy); }

#top .lb-card-title { font-size: 17px; font-weight: var(--lb-weight-semibold); color: var(--lb-text-primary-dark) !important; }
#top .lb-card-title-lg { font-size: 19px !important; line-height: 1.6 !important; }

/* sequence numbers are generated, not typed, so editors never renumber by hand */
#top .lb-cards-numbered .entry-content-wrapper { counter-reset: lbnum; }
#top .lb-cards-numbered .lb-card > .avia-promocontent::before {
  counter-increment: lbnum;
  content: counter(lbnum, decimal-leading-zero);
  font-family: var(--lb-font-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--lb-accent-light-orange);
}
#top .lb-workflow .lb-card > .avia-promocontent::before { color: var(--lb-brand-orange); }
#top .lb-workflow .lb-card-navy > .avia-promocontent::before { color: var(--lb-accent-light-orange); }

/* --------------------------------------------------------------- 7 PANELS */
#top .lb-sec .flex_column.lb-panel-navy {
  gap: 20px;
  background: var(--lb-surface-navy);
  border: 1px solid var(--lb-border-navy);
  border-radius: var(--lb-radius-lg);
  padding: clamp(28px, 3vw, 40px);
}
#top .lb-sec .flex_column.lb-panel-card {
  gap: var(--lb-space-4);
  background: var(--lb-surface-default);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-lg);
  padding: clamp(28px, 3vw, 40px);
}
#top .lb-sec .flex_column.lb-photonica-panel {
  gap: 20px;
  background: var(--lb-accent-dark-red);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--lb-radius-lg);
  padding: clamp(24px, 3vw, 36px);
}

/* ------------------------------------------------- 8 STEPS / LISTS / TAGS */
#top .lb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: lbstep;
}
#top .lb-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: var(--lb-space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14px;
  line-height: 1.7;
  color: #ffffff;
}
#top .lb-steps li:last-child { border-bottom: 0; }
#top .lb-steps li::before {
  counter-increment: lbstep;
  content: counter(lbstep, decimal-leading-zero);
  font-family: var(--lb-font-mono);
  font-size: 12px;
  color: #ffffff;
  opacity: 0.7;
}
#top .lb-steps li .lb-step { min-width: 0; }
#top .lb-steps li em { font-style: normal; opacity: 0.75; }

#top .lb-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--lb-space-2);
  font-size: 14px;
  line-height: var(--lb-body-lh-ja);
  color: var(--lb-text-secondary-dark);
}
#top .lb-panel-card .lb-list { gap: 10px; }

#top .lb-tags { display: flex; gap: var(--lb-space-2); flex-wrap: wrap; margin: 0; }
#top .lb-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-sm);
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--lb-weight-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--lb-text-secondary-dark);
}
#top .lb-tag-mono   { font-family: var(--lb-font-mono); letter-spacing: var(--lb-tracking-mono); }
#top .lb-tag-navy   { color: #bbd2e6; border-color: var(--lb-border-navy); background: rgba(12, 56, 95, 0.5); }
#top .lb-tag-onwarm {
  font-family: var(--lb-font-mono);
  font-size: 11px;
  background: var(--lb-accent-dark-red);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--lb-text-primary-dark);
}

/* ------------------------------------------------------- 9 SCREENSHOT FRAME */
#top .lb-sec .flex_column.lb-shot {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: var(--lb-space-6);
}
#top .lb-shot-frame {
  background: var(--lb-canvas-deep);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-md);
  overflow: hidden;
  box-shadow: var(--lb-shadow-screenshot);
}
#top .lb-shot-bar {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--lb-border-subtle);
  background: var(--lb-canvas-charcoal);
  margin: 0 !important;
}
#top .lb-shot-bar span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lb-border-subtle);
  display: inline-block;
}
#top .lb-shot-bar em {
  margin-left: var(--lb-space-3);
  font-family: var(--lb-font-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--lb-text-muted-dark);
  letter-spacing: var(--lb-tracking-mono);
}
#top .lb-shot-body {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--lb-space-6);
  margin: 0 !important;
  font-family: var(--lb-font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--lb-text-muted-dark);
}

/* ---------------------------------------------------------------- 10 BUTTONS */
#top .lb-sec .avia-buttonrow-wrap.lb-btnrow { display: flex; flex-wrap: wrap; gap: var(--lb-space-3); margin: 0; }
#top .lb-btnrow .avia-button {
  /* Enfold's border='all' option only paints the bottom edge on this button
     style. Width/style are restored here; the per-button colour Enfold already
     emits is deliberately left untouched, so each button keeps the colour set
     in the ALB. */
  border-width: 1px;
  border-style: solid;
  border-radius: var(--lb-radius-sm);
  font-family: var(--lb-font-sans);
  font-weight: var(--lb-weight-semibold);
  letter-spacing: 0.01em;
  min-height: var(--lb-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-decoration: none;
  transition: background-color var(--lb-duration-base) var(--lb-ease),
              border-color var(--lb-duration-base) var(--lb-ease),
              color var(--lb-duration-base) var(--lb-ease);
}
#top .lb-btnrow .avia-size-large  { font-size: 16px; padding: 16px 32px; }
#top .lb-btnrow .avia-size-medium { font-size: 15px; padding: 12px 24px; }

/* ------------------------------------------------------------- 11 UTILITIES */
#top .lb-sec a:focus-visible,
#top .lb-sec button:focus-visible {
  outline: 2px solid var(--lb-accent-light-orange);
  outline-offset: 2px;
}
#top .lb-sec img,
#top .lb-sec svg { max-width: 100%; }

/* ------------------------------------------- 11b PHASE 1 COMPONENTS
   Added for the 27 Japanese pages. Same scoping rules as everything above:
   #top-prefixed, .lb-* only, no !important except box-model resets. */

/* warm gradient section (Photonica-family pages) */
#top .lb-warm { background-image: var(--lb-gradient-warm); }

/* breadcrumbs ---------------------------------------------------------- */
#top .lb-crumbs {
  margin: 0 0 var(--lb-space-5);
  font-family: var(--lb-font-mono);
  font-size: 12px;
  letter-spacing: var(--lb-tracking-mono);
  color: var(--lb-text-muted-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  align-items: center;
}
#top .lb-crumbs a { color: var(--lb-text-secondary-dark); text-decoration: none; }
#top .lb-crumbs a:hover { color: var(--lb-brand-orange); }
#top .lb-crumb-sep { opacity: 0.5; }

/* in-page anchor nav --------------------------------------------------- */
#top .lb-sec .flex_column.lb-anchorbar { grid-column: 1 / -1; }
#top .lb-anchornav {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-5);
  padding-top: var(--lb-space-5);
  border-top: 1px solid var(--lb-border-navy);
}
#top .lb-anchornav a {
  font-size: 13px;
  font-weight: var(--lb-weight-medium);
  color: var(--lb-text-secondary-dark);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
#top .lb-anchornav a:hover {
  color: var(--lb-brand-orange);
  border-bottom-color: var(--lb-brand-orange);
}

/* hero screenshot column ------------------------------------------------ */
#top .lb-sec .flex_column.lb-hero-shot { align-self: center; }

/* spec + routing tables (av_table) -------------------------------------- */
#top .lb-sec .avia-table-wrap,
#top .lb-sec .avia-data-table-wrap { margin: 0; overflow-x: auto; background: transparent; }
#top .lb-sec table.avia-table.lb-spec tbody,
#top .lb-sec table.avia-table.lb-spec thead,
#top .lb-sec table.avia-table.lb-spec tr { background: transparent; }
#top .lb-sec table.avia-table.lb-spec {
  width: 100%;
  margin: 0;
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--lb-surface-default);
  font-size: 14px;
  line-height: var(--lb-body-lh-ja);
}
#top .lb-sec table.avia-table.lb-spec th,
#top .lb-sec table.avia-table.lb-spec td {
  border: 0;
  border-bottom: 1px solid var(--lb-border-subtle);
  padding: 14px 18px;
  color: var(--lb-text-secondary-dark);
  background: transparent;
  vertical-align: top;
  text-align: left;
}
#top .lb-sec table.avia-table.lb-spec tr:last-child td { border-bottom: 0; }
#top .lb-sec table.avia-table.lb-spec th,
#top .lb-sec table.avia-table.lb-spec .avia-heading-row td {
  font-family: var(--lb-font-mono);
  font-size: 11px;
  letter-spacing: var(--lb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lb-brand-orange);
  background: var(--lb-canvas-charcoal);
  font-weight: var(--lb-weight-medium);
}
/* first column of a 2-column spec table reads as the label */
#top .lb-sec table.avia-table.lb-spec td:first-child {
  color: var(--lb-text-primary-dark);
  font-weight: var(--lb-weight-medium);
  white-space: nowrap;
}
#top .lb-sec table.avia-table.lb-spec td strong { color: var(--lb-text-primary-dark); }
#top .lb-sec .flex_column.lb-speccol,
#top .lb-sec .flex_column.lb-tablewrap { display: flex; flex-direction: column; gap: var(--lb-space-4); }
#top .lb-sec .flex_column.lb-tablewrap { grid-column: 1 / -1; }

/* FAQ accordion (av_toggle_container) ----------------------------------- */
#top .lb-sec .flex_column.lb-faqwrap { grid-column: 1 / -1; }
#top .lb-sec .togglecontainer { margin: 0; }
#top .lb-sec .single_toggle {
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface-default);
  margin-bottom: var(--lb-space-3);
  overflow: hidden;
}
#top .lb-sec .single_toggle .toggler {
  margin: 0;
  /* Enfold absolutely-positions .toggle_icon at left:10px, 15px wide. The text
     needs left padding that clears the icon AND leaves a gap, or the two
     collide. Icon is re-seated at 22px so it lines up with the card padding. */
  padding: 18px 22px 18px 52px;
  border: 0;
  background: transparent;
  color: var(--lb-text-primary-dark);
  font-size: 15px;
  font-weight: var(--lb-weight-semibold);
  line-height: 1.6;
  transition: color var(--lb-duration-fast) var(--lb-ease);
}
#top .lb-sec .single_toggle .toggler:hover,
#top .lb-sec .single_toggle .toggler.activeTitle { color: var(--lb-brand-orange); }
#top .lb-sec .single_toggle .toggle_wrap { border: 0; }
#top .lb-sec .single_toggle .toggle_content {
  padding: 0 22px 20px;
  margin: 0;
  color: var(--lb-text-secondary-dark);
  font-size: 14px;
  line-height: var(--lb-body-lh-ja);
  background: transparent;
}
#top .lb-sec .single_toggle .toggle_icon {
  left: 22px;
  border-color: var(--lb-text-muted-dark);
}
#top .lb-sec .single_toggle .toggler.activeTitle .toggle_icon { border-color: var(--lb-brand-orange); }
#top .lb-sec .single_toggle .toggle_icon .vert_icon,
#top .lb-sec .single_toggle .toggle_icon .hor_icon { border-color: currentColor; }

/* ---------------------------------------------------------- 12 MEDIA QUERIES
   The auto-fit grids above already reproduce the source's responsive
   behaviour, so these only handle small-screen padding and the one place
   where a nowrap tag row would otherwise force horizontal overflow. */
/* Enfold breakpoint (layout.css uses 479 / 767 / 989 / 1024): the theme's
   own column collapse lands here, so this block must match it. */
@media only screen and (max-width: 767px) {
  #top .lb-sec .entry-content-wrapper { width: min(92vw, 1480px); }
  #top .lb-split .entry-content-wrapper { gap: 40px; }
  #top .lb-steps li { grid-template-columns: 28px 1fr; gap: 10px; }
  #top .lb-tag { white-space: normal; }
}
/* Enfold breakpoint. Card padding step for the narrowest phones; below the
   canonical 600 stop, so it refines rather than replaces it. */
@media only screen and (max-width: 479px) {
  #top .lb-card > .avia-promocontent { padding: 24px; }
  #top .lb-card-lg > .avia-promocontent { padding: 24px; }
  #top .lb-sec .flex_column.lb-hero-panel { padding: 20px; gap: 20px; }
}

/* ------------------------------------------------------- 13 REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  #top .lb-sec *,
  #top .lb-sec *::before,
  #top .lb-sec *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #top .lb-card:hover > .avia-promocontent { transform: none; }
}

/* ==========================================================================
   11c  DARK EDITORIAL PRODUCT PAGE
   Source: ProductPage.dc.html (LightBridge design system 351a43).
   Same scoping rules as everything above: #top-prefixed, .lb-* only, no
   !important except box-model resets that fight an Enfold inline-adjacent
   margin.
   ========================================================================== */

/* --- statement + benefit tile grid ---------------------------------------
   The source builds this on an explicit 6-column grid with per-tile spans
   (grid-column: span 4 / span 2), not on auto-fit, so unlike every other
   section in this file it cannot reproduce its own stacking behaviour. Two
   breakpoints are therefore unavoidable here; they are the only new ones in
   this block. */
#top .lb-stmt6 .entry-content-wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
#top .lb-sec .flex_column.lb-stmt-copy  { grid-column: span 4; display: flex; flex-direction: column; }
#top .lb-sec .flex_column.lb-stmt-media { grid-column: span 2; align-self: center; }

/* the statement row sits apart from the tiles, as in the source (96px) */
#top .lb-sec .flex_column.lb-stmt-copy,
#top .lb-sec .flex_column.lb-stmt-media { margin-bottom: clamp(32px, 4vw, 72px); }

#top .lb-stmt6 .lb-stmt-copy .lb-h2-display h2 { max-width: 18ch; }

#top .lb-tile-w2 { grid-column: span 2; }
#top .lb-tile-w3 { grid-column: span 3; }
#top .lb-tile-w4 { grid-column: span 4; }
#top .lb-tile-w6 { grid-column: span 6; }

/* the navy tile - one per grid, second position */
#top .lb-tile-navy > .avia-promocontent {
  background: var(--lb-surface-navy);
  border-color: var(--lb-border-navy);
}

/* the warm emphasis tile - used once per grid, on the last claim */
#top .lb-tile-warm > .avia-promocontent {
  background-image: var(--lb-gradient-warm);
  border-color: transparent;
}
#top .lb-tile-warm > .avia-promocontent > p { color: rgba(255, 255, 255, 0.92); }
#top .lb-tile-warm h3,
#top .lb-tile-warm .lb-card-title,
#top .lb-tile-warm a { color: #ffffff; }
#top .lb-tile-warm .lb-eyebrow,
#top .lb-tile-warm .lb-eyebrow-muted { color: rgba(255, 255, 255, 0.86); }
#top .lb-tile-warm:hover > .avia-promocontent { border-color: rgba(255, 255, 255, 0.55); }
/* a full-width warm tile reads better as a band than as a tall card */
#top .lb-tile-w6.lb-tile-warm > .avia-promocontent { padding: clamp(28px, 3vw, 40px); }

/* --- FAQ split: narrow header, wide accordion (source 4fr / 7fr) --------- */
#top .lb-faqsplit .entry-content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
#top .lb-sec .flex_column.lb-faq-head { display: flex; flex-direction: column; }
#top .lb-sec .flex_column.lb-faq-head .lb-h2 h2 { max-width: 16ch; }

/* --- split CTA: navy support panel + pre-consultation checklist ---------- */
#top .lb-ctasplit .entry-content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}
#top .lb-ctasplit .lb-panel-body { margin: 0; }
#top .lb-ctasplit .lb-panel-body h3,
#top .lb-ctasplit .lb-panel-body .lb-card-title {
  margin: 0 0 var(--lb-space-3);
  font-size: 20px;
  line-height: 1.35;
  font-weight: var(--lb-weight-semibold);
  color: var(--lb-text-primary-dark);
}
#top .lb-ctasplit .lb-panel-body p {
  margin: 0 0 var(--lb-space-3);
  font-size: 15px;
  line-height: var(--lb-body-lh-ja);
  color: var(--lb-text-secondary-dark);
}
#top .lb-ctasplit .lb-panel-body p:last-child { margin-bottom: 0; }
#top .lb-ctasplit .lb-panel-body .lb-list { margin: 0 0 var(--lb-space-4); }
#top .lb-ctasplit .lb-panel-body a { color: var(--lb-brand-orange); text-decoration: none; }
#top .lb-ctasplit .lb-panel-body a:hover { color: var(--lb-accent-light-orange); }

/* --- closing warm panel -------------------------------------------------- */
#top .lb-closing .entry-content-wrapper { display: flex; flex-direction: column; }
#top .lb-sec .flex_column.lb-cta-copy { gap: var(--lb-space-4); align-items: flex-start; }
#top .lb-closing .lb-h2-display h2 { color: #ffffff; max-width: 20ch; }
#top .lb-closing .lb-on-warm p { color: rgba(255, 255, 255, 0.9); max-width: 52ch; }
#top .lb-closing .lb-lead p { font-size: 19px; }

/* --- screenshot frame carrying a real image ------------------------------ */
/* The frame is now the column itself: an av_textblock title bar plus a native
   av_image, rather than a placeholder div. */
#top .lb-sec .flex_column.lb-hero-shot {
  background: var(--lb-canvas-deep);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-md);
  overflow: hidden;
  box-shadow: var(--lb-shadow-screenshot);
  padding: 0;
}
#top .lb-sec .lb-shot-barwrap { margin: 0 !important; }
#top .lb-sec .lb-shot-img,
#top .lb-sec .lb-inline-img { margin: 0 !important; }
#top .lb-sec .lb-shot-img .avia-image-container-inner,
#top .lb-sec .lb-inline-img .avia-image-container-inner { margin: 0; }
#top .lb-sec .lb-shot-img img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--lb-canvas-deep);
}
#top .lb-sec .lb-inline-img img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-md);
}

/* --- workflow steps ------------------------------------------------------ */
#top .lb-sec .flex_column.lb-stepwrap { grid-column: 1 / -1; }
#top .lb-workflow .lb-steps li {
  color: var(--lb-text-secondary-dark);
  border-bottom-color: var(--lb-border-subtle);
}
#top .lb-workflow .lb-steps li::before { color: var(--lb-brand-orange); opacity: 1; }

/* --- buttons on the warm panel ------------------------------------------- */
#top .lb-sec .avia-buttonrow-wrap.lb-btnrow-warm { margin-top: var(--lb-space-2); }

/* --- responsive: the two breakpoints the explicit 6-col grid forces ------- */
/* One breakpoint, not two. Measured at 1024 / 860 / 560 / 390: with mixed tile
   spans (4+2+6) an intermediate 2-column step strands a half-width tile on its
   own row, so the grid goes straight from 6 columns to 1. */
@media only screen and (max-width: 900px) {
  #top .lb-stmt6 .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); }
  #top .lb-sec .flex_column.lb-stmt-copy,
  #top .lb-sec .flex_column.lb-stmt-media,
  #top .lb-tile-w2, #top .lb-tile-w3,
  #top .lb-tile-w4, #top .lb-tile-w6 { grid-column: span 1; }
  #top .lb-faqsplit .entry-content-wrapper,
  #top .lb-ctasplit .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================== 11d  PRODUCT PAGE FIXES */
/* These flex columns had no gap, so heading and paragraphs collided. */
#top .lb-sec .flex_column.lb-stmt-copy { gap: 28px; }
#top .lb-sec .flex_column.lb-faq-head { gap: 16px; }

/* ScreenshotFrame backing=warm: the source frames the shot in the warm
   gradient. The column is the frame, so the gradient is its background and
   the padding is what shows through. */
/* Proportions taken from the design's ScreenshotFrame render: the warm backing
   reads as a wide mat around the shot (~6% of frame width), not a hairline.
   Outer radius 20, inner 10, and the frame casts a shadow onto the hero. */
#top .lb-sec .flex_column.lb-hero-shot {
  background-image: var(--lb-gradient-warm);
  border: 0;
  border-radius: 20px;
  padding: clamp(16px, 2.4vw, 36px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}
#top .lb-sec .flex_column.lb-hero-shot .lb-shot-barwrap { border-radius: 10px 10px 0 0; overflow: hidden; }
#top .lb-sec .flex_column.lb-hero-shot .lb-shot-img { border-radius: 0 0 10px 10px; overflow: hidden; }
/* the divider under the chrome bar is present in the reference */
#top .lb-sec .flex_column.lb-hero-shot .lb-shot-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 14px 18px;
}

/* ==========================================================================
   LB-V2 — Lumerical RCWA Draft 2 (page 19564)
   CONSOLIDATED STYLESHEET. Replaces the previous blocks 12, 12.15, 13, 13.15,
   14 and 14.11 in one ordered pass.

   Why consolidated: those blocks were appended one after another, so at equal
   specificity the LAST one always won. That silently caused three separate
   bugs (flow/FAQ never stacking, application cards losing their flush images,
   panel padding leaking into cards). Ordering is now explicit and each rule
   appears exactly once.

   Scoping contract: EVERY selector contains .lb-v2. Page 19521 emits no
   .lb-v2 class, so nothing here can reach it.

   Order: tokens -> shell -> typography -> grids -> components -> state ->
   responsive. Nothing below re-declares something above at equal specificity.
   ========================================================================== */

/* -------------------------------------------------------------- 1 TOKENS */
#top .lb-v2 {
  --v2-navy:      #072C50;
  --v2-navy-soft: #0C385F;
  --v2-deep:      #101820;
  --v2-charcoal:  #1A222B;
  --v2-offwhite:  #F5F7F9;
  --v2-white:     #FFFFFF;
  --v2-bd-light:  #DCE3E9;
  --v2-bd-navy:   #285276;
  --v2-bd-dark:   #2C3742;
  --v2-ink:       #102435;
  --v2-ink-2:     #465968;
  --v2-ink-3:     #55677A;
  --v2-on-dark:   #F4F2EF;
  --v2-on-dark-2: #C6CED6;
  --v2-orange:    #EC7628;
  --v2-orange-lt: #F39A55;
  --v2-orange-dk: #C25A15;
  --v2-s1: 8px;  --v2-s2: 16px; --v2-s3: 24px; --v2-s4: 32px;
  --v2-s5: 40px; --v2-s6: 48px; --v2-s8: 64px;
  /* Inter-section gap = bottom padding of one + top padding of the next, so
     the token is HALF the intended gap. At 96/120 adjacent sections stacked to
     192-216px. */
  --v2-pad: 64px;
  --v2-pad-lg: 80px;
  --v2-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --v2-font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Arial, sans-serif; /* v3.2: Inter removed (drift A1 adopted) */
  --v2-mono: "IBM Plex Mono", "Inter", monospace;
}

/* --------------------------------------------------------------- 2 SHELL */
#top .lb-v2 .content,
#top .lb-v2 .template-page { padding-top: var(--v2-pad); padding-bottom: var(--v2-pad); }
#top .lb-v2.lb-v2-lg .content,
#top .lb-v2.lb-v2-lg .template-page { padding-top: var(--v2-pad-lg); padding-bottom: var(--v2-pad-lg); }
#top .lb-v2 .entry-content-wrapper { font-family: var(--v2-font); }
#top .lb-v2 .flex_column { width: 100%; margin: 0; float: none; }

/* The site header is position:fixed at 76px. Without this, an in-page anchor
   jump parks the target heading underneath it. */
#top .lb-v2,
#top .lb-v2 [id] { scroll-margin-top: 108px; }

#top .lb-v2-light { background-color: var(--v2-offwhite); }
#top .lb-v2-navy  { background-color: var(--v2-navy); }
#top .lb-v2-dark  { background-color: var(--v2-deep); }
#top .lb-v2-char  { background-color: var(--v2-charcoal); }
#top .lb-v2-hero  { background-image: linear-gradient(135deg, #072C50 0%, #0C385F 52%, #101820 100%); }
#top .lb-v2-close { background-image: var(--lb-gradient-warm); }

/* ---------------------------------------------------------- 3 TYPOGRAPHY */
/* The base stylesheet writes `#top .lb-sec .entry-content-wrapper p` (1,2,1),
   so v2 body selectors must match that depth or they lose. */
#top .lb-v2 h1, #top .lb-v2 h2, #top .lb-v2 h3, #top .lb-v2 h4,
#top .lb-v2 .entry-content-wrapper p,
#top .lb-v2 .entry-content-wrapper li,
#top .lb-v2 .entry-content-wrapper span,
#top .lb-v2 .entry-content-wrapper a,
#top .lb-v2 .entry-content-wrapper td,
#top .lb-v2 .entry-content-wrapper th { font-family: var(--v2-font); }

#top .lb-v2 .lb-h1 h1 {
  font-size: 46px; line-height: 1.38; font-weight: 700; letter-spacing: 0.01em;
  text-wrap: pretty; line-break: strict; word-break: normal; overflow-wrap: normal;
}
#top .lb-v2 .lb-h2 h2 { font-size: 34px; line-height: 1.45; font-weight: 700; text-wrap: pretty; line-break: strict; }
#top .lb-v2 h3        { font-size: 27px; line-height: 1.5;  font-weight: 600; text-wrap: pretty; }
#top .lb-v2 .entry-content-wrapper p,
#top .lb-v2 .entry-content-wrapper li { font-size: 16.5px; line-height: 1.85; text-wrap: pretty; line-break: strict; }
#top .lb-v2 .entry-content-wrapper .lb-lead p { font-size: 17px; line-height: 1.9; }
/* The base block sets `#top .lb-lead p { max-width: 52ch }` (=557px), which is
   what wrapped the intros early. Widened here only - the base rule still serves
   19521 and the other lb-* pages unchanged. */
#top .lb-v2 .entry-content-wrapper .lb-lead p,
#top .lb-v2 .entry-content-wrapper .lb-body p { max-width: 76ch; }
#top .lb-v2 .entry-content-wrapper .lb-note   { font-size: 15px; line-height: 1.8; }
#top .lb-v2 .entry-content-wrapper .lb-eyebrow {
  font-family: var(--v2-mono); font-size: 13.5px; line-height: 1.6;
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0; color: var(--v2-orange);
}
#top .lb-v2 .entry-content-wrapper .lb-v2-cap {
  font-family: var(--v2-mono); font-size: 14px; line-height: 1.75; margin: 4px 0 0;
}
#top .lb-v2 .avia-button { font-size: 16px; font-weight: 600; }

/* colour per surface. `.av-special-heading .av-special-heading-tag` (1,3,0) is
   required to beat Enfold's own (1,2,0) heading rule. Heading colour is NOT
   baked into the shortcode — putting it there meant regenerating the page
   silently reverted it. */
#top .lb-v2-light .av-special-heading .av-special-heading-tag,
#top .lb-v2-light h1, #top .lb-v2-light h2, #top .lb-v2-light h3 { color: var(--v2-ink); }
#top .lb-v2-light .entry-content-wrapper p,
#top .lb-v2-light .entry-content-wrapper li { color: var(--v2-ink-2); }
#top .lb-v2-light .entry-content-wrapper .lb-eyebrow { color: var(--v2-orange-dk); }
#top .lb-v2-light .entry-content-wrapper .lb-v2-cap  { color: #61707E; }

#top .lb-v2-hero .av-special-heading .av-special-heading-tag,
#top .lb-v2-dark .av-special-heading .av-special-heading-tag,
#top .lb-v2-char .av-special-heading .av-special-heading-tag,
#top .lb-v2-navy .av-special-heading .av-special-heading-tag,
#top .lb-v2-hero h1, #top .lb-v2-dark h2, #top .lb-v2-char h2, #top .lb-v2-navy h2,
#top .lb-v2-dark h3, #top .lb-v2-char h3, #top .lb-v2-navy h3 { color: var(--v2-on-dark); }
#top .lb-v2-hero .entry-content-wrapper p,
#top .lb-v2-dark .entry-content-wrapper p, #top .lb-v2-dark .entry-content-wrapper li,
#top .lb-v2-char .entry-content-wrapper p, #top .lb-v2-char .entry-content-wrapper li,
#top .lb-v2-navy .entry-content-wrapper p, #top .lb-v2-navy .entry-content-wrapper li { color: var(--v2-on-dark-2); }
#top .lb-v2-dark .entry-content-wrapper .lb-v2-cap,
#top .lb-v2-char .entry-content-wrapper .lb-v2-cap,
#top .lb-v2-navy .entry-content-wrapper .lb-v2-cap { color: #9FAAB6; }
#top .lb-v2-close .av-special-heading .av-special-heading-tag { color: #FFFFFF; }
#top .lb-v2-close .entry-content-wrapper p { color: rgba(255, 255, 255, 0.92); max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------- 4 GRIDS */
#top .lb-v2-hero .entry-content-wrapper {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center; row-gap: 28px; column-gap: clamp(32px, 3.4vw, 56px);
}
#top .lb-v2-g2 .entry-content-wrapper,
#top .lb-v2-g75 .entry-content-wrapper,
#top .lb-v2-g57 .entry-content-wrapper { display: grid; gap: var(--v2-s6); align-items: start; }
#top .lb-v2-g2  .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#top .lb-v2-g75 .entry-content-wrapper { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
#top .lb-v2-g57 .entry-content-wrapper { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
#top .lb-v2-flow .entry-content-wrapper {
  display: grid; grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr);
  align-items: stretch; column-gap: 28px; row-gap: var(--v2-s3);
}
#top .lb-v2-faq .entry-content-wrapper {
  display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: clamp(32px, 4vw, 72px); align-items: start;
}
#top .lb-v2-cta .entry-content-wrapper {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--v2-s6); align-items: stretch;
}
#top .lb-v2-close .entry-content-wrapper { display: flex; flex-direction: column; }
#top .lb-v2 .flex_column.lb-v2-head,
#top .lb-v2 .flex_column.lb-v2-full,
#top .lb-v2 .flex_column.lb-v2-crumbrow,
#top .lb-v2 .flex_column.lb-v2-diagramrow { grid-column: 1 / -1; }
#top .lb-v2-stretch .entry-content-wrapper { align-items: stretch; }
#top .lb-v2-stretch .flex_column { height: 100%; }

/* rhythm helpers */
#top .lb-v2 .lb-v2-head { display: flex; flex-direction: column; gap: 14px; }
#top .lb-v2 .lb-v2-col { display: flex; flex-direction: column; gap: var(--v2-s3); }
#top .lb-v2 .flex_column.lb-v2-copy { display: flex; flex-direction: column; gap: 22px; }

/* ---------------------------------------------------------- 5 COMPONENTS */

/* 5.1 breadcrumb + anchor nav ------------------------------------------- */
#top .lb-v2 .flex_column.lb-v2-crumbrow { margin-bottom: 4px; }
#top .lb-v2 .entry-content-wrapper .lb-crumbs {
  font-size: 13.5px; line-height: 1.6; margin: 0; color: var(--v2-on-dark-2);
}
#top .lb-v2 .lb-crumbs a { color: var(--v2-on-dark-2); text-decoration: none; }
#top .lb-v2 .lb-crumbs a:hover { color: #fff; }
#top .lb-v2 .lb-crumbs .lb-crumb-sep { margin: 0 7px; opacity: 0.45; }
#top .lb-v2-anchorbar .content,
#top .lb-v2-anchorbar .template-page { padding-top: 28px; padding-bottom: 28px; }
#top .lb-v2 .lb-v2-anchors { display: flex; flex-wrap: wrap; gap: 22px 30px; margin: 0; }
#top .lb-v2 .lb-v2-anchors a {
  font-size: 15px; color: var(--v2-on-dark-2); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
}
#top .lb-v2 .lb-v2-anchors a:hover { color: #fff; border-bottom-color: var(--v2-orange); }

/* 5.2 hero + signature frame -------------------------------------------- */
#top .lb-v2-hero .content,
#top .lb-v2-hero .template-page { padding-top: 72px; padding-bottom: 80px; }
#top .lb-v2 .flex_column.lb-v2-frame {
  background-image: radial-gradient(120% 120% at 6% 0%, #F39A55 0%, #EC7628 26%, #C7431F 58%, #8E2618 82%, #5E2115 100%);
  border-radius: 16px; padding: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34); align-self: center;
}
#top .lb-v2 .lb-v2-frame .lb-v2-bar {
  margin: 0 !important; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #12181F;
  border: 1px solid var(--v2-bd-dark); border-bottom: 0; border-radius: 9px 9px 0 0;
}
#top .lb-v2 .lb-v2-bar span { width: 8px; height: 8px; border-radius: 50%; background: #3A4550; display: inline-block; }
#top .lb-v2 .lb-v2-bar em {
  margin-left: 8px; font-family: var(--v2-mono); font-size: 11.5px;
  font-style: normal; letter-spacing: 0.06em; color: #8A96A2;
}
#top .lb-v2 .lb-v2-frame .lb-v2-shot { margin: 0 !important; }
#top .lb-v2 .lb-v2-frame .lb-v2-shot img {
  display: block; width: 100%; height: auto; background: #0C1116;
  border: 1px solid var(--v2-bd-dark); border-top: 0; border-radius: 0 0 9px 9px;
}

/* FIX 1 — the secondary hero button had no visible border.
   Enfold emits its own per-element rule for the button colours, so the border
   needs !important to be reached. Two problems were stacked: the width
   computed to 0.67px, and the colour (#2C3742) was a dark slate sitting on the
   navy hero, so even when painted it was invisible. */
/* Two separate traps here. `:not(:first-child)` matched BOTH buttons, because
   Enfold emits a <style> element between them so neither <a> is the first
   child - `:last-of-type` counts only the <a> siblings. And Enfold's own
   `#top #wrap_all .avia-button.av-lbXXXX { border-width: 1px }` computes to
   0.667px on a fractional-DPR display, which reads as no border at all, so
   this asks for 2px. */
#top .lb-v2-hero .lb-btnrow a.avia-button:last-of-type {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
#top .lb-v2-hero .lb-btnrow a.avia-button:last-of-type:hover {
  border-color: #FFFFFF !important;
  color: var(--v2-orange-lt) !important;
}
#top .lb-v2 .avia-buttonrow-wrap.lb-btnrow { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }

/* 5.3 white technical panel + figures ------------------------------------ */
#top .lb-v2 .flex_column.lb-v2-panel {
  background: var(--v2-white); border: 1px solid var(--v2-bd-light);
  border-radius: 12px; padding: 34px;
  display: flex; flex-direction: column; gap: 18px;
}
#top .lb-v2 .lb-v2-panel h3 { font-size: 26px; line-height: 1.5; font-weight: 600; color: var(--v2-ink); }
#top .lb-v2 .lb-v2-panel .entry-content-wrapper p,
#top .lb-v2 .lb-v2-panel p { font-size: 15.5px; line-height: 1.85; color: var(--v2-ink-2); }
#top .lb-v2 .lb-v2-panel .lb-eyebrow { color: var(--v2-orange-dk); }
#top .lb-v2 .lb-v2-panel img { display: block; width: 100%; height: auto; }
#top .lb-v2 .lb-v2-fig, #top .lb-v2 .lb-v2-capwrap { margin: 0 !important; }
#top .lb-v2 .flex_column.lb-v2-ovcopy { align-self: start; }
#top .lb-v2 .flex_column.lb-v2-ovfig  { align-self: stretch; justify-content: center; }
#top .lb-v2-g75 .flex_column.lb-v2-panel { align-self: center; }

/* principle diagram: capped, centred, neutral frame (never the warm frame) */
#top .lb-v2 .flex_column.lb-v2-diagramrow {
  width: 100%; max-width: 860px; margin: 24px auto 0;
  background: var(--v2-white); border: 1px solid var(--v2-bd-light);
  border-radius: 12px; padding: 24px 24px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
#top .lb-v2 .lb-v2-diagimg { margin: 0 !important; }
#top .lb-v2 .lb-v2-diagimg img { display: block; width: 100%; height: auto; }
#top .lb-v2 .lb-v2-diagramrow .lb-v2-cap { text-align: center; }

/* 5.4 numbered feature rows --------------------------------------------- */
#top .lb-v2 .lb-v2-rows { display: flex; flex-direction: column; }
#top .lb-v2 .lb-v2-rows .lb-v2-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--v2-s3);
  padding: var(--v2-s4) 0; border-top: 1px solid var(--v2-bd-light); align-items: start;
}
#top .lb-v2 .lb-v2-rows .lb-v2-row:last-child { border-bottom: 1px solid var(--v2-bd-light); }
#top .lb-v2 .entry-content-wrapper .lb-v2-num {
  /* 2026-08-11: 14px/500 read as too small in the 利点 / ソルバー and 解析ワークフロー
     rows on MODE and FDTD. 15px/600 keeps the number subordinate to the 22-26px
     h3 while making it clearly visible. tabular-nums gives every numeral the same
     advance width, so 01-05 occupy an identical area and the headings align; the
     fixed 56px / 40px grid column in 5.4 already reserves that area. No circle,
     box, badge or oversized decorative treatment. */
  font-family: var(--v2-mono); font-size: 26px; line-height: 1.5; font-weight: 600;
  color: var(--v2-orange); padding-top: 0; margin: 0;
  font-variant-numeric: tabular-nums;
}
#top .lb-v2 .lb-v2-row h3 { margin: 0 0 10px; font-size: 26px; }
#top .lb-v2 .lb-v2-row p  { margin: 0; }

/* 5.5 do / consider panels ---------------------------------------------- */
#top .lb-v2 .flex_column.lb-v2-do,
#top .lb-v2 .flex_column.lb-v2-dont {
  border-radius: 12px; padding: var(--v2-s4);
  display: flex; flex-direction: column; gap: var(--v2-s2);
}
#top .lb-v2 .flex_column.lb-v2-do   { background: rgba(236, 118, 40, 0.10); border: 1px solid rgba(236, 118, 40, 0.42); }
#top .lb-v2 .flex_column.lb-v2-dont { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--v2-bd-navy); }
#top .lb-v2 .lb-v2-do ul, #top .lb-v2 .lb-v2-dont ul { margin: 0; padding-left: 1.15em; display: grid; gap: 10px; }
#top .lb-v2 .lb-v2-do a, #top .lb-v2 .lb-v2-dont a {
  color: var(--v2-orange-lt); text-decoration: none; border-bottom: 1px solid rgba(243, 154, 85, 0.45);
}
#top .lb-v2 .lb-v2-do a:hover, #top .lb-v2 .lb-v2-dont a:hover { color: #fff; border-bottom-color: #fff; }

/* 5.6 application cards -------------------------------------------------- */
/* A card carries BOTH .lb-v2-panel and .lb-v2-appcard, so every rule that
   must beat the panel defaults names both classes. */
#top .lb-v2 .flex_column.lb-v2-panel.lb-v2-appcard {
  position: relative; padding: 0; gap: 0; overflow: hidden;
  border-width: 1px;
  transition: transform 200ms var(--v2-ease), border-color 200ms var(--v2-ease), box-shadow 200ms var(--v2-ease);
}
#top .lb-v2 .lb-v2-appcard .lb-v2-fig,
#top .lb-v2 .lb-v2-appcard .lb-v2-slotwrap { margin: 0 !important; overflow: hidden; }
#top .lb-v2 .lb-v2-appcard .lb-v2-fig img {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  /* contain, never cover — cropping a technical plot loses axes and legends */
  object-fit: contain; background: #FFFFFF;
  border-bottom: 1px solid var(--v2-bd-light);
  transition: transform 220ms var(--v2-ease);
}
#top .lb-v2 .lb-v2-appcard .lb-v2-slot {
  margin: 0; aspect-ratio: 16 / 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: #EDF1F5; border-bottom: 1px solid var(--v2-bd-light);
  font-family: var(--v2-mono); font-size: 14px; color: #7C8A98;
}
#top .lb-v2 .lb-v2-appcard .lb-v2-slot span { font-size: 13px; opacity: 0.9; }

/* FIX 2 — the card title and body sat 1px from the card edge.
   `lb-v2-appbody` lands on `div.avia_textblock` itself, not on the wrapping
   `section.av_textblock_section`, so the old `.lb-v2-appbody .avia_textblock`
   selector matched nothing. Padding goes on the class directly; the section
   above it has to become a flex item so the CTA can still sit at the foot. */
#top .lb-v2 .lb-v2-appcard section.av_textblock_section {
  display: flex; flex-direction: column; flex: 1 1 auto; margin: 0;
}
/* The textblock shortcode carries padding='0', which Enfold turns into an
   id-scoped rule (`#top #wrap_all .av-lbXXXX .avia_textblock`). No selector
   built from classes can outrank two ids, so this is the one place the card
   needs !important. */
#top .lb-v2 .lb-v2-appcard .lb-v2-appbody {
  display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px;
  padding: 30px 32px 32px !important;
}
#top .lb-v2 .lb-v2-appcard .lb-v2-appbody h3 { margin: 0; font-size: 26px; }
#top .lb-v2 .lb-v2-appcard .lb-v2-appbody p  { margin: 0; }
#top .lb-v2 .lb-v2-appcard .lb-v2-cardcta { margin: auto 0 0; padding-top: 18px; }
#top .lb-v2 .lb-v2-appcard .lb-v2-cardcta a {
  font-size: 15.5px; font-weight: 600; color: var(--v2-orange-dk);
  text-decoration: none; border-bottom: 2px solid rgba(194, 90, 21, 0.4); padding-bottom: 2px;
}
/* stretched link — whole card is the hit area, and it works on touch */
#top .lb-v2 .lb-v2-appcard .lb-v2-cardcta a::after { content: ""; position: absolute; inset: 0; }
/* CTA text with no destination yet: reads as a muted label, not a dead link.
   #8894A0 measured 3.1:1 on the white card - #61707E is 5.1:1. */
#top .lb-v2 .lb-v2-appcard .lb-v2-cardcta-off span {
  font-size: 14px; color: #61707E; font-family: var(--v2-mono); letter-spacing: 0.04em;
}
#top .lb-v2 .lb-v2-appcard .lb-v2-cardcta-off { cursor: default; }

/* 5.7 INPUT -> RCWA -> OUTPUT ------------------------------------------- */
#top .lb-v2 .flex_column.lb-v2-io {
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--v2-bd-dark);
  border-radius: 12px; padding: var(--v2-s4); height: 100%;
  display: flex; flex-direction: column; gap: var(--v2-s2);
}
#top .lb-v2 .flex_column.lb-v2-core {
  position: relative; height: 100%;
  background: linear-gradient(160deg, #0C385F 0%, #072C50 100%);
  border: 1px solid var(--v2-bd-navy); border-radius: 12px;
  padding: var(--v2-s3) var(--v2-s2);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 8px; text-align: center;
}
#top .lb-v2 .entry-content-wrapper .lb-v2-core-t {
  font-family: var(--v2-mono); font-size: 19px; font-weight: 600;
  color: #fff; margin: 0; letter-spacing: 0.04em;
}
#top .lb-v2 .entry-content-wrapper .lb-v2-core-s { font-size: 13px; color: var(--v2-on-dark-2); margin: 0; }
#top .lb-v2 .entry-content-wrapper .lb-v2-io-t {
  font-family: var(--v2-mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--v2-orange); margin: 0;
}
#top .lb-v2 .lb-v2-io .lb-h3 h3 { font-size: 22px; margin-bottom: 4px; }
#top .lb-v2 .lb-v2-core::before,
#top .lb-v2 .lb-v2-core::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 2px;
  background: rgba(236, 118, 40, 0.55);
}
#top .lb-v2 .lb-v2-core::before { left: -27px; }
#top .lb-v2 .lb-v2-core::after  { right: -27px; }

/* 5.8 tables ------------------------------------------------------------- */
#top .lb-v2 table.avia-table.lb-spec {
  width: 100%; border-radius: 10px; font-size: 15px; line-height: 1.8;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
/* FIX 4 — the heading row renders as <th>, not <td>. The old light-surface
   rules only named td, so the header kept the dark-surface background from the
   base stylesheet: #465968 text on #222222. Every rule below names both. */
#top .lb-v2-light table.avia-table.lb-spec { background: var(--v2-white); border: 1px solid var(--v2-bd-light); }
#top .lb-v2-light table.avia-table.lb-spec th,
#top .lb-v2-light table.avia-table.lb-spec td {
  border-bottom: 1px solid var(--v2-bd-light); padding: 15px 18px;
  color: var(--v2-ink-2); vertical-align: top; text-align: left;
  transition: background 160ms ease;
}
#top .lb-v2-light table.avia-table.lb-spec th,
#top .lb-v2-light table.avia-table.lb-spec .avia-heading-row th,
#top .lb-v2-light table.avia-table.lb-spec .avia-heading-row td {
  background: #E7EDF3;
  color: #3C4C5B;
  font-family: var(--v2-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid #CBD6E0;
}
#top .lb-v2-light table.avia-table.lb-spec tr:last-child th,
#top .lb-v2-light table.avia-table.lb-spec tr:last-child td { border-bottom: 0; }
#top .lb-v2-light table.avia-table.lb-spec tbody tr:not(.avia-heading-row):hover td { background: #EEF3F8; }
#top .lb-v2-light table.avia-table.lb-spec td:first-child { font-weight: 600; color: var(--v2-ink); white-space: normal; }
#top .lb-v2-light table.avia-table.lb-spec td:nth-child(2) { font-weight: 600; white-space: nowrap; }
#top .lb-v2-light table.avia-table.lb-spec td:nth-child(2) a {
  color: var(--v2-orange-dk); text-decoration: none;
  border-bottom: 2px solid rgba(194, 90, 21, 0.35);
}
#top .lb-v2-light table.avia-table.lb-spec td:nth-child(2) a:hover { color: #A8480F; border-bottom-color: #A8480F; }
#top .lb-v2-light table.avia-table.lb-spec td:nth-child(3) { color: var(--v2-ink-3); font-size: 15px; }
/* tables inside the dark INPUT/OUTPUT panels */
#top .lb-v2 .lb-v2-io table.avia-table.lb-spec { background: transparent; border: 0; }
#top .lb-v2 .lb-v2-io table.avia-table.lb-spec th,
#top .lb-v2 .lb-v2-io table.avia-table.lb-spec td {
  padding: 13px 0; font-size: 15px; color: var(--v2-on-dark-2);
  background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#top .lb-v2 .lb-v2-io table.avia-table.lb-spec tr:last-child td { border-bottom: 0; }

/* 5.9 FAQ ---------------------------------------------------------------- */
#top .lb-v2 .flex_column.lb-v2-faqhead { align-self: start; display: flex; flex-direction: column; gap: 16px; }
#top .lb-v2 .lb-v2-faqhead .lb-h2 h2 { max-width: none; }
#top .lb-v2 .togglecontainer { margin: 0; }
#top .lb-v2 .single_toggle {
  background: #242D37; border: 1px solid #3A4552; border-radius: var(--lb-radius-md);
  margin-bottom: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
#top .lb-v2 .single_toggle .toggler {
  margin: 0; padding: 20px 22px 20px 52px; border: 0; background: transparent;
  color: var(--v2-on-dark); font-size: 17px; font-weight: 600; line-height: 1.6;
}
#top .lb-v2 .single_toggle .toggler.activeTitle { background: #29333E; }
#top .lb-v2 .single_toggle .toggle_content { padding: 0 22px 22px; margin: 0; font-size: 16px; line-height: 1.85; color: var(--v2-on-dark-2); }
#top .lb-v2 .single_toggle .toggle_icon { left: 22px; }

/* 5.10 support / consultation ------------------------------------------- */
#top .lb-v2 .flex_column.lb-v2-support,
#top .lb-v2 .flex_column.lb-v2-check {
  border-radius: 12px; padding: 32px 34px; display: flex; flex-direction: column; gap: 12px;
}
#top .lb-v2 .flex_column.lb-v2-support { background: var(--v2-navy-soft); border: 1px solid var(--v2-bd-navy); }
#top .lb-v2 .flex_column.lb-v2-check   { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--v2-bd-navy); }
#top .lb-v2 .lb-v2-support h3, #top .lb-v2 .lb-v2-check h3 { margin-bottom: 2px; font-size: 26px; }
#top .lb-v2 .lb-v2-supbody, #top .lb-v2 .lb-v2-checkbody { display: flex; flex-direction: column; flex: 1; margin: 0 !important; }
#top .lb-v2 .entry-content-wrapper .lb-v2-supbody p,
#top .lb-v2 .entry-content-wrapper .lb-v2-checkbody p { font-size: 15.5px; }
#top .lb-v2 .lb-v2-check .lb-list { gap: 8px; margin: 0 0 12px; }
#top .lb-v2 .lb-v2-support .lb-arrowlink { margin: 0; }
#top .lb-v2 .lb-v2-support .lb-arrowlink:first-of-type { margin-top: auto; padding-top: 14px; }
#top .lb-v2 .lb-v2-support .lb-arrowlink a {
  color: var(--v2-orange-lt); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(243, 154, 85, 0.45); padding-bottom: 2px;
}
#top .lb-v2 .lb-v2-support .lb-arrowlink a:hover { color: #fff; border-bottom-color: #fff; }
#top .lb-v2 .lb-v2-check .lb-note { margin-top: auto; padding-top: 10px; }

/* 5.11 closing CTA ------------------------------------------------------- */
#top .lb-v2-close .content,
#top .lb-v2-close .template-page { padding-top: 80px; padding-bottom: 80px; }
#top .lb-v2-close .lb-h2 h2 { font-size: 40px; line-height: 1.4; max-width: none; }
#top .lb-v2 .flex_column.lb-v2-closecol {
  display: flex; flex-direction: column; gap: var(--v2-s3);
  align-items: center; text-align: center;
}
#top .lb-v2-close .entry-content-wrapper { align-items: center; }
#top .lb-v2-close .av-special-heading,
#top .lb-v2-close .lb-lead,
#top .lb-v2-close .avia-buttonrow-wrap { width: 100%; }
/* Enfold floats `.av-special-heading-tag`, so the h2 shrinks to fit its text
   (836px inside a 1152px column) and text-align only centres within that box.
   Clearing the float lets it fill the column so the centring actually lands. */
#top .lb-v2-close .av-special-heading .av-special-heading-tag {
  float: none; width: 100%; display: block;
  margin-left: auto; margin-right: auto; text-align: center;
}
#top .lb-v2-close .avia-buttonrow-wrap.lb-v2-btnrow { justify-content: center; }
#top .lb-v2 .avia-buttonrow-wrap.lb-v2-btnrow { gap: 14px; margin-top: 6px; }

/* ------------------------------------------------------ 6 STATE & MOTION */
/* FIX 3 — hover was a colour change on a 0.67px border, which read as nothing.
   A box-shadow ring gives a 2px highlight with no layout shift. */
#top .lb-v2 .flex_column.lb-v2-panel.lb-v2-appcard:hover {
  transform: translateY(-4px);
  border-color: var(--v2-orange-dk);
  box-shadow: 0 0 0 2px var(--v2-orange-dk), 0 16px 34px rgba(16, 36, 53, 0.18);
}
#top .lb-v2 .lb-v2-appcard:hover .lb-v2-fig img { transform: scale(1.03); }
#top .lb-v2 .lb-v2-appcard:hover .lb-v2-cardcta a { border-bottom-color: var(--v2-orange-dk); }
#top .lb-v2 .flex_column.lb-v2-panel.lb-v2-appcard:focus-within {
  border-color: var(--v2-orange-dk);
  box-shadow: 0 0 0 3px rgba(194, 90, 21, 0.45), 0 16px 34px rgba(16, 36, 53, 0.18);
}
#top .lb-v2 a:focus-visible { outline: 2px solid var(--v2-orange-lt); outline-offset: 2px; }

@media (hover: none) {
  #top .lb-v2 .flex_column.lb-v2-panel.lb-v2-appcard:hover { transform: none; box-shadow: none; }
  #top .lb-v2 .lb-v2-appcard:hover .lb-v2-fig img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #top .lb-v2 .flex_column.lb-v2-panel.lb-v2-appcard:hover { transform: none; }
  #top .lb-v2 .lb-v2-appcard:hover .lb-v2-fig img { transform: none; }
}

/* -------------------------------------------------------- 7 RESPONSIVE */
/* Paired with the max-width: 989px block above. Was 992px, which left a 2px
   window (990-991) where neither rule applied. */
@media only screen and (min-width: 990px) {
  #top .lb-v2 .entry-content-wrapper .lb-crumbs { white-space: nowrap; }
}
/* NON-CANONICAL and not an Enfold breakpoint. Narrows the lb-v2-flow centre
   column before the 989 collapse; kept because re-pointing it to 1120 would
   change V2 flow rendering, which Gate R froze. Candidate for migration to
   1120 when V2 is next re-valued. */
@media only screen and (max-width: 1199px) {
  #top .lb-v2-flow .entry-content-wrapper { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); }
}
/* Enfold breakpoint. This is where the theme stacks flex_columns for the V2
   grids, so the grid-template overrides must land on the same pixel. */
@media only screen and (max-width: 989px) {
  #top .lb-v2-hero .entry-content-wrapper,
  #top .lb-v2-g2 .entry-content-wrapper,
  #top .lb-v2-g75 .entry-content-wrapper,
  #top .lb-v2-g57 .entry-content-wrapper,
  #top .lb-v2-flow .entry-content-wrapper,
  #top .lb-v2-faq .entry-content-wrapper,
  #top .lb-v2-cta .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); }
  #top .lb-v2 .flex_column.lb-v2-core { min-height: 96px; }
  #top .lb-v2 .lb-v2-core::before,
  #top .lb-v2 .lb-v2-core::after { display: none; }
  #top .lb-v2 .flex_column.lb-v2-faqhead .lb-h2 h2 { max-width: none; }
  #top .lb-v2 .flex_column.lb-v2-diagramrow { max-width: 100%; padding: 16px 16px 12px; }
}
/* Enfold breakpoint. V2 mobile type scale and rhythm (canonical per the v3.2
   amendment, items A3-A6); the step is tied to the theme's stacked layout. */
@media only screen and (max-width: 767px) {
  #top .lb-v2 { --v2-pad: 44px; --v2-pad-lg: 56px; }
  #top .lb-v2 .lb-h1 h1 { font-size: 33px; line-height: 1.42; }
  #top .lb-v2 .lb-h2 h2 { font-size: 27.5px; line-height: 1.5; }
  #top .lb-v2 h3 { font-size: 22px; }
  #top .lb-v2 .lb-v2-panel h3,
  #top .lb-v2 .lb-v2-row h3,
  #top .lb-v2 .lb-v2-support h3,
  #top .lb-v2 .lb-v2-check h3,
  #top .lb-v2 .lb-v2-appcard .lb-v2-appbody h3 { font-size: 22px; }
  #top .lb-v2 .entry-content-wrapper p,
  #top .lb-v2 .entry-content-wrapper li,
  #top .lb-v2 .entry-content-wrapper .lb-lead p { font-size: 16px; line-height: 1.85; }
  #top .lb-v2-hero .content,
  #top .lb-v2-hero .template-page { padding-top: 48px; padding-bottom: 56px; }
  #top .lb-v2-anchorbar .content,
  #top .lb-v2-anchorbar .template-page { padding-top: 20px; padding-bottom: 20px; }
  #top .lb-v2 .flex_column.lb-v2-panel { padding: 24px; gap: 14px; }
  /* matches the !important on the desktop rule above, which is forced by
     Enfold's id-scoped padding='0' rule */
  #top .lb-v2 .lb-v2-appcard .lb-v2-appbody { padding: 24px 22px 26px !important; }
  #top .lb-v2 .flex_column.lb-v2-support,
  #top .lb-v2 .flex_column.lb-v2-check { padding: 26px 22px; }
  #top .lb-v2 .lb-v2-rows .lb-v2-row { grid-template-columns: 40px minmax(0, 1fr); gap: var(--v2-s2); }
  #top .lb-v2-close .content,
  #top .lb-v2-close .template-page { padding-top: 56px; padding-bottom: 56px; }
  #top .lb-v2-close .lb-h2 h2 { font-size: 30px; }
}

/* ==========================================================================
   15  SECTION-HEADER RHYTHM — reusable, token-driven
   ==========================================================================
   One block owns the vertical rhythm of every section header on the site:

       eyebrow  ->  heading        --lb-hdr-eyebrow    (target 12-16px)
       heading  ->  intro copy     --lb-hdr-intro      (target 20-24px)
       header   ->  main content   --lb-hdr-content    (target 40-48px)

   Why this exists: before it, each section carried its own column gap
   (14 / 16 / 22 / 24px) so the same relationship measured differently from
   section to section, and `.lb-v2-intro` added `margin-bottom: 48px` on top of
   the grid `row-gap: 48px`, producing 96px voids after several H2s.

   Tune the tokens here. Do NOT add per-section spacing overrides.

   Deliberately excluded (approved compositions with their own internal
   rhythm): the hero copy column, the closing CTA column, and content cards
   (.lb-v2-panel / .lb-v2-appcard / .lb-v2-support / .lb-v2-check).
   ========================================================================== */

:root {
  --lb-hdr-eyebrow: 14px;
  --lb-hdr-intro: 22px;
  --lb-hdr-content: 44px;
  --lb-body-rhythm: 24px;
  --lb-hdr-eyebrow-size: 15px;
}

/* --- 15.1 eyebrow label: one size and one tracking everywhere ------------
   Was 12px on the phase-1 pages and 13.5px in v2, which read as undersized
   next to a 40px+ H2 (most visibly 「概要」 in the large Overview section). */
#top .lb-sec .entry-content-wrapper .lb-eyebrow {
  font-size: var(--lb-hdr-eyebrow-size);
  line-height: 1.5;
  letter-spacing: 0.1em;
}

/* --- 15.2 the header column ---------------------------------------------
   A header column is any builder column whose direct children include an
   eyebrow label or an av_heading. The base gap is the eyebrow-to-heading
   distance; 15.3 widens the two relationships that need more room. */
#top .lb-sec .flex_column:not(.lb-v2-copy):not(.lb-hero-copy):not(.lb-v2-closecol):not(.lb-v2-panel):not(.lb-v2-support):not(.lb-v2-check):has(> :where(.lb-eyebrow-wrap, .av-special-heading)) {
  display: flex;
  flex-direction: column;
  row-gap: var(--lb-hdr-eyebrow);
}

/* --- 15.3 heading -> intro, then normal reading rhythm -------------------
   Flex `row-gap` already contributes --lb-hdr-eyebrow, so each rule only adds
   the difference. `.h ~ * + *` cannot match the element directly after the
   heading, so the two rules never fight. */
#top .lb-sec .flex_column:not(.lb-v2-copy):not(.lb-hero-copy):not(.lb-v2-closecol):not(.lb-v2-panel):not(.lb-v2-support):not(.lb-v2-check) > .av-special-heading + * {
  margin-top: calc(var(--lb-hdr-intro) - var(--lb-hdr-eyebrow));
}
#top .lb-sec .flex_column:not(.lb-v2-copy):not(.lb-hero-copy):not(.lb-v2-closecol):not(.lb-v2-panel):not(.lb-v2-support):not(.lb-v2-check) > .av-special-heading ~ * + * {
  margin-top: calc(var(--lb-body-rhythm) - var(--lb-hdr-eyebrow));
}

/* --- 15.4 header block -> main content -----------------------------------
   The header column no longer carries a bottom margin. The distance is owned
   by the grid row-gap alone, so it can never double up again. */
/* Default: the header column owns the distance. This is the only case that
   works in a plain (non-grid) section wrapper. */
#top .lb-sec .flex_column.lb-head,
#top .lb-sec .flex_column.lb-v2-head,
#top .lb-v2 .lb-v2-intro { margin-bottom: var(--lb-hdr-content); }

/* Inside a grid wrapper the row-gap already owns it, so the margin is removed
   - this is exactly the double-up that produced the 96px voids. */
#top .lb-v2-g2 .entry-content-wrapper,
#top .lb-v2-g75 .entry-content-wrapper,
#top .lb-v2-g57 .entry-content-wrapper,
#top .lb-v2-flow .entry-content-wrapper,
#top .lb-v2-cta .entry-content-wrapper { row-gap: var(--lb-hdr-content); }

#top .lb-v2-g2 .entry-content-wrapper > .flex_column,
#top .lb-v2-g75 .entry-content-wrapper > .flex_column,
#top .lb-v2-g57 .entry-content-wrapper > .flex_column,
#top .lb-v2-flow .entry-content-wrapper > .flex_column,
#top .lb-v2-faq .entry-content-wrapper > .flex_column,
#top .lb-v2-cta .entry-content-wrapper > .flex_column { margin-bottom: 0; }

/* --- 15.5 a header sits at the top of its row ----------------------------
   `.lb-v2-ovcopy` was `align-self: center`, so whenever the figure panel
   beside it was taller the whole header slid down and opened a large void
   above 「概要」. A section header is a top-aligned element by definition. */
#top .lb-sec .flex_column:not(.lb-v2-panel):has(> .lb-h2) { align-self: start; }
#top .lb-v2 .flex_column.lb-v2-ovcopy { align-self: start; }

/* --- 15.6 mobile: same relationships, one step tighter ------------------- */
/* Enfold breakpoint, forced: the rules below exist purely to outrank Enfold's
   own `.responsive #top #wrap_all .flex_column { margin: 0 0 20px }`, which
   only applies at this width. See the note inside the block. */
@media only screen and (max-width: 767px) {
  :root {
    --lb-hdr-eyebrow: 12px;
    --lb-hdr-intro: 20px;
    --lb-hdr-content: 36px;
    --lb-hdr-eyebrow-size: 14px;
  }

  /* Enfold emits `.responsive #top #wrap_all .flex_column { margin: 0 0 20px }`
     (1,3,0) and its merged stylesheet loads AFTER this file, so the equal-
     specificity desktop rules lose at mobile and the 20px stacks on top of the
     grid row-gap. One extra id puts the header rhythm back in control. */
  #top #wrap_all .lb-sec .flex_column.lb-head,
  #top #wrap_all .lb-sec .flex_column.lb-v2-head,
  #top #wrap_all .lb-v2 .lb-v2-intro { margin-bottom: var(--lb-hdr-content); }

  #top #wrap_all .lb-v2-g2 .entry-content-wrapper > .flex_column,
  #top #wrap_all .lb-v2-g75 .entry-content-wrapper > .flex_column,
  #top #wrap_all .lb-v2-g57 .entry-content-wrapper > .flex_column,
  #top #wrap_all .lb-v2-flow .entry-content-wrapper > .flex_column,
  #top #wrap_all .lb-v2-faq .entry-content-wrapper > .flex_column,
  #top #wrap_all .lb-v2-cta .entry-content-wrapper > .flex_column { margin-bottom: 0; }
}

/* --- 15.7 caption inside a white technical panel --------------------------
   `.lb-v2-panel` is a white card that can sit on a dark section. Block 14.4
   colours captions by SECTION surface, so a caption inside a white panel on a
   dark section inherited the dark-surface grey (#9FAAB6 on white = 2.36:1).
   Panel surface wins over section surface. */
#top .lb-v2 .lb-v2-panel .entry-content-wrapper .lb-v2-cap,
#top .lb-v2-dark .lb-v2-panel .lb-v2-cap,
#top .lb-v2-char .lb-v2-panel .lb-v2-cap,
#top .lb-v2-navy .lb-v2-panel .lb-v2-cap { color: #61707E; }

/* ==========================================================================
   16  解析ワークフロー (workflow steps)
   Reuses the numbered-row component from the advantages section, so the step
   list inherits the same rhythm and needs no new tokens.
   ========================================================================== */
#top .lb-v2 .flex_column.lb-v2-full.lb-v2-col { grid-column: 1 / -1; }
#top .lb-v2 .lb-v2-steps { display: grid; gap: 0; }
#top .lb-v2 .lb-v2-steps .lb-v2-row:first-child { border-top: 0; padding-top: 0; }
#top .lb-v2 .lb-v2-steps .lb-v2-num { font-variant-numeric: tabular-nums; }

/* the Photonic Verilog-A sub-block on the INTERCONNECT page */
#top .lb-v2 .flex_column.lb-v2-substeps {
  grid-column: 1 / -1;
  margin-top: var(--lb-hdr-content);
  padding-top: var(--v2-s5);
  border-top: 1px solid var(--v2-bd-light);
  display: flex; flex-direction: column; row-gap: var(--lb-hdr-eyebrow);
}
#top .lb-v2 .lb-v2-substeps .lb-h3 h3 { font-size: 24px; }
#top .lb-v2 .entry-content-wrapper .lb-notewrap .lb-note { margin-top: var(--v2-s2); }

/* a prepared slot standing in for a hero visual keeps the frame's proportions */
#top .lb-v2 .flex_column.lb-v2-frame .lb-v2-slotwrap { width: 100%; }
#top .lb-v2 .flex_column.lb-v2-frame .lb-v2-slot { min-height: 260px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; margin: 0; }

/* ================================================================ 16 MODULE GRID
   The capability matrix on a suite hub: N modules, each a link card. Suite hubs
   list 9 (Multiphysics), 3 (System) or 5 (Zemax) modules, so the grid is
   auto-fit rather than a fixed column count - one rule serves every hub and
   there is no per-page override to drift.

   Lives in a `.lb-v2-full` column inside an ordinary section, so it inherits the
   section surface. Only the light surface is specified: a suite hub's module
   grid sits on off-white, matching the 用途 grid on the solver pages.
   ============================================================================ */
#top .lb-v2 .lb-v2-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-s3);
  margin: 0;
}

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 24px 24px 20px;
  background: var(--v2-white);
  border: 1px solid var(--v2-bd-light);
  border-radius: 12px;
  transition: border-color 180ms var(--v2-ease), box-shadow 240ms var(--v2-ease), transform 240ms var(--v2-ease);
}

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod:hover {
  border-color: var(--v2-orange);
  box-shadow: 0 0 0 2px rgba(236, 118, 40, 0.18), 0 18px 32px rgba(16, 36, 53, 0.10);
  transform: translateY(-2px);
}

/* The module name is the link, and the whole card is the hit area. */
#top .lb-v2 .lb-v2-modgrid .lb-v2-mod-name {
  margin: 0;
  font-family: var(--v2-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v2-ink);
}

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod-name a {
  color: var(--v2-ink);
  text-decoration: none;
}

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod { position: relative; }

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod:hover .lb-v2-mod-name a { color: var(--v2-orange-dk); }

#top .lb-v2 .lb-v2-modgrid .lb-v2-mod-name a:focus-visible {
  outline: 2px solid var(--v2-orange);
  outline-offset: 3px;
}

#top .lb-v2 .entry-content-wrapper .lb-v2-modgrid .lb-v2-mod-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--v2-ink-2);
}

/* A module whose page is not live yet: same wording, same layout, no link -
   decision 6. Muted so it is visibly not a destination. */
#top .lb-v2 .lb-v2-modgrid .lb-v2-mod-off .lb-v2-mod-name { color: var(--v2-ink-3); }
#top .lb-v2 .lb-v2-modgrid .lb-v2-mod-off:hover {
  border-color: var(--v2-bd-light);
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #top .lb-v2 .lb-v2-modgrid .lb-v2-mod { transition-duration: 0.01ms; }
  #top .lb-v2 .lb-v2-modgrid .lb-v2-mod:hover { transform: none; }
}


/* 01/02/03 numbering follows the item heading at every breakpoint.
   The heading is 26px and steps to 22px at <=767px (see 'lb-v2-row h3' above), so
   the number does the same. The number AREA is the grid column in 5.4 - 56px, 40px
   below 989px - and is deliberately not changed here. */
/* Enfold breakpoint (layout.css uses 479 / 767 / 989 / 1024): the theme's
   own column collapse lands here, so this block must match it. */
@media only screen and (max-width: 767px) {
  #top .lb-v2 .entry-content-wrapper .lb-v2-num { font-size: 22px; }
}


/* ============================================================================
   17 WORKFLOW CARDS  (.lb-v2-wfgrid)                    added 2026-08-11, C3-R3
   ----------------------------------------------------------------------------
   The four representative workflows on a suite hub. They were a 3-column spec
   table; as cards each one reads as a direction — sources, arrow, destination,
   then the outcome underneath.

   Same grid rule as block 16 (`auto-fit, minmax(min(100%, 260px), 1fr)`) so the
   two components line up and there is no second breakpoint to maintain. Block
   16 is specified for the light surface; this one is specified for the NAVY
   surface, because that is where the ワークフロー section sits in the approved
   tone rhythm. It uses only existing tokens — no new colours are introduced.

   The arrow is a text character in an <em>. Inline SVG is banned outright: it
   breaks the Advanced Layout Builder (empty canvas, spinner forever, no JS
   error), which is a standing trap in this project.
   ============================================================================ */
#top .lb-v2 .lb-v2-wfgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-s3);
  margin: 0;
}

#top .lb-v2 .lb-v2-wfgrid .lb-v2-wf {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  margin: 0;
  padding: 24px 24px 20px;
  background: var(--v2-navy-soft);
  border: 1px solid var(--v2-bd-navy);
  border-radius: 12px;
}

#top .lb-v2 .entry-content-wrapper .lb-v2-wfgrid .lb-v2-wf-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--v2-on-dark);
}

/* The chain wraps rather than scrolling: a workflow with a long solver label
   must stay readable at 390px, where a card is a single full-width column. */
#top .lb-v2 .entry-content-wrapper .lb-v2-wfgrid .lb-v2-wf-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v2-s1);
  margin: 0;
}

#top .lb-v2 .lb-v2-wfgrid .lb-v2-wf-chain span {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--v2-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--v2-on-dark);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--v2-bd-navy);
  border-radius: 6px;
}

#top .lb-v2 .lb-v2-wfgrid .lb-v2-wf-chain em {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  color: var(--v2-orange);
}

#top .lb-v2 .entry-content-wrapper .lb-v2-wfgrid .lb-v2-wf-out {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--v2-on-dark-2);
}

/* Enfold breakpoint (layout.css uses 479 / 767 / 989 / 1024): the theme's
   own column collapse lands here, so this block must match it. */
@media only screen and (max-width: 767px) {
  #top .lb-v2 .lb-v2-wfgrid .lb-v2-wf { padding: 20px 20px 18px; }
}

/* ============================================================================
   18  EDA CAPABILITY CARDS  (.lb-v2-edagrid)      added 2026-08-11, C4-R3
   ----------------------------------------------------------------------------
   A compact card grid for a SUPPORTING capability band. First use: the
   Photonic Verilog-A / EDA integration section on the INTERCONNECT product
   page.

   WHY IT EXISTS. That content was a second 01-05 numbered block appended to
   the end of 解析ワークフロー. It read as a rival workflow to the one directly
   above it, it inherited that section's navy surface so nothing said "aside",
   and numbered rows put two short lines in a full-width row - which left the
   right-hand half of the band empty. A card is a title and one short
   paragraph, so four of them fill the row and the band reads as supporting
   material rather than a second procedure.

   SURFACE: CHARCOAL, and it is forced rather than chosen. The band sits
   between 解析ワークフロー (navy) and 関連ソルバー (light), so the adjacency
   invariant excludes both of those, and `dark` is near-indistinguishable from
   navy at section scale. Charcoal is the one remaining tone that reads as a
   different surface.

   Block 16's card is specified for light and block 17's for navy; this is
   block 16's structure (name + description) wearing block 17's on-dark
   treatment. NO NEW COLOURS: the only literal is the same
   rgba(255,255,255,.0x) film block 17 already uses for its chain pills, and
   everything else is an existing --v2-* token. Heading and paragraph colour
   are not set at all - block 14 already colours h3 and p by section surface,
   and re-stating them here would be a second place to drift.

   Same grid rule as blocks 16 and 17 (`auto-fit, minmax(min(100%, 260px),
   1fr)`), so all three components line up and there is still only one
   breakpoint to maintain.
   ============================================================================ */
#top .lb-v2 .lb-v2-edagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-s3);
  margin: 0;
}

#top .lb-v2 .lb-v2-edagrid .lb-v2-eda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 24px 24px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--v2-bd-navy);
  border-radius: 12px;
}

#top .lb-v2 .entry-content-wrapper .lb-v2-edagrid .lb-v2-eda-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

#top .lb-v2 .entry-content-wrapper .lb-v2-edagrid .lb-v2-eda-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

/* The limitation note sits under the grid and must not read as a fifth card. */
#top .lb-v2 .lb-v2-edawrap + .lb-notewrap {
  margin-top: var(--v2-s3);
}

/* Enfold breakpoint (layout.css uses 479 / 767 / 989 / 1024): the theme's
   own column collapse lands here, so this block must match it. */
@media only screen and (max-width: 767px) {
  #top .lb-v2 .lb-v2-edagrid .lb-v2-eda {
    padding: 20px 20px 18px;
  }
}


/* ============================================================================
   19  C8 — FINAL LIGHTBRIDGE DESIGN SYSTEM (hub + child-page families)
   ----------------------------------------------------------------------------
   Appended 2026-08-13. Source of truth: "Enterprise Hub Design System.zip" →
   _ds/lightbridge-design-system-351a4377-6c18-42a9-9b5a-816647547fbd,
   namespace LightBridgeDesignSystem_351a43, v3.1 FROZEN.

   WHY IT LIVES IN THIS FILE. A second stylesheet would need its own handle,
   and the `style_loader_src` filter above restores the ?ver= cache-buster for
   the handle `lb-redesign` ONLY — something on this install strips it from
   every other stylesheet. A new handle would therefore ship uncacheable-stale
   to any browser that had already loaded it. One canonical file also happens to
   be exactly what the C8 brief asked for.

   WHAT IS SUPERSEDED, AND WHAT IS NOT. Everything below is scoped to `.lb-ds`,
   which only the hub pages emit. Blocks 15/16/18 above are NOT retired: the
   section-header rhythm, 解析ワークフロー cards and EDA capability cards are all
   still used by the fifteen V2 PRODUCT pages, and Product Design V2 is
   explicitly preserved unchanged. What block 19 supersedes is the HUB argument
   only — the `lb-v2-*` hub surfaces, counters and card grids as used by
   suite/landing hubs. Page 15929 still renders under the frozen `suite` plan
   and keeps using the older rules until it is migrated.

   DO NOT migrate a product page onto `.lb-ds`.
   ============================================================================ */
/* ============================================================================
   lb-ds-v3.css — CANONICAL LightBridge Design System implementation
   ----------------------------------------------------------------------------
   Source of truth: "Enterprise Hub Design System.zip" →
   _ds/lightbridge-design-system-351a4377-6c18-42a9-9b5a-816647547fbd/
   (namespace LightBridgeDesignSystem_351a43), design-system v3.1 FROZEN.

   SUPERSEDES, for hub and child-page families:
     lb-v2-num-numbering.css      (counters       → --hub-num + .lb-ds-num)
     lb-v2-workflow-cards.css     (workflow cards → .lb-ds-flow)
     lb-v2-eda-cards.css          (capability grid→ .lb-ds-cards)
     lb-section-header-rhythm.css (section rhythm → --hub-sec/--hub-major)
   Those four files are retired by C8. Product pages keep Product Design V2
   unchanged and must NOT be migrated onto these rules.

   SCOPE. Everything is scoped to `#top .lb-ds`. A page opts in by carrying
   `lb-ds` on its sections; V2 product pages carry `lb-v2` and are untouched.
   Mobile rules use `#top #wrap_all` because Enfold's merged stylesheet loads
   after the child theme and equal-specificity child rules lose below 767px.
   No presentation lives in an ALB attribute — that reverts on regeneration.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  --brand-navy: #072C50;
  --brand-orange: #EC7628;

  --canvas-deep: #101820;
  --canvas-navy: #072C50;
  --canvas-charcoal: #222222;
  --surface-default: #323232;
  --surface-raised: #383838;
  --surface-navy: #0C385F;
  --border-subtle: #484848;
  --border-navy: #285276;

  --surface-light: #F5F7F9;
  --surface-white: #FFFFFF;
  --border-light: #DCE3E9;

  --text-primary-dark: #F4F2EF;
  --text-secondary-dark: #C9C9C9;
  --text-muted-dark: #9E9E9E;
  --text-primary-light: #102435;
  --text-secondary-light: #465968;

  --accent-orange: #EC7628;
  --accent-light-orange: #F39A55;
  --accent-coral: #D94A2B;
  --accent-deep-red: #A82B17;
  --accent-dark-red: #6D2618;

  /* v3.1 FROZEN hub/child-page rhythm. Supersedes the old 128/96/64 defaults. */
  --hub-num: 18px;
  --hub-sec: 64px;
  --hub-major: 80px;
  --hub-half: 48px;
  --hub-hero: 56px;
  --hub-crumb: 40px;

  --ds-s1: 4px;  --ds-s2: 8px;  --ds-s3: 12px; --ds-s4: 16px;
  --ds-s5: 24px; --ds-s6: 32px; --ds-s7: 48px; --ds-s8: 64px;

  --ds-container: min(90vw, 1480px);
  --ds-reading: 780px;

  --ds-radius-ctl: 6px;
  --ds-radius-card: 8px;
  --ds-radius-media: 12px;

  --ds-font-sans: "Noto Sans JP", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --ds-dur-fast: 180ms;
  --ds-dur-base: 240ms;
  --ds-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* p0.3b 2026-08-13: #D94A2B stop 54% -> 38% (Red1-approved Phase 0.2 open item). Darkens the
     closing-panel button region so the on-warm secondary's white label clears 4.5:1 AA at every
     row position (worst case 4.62:1 at 45% along the gradient; was 3.73:1). 70% border now >= 3.0:1
     across the band. Sole consumer is .lb-ds.lb-ds-close. --lb-gradient-warm (line ~71) and
     .lb-photonica are separate consumers of the old stop list, deliberately untouched. */
  --ds-gradient-warm: linear-gradient(115deg, #F39A55 0%, #EC7628 28%, #D94A2B 38%, #A82B17 76%, #6D2618 100%);
  --ds-gradient-navy: linear-gradient(135deg, #072C50 0%, #0C385F 52%, #101820 100%);
}

@media only screen and (max-width: 1120px) {
  :root { --hub-num: 17px; --hub-sec: 64px; --hub-major: 80px;
          --hub-half: 40px; --hub-hero: 44px; --hub-crumb: 28px; }
}
@media only screen and (max-width: 600px) {
  :root { --hub-num: 16px; --hub-sec: 44px; --hub-major: 56px;
          --hub-half: 32px; --hub-hero: 36px; --hub-crumb: 24px;
          --lb-section-pad: 44px; }
}

/* ------------------------------------------------- 2. surfaces and rhythm */
#top .lb-ds .container { width: var(--ds-container); max-width: var(--ds-container); }

/* Surfaces carry a #wrap_all prefix on purpose. The generator passes NO
   custom_bg (an inline style would beat any stylesheet, and a colour in an ALB
   attribute reverts on regeneration), so these rules must also outrank
   Enfold's own `.avia-section.main_color` background — and Enfold's merged
   stylesheet loads after the child theme. Two ids does it. */
#top #wrap_all .lb-ds.lb-ds-hero  { background: var(--ds-gradient-navy); padding: 0 0 var(--hub-hero); }
#top #wrap_all .lb-ds.lb-ds-light { background: var(--surface-light); padding: var(--hub-sec) 0; }
#top #wrap_all .lb-ds.lb-ds-navy  { background: var(--canvas-navy); padding: var(--hub-major) 0; }
#top #wrap_all .lb-ds.lb-ds-char  { background: var(--canvas-charcoal); padding: var(--hub-major) 0; }
#top #wrap_all .lb-ds.lb-ds-close { background: var(--ds-gradient-warm); padding: var(--hub-major) 0; }

/* A light section that continues the one above it drops its top padding, so
   two stacked light bands read as one surface rather than two sections. */
#top #wrap_all .lb-ds.lb-ds-light.lb-ds-cont { padding-top: 0; }
#top #wrap_all .lb-ds.lb-ds-tighten { padding-bottom: var(--hub-half); }

/* --------------------------------------------------------- 3. typography */
#top .lb-ds .entry-content-wrapper h1,
#top .lb-ds .entry-content-wrapper h2,
#top .lb-ds .entry-content-wrapper h3,
#top .lb-ds .entry-content-wrapper h4 {
  font-family: var(--ds-font-sans);
  letter-spacing: 0;          /* Japanese headings carry no tracking */
  text-wrap: balance;
  /* Japanese line-breaking, per the design system's :lang(ja) rules. `strict`
     is what stops a line breaking before ー or a small kana — without it
     「シミュレーション」 splits as 「シミュレ / ーション」. `overflow-wrap` is
     normal on headings (the body keeps `anywhere`): allowing a break at any
     character is what produced 「フォ / トニクス」 at a narrow measure. */
  word-break: normal;
  line-break: strict;
  overflow-wrap: normal;
}
/* 26ch is the prototype's measure for a short H1. Japanese hub H1s here run
   longer, and holding them to 26ch forced a break every eight characters. */
#top .lb-ds .entry-content-wrapper h1 { font-size: 44px; line-height: 1.4; font-weight: 700; max-width: 34ch; }
#top .lb-ds .entry-content-wrapper h2 { font-size: 36px; line-height: 1.4; font-weight: 600; }
#top .lb-ds .entry-content-wrapper h3 { font-size: 24px; line-height: 1.4; font-weight: 600; }
#top .lb-ds .entry-content-wrapper h4 { font-size: 20px; line-height: 1.4; font-weight: 600; }

#top .lb-ds .entry-content-wrapper p,
#top .lb-ds .entry-content-wrapper li {
  font-size: 16px;
  line-height: 1.9;
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}
#top .lb-ds .lb-ds-lead { font-size: 19px; line-height: 1.9; max-width: 46em; }
#top .lb-ds .lb-ds-small { font-size: 13px; line-height: 1.7; }

/* Surface-driven colour. Set once here; never restated per component. */
#top .lb-ds.lb-ds-hero  .entry-content-wrapper h1,
#top .lb-ds.lb-ds-navy  .entry-content-wrapper h2,
#top .lb-ds.lb-ds-navy  .entry-content-wrapper h3,
#top .lb-ds.lb-ds-char  .entry-content-wrapper h2,
#top .lb-ds.lb-ds-char  .entry-content-wrapper h3,
#top .lb-ds.lb-ds-close .entry-content-wrapper h2 { color: var(--text-primary-dark); }
#top .lb-ds.lb-ds-hero  .entry-content-wrapper p,
#top .lb-ds.lb-ds-navy  .entry-content-wrapper p,
#top .lb-ds.lb-ds-navy  .entry-content-wrapper li,
#top .lb-ds.lb-ds-char  .entry-content-wrapper p,
#top .lb-ds.lb-ds-close .entry-content-wrapper p { color: var(--text-secondary-dark); }

#top .lb-ds.lb-ds-light .entry-content-wrapper h1,
#top .lb-ds.lb-ds-light .entry-content-wrapper h2,
#top .lb-ds.lb-ds-light .entry-content-wrapper h3,
#top .lb-ds.lb-ds-light .entry-content-wrapper h4 { color: var(--text-primary-light); }
#top .lb-ds.lb-ds-light .entry-content-wrapper p,
#top .lb-ds.lb-ds-light .entry-content-wrapper li { color: var(--text-secondary-light); }

/* Orange on a light surface needs the frozen darker token to clear 4.5:1. */
#top .lb-ds.lb-ds-light a { color: #A8500F; }
#top .lb-ds.lb-ds-light a:hover { color: var(--brand-navy); }
#top .lb-ds.lb-ds-navy a, #top .lb-ds.lb-ds-char a,
#top .lb-ds.lb-ds-hero a, #top .lb-ds.lb-ds-close a { color: var(--accent-light-orange); }

/* ------------------------------------------------ 4. eyebrow and headings */
#top .lb-ds .lb-ds-eyebrow {
  margin: 0 0 var(--ds-s5);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
#top .lb-ds.lb-ds-light .lb-ds-eyebrow { color: #A8500F; }

#top .lb-ds .lb-ds-head { margin-bottom: var(--hub-half); }
#top .lb-ds .lb-ds-head .lb-ds-lead { margin-top: var(--ds-s5); }

/* --------------------------------------------------------- 5. hero block */
#top .lb-ds-hero .lb-ds-crumbs {
  padding: 20px 0 var(--hub-crumb);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted-dark);
}
#top .lb-ds-hero .lb-ds-crumbs a { color: var(--text-secondary-dark); }
#top .lb-ds-hero .lb-ds-crumbs a:hover { color: var(--accent-light-orange); }

/* Anchor row. Counters are the system's primary "icon": mono, orange, 01/02. */
#top .lb-ds .lb-ds-anchors {
  display: flex;
  gap: var(--ds-s6);
  flex-wrap: wrap;
  margin: var(--ds-s4) 0 0;
  padding-top: var(--ds-s5);
  border-top: 1px solid var(--border-navy);
  list-style: none;
}
#top .lb-ds .lb-ds-anchors li { margin: 0; }
#top .lb-ds .lb-ds-anchors a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-secondary-dark);
  text-decoration: none;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds .lb-ds-anchors a:hover { color: var(--accent-light-orange); text-decoration: none; }
#top .lb-ds .lb-ds-anchors .lb-ds-n { color: var(--brand-orange); }

/* ------------------------------------------- 6. alternating family bands */
/* The final hub argument is a sequence of full-width bands, NOT a card grid.
   Each band is a numbered row: counter + copy on one side, media on the other,
   sides alternating. A card wall was the thing this design replaced. */
#top .lb-ds .lb-ds-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hub-half);
  align-items: center;
  padding: var(--hub-half) 0;
  border-top: 1px solid var(--border-light);
}
#top .lb-ds .lb-ds-band:first-of-type { border-top: 0; padding-top: 0; }
#top .lb-ds .lb-ds-band.lb-ds-band-flip .lb-ds-band-copy { order: 2; }

#top .lb-ds .lb-ds-band-num {
  display: block;
  margin: 0 0 var(--ds-s3);
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
}
#top .lb-ds.lb-ds-light .lb-ds-band-num { color: #A8500F; }
#top .lb-ds .lb-ds-band-copy > *:last-child { margin-bottom: 0; }
#top .lb-ds .lb-ds-band-copy .lb-ds-more {
  display: inline-flex;
  gap: var(--ds-s2);
  align-items: baseline;
  margin-top: var(--ds-s4);
  font-size: 15px;
}
#top .lb-ds .lb-ds-band-copy .lb-ds-more .lb-ds-arrow { transition: transform var(--ds-dur-fast) var(--ds-ease); }
#top .lb-ds .lb-ds-band-copy .lb-ds-more:hover .lb-ds-arrow { transform: translateX(3px); }

/* Media slot. No imagery was supplied, so the slot names the asset required
   rather than substituting a stand-in (global rule 9). */
#top .lb-ds .lb-ds-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--ds-s6);
  border: 1px dashed var(--border-light);
  border-radius: var(--ds-radius-media);
  background: var(--surface-white);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--text-secondary-light);
  text-align: center;
}
#top .lb-ds.lb-ds-navy .lb-ds-slot,
#top .lb-ds.lb-ds-char .lb-ds-slot {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-navy);
  color: var(--text-muted-dark);
}

/* ---------------------------------------------------- 7. card grid (light) */
#top .lb-ds .lb-ds-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--ds-s5);
  margin: 0;
}
#top .lb-ds .lb-ds-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s3);
  margin: 0;
  padding: var(--ds-s6);
  border-radius: var(--ds-radius-card);
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds .lb-ds-card:hover { border-color: var(--brand-orange); transform: translateY(-2px); }
#top .lb-ds.lb-ds-navy .lb-ds-card,
#top .lb-ds.lb-ds-char .lb-ds-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-navy);
}
#top .lb-ds .entry-content-wrapper .lb-ds-card-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
#top .lb-ds .entry-content-wrapper .lb-ds-card-desc  { margin: 0; font-size: 15px; line-height: 1.85; }

/* -------------------------------------------- 8. cross-product flow chains */
#top .lb-ds .lb-ds-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--ds-s5);
  margin: 0;
}
#top .lb-ds .lb-ds-chain {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s3);
  margin: 0;
  padding: var(--ds-s5) var(--ds-s5) var(--ds-s6);
  border-radius: var(--ds-radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-navy);
}
#top .lb-ds .entry-content-wrapper .lb-ds-chain-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
#top .lb-ds .lb-ds-chain-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: var(--text-secondary-dark);
}
#top .lb-ds .lb-ds-chain-steps .lb-ds-arrow { color: var(--brand-orange); padding: 0 var(--ds-s2); }

/* -------------------------------------------------------------- 9. tables */
#top .lb-ds .lb-ds-tscroll { margin: 0; }
#top .lb-ds .lb-ds-tscroll:focus-visible { outline: var(--focus-ring-width, 2px) solid var(--accent-light-orange); outline-offset: 2px; }
#top .lb-ds .avia-table,
#top .lb-ds .lb-ds-table { margin: 0; border-collapse: collapse; width: 100%; }
#top .lb-ds .lb-ds-table th,
#top .lb-ds .lb-ds-table td {
  padding: var(--ds-s4) var(--ds-s5);
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  vertical-align: top;
}
#top .lb-ds .lb-ds-table thead th {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#top .lb-ds.lb-ds-navy .lb-ds-table thead th { color: var(--brand-orange); border-bottom: 1px solid var(--border-navy); }
#top .lb-ds.lb-ds-navy .lb-ds-table td { border-bottom: 1px solid var(--border-navy); color: var(--text-secondary-dark); }
#top .lb-ds.lb-ds-light .lb-ds-table thead th { color: #A8500F; border-bottom: 1px solid var(--border-light); }
#top .lb-ds.lb-ds-light .lb-ds-table td { border-bottom: 1px solid var(--border-light); }

/* ---------------------------------------------------- 10. note and pointer */
#top .lb-ds .lb-ds-note {
  margin: var(--ds-s5) 0 0;
  padding-left: var(--ds-s4);
  border-left: 2px solid var(--brand-orange);
  font-size: 14px;
  line-height: 1.9;
}
#top .lb-ds .lb-ds-pointer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s4);
  align-items: baseline;
  justify-content: space-between;
  margin: var(--hub-half) 0 0;
  padding-top: var(--ds-s5);
  border-top: 1px solid var(--border-navy);
}
#top .lb-ds.lb-ds-light .lb-ds-pointer { border-top-color: var(--border-light); }
#top .lb-ds .lb-ds-pointer p { margin: 0; font-size: 14px; max-width: 62ch; }
#top .lb-ds .lb-ds-pointer a { font-family: var(--ds-font-mono); font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; }

/* ------------------------------------------------------- 11. trust figures */
#top .lb-ds .lb-ds-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--ds-s5);
  margin: 0;
  padding: 40px;
  border-radius: var(--ds-radius-card);
  background: var(--surface-white);
  border: 1px solid var(--border-light);
}
#top .lb-ds .lb-ds-figure { margin: 0; }
#top .lb-ds .lb-ds-figure .lb-ds-fig-n {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #A8500F;
}
#top .lb-ds .lb-ds-figure .lb-ds-fig-l {
  display: block;
  margin-top: var(--ds-s2);
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary-light);
}

/* --------------------------------------------------------- 12. closing panel */
/* 26em not 26ch, same reason as the 24em below; this rule is superseded by
   the .lb-dsr one anyway and is corrected only so it does not get copied. */
#top .lb-ds.lb-ds-close .entry-content-wrapper h2 { max-width: 26em; color: #FFFFFF; }
/* On the warm gradient the body token (#C9C9C9) reads as grey mud. The closing
   panel is the one surface that needs its own text value. */
#top #wrap_all .lb-ds.lb-ds-close .entry-content-wrapper p,
#top #wrap_all .lb-ds.lb-ds-close .entry-content-wrapper li { color: #FFF1E4; }
#top .lb-ds.lb-ds-close .lb-btnrow { margin-top: var(--hub-half); }

/* Buttons: 6px radius, never a pill. A fully rounded control is a brand error. */
#top .lb-ds .avia-button { border-radius: var(--ds-radius-ctl); font-family: var(--ds-font-sans); font-weight: 600; }
#top .lb-ds .avia-button:hover { background-color: var(--accent-light-orange); }

/* --- 12b. ON-WARM BUTTONS (Phase 0.2) ------------------------------------
   The closing panel is the one surface where per-button ALB colours cannot
   work: the standard primary is orange, and orange on the warm gradient has
   no separation from its own ground. CSS is upstream of pages, so the
   treatment is fixed here and the ALB colour fields inside .lb-ds-close are
   deliberately overridden. Do not set button colours on closing-panel ALB
   elements: give the row lb-btnrow and let these rules supply the colour.

   Specificity, not !important: Enfold's own per-button rule is
   `#top #wrap_all .avia-button.av-lbXXXX` (2 ids / 2 classes). The selectors
   below carry 2 ids / 4+ classes, so they win outright. (The .lb-v2-hero fix
   above needed !important only because it is scoped to a single #top.)

   Primary = the first button; secondary = every button after it, expressed
   as `~ a.avia-button` so a single-button row still reads as primary. Do not
   use :not(:first-child) here: Enfold injects a <style> element between the
   anchors, so both anchors match it (same trap as the V2 hero, line ~1146). */
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button {
  background-color: #FFFFFF;
  color: #6D2618;                    /* 10.8:1 on white */
  /* solid, not Enfold's border-style:none: a bordered secondary next to an
     unbordered primary is 2px taller. Both carry a 1px border. */
  border: 1px solid #FFFFFF;
  border-radius: var(--ds-radius-ctl);
  /* Enfold emits `transition: all .4s ease-in-out`; the system is 240ms on
     colour only (motion dial 0.2). */
  transition: background-color var(--ds-dur-base) var(--ds-ease),
              border-color var(--ds-dur-base) var(--ds-ease),
              color var(--ds-dur-base) var(--ds-ease);
}
/* Lighten, never darken. A white ground cannot lighten further, so the label
   is what moves: #6D2618 to the brighter #A82B17 (still 6.9:1 on white). */
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button:hover,
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button:focus-visible {
  background-color: #FFFFFF;
  color: #A82B17;
  border-color: #FFFFFF;
}
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button ~ a.avia-button {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button ~ a.avia-button:hover,
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button ~ a.avia-button:focus-visible {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}
/* The global focus ring is #F39A55, which is the gradient's own light stop and
   disappears on this surface. White is the only value that holds across all
   five stops. */
#top #wrap_all .lb-ds.lb-ds-close .lb-btnrow a.avia-button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* --- 12c. THE CLOSING H2 ACTUALLY CENTRES (found in Phase 0.3 browser QA) --
   av_heading renders `<h2 class="av-special-heading-tag">` FLOATED LEFT, with
   a decorative `.special-heading-border` taking the remaining width beside it.
   Measured on /styleguide/ at 1440: the h2 shrink-wrapped to 622px at the
   container's left edge while the divider filled the other 430px. So the
   panel's `text-align: center` and `margin: 0 auto` (section 15) have never
   had any effect on any lb-ds-close panel, including drafts 19518 and 19739.
   The lead and the button row centre correctly, which is why the heading read
   as a one-off misalignment rather than a rule that never applied.
   Unfloat the heading so the auto margins resolve, and drop the divider: the
   closing panel is the one place in the hub family where a heading is centred,
   and the divider is invisible on the warm gradient anyway. */
#top #wrap_all .lb-ds.lb-ds-close .entry-content-wrapper .av-special-heading-tag {
  float: none;
  width: auto;
}
#top #wrap_all .lb-ds.lb-ds-close .entry-content-wrapper .special-heading-border { display: none; }

/* ------------------------------------------------------------ 13. responsive */
@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds .entry-content-wrapper h1 { font-size: 36px; }
  #top #wrap_all .lb-ds .entry-content-wrapper h2 { font-size: 30px; }
  #top #wrap_all .lb-ds .lb-ds-lead { font-size: 17px; }
}

/* Enfold breakpoint. The hub's mobile step: bands stack, type steps down and
   wide tables start scrolling. Deliberately earlier than the canonical 600
   stop so a 4-column table never reaches tablet widths uncrushed. */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds .lb-ds-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s5);
  }
  /* Copy always precedes its media once the band stacks, flipped or not. */
  #top #wrap_all .lb-ds .lb-ds-band.lb-ds-band-flip .lb-ds-band-copy { order: 0; }
  #top #wrap_all .lb-ds .entry-content-wrapper h1 { font-size: 30px; max-width: none; }
  #top #wrap_all .lb-ds .entry-content-wrapper h2 { font-size: 25px; }
  #top #wrap_all .lb-ds .entry-content-wrapper h3 { font-size: 20px; }
  #top #wrap_all .lb-ds .lb-ds-anchors { gap: var(--ds-s4); }
  #top #wrap_all .lb-ds .lb-ds-slot { min-height: 180px; padding: var(--ds-s5); }
  #top #wrap_all .lb-ds .lb-ds-trust { padding: var(--ds-s6); }
  #top #wrap_all .lb-ds .lb-ds-card { padding: var(--ds-s5); }
  /* Wide comparison tables scroll rather than crushing four columns into
     390px. tabindex on the container keeps it keyboard-reachable. */
  #top #wrap_all .lb-ds .lb-ds-tscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(-1 * var(--ds-s4));
    padding-right: var(--ds-s4);
  }
  #top #wrap_all .lb-ds .lb-ds-tscroll .lb-ds-table { min-width: 620px; }
  #top #wrap_all .lb-ds .lb-ds-table th,
  #top #wrap_all .lb-ds .lb-ds-table td { padding: var(--ds-s3) var(--ds-s4); font-size: 14px; }
  #top #wrap_all .lb-ds .lb-ds-pointer { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #top .lb-ds *, #top .lb-ds *::before, #top .lb-ds *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ============================================================================
   20  C8 R2 — LUMERICAL HUB REBUILT TO THE FROZEN v3.1 PROTOTYPE
   ----------------------------------------------------------------------------
   Appended 2026-08-13, same session as the C8R1 review
   (claude/c8r1-lumerical-hub-prototype-review.md). Source of truth:
   `Lumerical Hub.dc.html` + `LightBridge Design System.dc.html`, v3.1 FROZEN.

   SCOPE. Every rule below requires the `lb-dsr` marker class that only the
   REBUILT hub sections emit (19739 as of this session). Draft 19518 still
   carries the C8 markup and block-19 rendering, untouched — when it migrates,
   its sections gain `lb-dsr` and these rules apply. Do not "fix" 19518 by
   loosening these selectors; migrate its markup.

   WHAT THIS CORRECTS vs BLOCK 19 (C8R1 findings):
   - DEV-3: bands are the prototype's EDITORIAL ROW — counter column, orange-
     ruled role-label column, 26px title, bold one-liner, media right, aligned
     start, NO side alternation. Block 19's "alternating 50/50" reading matched
     neither frozen prototype.
   - DEV-4: the closing section is the DS ClosingPanel — compact centered,
     display-size statement, clamp() padding.
   - Counters on light stay brand #EC7628 — spec §06 reserves brand orange on
     light for borders, 4px rules, MONO COUNTERS and markers (block 19 had
     recoloured them #A8500F).
   - Navy-section eyebrows use the light-orange #F39A55, as in every prototype.
   - Trust figures per prototype: 28px mono, primary-light ink.
   - New prototype modules: hero 構成製品 panel, cross-link card pair.
   ============================================================================ */

/* ------------------------------------------------------------ hero panel */
#top .lb-ds.lb-dsr .lb-ds-panel {
  display: flex;
  flex-direction: column;
  padding: 16px 32px 8px;
  background: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: var(--ds-radius-media);
}
#top .lb-ds.lb-dsr .lb-ds-panel .lb-ds-panel-head {
  padding: 10px 0 14px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
}
#top .lb-ds.lb-dsr .lb-ds-panel a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 8px;
  margin: 0 -8px;
  border-top: 1px solid var(--border-navy);
  text-decoration: none;
  transition: background var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-panel a:hover { background: rgba(236,118,40,0.08); text-decoration: none; }
#top .lb-ds.lb-dsr .lb-ds-panel .lb-ds-n { font-family: var(--ds-font-mono); font-size: 13px; color: var(--brand-orange); }
#top .lb-ds.lb-dsr .lb-ds-panel .lb-ds-panel-name { font-size: 15px; font-weight: 600; color: var(--text-primary-dark); }
#top .lb-ds.lb-dsr .lb-ds-panel .lb-ds-panel-role {
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--text-muted-dark);
}
#top .lb-ds.lb-dsr .lb-ds-panel .lb-ds-arrow { color: var(--brand-orange); }

/* ------------------------------------------------- bands: editorial rows */
#top .lb-ds.lb-dsr .lb-ds-brows { margin-top: var(--ds-s6); }
#top .lb-ds.lb-dsr .lb-ds-brow {
  display: grid;
  grid-template-columns: 64px 180px minmax(0, 6fr) minmax(0, 3fr);
  gap: 40px;
  align-items: start;
  padding: 48px 0;
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-brow:last-child { border-bottom: 1px solid var(--border-light); }
/* Spec §06: on light surfaces, brand #EC7628 is reserved for exactly this —
   1px borders, 4px rules, mono counters and markers. Counters stay brand. */
#top .lb-ds.lb-dsr .lb-ds-brow .lb-ds-brow-num {
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
  padding-top: 4px;
}
#top .lb-ds.lb-dsr .lb-ds-brow-role { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
#top .lb-ds.lb-dsr .lb-ds-brow-role .lb-ds-rule { display: block; width: 24px; height: 4px; background: var(--brand-orange); }
#top .lb-ds.lb-dsr .lb-ds-brow-role span:last-child {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-brow-copy { display: flex; flex-direction: column; gap: 12px; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-btitle { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 600; }
#top .lb-ds.lb-dsr.lb-ds-light .lb-ds-btitle a { color: var(--text-primary-light); }
#top .lb-ds.lb-dsr.lb-ds-light .lb-ds-btitle a:hover { color: #A8500F; }
#top .lb-ds.lb-dsr .lb-ds-bsum { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 600; color: var(--text-primary-light); }
#top .lb-ds.lb-dsr .lb-ds-bdesc { margin: 0; font-size: 14px; line-height: 1.9; max-width: 44em; }
#top .lb-ds.lb-dsr .lb-ds-bnote { margin: 0; font-size: 13px; line-height: 1.9; }
#top .lb-ds.lb-dsr .lb-ds-morewrap { margin: 4px 0 0; }

/* -------------------------------------------------- cross-link card pair */
#top .lb-ds.lb-dsr .lb-ds-cross {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ds-s5);
  align-items: stretch;
}
#top .lb-ds.lb-dsr .lb-ds-xcard {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s4);
  padding: 48px;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
}
#top .lb-ds.lb-dsr .lb-ds-xcard.lb-ds-xghost { background: transparent; }
#top .lb-ds.lb-dsr .lb-ds-xcard .lb-ds-eyebrow { margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-eyebrow.lb-ds-eyebrow-mute { color: var(--text-secondary-light); }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-xh { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 600; }
#top .lb-ds.lb-dsr .lb-ds-xghost .lb-ds-xh { font-size: 20px; line-height: 1.5; }
#top .lb-ds.lb-dsr .lb-ds-xdesc { margin: 0; font-size: 15px; line-height: 1.9; max-width: 52em; }
#top .lb-ds.lb-dsr .lb-ds-xghost .lb-ds-xdesc { font-size: 14px; }
#top .lb-ds.lb-dsr .lb-ds-xlink { margin: auto 0 0; padding-top: var(--ds-s4); }

/* --------------------------------------------- trust figures (prototype) */
#top .lb-ds.lb-dsr .lb-ds-figure .lb-ds-fig-n { font-size: 28px; font-weight: 500; color: var(--text-primary-light); }
#top .lb-ds.lb-dsr .lb-ds-pointer2 {
  display: flex;
  gap: var(--ds-s4);
  flex-wrap: wrap;
  align-items: baseline;
  margin: var(--hub-half) 0 0;
  font-size: 14px;
  max-width: 78ch;
}
#top .lb-ds.lb-dsr .lb-ds-pointer2 span { line-height: 1.9; }
#top .lb-ds.lb-dsr .lb-ds-pointer2 .lb-ds-more { font-family: var(--ds-font-mono); font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; }

/* ------------------------------------------- navy eyebrows: light orange */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-eyebrow { color: var(--accent-light-orange); }

/* ------------------------------- closing: DS ClosingPanel, compact centered */
#top #wrap_all .lb-ds.lb-dsr.lb-ds-close { padding: clamp(44px, 7vw, 76px) 0; }
#top .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper { text-align: center; }
/* #wrap_all is load-bearing here: the responsive block
   `#top #wrap_all .lb-ds .entry-content-wrapper h2 { font-size: 30px/25px }`
   is (2,3,1) and was overriding the clamp at (1,4,0), flattening the closing
   statement to the same size as an ordinary section H2 from 1120 down. At
   (2,4,1) the clamp governs at every width. */
#top #wrap_all .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper h2 {
  margin: 0 auto;
  /* Reproduces the 3vw the closing statement was approved at (43.2px at
     1440) and adds the floor the ALB size field cannot express: bare `vw`
     has no minimum, so size='3vw' rendered 9.4px at 390 and 14.4px at 600.
     The ALB attribute is cleared on the heading so this rule can apply at
     all - the inline #top #wrap_all .av-special-heading rule Enfold emits
     for size= is (2,2,0) and was beating this (1,4,0). */
  font-size: clamp(30px, 3vw, 52px);
  line-height: 1.25;
  font-weight: 500;
  /* 24em, NOT 24ch. `ch` is the advance width of the digit zero, which in
     Noto Sans JP is 0.59em; a Japanese glyph is a full 1.00em. So `24ch`
     asked for 24 characters and delivered 14, and this 30-character
     statement broke to three short lines inside a 1052px band - measured
     1ch = 22.7px against 1 kanji = 38.4px at the rendered 38.4px size.
     For Japanese the character unit is em. text-wrap: balance is required
     with it: at 24em alone the phrase-boundary break lands 919px / 230px. */
  max-width: 24em;
  text-wrap: balance;
}
#top .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper .lb-ds-lead { margin: var(--ds-s5) auto 0; max-width: 52ch; }
#top .lb-ds.lb-dsr.lb-ds-close .lb-btnrow { margin-top: var(--ds-s6); }

/* ------------------------------------------------------------ responsive */
@media only screen and (max-width: 1120px) {
  #top .lb-ds.lb-dsr .flex_column.lb-ds-herocopy,
  #top .lb-ds.lb-dsr .flex_column.lb-ds-heropanel { width: 100%; margin-left: 0; }
  #top .lb-ds.lb-dsr .flex_column.lb-ds-heropanel { margin-top: 40px; }
  #top .lb-ds.lb-dsr .lb-ds-brow { grid-template-columns: 48px 160px minmax(0, 1fr); }
  #top .lb-ds.lb-dsr .lb-ds-brow-media { grid-column: 2 / -1; }
  #top .lb-ds.lb-dsr .lb-ds-cross { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 600px) {
  #top .lb-ds.lb-dsr .lb-ds-brow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #top .lb-ds.lb-dsr .lb-ds-brow-media { grid-column: 1 / -1; }
  #top .lb-ds.lb-dsr .lb-ds-xcard { padding: var(--ds-s6); }
}

/* ==========================================================================
   16. RESPONSIVE BASELINE  (Phase 0.3, 2026-08-13)

   Canonical breakpoints are the token stops 1120px and 600px. Enfold's own
   479 / 767 / 989 / 1024 appear above only where the theme's column collapse
   forces them; each such block now carries a one-line justification. Two
   non-canonical stops remain and are commented in place: 900px (measured,
   block 11c) and 1199px (V2 flow, flagged for migration).

   Everything in this section is ADDITIVE. No value above is re-stated, so the
   v3.2 amendment (A1/A7 adopted; A2-A6, B1-B5, C1 canonical) stays intact.
   QA viewports: 1440 / 1120 / 768 / 600 / 390.
   ========================================================================== */

/* 16.1 Tables scroll instead of crushing ----------------------------------
   Audited against what actually renders (15929 / 19520 / 19523 / 19564 /
   19744), not against what the markup was assumed to be:

   - av_table comes out as `.avia-data-table-wrap.avia_responsive_table >
     table.avia-table.avia-data-table`. Enfold's own table.css already stacks
     these into blocks on mobile (tr/td to display:block), so every V2 spec
     table, including the 3-column routing tables, is already handled. Giving
     them a scroll floor would fight that, so it is deliberately not done.
   - `.avia-table-wrap` is never emitted by this Enfold build. The selector
     naming it in section 8 has always been inert; it is left in place rather
     than churned, and recorded here so the next audit does not chase it.
   - The hub's hand-authored tables keep their .lb-ds-tscroll wrapper.
   - The one real gap: a hand-authored `<table class="avia-table lb-spec">`
     sitting straight inside a textblock (the styleguide's two 3-column spec
     tables) gets no wrapper and no Enfold stacking, so it crushes at 390px.

   Hence the narrow scope below. `:not(.avia-data-table)` is what separates a
   hand-authored table from av_table output. :has() is already used in this
   file (section 15.1); browsers without it keep today's behaviour. 480px is
   the hub's 620px/4-column density carried across to three columns. */
@media only screen and (max-width: 600px) {
  #top .lb-sec .avia_textblock:has(> table.avia-table.lb-spec:not(.avia-data-table)),
  #top .lb-v2 .avia_textblock:has(> table.avia-table.lb-spec:not(.avia-data-table)),
  #top .lb-ds .avia_textblock:has(> table.avia-table.lb-spec:not(.avia-data-table)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #top .lb-sec table.avia-table.lb-spec:not(.avia-data-table):has(tr > *:nth-child(3)),
  #top .lb-v2 table.avia-table.lb-spec:not(.avia-data-table):has(tr > *:nth-child(3)),
  #top .lb-ds table.avia-table.lb-spec:not(.avia-data-table):has(tr > *:nth-child(3)) {
    min-width: 480px;
  }
  /* The first column is nowrap by design (section 8) so a token name never
     breaks mid-word on desktop. Enfold puts table-layout:fixed on avia-table,
     so inside the 480px floor each column is exactly 160px and a two-token
     cell measures 237px, which spilled over its neighbour (measured at 390px
     on /styleguide/). Below 600 the column wraps between tokens instead;
     `anywhere` stops a single long token from re-overflowing. */
  #top .lb-sec table.avia-table.lb-spec:not(.avia-data-table) td:first-child,
  #top .lb-v2 table.avia-table.lb-spec:not(.avia-data-table) td:first-child,
  #top .lb-ds table.avia-table.lb-spec:not(.avia-data-table) td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 16.2 Buttons go full width in button rows at 600 ------------------------
   Every redesign button row carries lb-btnrow, with lb-v2-btnrow / lb-ds-btnrow
   as additional markers (audited across 15929, 19513, 19518, 19520-19537,
   19564, 19739, 19744), so one rule serves all three families.
   Specificity: `#top #wrap_all ... a.avia-button` is 2 ids + an element, which
   clears Enfold's per-button `#top #wrap_all .avia-button.av-lbXXXX` margins
   without !important. The row's own gap is left to whichever family rule set
   it; only the horizontal margins Enfold emits are zeroed. */
@media only screen and (max-width: 600px) {
  #top #wrap_all .avia-buttonrow-wrap.lb-btnrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #top #wrap_all .lb-btnrow a.avia-button {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 16.3 Touch targets ------------------------------------------------------
   Buttons already carry min-height: var(--lb-touch-target) (44px, section 10)
   and every row class resolves to lb-btnrow, so buttons are covered sitewide.
   The gap was the hub's two standalone navigation clusters, both set in 12-13px
   mono: the hero anchor row and the breadcrumbs. Their hit area is extended
   with an absolutely-positioned overlay instead of padding, because padding
   would move the hero layout. The overlay is out of flow, so it does not
   become a flex item of the anchor. Horizontal inset stays 0, so neighbours
   never overlap (the anchor row's gap is --ds-s6 = 32px).
   Inline arrow links inside body copy (.lb-ds-more, .lb-arrowlink) are left
   alone: WCAG 2.5.8 exempts links in a line of text. */
#top .lb-ds .lb-ds-anchors a,
#top .lb-ds-hero .lb-ds-crumbs a { position: relative; }
#top .lb-ds .lb-ds-anchors a::after,
#top .lb-ds-hero .lb-ds-crumbs a::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

/* ==========================================================================
   17. APPROVED-PAGE ALIGNMENT  (2026-08-14, Red1 refinement list)

   The hub family adopts the eyebrow, section rhythm, counter and closing
   gradient already approved on the Product Design V2 pages. Values were
   MEASURED off page 19528 (STACK) in the browser, not eyeballed from a
   screenshot and not read off the CSS, so what is matched is what renders:
     eyebrow   15px / line-height 1.5 / 0.1em / 400 / IBM Plex Mono
               #EC7628 on dark and navy, #C25A15 on light
     counters  26px / 1.5 / 600 / #EC7628 / tabular figures
     sections  64px and 80px (44 / 56 mobile) = --v2-pad / --v2-pad-lg
     crumb to eyebrow  32px
     closing   --lb-gradient-warm, D94A2B at 54%
   The --hub-sec / --hub-major tokens above were re-pointed to 64/80 in place,
   so this is a SITEWIDE change to every lb-ds page, which is what was asked.
   ========================================================================== */

/* 17.1 eyebrows inherit the approved treatment ----------------------------
   Root cause of the wrong eyebrow, and it predates this section: the hub
   eyebrow is a <p>, so block 20's #top .lb-ds .lb-ds-eyebrow (1,2,0) was
   beaten by #top .lb-ds .entry-content-wrapper p (1,3,1) on size and by
   #top .lb-ds.lb-ds-hero .entry-content-wrapper p (1,3,1) on colour. It has
   been rendering 16px/1.9 body grey, never 12px orange. The whole eyebrow
   family is therefore restated one #wrap_all higher so it clears the
   paragraph rules, keeping block 20's internal order base -> light -> mute
   -> navy. The block-20 rules below stay as documentation of the intent;
   these supersede them.
   Values are the approved product-page eyebrow (measured on 19528): 15px /
   line-height 1.5 / 0.1em, #EC7628 on dark, #C25A15 on light.
   WEIGHT, Red1 2026-08-14 after reviewing the 400/500/600/700 prototype:
   500 on dark and navy, 600 on light. Deliberately not one number - the
   light-surface eyebrow is #C25A15 on #F5F7F9 and needs the extra weight to
   hold the optical presence #EC7628 has against a dark ground. Colour is
   likewise not uniform and cannot be: #EC7628 on white is 3.0:1, failing AA
   at 15px.
   NOTE the colours are written as --brand-orange and a literal #C25A15, not
   as --v2-orange / --v2-orange-dk: those two tokens are declared inside
   `#top .lb-v2 { }` and are therefore undefined on an .lb-ds page, where the
   var() fell through to the inherited body grey (#696969). #C25A15 is
   exactly --v2-orange-dk; it has no global token yet. */
#top #wrap_all .lb-ds .lb-ds-eyebrow {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--brand-orange);
}
#top #wrap_all .lb-ds.lb-ds-light .lb-ds-eyebrow { color: #C25A15; font-weight: 600; }
/* The ghost cross card gives up its muted slate: Red1 unified it with every
   other light-surface eyebrow. .lb-ds-eyebrow-mute now differs from a plain
   light eyebrow in nothing, so it is a candidate for removal from the
   generator the next time the cross cards are rebuilt. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-eyebrow.lb-ds-eyebrow-mute { color: #C25A15; font-weight: 600; }
/* Navy eyebrows join the rest at #EC7628. This supersedes the block-20 note
   "navy-section eyebrows use the light-orange #F39A55": the approved product
   pages put --v2-orange on every non-light surface, and Red1 asked for one
   eyebrow colour sitewide. #EC7628 on the navy #072C50 is 4.8:1, above the
   4.5:1 floor that #F39A55 was chosen to clear. */
#top #wrap_all .lb-ds.lb-dsr.lb-ds-navy .lb-ds-eyebrow { color: var(--brand-orange); }

/* 17.2 breadcrumb to eyebrow distance, measured at 32px on the approved page.
   The 74px measured here was never one gap: 32px of crumb padding, then the
   crumb paragraph's own 24px bottom margin, then Enfold's 50px
   .column-top-margin on the hero copy column. The two additions are removed
   and the crumb padding alone carries the distance. The panel column is
   unmargined with the copy column so the two stay top-aligned. */
#top .lb-ds-hero .lb-ds-crumbs { padding-bottom: 32px; margin-bottom: 0; }
#top .lb-ds-hero .lb-ds-herocopy.column-top-margin,
#top .lb-ds-hero .lb-ds-heropanel.column-top-margin { margin-top: 0; }
/* Below the stacking breakpoint Enfold swaps that column margin for a 20px
   margin-BOTTOM on every column, which put the gap back to 52px on phones.
   Only the crumb column is zeroed; the copy and panel columns keep theirs. */
#top #wrap_all .lb-ds-hero .entry-content-wrapper > .flex_column:first-child { margin-bottom: 0; }

/* 17.3 counters inherit the approved number treatment.
   The band counter was 18px/500; the approved pages set 26px/600 with tabular
   figures so a column of 01..05 stays optically aligned. */
#top .lb-ds.lb-dsr .lb-ds-brow .lb-ds-brow-num {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  padding-top: 0;
}

/* 17.4 Enfold's decorative heading divider, off across the hub family.
   av_heading renders a floated heading plus a .special-heading-border that
   fills the rest of the row: that is the stray rule to the left of the section
   title. Already handled for .lb-sec and for the closing panel (12c); this
   generalises it to every lb-ds section. */
#top .lb-ds .special-heading-border { display: none; }
#top .lb-ds .entry-content-wrapper .av-special-heading-tag { float: none; width: auto; }

/* 17.5 product rows: no closing rule, tighter rhythm, media tied to its row.
   Rows stay rows: the media keeps its open frame and gains no card chrome,
   it is simply pulled closer and capped shorter so it reads as belonging to
   the row beside it rather than floating in its own column. */
#top .lb-ds.lb-dsr .lb-ds-brow { padding: 36px 0; gap: 32px; }
#top .lb-ds.lb-dsr .lb-ds-brow:last-child { border-bottom: 0; }
#top .lb-ds.lb-dsr .lb-ds-brow .lb-ds-brow-media { align-self: start; }
#top .lb-ds.lb-dsr .lb-ds-brow .lb-ds-slot { min-height: 168px; }

/* 17.6 closing panel gradient matches the approved product pages.
   This restores the D94A2B 54% stop (p0.3b had moved it to 38% to lift the
   contrast of the SECONDARY on-warm button). That rationale no longer applies
   here: the hub closing panel now carries a single white primary button, and
   white on this gradient is 4.2:1 at its lightest point and better everywhere
   else. If a two-button on-warm row returns, re-check the secondary. */
#top #wrap_all .lb-ds.lb-ds-close { background: var(--lb-gradient-warm); }

/* 17.7 Japanese line breaking ---------------------------------------------
   Stops breaks like 「応 / じて」 that split a word across lines. auto-phrase
   breaks at phrase boundaries using the browser's own dictionary; where it is
   unsupported the declaration is ignored and today's behaviour stands, so this
   is safe as progressive enhancement. line-break: strict additionally keeps
   small kana and prolonged-sound marks off the start of a line. */
#top .lb-ds .entry-content-wrapper h1,
#top .lb-ds .entry-content-wrapper h2,
#top .lb-ds .entry-content-wrapper h3,
#top .lb-ds .entry-content-wrapper p,
#top .lb-ds .entry-content-wrapper li,
#top .lb-v2 .entry-content-wrapper h1,
#top .lb-v2 .entry-content-wrapper h2,
#top .lb-v2 .entry-content-wrapper h3,
#top .lb-v2 .entry-content-wrapper p,
#top .lb-v2 .entry-content-wrapper li,
#top .lb-sec .entry-content-wrapper p,
#top .lb-sec .entry-content-wrapper li {
  word-break: auto-phrase;
  line-break: strict;
}

/* ==========================================================================
   18. ONE SECTION PAD ACROSS THE HUB FAMILY  (2026-08-14, Red1)

   Red1: "make lumerical hub section pad 1440/768 -> 64px, 600/390 -> 44px.
   the padding should be the same as the homepage redesign."

   The homepage draft runs a single --lb-section-pad on every section: 64px
   down to 600, 44px below. The hub had four different values instead -
   --hub-sec 64 on light, --hub-major 80 on navy and char, --hub-hero 0/56 on
   the hero, and clamp(44px, 7vw, 76px) on the closing panel - plus a
   --hub-half 48 bottom on .lb-ds-tighten. All of them now resolve to
   --hub-sec, which already steps 64 -> 64 (@1120) -> 44 (@600), so both
   families read one number and the mobile step is inherited, not restated.

   Only padding-top / padding-bottom are set here, never the shorthand, so
   every section keeps its own background.

   Consequences worth knowing before this is judged:
     - the hero gains a 64px top pad it did not have. It used to sit flush
       under the header with the navy gradient running up to it, which is why
       the crumb row carries its own 20px. The homepage hero has the 64.
     - .lb-ds-tighten no longer tightens anything. It stays in the markup as
       a hook; if this rhythm sticks, drop it from the generator.
     - --hub-major and --hub-hero are now unused for section padding.
       Left declared rather than deleted so nothing else silently breaks.
   ========================================================================== */
#top #wrap_all .lb-ds.lb-ds-hero,
#top #wrap_all .lb-ds.lb-ds-light,
#top #wrap_all .lb-ds.lb-ds-navy,
#top #wrap_all .lb-ds.lb-ds-char,
#top #wrap_all .lb-ds.lb-dsr.lb-ds-close {
  padding-top: var(--hub-sec);
  padding-bottom: var(--hub-sec);
}
#top #wrap_all .lb-ds.lb-ds-tighten { padding-bottom: var(--hub-sec); }

/* 18.1 the declared pad has to BE the rendered pad ------------------------
   Enfold ships `.content, .sidebar { padding: 50px }` on the page wrapper
   that sits inside every av_section. The lb-ds family had been setting its
   padding on the SECTION and leaving that 50px in place underneath, so a
   "64px" section actually rendered 114px top and bottom and two adjacent
   sections put 228px between their content. Measured, not assumed: every
   lb-ds section reported exactly 50px of dead space above its first column
   and below its last.
   The .lb-sec / .lb-v2 families never had this - they set --lb-section-pad
   ON .content, which overwrites the 50px rather than stacking on it. That is
   why the homepage reads 64px and the hub did not, even with the same number
   in the stylesheet. Zeroing it here makes the two families comparable. */
#top #wrap_all .lb-ds .content,
#top #wrap_all .lb-ds .template-page {
  padding-top: 0;
  padding-bottom: 0;
}


/* ==========================================================================
   21  PRODUCTS HUB REBUILT TO THE FROZEN v3.1 PROTOTYPE  (2026-08-14)
   --------------------------------------------------------------------------
   Source of truth: `Products Hub v2.dc.html` from "Enterprise Hub Design
   System.zip", v3.1 FROZEN. Companion to block 20, which did the same job for
   `Lumerical Hub.dc.html`.

   SCOPE. Every rule requires BOTH `lb-dsr` and one of the three new class
   families below, so nothing here can reach page 19797 (the approved Lumerical
   hub) or any other lb-ds page. 19797 uses .lb-ds-brow / .lb-ds-cards and is
   not touched by a single selector in this block.

   WHY NEW CLASSES AND NOT .lb-ds-brow. The two hubs' editorial rows are
   different components, not two skins of one:

     .lb-ds-brow  (Lumerical Hub)  64px  180px  6fr  3fr
                                   num   role   copy media
     .lb-ds-frow  (Products Hub)   64px  6fr    4fr  3fr
                                   num   copy   spec media

   The Lumerical row carries an orange-ruled ROLE label in column 2 and no spec
   column at all; the Products row carries the copy in column 2 and a two-block
   SPEC column in column 3. Forcing one onto the other would move the copy into
   the wrong column at every breakpoint. This is the block-19 mistake in
   reverse and the reason block 20 exists, so it is not repeated here.

   THREE COMPONENTS, all of them absent from the existing vocabulary:
     1. .lb-ds-frow  — the family row with its spec column
     2. .lb-ds-badge — the vendor chip beside the family name. The pilot family
        has .lb-tag, but that is scoped to `#top .lb-tag` on dark surfaces
        (#484848 border, #C9C9C9 ink) and is a different component on a
        different surface. No .lb-ds equivalent existed.
     3. .lb-ds-cards-3 — the prototype's application grid is
        `repeat(3, 1fr)`, a FIXED three. .lb-ds-cards is
        `auto-fit, minmax(min(100%, 300px), 1fr)`, which at the 1480px
        container resolves to FOUR columns and puts 6 cards on a 4+2 ragged
        grid. A modifier, not a change to .lb-ds-cards, so 19797 is unaffected.

   Everything else the page needs already had a rule and is reused unchanged:
   the hero, .lb-ds-crumbs, .lb-ds-anchors, .lb-ds-head, .lb-ds-slot,
   .lb-ds-table + .lb-ds-tscroll, .lb-ds-pointer2, the .lb-ds-cross /
   .lb-ds-xcard / .lb-ds-xghost pair and the .lb-ds-close panel.
   ========================================================================== */

/* ------------------------------------------------------- 21.1 family rows */
#top .lb-ds.lb-dsr .lb-ds-frows { margin-top: var(--ds-s6); }
#top .lb-ds.lb-dsr .lb-ds-frow {
  display: grid;
  grid-template-columns: 64px minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 40px;
  align-items: start;
  padding: 56px 0;
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-frow:last-child { border-bottom: 1px solid var(--border-light); }

/* Spec §06: on light surfaces brand #EC7628 is reserved for 1px borders, 4px
   rules, mono counters and markers. The counter stays brand, as in block 20. */
#top .lb-ds.lb-dsr .lb-ds-frow-num {
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
  padding-top: 6px;
}

#top .lb-ds.lb-dsr .lb-ds-frow-copy { display: flex; flex-direction: column; gap: 14px; }
#top .lb-ds.lb-dsr .lb-ds-fhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ftitle {
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
}
#top .lb-ds.lb-dsr.lb-ds-light .lb-ds-ftitle a { color: var(--text-primary-light); }
#top .lb-ds.lb-dsr.lb-ds-light .lb-ds-ftitle a:hover { color: #A8500F; }
#top .lb-ds.lb-dsr .lb-ds-fsum {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--text-primary-light);
}
#top .lb-ds.lb-dsr .lb-ds-fdesc { margin: 0; font-size: 14px; line-height: 1.9; max-width: 44em; }
#top .lb-ds.lb-dsr .lb-ds-fmore { margin: 4px 0 0; }

/* ----------------------------------------------------- 21.2 vendor badge */
#top .lb-ds.lb-dsr .lb-ds-badge {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-ctl);
  background: var(--surface-white);
  color: var(--text-secondary-light);
}
/* The LightBridge-developed family is marked warm, not neutral: it is the one
   row where the vendor is us. #A8500F, not brand #EC7628 — orange ink on a
   light ground needs the frozen darker token to clear 4.5:1. */
#top .lb-ds.lb-dsr .lb-ds-badge.lb-ds-badge-lb {
  color: #A8500F;
  border-color: var(--brand-orange);
  background: rgba(236, 118, 40, 0.08);
}

/* ----------------------------------------------------- 21.3 spec column */
#top .lb-ds.lb-dsr .lb-ds-fspecs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}
#top .lb-ds.lb-dsr .lb-ds-spec { display: flex; flex-direction: column; gap: 8px; }
#top .lb-ds.lb-dsr .lb-ds-spec-k {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary-light);
}
/* Two value treatments, per the prototype: the enumerable one (構成製品 /
   主要機能) is mono and reads as a list of names; the prose one (代表的な用途)
   is sans and reads as a sentence fragment. */
#top .lb-ds.lb-dsr .lb-ds-spec-v {
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 2;
  color: var(--text-primary-light);
}
#top .lb-ds.lb-dsr .lb-ds-spec-v-prose {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-secondary-light);
}

/* --------------------------------------------------- 21.4 media, 16 / 10 */
/* .lb-ds-slot supplies the dashed frame and the "asset required" label under
   global rule 9. The prototype fixes this slot's ratio, so the 240px floor is
   released here (and only here) rather than changed on .lb-ds-slot itself. */
#top .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot {
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: var(--ds-s5);
}

/* ------------------------------------------- 21.5 fixed three-column cards */
#top .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-3 .lb-ds-card-title { font-size: 20px; line-height: 1.4; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-3 .lb-ds-card-desc  { font-size: 14px; line-height: 1.9; }
/* The family attribution is pinned to the card's bottom edge so a 1-line and a
   2-line description still line their attributions up across the row. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-3 .lb-ds-card-fam {
  margin: auto 0 0;
  padding-top: var(--ds-s3);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-cards-3 .lb-ds-card-link { margin: var(--ds-s2) 0 0; }

/* ------------------------------------------- 21.7 comparison row headers */
/* The prototype's ComparisonTable has a row-label column. Block 19 styles
   `thead th` and `td` but never a `tbody th`, so on navy the row labels would
   have taken Enfold's own table-header colour and carried no rule line. */
#top .lb-ds.lb-dsr .lb-ds-table tbody th {
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
}
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-table tbody th {
  color: var(--text-primary-dark);
  border-bottom: 1px solid var(--border-navy);
}
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-table thead th:first-child {
  border-bottom: 1px solid var(--border-navy);
}
#top .lb-ds.lb-dsr.lb-ds-light .lb-ds-table tbody th {
  color: var(--text-primary-light);
  border-bottom: 1px solid var(--border-light);
}

/* ------------------------------------------------------- 21.6 responsive */
/* #wrap_all on the grid rules for the same reason block 20 needs it: Enfold's
   merged stylesheet loads after the child theme and an equal-specificity child
   rule loses below 767px. */
@media only screen and (max-width: 1120px) {
  /* The spec column folds under the copy rather than being crushed: at 1120
     the 4fr column is 232px and 「FDTD ／ MODE ／ Multiphysics ／ INTERCONNECT
     ／ CML Compiler」 breaks to five lines. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow {
    grid-template-columns: 48px minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-fspecs { grid-column: 2; padding-top: var(--ds-s5); }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot { grid-column: 3; grid-row: 1; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s4);
    padding: var(--ds-s7) 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow > * { grid-column: 1; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot { grid-row: auto; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-fspecs { padding-top: 0; }
  #top #wrap_all .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ftitle { font-size: 22px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-3 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------- 21.8 the comparison table always scrolls */
/* Measured, not assumed. This table is 5 columns wide (4 families plus a
   row-label column) and its intrinsic minimum is 679px, so it fits inside the
   90vw container only from roughly 880px up. Block 19 starts the table scroll
   at <=767px, a stop chosen for the Lumerical hub's narrower tables, and that
   left a dead band from 768 to ~880 where THIS table broke out of its
   container with no way to scroll it: measured at 768, the container is 591px
   and the table painted 88px past its right edge. It read as a layout break,
   not as a wide table.
   `auto` rather than a second breakpoint, so the scrollbar appears exactly
   when the table does not fit and never when it does. Gated on lb-dsr so
   block 19's <=767 behaviour is unchanged everywhere else. */
#top .lb-ds.lb-dsr .lb-ds-tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----------------------- 21.9 the single-column stack actually stacks */
/* Found in browser QA at 600 and 390, not in the markup. The <=1120 rules that
   place the spec column and the media slot are `.lb-ds-frow .lb-ds-fspecs`
   and `.lb-ds-frow .lb-ds-slot`, both (2,5,0); the <=767 reset was written as
   `.lb-ds-frow > *`, which is (2,4,0). Both media queries match below 767px,
   so the placement rules outranked the reset and the "single column" grid grew
   two implicit tracks: measured at 390, the resolved template was
   `0px 13px 288px` and the counter, title, summary and description were all
   crushed into a 0px track while the media slot took the full width.
   Restated here at the same specificity as the rules being reversed, and later
   in the file, so the cascade resolves by document order rather than by luck.
   The `> *` reset above is left in place: it is correct for any future child
   that carries no placement of its own. */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-fspecs { grid-column: 1; padding-top: 0; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot { grid-column: 1; grid-row: auto; }
}

/* ------------------------- 21.10 the table sits on its section, not on white */
/* Found in the VISUAL pass, after the measurements had all come back correct.
   Computed colour on the row labels read #F4F2EF the whole time; the reason
   they were unreadable is that Enfold paints its own ground underneath:

     table                       background #F8F8F8   (Enfold table default)
     .main_color tr:nth-child(2n+1)  background var(--enfold-main-color-bg2)
     td / th                     border-left / border-right 1px #E1E1E1

   So a navy section rendered a near-white table with near-white ink on it, a
   contrast ratio of about 1.03:1, plus vertical cell rules the design does not
   have. Block 19 styles `thead th` and `td` and never zeroed any of this,
   because no lb-ds page carried a table until this one: 19797's generator bans
   .lb-ds-table outright. That is why this survived block 19 and block 20.
   Horizontal rules only, per the prototype's ComparisonTable. */
#top .lb-ds.lb-dsr .lb-ds-table,
#top .lb-ds.lb-dsr .lb-ds-table thead,
#top .lb-ds.lb-dsr .lb-ds-table tbody,
#top .lb-ds.lb-dsr .lb-ds-table tr {
  background: transparent;
}
#top .lb-ds.lb-dsr .lb-ds-table th,
#top .lb-ds.lb-dsr .lb-ds-table td {
  background: transparent;
  border-left: 0;
  border-right: 0;
}

/* ------------------------------------ 21.11 the Photonica release status label */
/* R1 item 5 asks for a SMALL STATUS LABEL beside the LightBridge開発 badge, not a
   second chip. Borderless and unfilled on purpose: two bordered chips on one
   title line read as two equal classifications, and the vendor mark is the one
   that carries meaning. Mono at the badge's own 11px so the two sit on a shared
   baseline inside .lb-ds-fhead's existing flex and 14px gap. No layout property
   is declared here, so the family row is unchanged.
   #465968 on #F5F7F9 is 6.4:1. */
#top .lb-ds.lb-dsr .lb-ds-status {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text-secondary-light);
}

/* ------------------- 21.12 wpautop's paragraph must not be a flex item */
/* Enfold runs wpautop over COLUMN content, so the inline runs that follow the
   </h3> inside .lb-ds-fhead come back wrapped in a <p>. That <p> is a block, so
   the badge and the release label arrived as ONE flex item carrying the
   inherited 16px / 1.9 paragraph box: measured, the Photonica head was 58px
   against 36px for the three heads that carry no chip, and 100px against 29px
   at 390 where the pair could not break between its two chips.
   `display: contents` drops the paragraph's box and promotes the chips to real
   flex items of .lb-ds-fhead, so they inherit its existing 14px gap and wrap
   independently. Both chips set their own font-size and line-height, so nothing
   inherits the paragraph's. Result: 39px against 36px at 1440, and the row
   rhythm matches the other three rows again. This is R1 item 7's "do not change
   the row layout" being honoured, not a new layout. */
#top .lb-ds.lb-dsr .lb-ds-fhead > p {
  display: contents;
}

/* --------------- 21.13 the comparison table is legible where it scrolls */
/* R1 item 9: the four product columns must not be unreadably compressed on
   mobile. Block 19's floor is min-width 620px, set for narrower tables; with
   this table's 5 columns that left 104px data columns and pushed
   「電磁界・導波路・電気／熱・回路シミュレーション」 to FIVE lines at 390.
   Raising the floor to 860px costs only scroll distance, because 21.8 already
   made the container scroll whenever the table does not fit: worst case drops
   from 5 lines to 3, and data columns go from 104-137px to 141-224px.
   Scoped to lb-dsr, so block 19's 620px floor is untouched for every other
   page. #wrap_all because block 19's rule lives in a max-width query and
   Enfold's merged stylesheet loads after the child theme. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll .lb-ds-table {
  min-width: 860px;
}


/* ==========================================================================
   22  PRODUCT-FAMILY LANDING  (page family B)  —  2026-08-14
   --------------------------------------------------------------------------
   Source of truth: `Photonica Family Page.dc.html` from "Enterprise Hub Design
   System.zip", v3.1 FROZEN. First page of the prototype's family B: a product
   family landing, as distinct from the family-A hubs that blocks 20 and 21
   serve.

   SCOPE. Every rule requires `lb-dsr` AND one of the new class families below.
   Pages 19797 and 19848 use none of them, so neither is reachable from here.
   Re-verified after the append.

   REUSED UNCHANGED, so this block stays small: .lb-ds-hero / .lb-ds-crumbs /
   .lb-ds-eyebrow / h1 / .lb-ds-lead / .lb-ds-head / .lb-ds-herocopy,
   .lb-ds-cards (its auto-fit resolves to exactly 4 columns at the 1480px
   container, which is what the prototype's repeat(4,1fr) asks for),
   .lb-ds-card / -title / -desc, .lb-ds-slot, .lb-ds-small, .lb-ds-more +
   .lb-ds-arrow, .lb-ds-cont, and the .lb-ds-close panel with .lb-btnrow.
   ========================================================================== */

/* ------------------------------------------------- 22.1 hero with a media slot */
/* The family-A hubs put a nav panel or nothing beside the hero copy; family B
   puts a 16/10 product screenshot there, and the prototype centres the two
   columns against each other instead of top-aligning them. */
/* 22.1a CORRECTED after browser QA. The two rules that were here did real
   damage and are recorded rather than quietly deleted:
     - `align-items: center` on .entry-content-wrapper was INERT. Enfold lays
       hero columns out with FLOATS, not flex or grid, so there is no box to
       align. Measured: grid-template-columns resolved to `none`,
       align-items to `normal`. The prototype centres its 7fr/5fr pair; this
       page top-aligns them, as approved page 19797 does. Deviation, recorded.
     - `width: 100%; margin: 0` on .lb-ds-heromedia was the <=1120 STACKING
       rule written into the base block by mistake. It overrode Enfold's 40%
       column width at every viewport, so the media slot took the full 1196px
       container and its 16/10 ratio made it 748px tall. The hero was a single
       stacked column at 1440. That rule now lives only in the media query,
       where block 20 keeps its equivalent. */
#top .lb-ds.lb-dsr .lb-ds-heromedia .lb-ds-slot {
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: var(--ds-s5);
}
/* .lb-ds-slot's default ground is white, which is correct on a light section and
   wrong on the hero gradient. Block 19 gives .lb-ds-navy and .lb-ds-char a dark
   variant but never .lb-ds-hero, because no hub hero carried a slot. */
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-slot {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-navy);
  color: var(--text-secondary-dark);
}

/* ------------------------------------------------ 22.2 buttons on the hero */
/* The only .lb-ds button treatment that exists is section 12b's, scoped to the
   warm closing panel. A hero row sits on the navy gradient and needs its own.
   Colour lives here, not in ALB attributes, so it survives regeneration.
   Primary is #101820 ink on #EC7628 (6.1:1) — NOT white, which is only 2.9:1 on
   brand orange and fails AA at a 600-weight 15px label. Hover lightens to
   #F39A55 (8.1:1), never darkens. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button {
  background-color: var(--brand-orange);
  color: #101820;
  border: 1px solid var(--brand-orange);
  border-radius: var(--ds-radius-ctl);
  transition: background-color var(--ds-dur-base) var(--ds-ease),
              border-color var(--ds-dur-base) var(--ds-ease),
              color var(--ds-dur-base) var(--ds-ease);
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button:hover,
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button:focus-visible {
  background-color: var(--accent-light-orange);
  border-color: var(--accent-light-orange);
  color: #101820;
}
/* Secondary = every button after the first, expressed as a sibling combinator so
   a single-button row still reads as primary. Do NOT use :not(:first-child):
   Enfold injects a <style> element between the anchors and both would match. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button ~ a.avia-button {
  background-color: transparent;
  color: var(--text-primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button ~ a.avia-button:hover,
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button ~ a.avia-button:focus-visible {
  background-color: transparent;
  color: var(--text-primary-dark);
  border-color: #FFFFFF;
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn a.avia-button:focus-visible {
  outline: 2px solid var(--accent-light-orange);
  outline-offset: 3px;
}
#top .lb-ds.lb-dsr .lb-ds-herobtn { margin-top: var(--ds-s2); }

/* ------------------------------------------------------- 22.3 prose block */
/* A single long argument paragraph, one step down from .lb-ds-lead's 19px and
   one step up from body 16px, at a wider measure. The prototype uses it once,
   for the "what this platform is" statement. */
/* The top margin is on the block itself, not on a .lb-ds-head descendant rule,
   so the one section that is nothing BUT a statement does not need .lb-ds-head
   and therefore does not inherit its 48px bottom margin. That section would
   otherwise render 64px of top padding against 112px below it. */
#top .lb-ds.lb-dsr .lb-ds-prose {
  margin: var(--ds-s5) 0 0;
  font-size: 17px;
  line-height: 2;
  max-width: 52em;
}

/* ------------------------------------------- 22.4 top-ruled column groups */
/* Used twice: the navy "why workflow integration" trio, numbered; and the light
   "where it sits in the workflow" trio, kicker-labelled. One component, tone
   driven by the section class, marker driven by which child is present. A card
   would have been wrong here: these are ruled columns, not boxes. */
#top .lb-ds.lb-dsr .lb-ds-wcols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-s5);
  margin: 0;
}
#top .lb-ds.lb-dsr .lb-ds-wcol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-wcol { border-top-color: var(--border-navy); }
#top .lb-ds.lb-dsr .lb-ds-wcol .lb-ds-wnum {
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
}
#top .lb-ds.lb-dsr .lb-ds-wcol .lb-ds-wkick {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #A8500F;
}
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-wtitle {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
}
#top .lb-ds.lb-dsr.lb-ds-light .entry-content-wrapper .lb-ds-wtitle { font-size: 18px; }
#top .lb-ds.lb-dsr .lb-ds-wcol .lb-ds-wtext { margin: 0; font-size: 14px; line-height: 1.9; }
/* On navy the prototype drops this copy to the muted token. It clears 4.5:1 on
   #072C50 and is the design's own hierarchy between a title and its gloss. */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-wcol .lb-ds-wtext { color: var(--text-muted-dark); }
#top .lb-ds.lb-dsr .lb-ds-wcol .lb-ds-wlink { margin: var(--ds-s2) 0 0; }

/* --------------------------------------- 22.5 the compact capability cards */
/* .lb-ds-cards already resolves to 4 columns at 1480. Only the internal scale
   differs: 28px padding and a 17/13 type pair instead of 32px and 18/15,
   because eight cards of two lines each read as a specification list rather
   than as eight editorial cards. */
/* CORRECTED after browser QA. The comment above claimed .lb-ds-cards auto-fit
   resolves to 4 columns at the 1480px container. It does not: the RENDERED
   container is 1196px (90vw of the viewport, less Enfold's own box), and four
   300px tracks plus three 24px gaps need 1272px. Measured 3 columns, so eight
   cards sat 3+3+2 ragged. The prototype asks for repeat(4,1fr), so it is
   declared, not inferred. Same lesson as .lb-ds-cards-3 on 19848: never infer a
   column count from a container width you have not measured. */
#top .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#top .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-sm .lb-ds-card { padding: 28px; gap: var(--ds-s2); }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-sm .lb-ds-card-title { font-size: 17px; line-height: 1.5; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-sm .lb-ds-card-desc  { font-size: 13px; line-height: 1.9; }
/* These eight are a closed list, not links, so the hover lift on .lb-ds-card
   would promise a click target that does not exist. */
#top .lb-ds.lb-dsr .lb-ds-cards-sm .lb-ds-card:hover {
  border-color: var(--border-light);
  transform: none;
}

/* ------------------------------------------------ 22.6 the product panel */
/* One navy panel on the light surface, the whole thing a link. The workflow
   product it points at is the page's single most important destination, so it
   is a band rather than one card in a grid. */
#top .lb-ds.lb-dsr .lb-ds-ppanel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ds-s7);
  align-items: center;
  max-width: 1200px;
  padding: var(--ds-s7);
  border-radius: var(--ds-radius-media);
  background: var(--surface-navy);
  border: 1px solid var(--border-navy);
  text-decoration: none;
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-ppanel:hover { border-color: var(--brand-orange); text-decoration: none; }
#top .lb-ds.lb-dsr .lb-ds-ppanel-copy { display: flex; flex-direction: column; gap: var(--ds-s3); }
/* wpautop opens a paragraph for the inline pill span, then closes it before the
   <h3>, and leaves an EMPTY <p> behind. In a flex column that empty paragraph is
   a real flex item carrying the inherited 16px / 1.9 box, so it injected about
   30px of dead space under the pill. Measured in the DOM: the copy column had
   five children, not four. Same family as 21.12 and as the hero stat-tile rule
   in section 5. */
#top .lb-ds.lb-dsr .lb-ds-ppanel-copy > p:empty { display: none; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ppanel-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-primary-dark);
}
/* .entry-content-wrapper is LOAD-BEARING in this selector. Found in the visual
   pass: the description rendered #465968 on the navy panel, all but illegible.
   The panel is a navy island inside a LIGHT section, so block 19's
   `#top .lb-ds.lb-ds-light .entry-content-wrapper p` applies - and at (1,3,1)
   its trailing element selector outranks a (1,3,0) three-class rule no matter
   how much later in the file it sits. Adding .entry-content-wrapper takes this
   to (1,4,0) and it governs. The title escaped the same fate only because it
   already carried .entry-content-wrapper.
   RULE: any element inside a dark island on a light section (or the reverse)
   needs a class count that beats the surface rule's element selector. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ppanel-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary-dark);
}
#top .lb-ds.lb-dsr .lb-ds-ppanel-go {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
/* 22.6b THE PANEL IS A DIV, NOT AN ANCHOR.
   The prototype makes the whole panel one <a>. That cannot survive wpautop:
   Enfold runs it over column content and it forces paragraph boundaries around
   any BLOCK element, including ones nested inside an anchor. Measured on the
   rendered output, `<a><span><span>pill</span></p><h3>…` - the </p> closes the
   paragraph, the browser auto-closes the anchor, and a stray </a> lands at the
   end. The grid never forms and the link wraps nothing.
   So the panel is a div whose BORDER reacts to hover, and the title and the CTA
   are the click targets - two links to one destination, exactly the pattern the
   approved family rows on 19848 already use. A <p> inside an <a> was the risk I
   guarded; the <h3> and the media <div> were the actual triggers. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ppanel-title a { color: var(--text-primary-dark); }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ppanel-title a:hover { color: var(--accent-light-orange); }
/* The panel is navy inside a LIGHT section, so the family's #A8500F link colour
   would land dark orange on navy. #F39A55 on #0C385F measures 5.4:1. */
#top .lb-ds.lb-dsr .lb-ds-ppanel-go a { color: var(--accent-light-orange); }
#top .lb-ds.lb-dsr .lb-ds-ppanel-go a:hover { color: #FFFFFF; }
#top .lb-ds.lb-dsr .lb-ds-ppanel .lb-ds-slot {
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: var(--ds-s5);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-navy);
  color: var(--text-secondary-dark);
}
/* Status pill. #F39A55 on the 12% orange wash over #0C385F measures 4.9:1. */
#top .lb-ds.lb-dsr .lb-ds-pill {
  align-self: flex-start;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: var(--ds-radius-ctl);
  background: rgba(236, 118, 40, 0.12);
  color: var(--accent-light-orange);
}

/* ------------------------------------------------- 22.7 the resource row */
/* Two pointers under a single rule, closing the page before the CTA. The rule
   belongs to the group, not to each column, so it reads as one hairline. */
#top .lb-ds.lb-dsr .lb-ds-rescols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-s5);
  margin: 0;
  padding-top: var(--hub-half);
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-rescol { display: flex; flex-direction: column; gap: var(--ds-s3); margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-rescol .lb-ds-eyebrow { margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-rescol .lb-ds-restext { margin: 0; font-size: 14px; line-height: 1.9; }

/* --------------------------------------------------------- 22.8 responsive */
/* #wrap_all on every grid rule: Enfold's merged stylesheet loads after the child
   theme and an equal-specificity child rule loses below 767px. */
@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-herocopy,
  #top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-heromedia { width: 100%; margin-left: 0; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-heromedia { margin-top: 40px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols { grid-template-columns: minmax(0, 1fr); }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-ppanel { grid-template-columns: minmax(0, 1fr); }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-rescols { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-prose { font-size: 16px; line-height: 1.9; }
  #top #wrap_all .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ppanel-title { font-size: 22px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-ppanel { padding: var(--ds-s6); gap: var(--ds-s5); }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-sm { grid-template-columns: minmax(0, 1fr); }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-cards-sm .lb-ds-card { padding: var(--ds-s5); }
  /* A full-width stacked button beats two half-width ones on a phone, and it
     matches what section 16 already does to the closing row at 600. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-herobtn .avia-button { width: 100%; }
}

/* ==========================================================================
   23. BODY FONT STACK - v3.3 typography ruling (Red1, 2026-08-15)

   SUPERSEDES the font half of v3.2 drift decision A1 ("Noto Sans JP first,
   Inter removed sitewide"). Red1's instruction, verbatim: the body stack is
   `Inter, "Noto Sans JP", sans-serif` - "not Lato, and not Noto Sans JP
   first". Latin words, product names and numerals resolve to Inter; Japanese
   falls through to Noto Sans JP. Headings keep --ds-font-sans (Noto Sans JP)
   and every mono element keeps --ds-font-mono; this block does not touch them.

   Three things a later session needs to know before "fixing" this:

   a) Inter is a DECLARED face of the design system as of v3.3. It is listed in
      DESIGN.md typography.body and appears in novamira/check-design's waivers,
      so the anti-slop `inter-font` check passes. Removing it from DESIGN.md
      will make every future pre-flight fail instead.

   b) The Google Fonts enqueue in enfold-child/functions.php is load-bearing.
      v3.2 had dropped Inter from it. Measured in-browser before the fix, an
      Inter-first stack rendered at exactly the Noto Sans JP width (1668.48px
      for a 100px Latin probe) - i.e. Inter was not resolving at all and the
      stack was a no-op. After re-enqueueing: 1688.04px. Do not remove Inter
      from the enqueue without also reverting this block.

   c) Why one wrapper rule is enough. Enfold's reset declares
      `font-family: inherit` on essentially every text element (specificity
      0,0,1), and NOTHING else in the cascade sets a face on .lb-ds body
      elements - verified by walking the CSSOM for every matched rule carrying
      font-family on .lb-ds-lead / .lb-ds-card-desc / .lb-ds-more / td. So the
      Lato these elements rendered was inherited all the way down from <body>.
      A single declaration on the section wrapper therefore reaches the whole
      subtree, and only elements that declare their own face (headings, mono)
      are exempt. 23.2 and 23.3 restate the same value on the classes Red1
      named, so the fix survives any future Enfold rule that starts targeting
      those elements directly.
   ========================================================================== */

:root {
  --ds-font-body: Inter, "Noto Sans JP", sans-serif;
}

/* 23.1 family-wide: the wrapper, inherited by everything that does not declare
   its own face. This is the rule that actually does the work. */
#top .lb-ds,
#top .lb-ds .entry-content-wrapper { font-family: var(--ds-font-body); }

/* 23.2 the body classes Red1 listed, restated explicitly. .lb-ds-fsum is the
   Products Hub spelling of .lb-ds-bsum; both are present because the two hub
   families name the same slot differently. */
#top .lb-ds .lb-ds-lead,
#top .lb-ds .lb-ds-fdesc,
#top .lb-ds .lb-ds-fsum,
#top .lb-ds .lb-ds-bdesc,
#top .lb-ds .lb-ds-bsum,
#top .lb-ds .lb-ds-xdesc,
#top .lb-ds .lb-ds-fig-l,
#top .lb-ds .lb-ds-prose,
#top .lb-ds .lb-ds-card-desc,
#top .lb-ds .lb-ds-ppanel-desc,
#top .lb-ds .lb-ds-restext,
#top .lb-ds .lb-ds-wtext,
#top .lb-ds .lb-ds-small,
#top .lb-ds .lb-ds-panel-name,
#top .lb-ds .lb-ds-spec-v-prose,
#top .lb-ds .lb-ds-more { font-family: var(--ds-font-body); }

/* 23.2a DO NOT add a bare `#top .lb-ds .entry-content-wrapper p, li` here.
   It was in the first cut of this block and it silently broke the eyebrows:
   .lb-ds-eyebrow is a <p>, its mono rule in section 19 is also (1,2,0), and
   the element selector won on source order alone - six eyebrows and five
   arrows flipped from IBM Plex Mono to Inter before the measured pass caught
   it. 23.1 already reaches every one of those paragraphs by inheritance, and
   an inherited value always loses to a directly-matching declaration, which
   is exactly the behaviour the mono classes need. */

/* 23.3 comparison-table cells. tbody only: the thead row is an eyebrow-class
   surface and keeps IBM Plex Mono, which section 19 already declares. */
#top .lb-ds .lb-ds-table td,
#top .lb-ds .lb-ds-table tbody th,
#top .lb-ds table td,
#top .lb-ds table tbody th { font-family: var(--ds-font-body); }

/* ==========================================================================
   24. COLUMN RHYTHM - Enfold's 50px column top margin, family-wide
   (Red1, 2026-08-15: 19538 spacing normalisation)

   THE DEFECT. Enfold ships `body .column-top-margin { margin-top: 50px }` and
   tags any ALB column that opens a new row with that class. Section 5 already
   neutralised it for the family-A hero:

     #top .lb-ds-hero .lb-ds-herocopy.column-top-margin,
     #top .lb-ds-hero .lb-ds-heropanel.column-top-margin { margin-top: 0; }

   That reset was written when `.lb-ds-heropanel` was the only second hero
   column in the system, and it only ever covered heroes. Two things then
   escaped it:

     - `.lb-ds-heromedia`, family B's hero second column (block 22), was never
       added to the list, so 19538's hero media slot sat 50px below the copy
       while 19797's panel top-aligns. Block 22's own comment claims this page
       "top-aligns them, as approved page 19797 does" - the CSS did not deliver
       what the comment records.
     - Nothing covered SECTION columns at all. It did not matter for the two
       hubs: 19797 has no `.lb-ds-head` and 19848 puts the eyebrow, H2, lead
       AND the content in one column, so neither page has a second section
       column and neither carries `column-top-margin` on one. 19538 is the
       first page to split intro and content into two columns, so it is the
       first page where the 50px lands.

   MEASURED, at 1440, before this block:

     page   columns with .column-top-margin   computed margin-top
     19797  2 (hero copy + panel)             0px, 0px   <- reset above
     19848  0                                 n/a
     19538  6 (hero copy + media, 4 content)  0px, 50px, 50px x4

   The 50px then stacked on `.lb-ds-head`'s own `margin-bottom: var(--hub-half)`
   (48px), so the step from the intro group to the content measured 98px on
   sections 2, 3 and 5 and 111px on section 4, against 14-32px on both hubs.
   That is the whole of the reported inconsistency "from the second section
   downward".

   THE FIX is to stop the 50px reaching any `.lb-ds` column, so the intro-to-
   content step is governed by the one token the design system already declares
   for it - `--hub-half` on `.lb-ds-head`, 48px desktop / 40px tablet / 32px
   mobile. No new spacing value is introduced here and no page-specific number
   is hard-coded; this block only removes an override.

   SPECIFICITY, deliberately low. (1,3,0) is enough to beat Enfold's
   `body .column-top-margin` (0,2,1), and it must stay BELOW the hero stacking
   rules in blocks 20 and 22, which re-introduce a top margin on purpose when
   the hero collapses to one column:
     @<=1120  #top .lb-ds.lb-dsr .flex_column.lb-ds-heropanel   (1,4,0) 40px
     @<=1120  #top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-heromedia (2,4,0) 40px
   Both outrank this rule and keep working. Do not raise this selector's
   specificity or the stacked hero loses its gap.
   ========================================================================== */

#top .lb-ds .flex_column.column-top-margin { margin-top: 0; }


/* ==========================================================================
   BLOCK 25 - V2 hero H1: let an over-long phrase break rather than clip
   2026-08-15. Added for page 19863 (Photonica Metalens Design), but the
   defect is family-wide and PRE-EXISTING: at 390 four V2 pages overflow their
   hero column - 19531 (+105px), 19534 (+104px), 19863 (+71px), 19533 (+37px).

   ROOT CAUSE, and it is not simply 'auto-phrase is too greedy'. Block 17.7
   sets word-break: auto-phrase on

     #top .lb-v2 .entry-content-wrapper h1                          (1,2,1)

   while the V2 heading rule ALREADY tried to hold the line with

     #top .lb-v2 .lb-h1 h1 { word-break: normal; overflow-wrap: normal }  (1,2,1)

   Those two are EQUAL at (1,2,1) - .lb-v2 + .entry-content-wrapper is two
   classes, exactly like .lb-v2 + .lb-h1 - so block 17.7 wins purely because it
   appears later in the file. That is the house rule 'an element selector at
   equal specificity beats a class rule on source order', biting a declaration
   written specifically to prevent this.

   Under auto-phrase a compound noun with no particle is ONE unbreakable unit:
   the phrase in 19863's H1 measures 433px at 33px against a 359px column.
   Counter-intuitively SHORTER copy can overflow where longer copy does not -
   19863's previous H1 ended in a particle and broke cleanly there.

   overflow-wrap: anywhere is deliberate and is NOT word-break: normal.
   auto-phrase keeps doing the nice thing wherever a phrase fits; anywhere only
   intervenes when a phrase genuinely cannot fit the line box. It also
   participates in min-content sizing, which is what stops the H1 box itself
   from growing wider than its column.

   Specificity is (1,3,1), deliberately ABOVE block 17.7's (1,2,1) so it does
   not depend on source order the way the rule it rescues did. Scope is the V2
   hero H1 only. The .lb-ds family is NOT covered - its H1s carry ALB size
   fields and none of the three built .lb-ds pages overflows at 390.
   ========================================================================== */

#top .lb-v2 .lb-h1 h1.av-special-heading-tag { overflow-wrap: anywhere; }


/* ==========================================================================
   BLOCK 26 - page 19863 only. Hero proportion and IO core width.
   2026-08-15, Red1. SCOPED TO ONE PAGE ON HIS RULING: the same two
   declarations family-wide would move published 19564 and 15929, and the IO
   width is entangled with open decision 14. Do not widen this scope without
   an A/B pass over all 17 V2 pages.

   1. HERO. The base grid is 42fr copy / 58fr media, so the illustration is
      the WIDER column and the H1 is squeezed. Red1 wants the H1 dominant:
      roughly 55-60 text / 40-45 media. Swapped to 58/42. Vertical centring
      already works here - the hero is a real CSS grid with align-items:
      center plus align-self: center on .lb-v2-frame. (The handoff note that
      'align-items is inert on an Enfold hero' is about the .lb-ds family,
      whose hero columns are floats. V2 is not.)

   2. IO CORE. The centre panel is a fixed 168px track (132px under 1200),
      which is what forces 'Photonica Metalens Design' to wrap hard. Widened
      to 200px / 168px for this page. This is NOT the decision-14 fix - that
      is about .lb-v2-core-s overflowing on 19861 and 19534 and still stands.

   BOTH OVERRIDES ARE INSIDE min-width: 990px, AND THAT IS LOAD-BEARING.
   The base single-column stack lives in max-width: 989px at (1,2,0); these
   rules are (1,3,0) and would otherwise outrank it and destroy the mobile
   stacking Red1 asked to preserve.
   ========================================================================== */

@media only screen and (min-width: 990px) {
  #top.page-id-19863 .lb-v2-hero .entry-content-wrapper {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }
  #top.page-id-19863 .lb-v2-flow .entry-content-wrapper {
    grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  }
  /* the media supports the message; it does not compete with the title */
  #top.page-id-19863 .lb-v2 .flex_column.lb-v2-frame .lb-v2-slot {
    min-height: 220px;
  }
}

@media only screen and (min-width: 990px) and (max-width: 1199px) {
  #top.page-id-19863 .lb-v2-flow .entry-content-wrapper {
    grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr);
  }
}

/* ==========================================================================
   27  SOLUTIONS HUB BUILT TO THE FROZEN v3.1 PROTOTYPE  (2026-08-16)
   --------------------------------------------------------------------------
   Source of truth: `Solutions Hub.dc.html` from "Enterprise Hub Design
   System.zip", md5 941fa44ac32ce00911aea77141551361, v3.1 FROZEN. Companion to
   block 20 (Lumerical hub) and block 21 (Products hub), which did the same job
   for their prototypes.

   SCOPE, and why nothing here can reach an approved page. Every selector below
   requires `lb-dsr` PLUS at least one class that is introduced BY THIS BLOCK
   and appears on page 19539 and nowhere else. The full set of new class names
   is the fifteen: lb-ds-doms, lb-ds-dom, lb-ds-domhead, lb-ds-domnum,
   lb-ds-domh, lb-ds-domdesc, lb-ds-slist, lb-ds-srow, lb-ds-srow-name,
   lb-ds-srow-sum, lb-ds-wcols-6, lb-ds-acount, lb-ds-cross-eq, lb-ds-h1wide,
   lb-ds-headflush. (Fourteen at first write; -soon and -tag were withdrawn the
   same day, see 27.2; -cross-eq, -h1wide and -headflush arrived at R1.) Each was asserted
   absent from lb-redesign.css
   and from the post_content of 19797 / 19848 / 19538 / 19861 / 19863 before
   this block was written, and then from all 6,099 non-trashed posts on the
   install after it. Inertness here is STRUCTURAL, not a specificity argument:
   with the class absent, no selector below can match. Confirmed by measuring
   19797 / 19848 / 19538 / 19861 / 19863 after the append (0 matching elements,
   H1 / H2 / section pads / .lb-ds-brow tracks all at their approved values).

   WHAT IS REUSED RATHER THAN REBUILT — the house rule is to look for an
   existing unused component first, and this page mostly finds one:
     .lb-ds-hero / -herocopy / -crumbs / -anchors / -eyebrow / -lead
     .lb-ds-head, .lb-ds-pointer2, .lb-ds-more, .lb-ds-arrow
     .lb-ds-wcols / -wcol / -wnum / -wtitle / -wkick   (the 6-step strip)
     .lb-ds-cross / -xcard / -xghost / -xh / -xdesc / -xlink
     .lb-ds-close
   Only TWO genuinely new components exist here: the domain split and the
   solution row. Both are absent from the vocabulary:
     - the domain block is a 4fr / 8fr editorial split whose right column is a
       LIST, not media. .lb-ds-band is 1fr / 1fr with a media slot and
       .lb-ds-rescols is two equal columns; neither is this component.
     - the solution row is a full-width bordered link row with a trailing
       arrow. Nothing in the family carries one.
   .lb-ds-wcols-6 is a MODIFIER on the existing 3-column strip, the same shape
   as block 21's .lb-ds-cards-3, so 19538's .lb-ds-wcols is untouched.
   ========================================================================== */

/* ---------------------------------------------------- 27.1 domain blocks */
#top .lb-ds.lb-dsr .lb-ds-doms { margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-dom {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--ds-s8);
  align-items: start;
}
/* The prototype separates the two domains by 96px. --hub-major is 80px and is
   otherwise unused since block 18 collapsed section padding to one value, so
   the step is expressed in a declared token rather than a new number. */
#top .lb-ds.lb-dsr .lb-ds-dom + .lb-ds-dom { margin-top: var(--hub-major); }
#top .lb-ds.lb-dsr .lb-ds-domhead { display: flex; flex-direction: column; gap: 14px; }
#top .lb-ds.lb-dsr .lb-ds-domhead .lb-ds-domnum {
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
}
/* .lb-ds-rule already exists but block 20 scopes it to .lb-ds-brow-role, so it
   has no effect here. Same class, same declarations, one more context. */
#top .lb-ds.lb-dsr .lb-ds-domhead .lb-ds-rule {
  display: block;
  width: 24px;
  height: 4px;
  background: var(--brand-orange);
}
/* (1,4,1), the same shape as .lb-ds-xh, so it clears the theme's h2 margins.
   Size and colour are deliberately NOT restated: the section H2 scale
   (36 / 30 / 25) and the light-surface ink already govern. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-domh { margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-domhead .lb-ds-domdesc {
  margin: 0;
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.9;
  max-width: 36em;
  color: var(--text-secondary-light);
}

/* ---------------------------------------------------- 27.2 solution rows
   R1: the row was a FLEX line, so the Japanese description started wherever the
   English title happened to end — "Photonic Integrated Circuits" pushed its
   description almost into the arrow while "LiDAR" left a gulf. It is now a
   FIXED THREE-TRACK GRID: title column, description column, arrow. The
   description no longer moves with title length, and the descriptions line up
   into a readable second column down the whole list. */
#top .lb-ds.lb-dsr .lb-ds-slist { display: flex; flex-direction: column; }
#top .lb-ds.lb-dsr .lb-ds-srow {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto;
  gap: var(--ds-s4);
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--border-light);
  text-decoration: none;
  transition: background-color var(--ds-dur-fast) var(--ds-ease),
              border-top-color var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-slist .lb-ds-srow:last-child { border-bottom: 1px solid var(--border-light); }
#top .lb-ds.lb-dsr .lb-ds-srow .lb-ds-srow-name {
  font-family: var(--ds-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary-light);
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
/* R1: 13px read as metadata beside an 18px title. This is decision-making copy —
   it is what tells someone whether the row is the one they want — so it takes a
   body size and the full secondary ink (6.77:1), not a muted tone. */
#top .lb-ds.lb-dsr .lb-ds-srow .lb-ds-srow-sum {
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-srow .lb-ds-arrow {
  color: #A8500F;
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}
/* R1: the arrow was the only affordance. The whole row is the link (it always
   was an <a>), so the hover has to say so: a tint across the full row box, the
   rule above it going orange, the title darkening to the same orange, and the
   arrow stepping right. The tint is set on the <a> itself rather than on a
   pseudo-element, so it cannot paint outside the grid cell and cannot trip the
   parent-overflow check. */
#top .lb-ds.lb-dsr a.lb-ds-srow:hover,
#top .lb-ds.lb-dsr a.lb-ds-srow:focus-visible {
  background-color: rgba(7, 44, 80, 0.04);
  border-top-color: var(--brand-orange);
  text-decoration: none;
}
#top .lb-ds.lb-dsr a.lb-ds-srow:hover .lb-ds-srow-name,
#top .lb-ds.lb-dsr a.lb-ds-srow:focus-visible .lb-ds-srow-name { color: #A8500F; }
#top .lb-ds.lb-dsr a.lb-ds-srow:hover .lb-ds-arrow,
#top .lb-ds.lb-dsr a.lb-ds-srow:focus-visible .lb-ds-arrow { transform: translateX(3px); }
/* WITHDRAWN 2026-08-16, same day, at Red1's review. The first build split the
   twelve solutions into six scheduled links and six unlinked rows carrying a
   準備中 chip, which needed `.lb-ds-srow-soon` and `.lb-ds-srow-tag`. Red1 ruled
   that all twelve are scheduled, so every row is a link and both classes are
   dead. They are DELETED rather than left declared: a rule used by no built page
   is exactly what decision 10 is a list of, and this block is one day old.
   `gen_solhub.py` now names both in its ORPHANS assertion, so re-emitting either
   one fails the build instead of shipping an undefined class. The removed rules
   are preserved verbatim in `lb-redesign.css.bak-pre-b27soon-20260816` and are
   quoted in `claude/solutions-hub-19539-build.md`, if a later page ever needs a
   deferred row. */

/* --------------------------------------------- 27.3 six-step example strip */
#top .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* The prototype's step title is 15px. .lb-ds-wtitle is 20px because it was
   sized for a 3-column strip; six columns need the prototype value. */
/* MEASURED at 601: block 19's responsive `#top #wrap_all .lb-ds .entry-content-wrapper h3
   { font-size: 20px }` is (2,3,1) and beat the (1,5,0) rule this replaces, so the
   six-step titles rendered 20px below 767 instead of the prototype's 15px. Restated
   at (2,5,0) so it governs at every width. Same trap as 21.9: a media-query rule
   must be answered at equal-or-higher specificity, not by adding one more class. */
#top #wrap_all .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-wcols-6 .lb-ds-wtitle { font-size: 15px; line-height: 1.6; }
/* .lb-ds-wkick is a LIGHT-surface token (#A8500F). On #072C50 it would be about
   2.6:1 and unreadable, so the navy variant below exists for this page's strip.
   Scoped to the 6-step modifier ON PURPOSE. MEASURED on approved page 19538 at
   1440 and 390: all three of its .lb-ds-wkick elements sit on LIGHT sections at
   5.12:1, where #A8500F is the correct token. Keeping this rule page-local means
   a future navy .lb-ds-wkick elsewhere is a decision, not an inherited surprise. */
/* R1: 12px muted read as a caption. The tool labels are the point of the strip —
   they are what says which product does which step — so 13px at the secondary
   token, 7.4:1 on #072C50 rather than 5.28:1. */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-wcols-6 .lb-ds-wkick {
  font-size: 13px;
  color: var(--text-secondary-dark);
  letter-spacing: 0.02em;
}

/* R1: the six columns read as six separate things rather than one process. An
   arrow sits in each gap, centred on the rail, so the eye is carried left to
   right. It is a ::before on the SECOND and later columns, so no arrow can
   appear before step 01 or trail after step 06. */
#top .lb-ds.lb-dsr .lb-ds-wcols-6 .lb-ds-wcol { position: relative; }
#top .lb-ds.lb-dsr .lb-ds-wcols-6 .lb-ds-wcol + .lb-ds-wcol::before {
  content: "\2192";
  position: absolute;
  top: -7px;
  left: -17px;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--brand-orange);
}

/* ------------------------------------------------- 27.4 hero anchor count */
#top .lb-ds.lb-dsr .lb-ds-anchors .lb-ds-acount { color: var(--text-muted-dark); }

/* ------------------------------------------------- 27.7 hero H1 on one line
   R1b: 「設計対象から、最適な解析・設計ワークフローへ」 was breaking to two lines with
   room to spare. MEASURED at 1440: the text needs 950px on one line, the hero
   column is 1196px wide — but block 19's `#top .lb-ds .entry-content-wrapper h1`
   clamps it to `max-width: 34ch`, which computes to 866.6px at 43.2px. The
   break was the clamp, not the container.

   34ch is a READING MEASURE and stays right for the other three hubs, whose H1s
   are shorter — so this lifts it for THIS hero only, via a class on Enfold's
   .av-special-heading wrapper. (1,3,1) against the block-19 rule's (1,2,1).

   It does NOT force one line. Below 1120 the container genuinely is narrower
   than the text and it wraps, as it must: one line holds at 1440 and 1120, and
   at 989 the text needs 792px against a 790px column, so it takes two. */
#top .lb-ds.lb-dsr .lb-ds-h1wide h1 { max-width: none; }

/* ------------------------------- 27.8 the navy section's trailing space
   R1b: the flow section looked deeper at the bottom than its neighbours.
   MEASURED at 1440: the content column's bottom sits 112px above the section
   edge on the navy section and 64px on all four others — because it is the only
   column carrying `.lb-ds-head`, whose `margin-bottom: var(--hub-half)` (48px /
   40px) is trailing space here rather than the head-to-content step it provides
   on 19797, where the head is its OWN column. This is open decision 4 on 19848
   showing up on a second page.

   min-width: 768px is load-bearing. At and below 767 Enfold's
   `.flex_column { margin: 0 0 20px }` at (1,3,0) already beats `.lb-ds-head`'s
   (1,2,0) — decision 3 — so every column on the page is uniformly 20px there.
   An unscoped reset would out-specify Enfold at (1,4,0) and make this one
   section 20px TIGHTER than its neighbours, trading one asymmetry for another. */
@media only screen and (min-width: 768px) {
  #top .lb-ds.lb-dsr .lb-ds-head.lb-ds-headflush { margin-bottom: 0; }
}

/* ------------------------------------------- 27.6 the two routes are PEERS
   R1: 解析技術 and 製品 are peer routes out of this page, but the prototype's
   7fr/5fr split with a ghost right-hand card made 解析技術 look like the answer
   and 製品 like an afterthought. Equal tracks here; the generator additionally
   stops emitting .lb-ds-xghost on this page, which restores the white ground
   and the 24px heading on the second card. Both changes are page-local:
   .lb-ds-cross-eq exists nowhere else, and 19797 / 19848 keep their 7fr/5fr
   ghost pair untouched. */
#top .lb-ds.lb-dsr .lb-ds-cross.lb-ds-cross-eq {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* -------------------------------------------------------- 27.5 responsive
   #wrap_all is load-bearing on every rule below, exactly as in block 21: the
   base rules above are (1,3,0) and a same-specificity media rule would lose on
   source order. These are (2,3,0). The 600 block is written AFTER the 1120
   block so that at 390, where both match, the narrower rule wins. */
@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-dom {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s6);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-dom + .lb-ds-dom { margin-top: var(--hub-sec); }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* three across: the first column of each row starts a new line, so its arrow
     would point at the left margin. Suppress it there and nowhere else. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols-6 .lb-ds-wcol:nth-child(3n+1)::before { content: none; }
  /* MEASURED at 390: two 1fr cards stayed side by side. The family's collapse
     rule is `#top .lb-ds.lb-dsr .lb-ds-cross` at (1,3,0) and .lb-ds-cross-eq is
     (1,4,0), so the modifier was silently holding two columns open all the way
     down. Restated at (2,4,0) - a modifier has to answer the media query it
     out-specifies. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cross.lb-ds-cross-eq { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 767px) {
  /* The row stacks: title and arrow on line 1, description across line 2. These
     restate the placement at (2,4,0) against the (1,4,0) rules above rather than
     relying on a `> *` reset, which is the block-21.9 trap. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ds-s2) var(--ds-s3);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow .lb-ds-srow-name { grid-column: 1; grid-row: 1; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow .lb-ds-arrow     { grid-column: 2; grid-row: 1; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow .lb-ds-srow-sum  { grid-column: 1 / -1; grid-row: 2; }
}
@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-6 { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the progression turns downward and sits at the start of the rule.
     `+ .lb-ds-wcol` is load-bearing on BOTH rules — it excludes step 01, which
     must never carry an arrow. The second rule exists only to undo the 1120
     block's `content: none`, and has to out-specify it: that rule is (2,5,0),
     this one is (2,6,0). Dropping the sibling combinator here would put a
     stray unpositioned arrow inside step 01. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols-6 .lb-ds-wcol + .lb-ds-wcol::before {
    content: "\2193";
    top: -9px;
    left: 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols-6 .lb-ds-wcol + .lb-ds-wcol:nth-child(3n+1)::before {
    content: "\2193";
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow { padding: 16px 0; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow .lb-ds-srow-name { font-size: 17px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srow .lb-ds-srow-sum { font-size: 14px; }
}

/* ============================================================================
   BLOCK 28 - Solution page family (chunk S1), 2026-08-16. Revision R3.

   FOUR classes: `.lb-ds-so-split`, `.lb-ds-so-steps`, `.lb-ds-so-note` and
   `.lb-ds-so-map`. None appears on any other post on the install, so this
   block is structurally inert everywhere except the eleven
   /solutions/<slug>/ pages - the same argument block 27 rests on, not a
   specificity argument.

   R2 replaced 28.2. R1 aligned the two sides of the challenge split by giving
   the left head the same hairline and inset the requirement rows already had.
   Red1 rejected that: the rule above the label read as clutter and the list
   still sat at the top edge of the section rather than at the headline. R2
   drops the rule and moves the LIST down to the headline instead.

   R3 does three things and changes nothing else.

   1. Alignment ACROSS the requirement rows. Each `.lb-ds-srow` is its own
      grid, so the `max-content` track R2 introduced was measured per row, not
      per list, and the descriptions started at a different x on every row -
      up to 108px apart on InP and on Optical Sensors. 28.9 moves the track
      definition up to the list and 28.4 subgrids the rows into it, so the
      track is now the longest label on THAT page and every description on the
      page starts at the same x. Where subgrid is unavailable the declaration
      is dropped and the R2 per-row `max-content` remains, which is why 28.4
      states both values in that order.

   2. The step number reads as a label, not a badge (28.10), and the step body
      returns to the family card size (28.11).

   3. The mapping list gets the same head-to-content step the card grid got in
      28.6, and three deliberate columns instead of two columns and a
      right-flushed arrow (28.12, 28.13).
   ============================================================================ */

/* 28.1 - the challenge split.
   The template asks for 5fr/7fr. The family default `.lb-ds-dom` is 4fr/8fr,
   which was written for a long solution-row list and leaves the solution
   pages long left-column headline breaking over too many lines.
   Specificity (1,3,0): equal to the base rule, so source order carries it,
   and LOWER than the (2,3,0) collapse rule at 1120, which therefore still
   wins below that width. Do not raise it. */
#top .lb-ds.lb-dsr .lb-ds-so-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* 28.2 - anchor the requirement list at the HEADLINE, not at the section top.
   The left head is eyebrow, then heading, then paragraph, in a 14px flex
   column. The eyebrow is 15px at line-height 1.5, so its line box is 22.5px
   and the heading line box therefore opens at 22.5 + 14 = 36.5px. Pushing the
   list down by the same 36px puts its first hairline level with the top of the
   headline text, which is the relationship Red1 asked for. The number is read
   off the two rules above it, not guessed.
   Scoped to the two-column case: below 1121 the grid is one column, the head
   and the list are stacked, and an inset there would only be dead space. */
@media only screen and (min-width: 1121px) {
  #top .lb-ds.lb-dsr .lb-ds-so-split .lb-ds-slist {
    padding-top: 36px;
  }
}

/* 28.3 - the eyebrow inside that head takes the flex gap, not its own margin.
   `.lb-ds-eyebrow` carries `margin: 0 0 var(--ds-s5)` family-wide, which on
   top of the 14px gap opened a 38px step between the label and the heading.
   `.lb-ds-rescol` and `.lb-ds-xcard` already zero it the same way.
   (1,5,0) against the (1,2,0) family rule. */
#top .lb-ds.lb-dsr .lb-ds-so-split .lb-ds-domhead .lb-ds-eyebrow {
  margin-bottom: 0;
}

/* 28.4 - the requirement label track hugs its label, and now hugs it to the
   same x on every row of the page.
   `.lb-ds-srow` is a 300px name track built for the Solutions Hub, where the
   name is a product-length string. A requirement label is 110px to 308px, so
   the row opened a gutter of up to 190px between the label and its text and
   stopped reading as one unit. R2 replaced the track with `max-content`, which
   closed the gutter but measured each row separately.
   The rows now subgrid into the list track defined in 28.9, so the label
   column is the longest label on the page and the descriptions line up.
   `grid-column` is a separate declaration in the same rule on purpose: if the
   `subgrid` value is dropped the row keeps the R2 fallback stated above it and
   still spans both of the list tracks, so the no-subgrid rendering is exactly
   the R2 rendering. `column-gap` restates the base 16px so the gutter is the
   same number whether the implementation takes gutters from the subgrid or
   from its parent.
   (1,5,0). It does NOT out-specify the (2,3,0) stacking rule below 767, which
   still collapses these rows, so trap 6a does not apply. */
/* R4, 2026-09-08 - the fallback carries the same ceiling as the list above,
   so a browser without `subgrid` gets the clamped label track too. */
#top .lb-ds.lb-dsr .lb-ds-so-split .lb-ds-slist .lb-ds-srow {
  grid-template-columns: fit-content(300px) minmax(0, 1fr);
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: var(--ds-s4);
}

/* 28.5 - a step card is not a link, so it must not lift on hover.
   `.lb-ds-cards-sm` already disables the same two properties for the same
   reason. (1,5,0) against `#top .lb-ds .lb-ds-card:hover` at (1,3,0). */
#top .lb-ds.lb-dsr .lb-ds-so-steps .lb-ds-card:hover {
  border-color: var(--border-navy);
  transform: none;
}

/* 28.6 - the step of air between the section heading and the card grid.
   `.lb-ds-cards` carries `margin: 0`, and an ALB heading is emitted with
   margin 0 as well, so the grid sat against the heading. `--hub-half` is the
   value `.lb-ds-head` itself uses for head-to-content, which is why it is the
   right number here: 48 / 40 / 32. (1,3,0) against (1,2,0). */
#top .lb-ds.lb-dsr .lb-ds-so-steps {
  margin-top: var(--hub-half);
}

/* 28.7 - compact step cards.
   The family card is 32px of padding, which is right for a card that carries a
   title, a description, a family line and a link. A step card carries three
   short things. 24px is the same padding the family already drops to below
   1120, so this makes the density uniform rather than inventing a value.
   (1,4,0) against (1,2,0); the (2,3,0) mobile rule still wins and sets the
   same 24px. */
#top .lb-ds.lb-dsr .lb-ds-so-steps .lb-ds-card {
  padding: var(--ds-s5);
}

/* 28.8 - the workflow note closes the section on the section rhythm.
   The note is the last element in its column and had no margin rule of its
   own, so it kept the theme paragraph margin and pushed the navy section past
   the 64px every other section closes on. Zeroing the bottom margin makes the
   trailing space exactly `--hub-sec`, and 32px above separates the note from
   the cards as a footnote rather than a fourth row. */
#top .lb-ds.lb-dsr .lb-ds-so-note {
  margin: var(--ds-s6) 0 0;
}

/* 28.9 - R3. The requirement list owns the two tracks its rows share.
   `.lb-ds-slist` is a flex column family-wide, which is why the rows could
   never agree on a label width. Making it a grid gives 28.4 something to
   subgrid into. The track values are the same pair 28.4 falls back to, so a
   browser without subgrid sees no change at all. The gutter is stated here as
   well as on the row because in a subgridded axis some implementations take
   the gutters from the parent; both values are the family 16px, so the answer
   is 16px either way.
   Scoped to `.lb-ds-so-split` so the Solutions Hub lists, which want the flex
   column and the 300px name track, are untouched. (1,4,0) against the (1,3,0)
   base rule. Row gap is left at its initial 0, matching the flex column. */
/* R4, 2026-09-08 - the label track takes a CEILING.
   `max-content` alone let one long EN label take the whole list. MEASURED on
   /en/solutions/illumination/ at 1440: the 65-character label sized this
   track to 579.8px of a 660.3px list and left the description 64.5px, which
   wrapped it to 9 lines; at 1024 the description was 225.8px / 3 lines, and
   at 768 the description track measured 0px. Every EN page demands 322px to
   580px here, so this was a family defect, not one page's copy.
   fit-content with a 300px limit keeps the R2/R3 hug BELOW the ceiling and
   clamps above it, so the track is still the longest label on the page
   whenever that label fits. 300px is not a new number: it is the family's own
   base `.lb-ds-srow` name track, reused as a maximum instead of a fixed
   width. It cannot bind on Japanese - the widest JA label in the family is
   19873 at 296.1px MEASURED in the live font - so every JA page renders
   unchanged. Specificity, track count and gutter are untouched, so the
   (2,3,0) rule that restacks these rows at 767 still wins, and mobile still
   stacks name over description. */
#top .lb-ds.lb-dsr .lb-ds-so-split .lb-ds-slist {
  display: grid;
  grid-template-columns: fit-content(300px) minmax(0, 1fr);
  column-gap: var(--ds-s4);
}

/* 28.10 - R3. The step number is a label, not a badge.
   `.lb-ds-pill` is the family chip: 11px mono at 0.1em, in a 12 percent orange
   fill with 4px/12px of padding. On a card whose whole job is a numbered
   sequence that fill competes with the card title. Dropping the fill and the
   padding leaves the same 11px mono numeral in the same
   `--accent-light-orange` the family already uses on navy, so the ordinal is
   still legible and still keyed to the accent, but it now sits behind the
   title in the reading order instead of in front of it. No colour is
   introduced and no contrast is lost: the text colour is unchanged.
   (1,4,0), scoped to the step grid, so every other pill on the install keeps
   its chip. */
#top .lb-ds.lb-dsr .lb-ds-so-steps .lb-ds-pill {
  padding: 0;
  background: none;
}

/* 28.11 - R3. The step body returns to the family card size.
   `.lb-ds-cards-3` drops `.lb-ds-card-desc` to 14px because a three-up product
   card also carries a family line and a link and needs the room. A step card
   carries a title and one sentence, so it can afford the 15px the family uses
   on every other card, and the 1.9 line-height is kept from the cards-3 rule
   rather than reverting to 1.85. That is one step of size, no new token.
   The compound `.lb-ds-cards-3.lb-ds-so-steps` is (1,5,0) against the (1,4,0)
   cards-3 rule, and no media query overrides cards-3 card-desc, so trap 6a
   does not apply. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-3.lb-ds-so-steps .lb-ds-card-desc {
  font-size: 15px;
  line-height: 1.9;
}

/* 28.12 - R3. The mapping list: same head-to-content step as the card grid,
   and three deliberate columns.
   Head-to-content: the mapping list had no margin of its own, so it sat
   against its H2 exactly as the card grid did before 28.6. `--hub-half` is the
   same value 28.6 uses, so the two H2 sections on a solution page now open on
   the same step: 48 / 40 / 32.
   Columns: the base row is `300px | 1fr | auto`, written for the Solutions Hub
   where the middle cell is a full sentence. Here the middle cell is a solver
   name of 162px to 332px, so the 1fr swallowed the slack and flushed the
   product link to the far right edge - at a 1480px container that put 370px to
   440px of nothing between the analysis method and the product it maps to, and
   the three values stopped reading as one row. Sizing the first two tracks to
   their content and giving the third the remaining space moves that slack to
   the right of the row instead of into the middle of it: the gutter between
   the method and the product link is now 48px on every row of every page, and
   because the tracks belong to the list rather than to the row, every product
   link on the page starts at the same x. 48px is `--ds-s7`, the family gutter,
   which is wide enough to scan as three columns and far short of cramped.
   (1,4,0) against the (1,3,0) base list rule. */
#top .lb-ds.lb-dsr .lb-ds-so-map {
  margin-top: var(--hub-half);
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr);
  column-gap: var(--ds-s7);
}

/* 28.13 - R3. The mapping row subgrids into those tracks.
   Same construction as 28.4: the fallback value is stated first, so a browser
   that drops `subgrid` keeps the base three-column row it renders today, and
   `grid-column` is unaffected either way so the row always spans the full
   list. `minmax(0, ...)` on the list tracks lets both content columns shrink
   and wrap between 768 and 1120, where the container is 691px to 1008px and
   the widest page needs 956px, so nothing overflows.
   (1,4,0), below the (2,3,0) rule that restacks these rows at 767 - which
   must keep winning, and does. */
#top .lb-ds.lb-dsr .lb-ds-so-map .lb-ds-srow {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: var(--ds-s7);
}

/* ============================================================================
   BLOCK 29 - Solutions Hub domain block, aligned to the Solution page family.
   2026-08-17. Red1: apply the same right-side-block treatment to the other
   solutions page.

   The eleven /solutions/<slug>/ pages all carry `.lb-ds-so-split` and all share
   one 28.1/28.2/28.9 treatment, so they already match each other exactly. The
   page that does not match them is the Solutions Hub itself, 19539: its two
   domain blocks use the bare `.lb-ds-dom`, so they still sit at the family
   default 4fr/8fr with the right-hand list anchored at the very top edge of the
   block - the arrangement Red1 rejected on the solution pages in R2.

   Block 29 gives those two blocks the same proportions and the same headline
   anchoring. It deliberately does NOT touch anything else on the hub: the
   `01` / `02` domain numbers, the orange hairline under them, the 300px name
   track and the right-flushed arrow belong to the approved hub design from
   block 27 R1b and were not part of the request.

   Scoped with `:not(.lb-ds-so-split)` so the eleven solution pages keep block
   28 and are not touched twice. This block therefore reaches exactly two
   elements on the install, both on 19539.
   ============================================================================ */

/* 29.1 - pin the domain number line box.
   `.lb-ds-domnum` declares a font and `--hub-num` but no line-height, so its
   line box is whatever it inherits, and 29.3 cannot be derived from declared
   values while that is true. 1.5 is the same line-height `.lb-ds-eyebrow`
   carries, which is the label this same slot uses on the solution pages, so
   the two heads now measure their first line the same way.
   (1,4,0), equal to the base domnum rule and later in source. */
#top .lb-ds.lb-dsr .lb-ds-domhead .lb-ds-domnum {
  line-height: 1.5;
}

/* 29.2 - the hub domain block takes the solution-page proportions.
   4fr/8fr was written for a domain block whose right side is a long list of
   product-length rows. The left head is a number, a rule, a heading and a
   paragraph, and at 4fr that heading breaks earlier than the same heading does
   on a solution page. 5fr/7fr is the value 28.1 already uses, so this is the
   family value rather than a new one.
   Arithmetic check that the right side still fits: at a 1480px container the
   right column goes from 944px to 826px. The widest hub row is a 300px name
   track, a 16px gutter, a 24px arrow and a 405px summary, which needs 745px
   and therefore still sets on one line. Below about 1200px the hub summaries
   already wrapped at 8fr, so no row gains a wrap it did not have.
   (1,4,0) against the (1,3,0) base rule, and BELOW the (2,3,0) rule that
   collapses this grid to one column at 1120, which therefore still wins. */
#top .lb-ds.lb-dsr .lb-ds-dom:not(.lb-ds-so-split) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* 29.3 - anchor the hub list at the HEADLINE, the same way 28.2 does.
   The head is a 14px flex column: number, then rule, then heading. With 29.1
   pinning the number to `--hub-num` * 1.5 and the rule declared at a flat 4px,
   the heading line box opens at `--hub-num` * 1.5 + 14 + 4 + 14, which is
   `--hub-num` * 1.5 + 32 - 59px at the 18px desktop value. Every term in that
   sum is a declared value, none of it is estimated.
   Scoped to the two-column case exactly as 28.2 is: at 1120 and below the
   block is one column and an inset there would only be dead space.
   `> .lb-ds-slist` so a nested list, if one is ever added, is not indented
   twice. (1,5,0), and nothing else sets padding on `.lb-ds-slist`. */
@media only screen and (min-width: 1121px) {
  #top .lb-ds.lb-dsr .lb-ds-dom:not(.lb-ds-so-split) > .lb-ds-slist {
    padding-top: calc(var(--hub-num) * 1.5 + 32px);
  }
}

/* ============================================================================
   BLOCK 30 -- 解析技術 method pages (/technology/<slug>/), chunk T1-T3.
   Appended 2026-08-17. Eleven pages: fdtd charge heat dgtd feem mqw
   sequential-ray-tracing non-sequential-ray-tracing tolerancing stray-light pop.

   THREE components. Everything else these pages emit was already defined.
   Checked for an existing component before writing each one:
     - the 4-across application row reuses .lb-ds-cards-sm (already 4/2/1)
     - the comparison table reuses .lb-ds-tscroll + .lb-ds-table (navy AND light skins)
     - the input/output panels reuse .lb-ds-cross-eq + .lb-ds-xcard.lb-ds-xghost
     - the FAQ reuses .lb-ds-slist / .lb-ds-srow
     - the review footer reuses .lb-ds-trust + .lb-ds-spec
     - the "what it is" split reuses .lb-ds-dom, which block 29 already took to 5fr/7fr

   30.1  .lb-ds-wcols-4 -- the 4-step workflow strip. Exactly the shape of block
         27's .lb-ds-wcols-6. The family collapses .lb-ds-wcols to ONE column at
         1120 with a (2,3,0) rule, which out-specifies a bare (1,4,0) modifier
         (trap 6a), so the 1120 case is restated at (2,4,0). 4 steps would
         otherwise render 3+1 at desktop and 1-up from 1120.
   30.2  .lb-ds-amspecs -- the hero meta row (対象/領域/対応製品). .lb-ds-fspecs is
         a vertical stack, which pushed the hero ~120px taller for three short
         mono pairs. This is the prototype's own horizontal rule-topped row.
   30.3  .lb-ds-spec-k / -v inside a hero. LOAD-BEARING, not cosmetic: the base
         rules paint them --text-secondary-light / --text-primary-light, which
         are the LIGHT-surface colours. On the navy hero gradient that is dark
         text on dark ground. Without 30.3 the 対応製品 line is unreadable.
   ========================================================================= */

/* 30.1 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 30.2 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-fspecs.lb-ds-amspecs {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-s5) var(--ds-s7);
  margin-top: var(--ds-s5);
  padding-top: var(--ds-s4);
  border-top: 1px solid var(--border-navy);
}

/* 30.3 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-spec-k {
  color: var(--text-muted-dark);
}
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-spec-v {
  color: var(--text-primary-dark);
}

@media only screen and (max-width: 1120px) {
  /* (2,4,0) -- must out-specify the family's (2,3,0) single-column collapse. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-fspecs.lb-ds-amspecs {
    gap: var(--ds-s4) var(--ds-s5);
  }
}

/* ============================================================================
   BLOCK 31 -- 解析技術 method pages, R1 refinement (2026-08-18).
   Seven components. Nothing here is page-specific: every selector is driven by
   a class the shared Analysis Technology template emits on all eleven pages.
   No existing declaration is edited; block 31 only adds.

   31.1  .lb-ds-headgap  -- the H2-to-content step (R1 item 4).
         WHY IT IS ZERO TODAY. On these pages the eyebrow, the H2 and the
         content share ONE Enfold column, so the column carries
         .lb-ds-headflush, which zeroes .lb-ds-head's own margin-bottom
         (48/40/32) at >=768 -- that margin is the step between a head column
         and a SEPARATE content column, and here it would only be trailing
         space. With it gone, the distance under the H2 is whatever the first
         content element declares for itself: 24px where that element is a
         .lb-ds-prose paragraph, 0 where it is a .lb-ds-cards / .lb-ds-cross /
         .lb-ds-slist / table wrapper. That is the reported inconsistency.
         THE FIX is on the element that FOLLOWS the heading, at template level:
         32px desktop, 24px mobile, both existing tokens (--ds-s6 / --ds-s5).
         Deliberately NOT done by padding the H2 (that moves the H2 itself and
         changes the eyebrow-to-H2 distance) and NOT by any per-page margin.
         The `+ br` rule is a hedge, not a repair: Enfold strips the autop <br>
         between two builder elements on the front end, but the same content
         run through the_content outside the builder context keeps it, and one
         stray line box would double the step. Scoped to the br AFTER the
         heading only, so the established spacing ABOVE the H2 cannot move.
         The :first-child reset makes the step exactly 32px instead of
         max(32px, whatever the first child declares) under margin collapsing.
   31.2  .lb-ds-heroimg / -heroimg-i -- the hero figure frame. Same 1px navy
         border and --ds-radius-media as .lb-ds-panel / .lb-ds-slot, so the
         diagram sits in the frame the hero column already implies.
   31.3  .lb-ds-prodcard / -prodcopy / -prodgo -- the supported-product card
         (R1 item 7). A capped-width 7fr/5fr card on the navy surface. The
         product and its link sit against the copy across a hairline, NOT
         flushed to the page edge, which is what the full-bleed row did.
   31.4  .lb-ds-am-res / -am-resmain / -am-meta / -reflist / -refitem -- the
         related-information + 参考情報 pair (R1 item 9). 68/32, align-items
         start so the right card stays compact and top-aligned rather than
         stretching to the height of the link list. 技術監修 is a field of this
         card, rendered by the template as its own .lb-ds-spec; it is never a
         member of 参照した資料.
   31.5  .lb-ds-rel / -rel-self -- the relationship chip in the comparison
         table (R1 items 3 and 8). A quiet outlined mono chip: the reading
         order stays 手法 -> 関係 -> 使い分け and the table does not turn
         orange. Only the 本手法 row is accented, because it is the anchor.
   31.6  .lb-ds-cmp at <=600 -- the comparison table restacks into cards using
         the data-l labels the template already writes on every cell. The
         family's generic .lb-ds-tscroll keeps a 620px min-width and scrolls
         horizontally; four columns of Japanese at 390px is not readable that
         way. 601-767 keeps the scroll, which is fine at that width.
   31.7  .lb-ds-restext base. The only existing rule for it is scoped to
         .lb-ds-rescol; this template uses it in three places outside that
         wrapper. Same values as the scoped rule, so no approved page moves
         (checked: the only non-draft post containing the string is 19742,
         where it appears in prose documentation, not markup).
   ========================================================================= */

/* 31.1 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-headgap > .av-special-heading + br {
  display: none;
}
#top .lb-ds.lb-dsr .lb-ds-headgap > .av_textblock_section:nth-of-type(2) {
  margin-top: var(--ds-s6);
}
#top .lb-ds.lb-dsr .lb-ds-headgap > .av_textblock_section:nth-of-type(2) > .avia_textblock > :first-child {
  margin-top: 0;
}

/* 31.2 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-heroimg {
  margin: 0;
  border: 1px solid var(--border-navy);
  border-radius: var(--ds-radius-media);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
#top .lb-ds.lb-dsr .lb-ds-heroimg .lb-ds-heroimg-i {
  display: block;
  width: 100%;
  height: auto;
}

/* 31.3 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-prodcard {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ds-s6);
  align-items: center;
  max-width: 58em;
  margin: 0;
  padding: var(--ds-s6);
  border: 1px solid var(--border-navy);
  border-radius: var(--ds-radius-card);
  background: rgba(255, 255, 255, 0.05);
}
#top .lb-ds.lb-dsr .lb-ds-prodcopy {
  min-width: 0;
}
#top .lb-ds.lb-dsr .lb-ds-prodgo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s3);
  min-width: 0;
  padding-left: var(--ds-s6);
  border-left: 1px solid var(--border-navy);
}
#top .lb-ds.lb-dsr .lb-ds-prodgo .lb-ds-xh {
  font-size: 20px;
  line-height: 1.5;
}

/* 31.4 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-am-res {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
  gap: var(--ds-s7);
  align-items: start;
  margin: 0;
  padding-top: var(--hub-half);
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-am-resmain,
#top .lb-ds.lb-dsr .lb-ds-am-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
#top .lb-ds.lb-dsr .lb-ds-am-resmain {
  gap: var(--ds-s3);
}
#top .lb-ds.lb-dsr .lb-ds-am-meta {
  gap: var(--ds-s4);
  padding: var(--ds-s5);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-card);
  background: var(--surface-white);
}
#top .lb-ds.lb-dsr .lb-ds-am-resmain .lb-ds-eyebrow,
#top .lb-ds.lb-dsr .lb-ds-am-meta .lb-ds-eyebrow {
  margin: 0;
}
#top .lb-ds.lb-dsr .lb-ds-am-meta .lb-ds-spec-v {
  font-size: 13px;
}
#top .lb-ds.lb-dsr .lb-ds-reflist {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2);
  margin: 0;
}
#top .lb-ds.lb-dsr .lb-ds-refitem {
  font-family: var(--ds-font-body);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary-light);
}

/* 31.5 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-table .lb-ds-rel {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-secondary-light);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-ctl);
}
#top .lb-ds.lb-dsr .lb-ds-table .lb-ds-rel-self {
  color: #A8500F;
  border-color: var(--brand-orange);
}
#top .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table tbody th {
  font-weight: 600;
}
#top .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table tbody th a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#top .lb-ds.lb-dsr .lb-ds-cmp + .lb-ds-restext {
  margin-top: var(--ds-s5);
}

/* 31.7 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-restext {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-headgap > .av_textblock_section:nth-of-type(2) {
    margin-top: var(--ds-s5);
  }
  /* the product card stacks: the hairline moves from the side to the top */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-prodcard {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s5);
    padding: var(--ds-s5);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-prodgo {
    padding-left: 0;
    padding-top: var(--ds-s5);
    border-left: 0;
    border-top: 1px solid var(--border-navy);
  }
  /* the 参考情報 card sits under the links, still compact, never stretched */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-am-res {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s5);
  }
}

/* 31.6 ------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp {
    overflow-x: visible;
    margin-right: 0;
    padding-right: 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table {
    min-width: 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table thead {
    display: none;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table tr {
    display: block;
    padding: var(--ds-s4) 0;
    border-bottom: 1px solid var(--border-light);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table th,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table td {
    margin-top: var(--ds-s3);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table td::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    font-family: var(--ds-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-secondary-light);
  }
}

/* ============================================================================
   BLOCK 32 -- wpautop empty-paragraph repair inside design-system flex
   components (2026-08-19, found by the R1 responsive QA pass).

   WHAT IS WRONG. Two design-system components put an inline element first and
   a block element second inside one wrapper:

     <div class="lb-ds-spec"><span class="lb-ds-spec-k">K</span>
                             <p class="lb-ds-spec-v">V</p></div>
     <div class="lb-ds-wcol"><span class="lb-ds-wnum">01</span>
                             <h3 class="lb-ds-wtitle">T</h3> ...</div>

   wpautop (Enfold runs it on textblock content) closes the paragraph it opened
   for the leading <span> when it reaches the following block tag, and leaves an
   EMPTY <p></p> behind:

     <span class="lb-ds-spec-k">K</span><p></p>
     <p class="lb-ds-spec-v">V</p>

   Both wrappers are `display:flex; flex-direction:column`, so that empty <p> is
   a real flex item: it is not margin-collapsed away, and it contributes
   gap + margin-top + margin-bottom + gap on top of the intended gap.
   Measured on page 19883 (headless Chromium, real filtered stylesheet):

     .lb-ds-spec  key -> value   48px  (design system declares gap: 8px)
     .lb-ds-wcol  番号 -> 見出し  52px  (design system declares gap: 10px)

   Identical at 390px and at 1440px, i.e. it is not a responsive fault.

   THE FIX. Remove the empty paragraph from flow. Done in CSS, not by rewriting
   the eleven pages, because the markup itself is correct HTML -- the empty <p>
   is generated at render time and would come back on any re-save.
   Scoped to the two wrappers that actually hold the pattern, so no other empty
   paragraph anywhere in the family changes behaviour. `p:empty` matches only a
   paragraph with no child nodes at all, which is exactly what wpautop leaves.

   AFTER: 8px and 10px, i.e. the values the design system already declares.
   Verified: the nine .lb-ds-headgap H2 steps stay 24px mobile / 32px desktop.
   Scope check: `lb-ds-spec` / `lb-ds-wcol` occur in 14 posts, all of them
   drafts (19523-19527, 19533-19539, 19848, 19883). No published page moves.
   ========================================================================= */

#top .lb-ds.lb-dsr .lb-ds-spec > p:empty,
#top .lb-ds.lb-dsr .lb-ds-wcol > p:empty {
  display: none;
}

/* ============================================================================
   BLOCK 33 -- .lb-ds-qtable, the question table (2026-08-19, T5 解析技術 hub).
   ONE component. Additive: nothing already in the file is edited.

   WHY IT EXISTS. The family's table row header carries
   `white-space: nowrap` (block 20), which is right for the label-style row
   headers it was written for: 構造 / ドーピング / 材料モデル / 励起. The 解析技術 hub
   needs the same table with a PHRASE in the row header --
   「素子単体の広帯域な電磁界応答」 -> FDTD -- and a phrase that cannot wrap forces
   the table wider than its card: measured 362px inside a 256px card at a 390px
   viewport, i.e. a 429px document on a 390px screen.

   33.1 lets the row header wrap, scoped to the modifier only, so every existing
        table keeps the nowrap behaviour it was designed with.
   33.3 gives the row header a fixed share of the table. Without it the browser
        sizes the two columns by content and the method column ends up narrower
        than its own longest label, so 「ノンシーケンシャル光線追跡」 breaks after two
        characters. 56/44 keeps the question readable and gives the method name
        enough room to break at most once.
   33.2 restacks the pair below 600px. Two columns of Japanese, one of them a
        full phrase, do not read at 390px; below 600 the question sits above the
        method, which is the same decision block 31.6 made for the comparison
        table. Border colour follows the section tone, because a question table
        is legitimate on either: navy on the hub, light if a method page ever
        adopts it.

   Used today by section 4 of the 解析技術 hub (page 19882) and nowhere else.
   ========================================================================= */

/* 33.1 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-qtable tbody th {
  white-space: normal;
}

/* 33.3 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-qtable tbody th {
  width: 56%;
}

/* 33.2 ------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-qtable tbody tr {
    display: block;
    padding: var(--ds-s3) 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-qtable tbody th,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-qtable tbody td {
    display: block;
    padding: 0;
    border: 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-qtable tbody td {
    margin-top: var(--ds-s1);
  }
  #top #wrap_all .lb-ds.lb-dsr.lb-ds-navy .lb-ds-qtable tbody tr {
    border-bottom: 1px solid var(--border-navy);
  }
  #top #wrap_all .lb-ds.lb-dsr.lb-ds-light .lb-ds-qtable tbody tr {
    border-bottom: 1px solid var(--border-light);
  }
}

/* ============================================================================
   BLOCK 35 -- the two components the approved Technology Hub composition needs
   that the shared design system does not already have (2026-08-19).

   SOURCE OF TRUTH. Page composition comes from the approved
   `Analysis Technologies Hub.dc.html`. Tokens, typography, colour, borders,
   radii, links, buttons and responsive rules come from the Enterprise Hub
   design system (Products Hub 19848 / Lumerical Hub 19797). Block 35 is the
   join between the two: it expresses the prototype's own two structures using
   nothing but design-system tokens, and adds no new colour, radius or font.

   Everything else on that page already exists: the hero band, .lb-ds-eyebrow,
   .lb-ds-lead, .lb-ds-table (with .lb-ds-qtable for a phrase row header),
   .lb-ds-cross + .lb-ds-xcard(.lb-ds-xghost) -- which is a 7fr/5fr pair with
   48px padding and --ds-radius-media, i.e. the prototype's product/solution
   pair exactly -- .lb-ds-pointer2, and the closing panel.

   35.1  .lb-ds-journey -- the hero's 工学的な問い -> 解析手法 -> 対応製品 line.
         A mono row on a --border-navy hairline, the same treatment the hub hero
         uses for .lb-ds-anchors, which is what the prototype draws. It stacks
         at <=600 exactly as the prototype's own media query does.

   35.2  .lb-ds-atrow and friends -- the numbered category row, which IS the
         Technology Hub's primary navigation. `64px | 4fr | 7fr`: the number,
         then the rule + name + one-line description, then the methods of that
         category as a wrapping row of links. Deliberately NOT .lb-ds-frow or
         .lb-ds-brow: those are the Products/Lumerical hub product rows and
         carry a media slot and a much larger title, which is the anatomy this
         page is explicitly not supposed to borrow.
         A method with no page of its own is rendered as .lb-ds-atmethod-off,
         plain text rather than a link, per the grouping correction §4: deferred
         entries appear unlinked, never as an empty promise. These names are
         navigation labels, not specification values, so they take the hub's
         normal body typography, NOT the mono/spec treatment (correction 6,
         2026-08-19). The unlinked ones sit at --text-secondary-light: quieter
         than the orange links, but full reading contrast, never disabled.
         Breakpoints follow the prototype: `48px | 1fr` with the methods on
         their own line at <=1120, single column at <=600.
   ========================================================================= */

/* 35.1 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-journey {
  display: flex;
  gap: var(--ds-s5);
  flex-wrap: wrap;
  align-items: baseline;
  margin: var(--ds-s4) 0 0;
  padding-top: var(--ds-s5);
  border-top: 1px solid var(--border-navy);
  font-family: var(--ds-font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-primary-dark);
}
#top .lb-ds.lb-dsr .lb-ds-journey .lb-ds-arrow {
  color: var(--brand-orange);
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-journey {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-s2);
  }
}

/* 35.2 ------------------------------------------------------------------- */
#top .lb-ds.lb-dsr .lb-ds-atrows {
  margin-top: var(--ds-s6);
}
#top .lb-ds.lb-dsr .lb-ds-atrow {
  display: grid;
  grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--ds-s6);
  align-items: start;
  padding: var(--ds-s6) 0;
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-atrow:last-child {
  border-bottom: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-atrow .lb-ds-atnum {
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
  padding-top: 4px;
}
#top .lb-ds.lb-dsr .lb-ds-atrole {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2);
}
#top .lb-ds.lb-dsr .lb-ds-atrole .lb-ds-rule {
  display: block;
  width: 24px;
  height: 4px;
  background: var(--brand-orange);
}
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-atname {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-primary-light);
}
#top .lb-ds.lb-dsr .lb-ds-atdesc {
  margin: 0;
  font-family: var(--ds-font-body);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-atmethods {
  display: flex;
  gap: var(--ds-s3) 28px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding-top: 6px;
}
#top .lb-ds.lb-dsr .lb-ds-atmethods a,
#top .lb-ds.lb-dsr .lb-ds-atmethod-off {
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.7;
  white-space: nowrap;
}
#top .lb-ds.lb-dsr .lb-ds-atmethod-off {
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-atmethods a .lb-ds-arrow {
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-atmethods a:hover .lb-ds-arrow {
  transform: translateX(3px);
}

@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-atrow {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-atmethods {
    grid-column: 2 / -1;
  }
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-atrow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s3);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-atmethods {
    grid-column: 1 / -1;
  }
}

/* 35.3 ------------------------------------------------------------------- */
/* The 解きたいこと / 解析手法 / 対応製品 list. It is a real table on the design
   system's own .lb-ds-table, with .lb-ds-qtable (block 33) for the phrase row
   header and its <=600 restack. Only three things are specific to this list:
   the column split the prototype draws (45 / 28 / 27) and the size step that
   keeps both right-hand columns quieter than the engineering question on the
   left. Correction 7 (2026-08-19) lifted them off --text-muted-dark, which was
   too faint on navy, to --text-secondary-dark, and correction 6 took the method
   column off the mono/spec treatment: these are method names, not code. A name
   is never run through .lb-ds-spec-k, which uppercases and would render
   varFDTD as VARFDTD. */
#top .lb-ds.lb-dsr .lb-ds-seltbl tbody th {
  width: 45%;
}
#top .lb-ds.lb-dsr .lb-ds-seltbl .lb-ds-selm {
  width: 28%;
  font-family: var(--ds-font-body);
  font-size: 14px;
}
#top .lb-ds.lb-dsr .lb-ds-seltbl .lb-ds-selp {
  width: 27%;
  font-size: 14px;
}
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-seltbl .lb-ds-selm,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-seltbl .lb-ds-selp {
  color: var(--text-secondary-dark);
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-seltbl tbody th,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-seltbl .lb-ds-selm,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-seltbl .lb-ds-selp {
    width: auto;
  }
  /* block 33.2 restacks the row, so the three column labels are redundant and
     would be squeezed into vertical text. The prototype hides its own header
     row at the same breakpoint (.at-selhead). */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-seltbl thead {
    display: none;
  }
}

/* 35.4 ------------------------------------------------------------------- */
/* .lb-ds-pointer2 carries margin-top: var(--hub-half) because everywhere else
   it follows a table or a grid. In the Technology Hub it is the section's only
   content and sits directly under its eyebrow, which the prototype spaces at
   --ds-s4. The modifier changes nothing else about the component. */
#top .lb-ds.lb-dsr .lb-ds-pointer2.lb-ds-pointer2-tight {
  margin-top: var(--ds-s4);
}

/* 35.5 ------------------------------------------------------------------- */
/* 技術情報. The prototype puts the sentence and its arrow links in one line,
   which works for two short labels and turns into a wrapped paragraph with
   four Japanese article titles. Correction 8 (2026-08-19) keeps the restrained
   treatment and the same components, and only separates the links: the
   sentence stays in .lb-ds-pointer2, each resource becomes its own
   .lb-ds-morewrap row, which is the design system's own link-row convention.
   The only addition is the row rhythm, taken from --ds-s3. */
#top .lb-ds.lb-dsr .lb-ds-reslinks {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s3);
  margin: var(--ds-s5) 0 0;
}
#top .lb-ds.lb-dsr .lb-ds-reslinks .lb-ds-morewrap {
  margin: 0;
}

/* ============================================================================
   BLOCK 36 - 解析技術 method page, T6 R1 (2026-08-19)
   36.1  hero metadata row  - the three groups stay on one row at desktop
   36.2  comparison table   - a small legibility lift, no structural change
   36.3  references pair    - rebalanced column widths
   Scoped to .lb-ds.lb-dsr, i.e. the method-page template only. No token was
   redefined and no new component was introduced.
   ========================================================================= */

/* 36.1 -----------------------------------------------------------------------
   .lb-ds-amspecs was a wrapping flex row, so a long third value pushed 対応製品
   onto a second line on most pages. Three explicit grid tracks cannot wrap.
   minmax(0, max-content) lets a track shrink when space is tight, so the VALUE
   wraps inside its own group instead of the group wrapping to a new row: the
   label-above-value anatomy, the font sizes and the full wording all survive.
   Below 768 the approved flex stacking is left exactly as it was.            */
@media only screen and (min-width: 768px){
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-fspecs.lb-ds-amspecs{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: start;
    align-items: start;
    column-gap: var(--ds-s6);
    row-gap: var(--ds-s5);
  }
}

/* 36.2 -----------------------------------------------------------------------
   Comparison table. Method name, relation chip and the use-it-when text each
   move up one notch at desktop only. The table keeps its 4 columns, its
   borders and its ≤600 card restack, and stays quieter than the section H2.  */
@media only screen and (min-width: 768px){
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table tbody th{
    font-size: 16px;
    line-height: 1.7;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table td{
    line-height: 1.95;
    color: var(--text-secondary-light);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table .lb-ds-rel{
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary-light);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp .lb-ds-table .lb-ds-rel-self{
    color: #A8500F;
  }
}

/* 36.3 -----------------------------------------------------------------------
   References pair. The 参考情報 card lists 8 to 11 documents while the related
   resources column holds 4 links, so at 68/32 the card ran two to five times
   the height of its neighbour. Giving it the larger share of the row and
   tightening the gutter shortens it by a fifth to a quarter without touching the
   component, the section order or the copy. Two steps, because the narrower
   1024 container is where the card ran tallest.
   The ≤767 single-column rule is unchanged.                                  */
@media only screen and (min-width: 768px){
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-am-res{
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: var(--ds-s6);
  }
}
@media only screen and (min-width: 1200px){
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-am-res{
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  }
}


/* ============================================================================
   BLOCK 37 - Solution page, representative build (/solutions/metalens/, 19875).
   Appended 2026-08-19.

   SCOPE. Every rule requires `lb-dsr` AND one of three classes that exist
   nowhere else on the install: `.lb-ds-so-rel`, `.lb-ds-so-reqs` and
   `.lb-ds-so-flow`. Swept before the append: zero occurrences of all three in
   wp_posts. The block is therefore structurally inert on every other page,
   which is the same argument blocks 27, 28 and 35 rest on - not a specificity
   argument. The eleven S1 solution pages are NOT reached: they carry
   `.lb-ds-so-split`, `.lb-ds-so-steps`, `.lb-ds-so-note` and `.lb-ds-so-map`,
   none of which appears in a selector below.

   WHY ANYTHING NEW AT ALL. The approved Solution spine lists 関連する解析技術 and
   関連製品 as two separate steps, and the workflow as seven stages. S1 folded
   the first pair into one mapping table and rendered six steps, so three
   structures had no component:
     - a head-to-content step for a list or grid that is NOT `.lb-ds-so-steps`
       or `.lb-ds-so-map` (37.1)
     - a standalone requirement list, i.e. the label/text pair of 28.9 + 28.4
       outside `.lb-ds-so-split` (37.2, 37.3)
     - a seven-card workflow grid, and the 生成物 field on its cards (37.4, 37.5)
   Everything else the page needs already had a rule and is reused unchanged:
   the hero, `.lb-ds-doms` / `.lb-ds-dom.lb-ds-so-split`, `.lb-ds-slist` /
   `.lb-ds-srow`, `.lb-ds-cards` + `.lb-ds-cards-sm` (4/2/1) and
   `.lb-ds-cards-3` (3/2/1), `.lb-ds-so-steps`, `.lb-ds-pill`,
   `.lb-ds-card-fam` / `-link` on cards-3, `.lb-ds-prose`, `.lb-ds-small` +
   `.lb-ds-so-note`, `.lb-ds-cont`, `.lb-ds-rescols`, and the closing panel.

   NOT USED, deliberately: `.lb-ds-table` / `.lb-ds-tscroll` (S1.1 - pinned to
   min-width 860px, scrolls 542px at 390), `.lb-ds-domnum` (S1.2 - 2.72:1 on
   light), the whole Analysis Technology anatomy (`lb-ds-at*`, `lb-ds-am*`,
   `lb-ds-cmp`, `lb-ds-sel*`, `lb-ds-prodcard`, `lb-ds-journey`) and all of
   Product Design V2. Red1 excluded the last two families for this page by
   name; the generator fails the build if any of them is emitted.
   ============================================================================ */

/* 37.1 - the head-to-content step for a list or grid that follows an H2.
   The section columns carry `.lb-ds-headflush`, which zeroes `.lb-ds-head`'s
   own margin-bottom at >=768 (rule 27.8), so the distance under an H2 is
   whatever the first content element declares. `.lb-ds-slist` declares nothing
   and `.lb-ds-cards` declares `margin: 0`, so both sat against the heading.
   `--hub-half` is the value 28.6 and 28.12 already use for the same step on
   this page family, so the four H2-led sections now open on one number:
   48 / 40 / 32. No new token, and no per-section margin anywhere.
   (1,3,0) against `.lb-ds-cards`'s (1,2,0); `.lb-ds-slist` has no margin rule
   at all. Nothing in a media query overrides either, so trap 6a does not
   apply. */
#top .lb-ds.lb-dsr .lb-ds-so-rel {
  margin-top: var(--hub-half);
}

/* 37.2 - the standalone requirement list owns the two tracks its rows share.
   This is 28.9 lifted out of `.lb-ds-so-split`. On this page the engineering
   requirements are their own section rather than the right half of the
   challenge split, so they need the same construction without the split:
   `.lb-ds-slist` is a flex column family-wide, which is why its rows can never
   agree on a label width, and the base `.lb-ds-srow` track is 300px - written
   for the Solutions Hub, where the name is a product-length string. A
   requirement label here is 8 to 10 characters, so the 300px track opened a
   gutter of roughly 120px and the row stopped reading as one unit.
   Track values, gutter and fallback order are identical to 28.9 by intent, so
   the two lists on this page are the same component measured the same way.
   (1,3,0) against the (1,3,0) base list rule; source order carries it. */
/* R4, 2026-09-08 - the label track takes a CEILING.
   `max-content` alone let one long EN label take the whole list. MEASURED on
   /en/solutions/illumination/ at 1440: the 65-character label sized this
   track to 579.8px of a 660.3px list and left the description 64.5px, which
   wrapped it to 9 lines; at 1024 the description was 225.8px / 3 lines, and
   at 768 the description track measured 0px. Every EN page demands 322px to
   580px here, so this was a family defect, not one page's copy.
   fit-content with a 300px limit keeps the R2/R3 hug BELOW the ceiling and
   clamps above it, so the track is still the longest label on the page
   whenever that label fits. 300px is not a new number: it is the family's own
   base `.lb-ds-srow` name track, reused as a maximum instead of a fixed
   width. It cannot bind on Japanese - the widest JA label in the family is
   19873 at 296.1px MEASURED in the live font - so every JA page renders
   unchanged. Specificity, track count and gutter are untouched, so the
   (2,3,0) rule that restacks these rows at 767 still wins, and mobile still
   stacks name over description. */
#top .lb-ds.lb-dsr .lb-ds-so-reqs {
  display: grid;
  grid-template-columns: fit-content(300px) minmax(0, 1fr);
  column-gap: var(--ds-s4);
}

/* 37.3 - the requirement row subgrids into those tracks.
   Same construction as 28.4, including the reason the fallback is stated
   first: if `subgrid` is dropped the row keeps a per-row `max-content` label
   track, which is still far better than 300px, and `grid-column` is unaffected
   either way so the row always spans the full list. `column-gap` is restated
   because in a subgridded axis some implementations take the gutters from the
   parent; both values are the family 16px, so the answer is 16px either way.
   (1,4,0). It does NOT out-specify the (2,3,0) rule that restacks
   `.lb-ds-srow` at <=767, which therefore still wins and still collapses these
   rows to name-over-text. That is deliberate: trap 6a does not apply. */
/* R4, 2026-09-08 - the fallback carries the same ceiling as the list above,
   so a browser without `subgrid` gets the clamped label track too. */
#top .lb-ds.lb-dsr .lb-ds-so-reqs .lb-ds-srow {
  grid-template-columns: fit-content(300px) minmax(0, 1fr);
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: var(--ds-s4);
}

/* 37.4 - the workflow card body returns to a readable size.
   The seven-step grid is `.lb-ds-cards-sm`, whose 4/2/1 tracks are the reason
   it was chosen: seven cards on the 3-track `.lb-ds-cards-3` lay out 3+3+1 and
   leave one orphan, while on four tracks they lay out 4+3. But cards-sm also
   drops `.lb-ds-card-desc` to 13px, because it was written for eight
   two-line capability cards on the Photonica family page. A workflow card
   carries two full sentences, so it takes the 14px/1.9 that `.lb-ds-cards-3`
   uses for the same amount of copy. One step of size, no new token.
   (1,5,0) against the (1,4,0) cards-sm rule. No media query overrides
   cards-sm's card-desc, so trap 6a does not apply. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-cards-sm.lb-ds-so-flow .lb-ds-card-desc {
  font-size: 14px;
  line-height: 1.9;
}

/* 37.5 - the 生成物 field on a workflow card.
   This field is what makes the page a WORKFLOW page rather than a list of
   method or product names: each stage names the artifact it hands to the next.
   It is the same slot `.lb-ds-card-fam` fills on `.lb-ds-cards-3`, so it takes
   that rule's construction verbatim - pinned to the card's bottom edge with
   `margin: auto 0 0` so a two-line and a three-line description still line
   their artifacts up across the row, mono at 12px, `--ds-s3` of padding above.
   TWO deliberate differences from the cards-3 rule, both forced by the
   surface. The cards-3 rule paints `--text-secondary-light`, which is a
   LIGHT-surface colour and would be near-invisible on a navy card; and it has
   no separator. `--text-muted-dark` is the family's quiet-on-dark token, the
   one `.lb-ds-panel-head` already uses, and the hairline is `--border-navy`,
   the border the card itself carries. No new colour is introduced.
   `.entry-content-wrapper` is LOAD-BEARING: the artifact is a <p> inside a
   navy section, so `#top .lb-ds.lb-ds-navy .entry-content-wrapper p` at
   (1,3,1) governs its colour, and a three-class rule cannot beat that
   trailing element selector however late it sits. (1,5,0) governs. This is
   the rule block 22.6 records for `.lb-ds-ppanel-desc`, applied before it
   could bite rather than after. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-so-flow .lb-ds-card-fam {
  margin: auto 0 0;
  padding-top: var(--ds-s3);
  border-top: 1px solid var(--border-navy);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-muted-dark);
}

/* 37.6 - the foundry section's trailing link.
   `.lb-ds-morewrap` carries `margin: 4px 0 0`, which is the row rhythm it has
   inside a stacked link list. Here it is one link closing a section, after a
   `.lb-ds-so-note` footnote, so it takes the family's `--ds-s5` step instead.
   Colour needs no rule: `#top .lb-ds.lb-ds-navy a` already paints
   `--accent-light-orange` (#F39A55), which measures 5.4:1 on the navy surface
   - the value block 22.6 recorded for the same colour on the same ground.
   Only :hover is unhandled family-wide on navy, so it is stated here.
   ONE DEVIATION from 22.6, which sets the same hover to literal pure white:
   this uses `--text-primary-dark` (#F4F2EF), the family's on-dark primary ink.
   It is brighter than the resting #F39A55, which is all the hover has to do,
   and it keeps the page on-palette. `check-design` reports a bare pure-white
   literal as `color-off-palette`; the token carries no such cost, so this
   needs no exception and the check comes back clean.
   (1,4,0) and (1,5,0) against the (1,3,0) base. */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-morewrap {
  margin: var(--ds-s5) 0 0;
}

#top .lb-ds.lb-dsr.lb-ds-navy .entry-content-wrapper .lb-ds-morewrap a:hover {
  color: var(--text-primary-dark);
}

/* 37.7 - wpautop's empty paragraph inside a step card.
   MEASURED on the real server render, not predicted: a step card's children are
   `span.lb-ds-pill`, `p` (EMPTY), `h3`, `p.lb-ds-card-desc`, `p.lb-ds-card-fam`.
   wpautop opens a paragraph for the inline pill span, closes it before the
   <h3>, and leaves the empty <p> behind. `.lb-ds-card` is a flex column, so
   that paragraph is a real flex item: it contributes its own `margin-bottom`
   (16px, the theme paragraph margin) plus one `gap` (--ds-s2, 8px), i.e. 24px
   of dead space between the step number and the step title on all seven cards.
   Visible in the 390px render, where the number-to-title gap was half again the
   title-to-body gap.
   It does NOT change card height - `.lb-ds-card-fam`'s `margin: auto 0 0`
   absorbs the slack against the tallest card in the row - so this is a spacing
   defect inside the card, not a layout one.
   Third time this exact defect has been fixed in this stylesheet: 22.6 hides it
   in `.lb-ds-ppanel-copy` and block 32 in `.lb-ds-spec` and `.lb-ds-wcol`, both
   for the same reason. Same remedy, same shape, scoped to this page's grid.
   (1,5,1); nothing competes. */
#top .lb-ds.lb-dsr .lb-ds-so-flow .lb-ds-card > p:empty {
  display: none;
}


/* ============================================================================
   BLOCK 38 -- the 技術情報 hub (page 17675, /resource-hub/). 2026-08-20.

   SOURCE OF TRUTH. Page composition comes from the approved
   `Technical Information Hub.dc.html`. Tokens, typography, colour, borders,
   radii, links, buttons and responsive rules come from the Enterprise Hub
   design system (Products Hub 19848 / Lumerical Hub 19797 / 解析技術 hub 19882).
   Block 38 is the join between the two and adds no new colour, radius or font.

   REUSED UNCHANGED, so this block stays small: the hero band, .lb-ds-crumbs,
   .lb-ds-eyebrow(-mute), .lb-ds-h1wide, .lb-ds-lead, .lb-ds-head, .lb-ds-more +
   .lb-ds-arrow, .lb-ds-morewrap, .lb-ds-cross + .lb-ds-cross-eq +
   .lb-ds-xcard(.lb-ds-xghost) / -xh / -xdesc / -xlink -- which is the
   prototype's 1fr/1fr サポート + 製品 pair exactly -- and the .lb-ds-close panel.

   WHY THIS BLOCK IS MOSTLY A RESTYLE, NOT NEW COMPONENTS. Red1's brief: use
   standard WordPress Posts and Enfold Blog Posts elements filtered by category,
   and never duplicate a Post card by hand. So every listing on the page is a
   stock `[av_blog blog_style='blog-grid']`, and its markup is Enfold's, not
   ours:

     .avia-content-slider > .avia-content-slider-inner > .slide-entry-wrap
       > article.slide-entry
           > a.slide-image > img
           > .slide-content
               > header.entry-content-header
                   > h3.slide-entry-title > a
                   > span.blog-categories
                   > span.av-vertical-delimiter
               > .slide-entry-excerpt
           > footer.entry-footer > .slide-meta > time.slide-meta-time
           > span.hidden            (schema.org microdata)

   38.2 and 38.3 lay that markup out as the prototype's row and card. Nothing
   here writes content.

   WHY blog-grid AND NOT bloglist-*. The `bloglist-*` styles honour the theme's
   global blog-meta options, and on this install `blog-meta-date`,
   `-category`, `-author` and `-html-info` are all set to `disabled`. Those
   options govern every archive and single post on the site, so they are not
   touched. `blog-grid` ignores them and emits the date and the categories
   regardless, which is why it is the style the row and the card are built from.

   FOUR THINGS MEASURED ON THE REAL RENDER, each recorded at the rule that
   handles it, because none of them is predictable from the markup:
     a. `span.hidden` computes to `display: block` and becomes a grid/flex item
        (38.2a).
     b. Enfold gives the article a clearfix `::before`, which opens a second
        implicit grid row (38.2b).
     c. `article.slide-entry::after` NEVER GENERATES A BOX on this install --
        0x0 even with `content: "XXX"; font-size: 30px; position: absolute`.
        So the row's trailing arrow is drawn by `.entry-content-header::after`,
        which does generate one (measured 7.7 x 21.4) (38.2d).
     d. Something at (2,4,x) -- Enfold's own generated heading CSS -- sets
        `font-weight: 700` on the article's h3. A (1,5,0) rule loses to it, so
        the two title weights are restated one `#wrap_all` higher, which is the
        same remedy block 20 applied to the whole eyebrow family (38.2c, 38.3a).

   38.1  .lb-ds-tiidx / -tirow / -tinum / -tiname / -tidesc -- the hero's
         five-category index. A hairline-ruled stack: number, name, one line,
         arrow. Deliberately NOT .lb-ds-anchors, which is the Products-hub
         horizontal jump-link row (a flex ROW of mono labels, no name/description
         split and no per-row rule), and NOT .lb-ds-atrow, which is the 解析技術
         hub's numbered category row and carries a 64px number gutter, an
         orange rule, an H3 and a wrapping method list. This is a five-row link
         list whose rows are the only navigation the hero has.
   38.2  .lb-ds-tilist -- the four list sections. Enfold's one-column blog-grid
         output, laid out as `date | title + arrow` rows on hairlines. The whole
         row is the click target: `article` is the positioning context and the
         title's own anchor is stretched over it with `::after { inset: 0 }`,
         which is how the prototype's single-anchor row behaves without any JS
         and without a template override.
         `.blog-categories` is hidden ON PURPOSE. Filtered by 設計・解析ガイド it
         is either a restatement of the section heading (19196) or every
         category the post happens to carry (11840 renders アプリケーション,
         ブログ, リソース, 設計・解析ガイド). Neither is the prototype's 製品 column,
         and this round may not retag Posts. The excerpt is hidden for the same
         reason the prototype's row has none.
   38.3  .lb-ds-ticards -- the 活用事例 section. The same stock element at
         `columns='3'`, laid out as the prototype's dark cards: mono date
         eyebrow, title, excerpt. Not .lb-ds-card / .lb-ds-cards-3: that family
         is fed by hand-authored ALB markup, and Enfold's article markup has a
         different child order (media, content, footer) which the card has to
         re-order. 3 -> 1 column at 1120, which is the prototype's own step.
   38.4  .lb-ds-tifoot / .lb-ds-tiroutes -- the per-section footer: the product
         route row (設計・解析ガイド only) and the view-all link.

   TONE HANDLING. Three of the five sections are conditional (see
   lb-hubsections.php), so a listing can appear on `lb-ds-light` or on
   `lb-ds-navy` and both surfaces are painted here. Light rows use
   --border-light hairlines with #A8500F mono (the frozen darker orange that
   clears 4.5:1 on a light ground, per block 21.2) and --text-primary-light
   titles; navy rows use --border-navy with --accent-light-orange and
   --text-primary-dark.
   ========================================================================= */

/* 38.1 --------------------------------------------------- hero category index */
#top .lb-ds.lb-dsr .lb-ds-tiidx {
  display: flex;
  flex-direction: column;
  margin: var(--ds-s4) 0 0;
  border-top: 1px solid var(--border-navy);
  max-width: 860px;
}
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tirow {
  display: flex;
  gap: var(--ds-s5);
  align-items: baseline;
  padding: var(--ds-s4) 0;
  border-bottom: 1px solid var(--border-navy);
  text-decoration: none;
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tirow:hover {
  border-bottom-color: var(--accent-light-orange);
  text-decoration: none;
}
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tinum {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
}
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tiname {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--text-primary-dark);
  min-width: 11em;
}
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tidesc {
  flex: 1;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted-dark);
}
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-arrow { color: var(--text-secondary-dark); }
#top .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tirow:hover .lb-ds-arrow { color: var(--accent-light-orange); }

/* 38.2 ------------------------------------------------------- listing as rows */
/* Enfold's slider chrome carries margins and a float layout this component does
   not want. Neutralised here rather than page-wide: every selector needs
   .lb-ds-tilist, so no archive, single post or other ALB blog element moves. */
#top .lb-ds.lb-dsr .lb-ds-tilist .avia-content-slider { margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-tilist .avia-content-slider-inner { border-top: 1px solid var(--border-light); }
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-wrap { margin: 0; padding: 0; }

#top .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry {
  position: relative;
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  /* COLUMN gap only, see 38.2b. A single-row grid has no use for a row gap, and
     the <=600 rule that DOES stack states its own. */
  column-gap: var(--ds-s5);
  row-gap: 0;
  align-items: baseline;
  float: none;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry:hover { border-bottom-color: var(--brand-orange); }

/* 38.2a  MEASURED, not predicted. Enfold appends a `<span class="hidden">` of
   schema.org microdata as the LAST CHILD of every article. On this install
   `.hidden` computes to `display: block` (measured 1196x43 at 1440), so inside
   the row grid it is a real grid item on an implicit second row and added 43px
   plus one 24px gap to EVERY row: a row measured 93px where its own content is
   66px.
   Taken out of layout with the visually-hidden pattern rather than
   `display: none`, so the microdata stays in the DOM where the structured-data
   parsers read it. `article` is already the positioning context, and the 1px box
   sits under the row's own top-left corner where nothing can see it. Same
   defect, same remedy, for the card grid. */
#top .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry > .hidden,
#top .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry > .hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 38.2b  MEASURED. Enfold gives the article a clearfix `::before`, which in a
   grid container is an auto-placed grid item and opens a second, 0px-tall
   implicit row: `grid-template-rows` read `28.26px 0px`. Neither listing floats
   anything, so the clearfix has no job here. */
#top .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry::before,
#top .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry::before { display: none; }

/* what the prototype's row does not have */
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-image,
#top .lb-ds.lb-dsr .lb-ds-tilist .blog-categories,
#top .lb-ds.lb-dsr .lb-ds-tilist .av-vertical-delimiter,
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-excerpt,
#top .lb-ds.lb-dsr .lb-ds-tilist .avia-slideshow-arrows,
#top .lb-ds.lb-dsr .lb-ds-tilist .avia-slideshow-dots { display: none; }

/* column 1: the date */
#top .lb-ds.lb-dsr .lb-ds-tilist .entry-footer {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 0;
}
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-meta { margin: 0; padding: 0; }
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-meta-time {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #A8500F;
}

/* column 2: the title, with the arrow on its baseline at the row's right edge */
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-content {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
}
#top .lb-ds.lb-dsr .lb-ds-tilist .entry-content-header {
  display: flex;
  align-items: baseline;
  gap: var(--ds-s5);
  margin: 0;
  padding: 0;
}
/* `min-width: 0` is LOAD-BEARING, not tidiness. A flex item defaults to
   `min-width: auto`, which refuses to shrink below its min-content width. With
   a long Japanese title and the family's `word-break: auto-phrase`, min-content
   at 390 exceeded the space left after the gap and the arrow, and the h3
   measured 16px past its own header. With this, the title shrinks and the
   `overflow-wrap: break-word` in 38.2e can do its job. */
#top .lb-ds.lb-dsr .lb-ds-tilist .entry-content-header .slide-entry-title { flex: 1; min-width: 0; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-tilist .slide-entry-title {
  margin: 0;
  padding: 0;
  font-family: var(--ds-font-sans);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
}
/* 38.2c  Weight is restated one `#wrap_all` higher than the rest of the rule.
   MEASURED: something at (2,4,x) -- Enfold's own generated heading CSS -- paints
   `font-weight: 700` on this h3. Every other declaration above wins at (1,5,0)
   (font-size resolved to 15px against the family's own 24px h3 rule), but the
   weight did not: it measured 700, which is neither this block's 500 nor the
   family's 600, i.e. the UA default was never being overridden. Two IDs clear
   it. Same remedy block 20 used for the whole eyebrow family, and NOT
   !important. */
/* MEASURED at 600 and below: the family's own mobile heading rule,
   `@media #top #wrap_all .lb-ds .entry-content-wrapper h3 { font-size: 20px }`
   at (2,2,1), was beating this block's (1,5,0) base rule and pushing the row
   title from 15px to 20px on every listing at <=600 -- on the five landing
   pages AND on the hub. The approved design keeps the row title at 15px at
   every width; its own <=600 query only stacks the row. So font-size is
   restated here alongside the weight, at (2,5,1), which clears the mobile rule
   without a media query of its own. Trap 6a, in reverse. */
#top #wrap_all .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-tilist h3.slide-entry-title { font-weight: 500; font-size: 15px; }
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-title a {
  color: var(--text-primary-light);
  text-decoration: none;
}
/* The whole row is the link. `article` is the positioning context, so the
   title's own anchor covers it and the row needs no wrapper and no JS. */
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 38.2e  MEASURED at 390: a long Latin run in 19196's title overhung its own
   h3 by 2px. The family's heading rule sets `overflow-wrap: normal` on purpose,
   for Japanese line breaking, but a POST title is arbitrary text arriving from
   the database, not a display heading written to fit. Restored to `break-word`
   for the listing titles only, so no design-system heading changes. */
#top .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-title,
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-title { overflow-wrap: break-word; }

/* 38.2d  The trailing arrow. It hangs off `.entry-content-header`, NOT off
   `article.slide-entry`, because `article.slide-entry::after` NEVER GENERATES A
   BOX on this install: measured 0x0 with `content` resolving to "→", and still
   0x0 with `content: "XXX"; font-size: 30px`, with `display: inline-block`, with
   `justify-self: stretch`, with an explicit `width`, and even with
   `position: absolute` -- something in the theme's own CSS suppresses that one
   pseudo-element. `.entry-content-header::after` generates a normal box
   (measured 7.7 x 21.4), so the arrow lives there.
   That also removes the need for a third grid column: the header is a flex row,
   the title takes `flex: 1`, and `margin-left: auto` parks the arrow at the
   right edge on the title's own baseline -- which is exactly where the prototype
   draws it, and with no magic offset to maintain. */
#top .lb-ds.lb-dsr .lb-ds-tilist .entry-content-header::after {
  content: "\2192";
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: #A8500F;
}

/* the same rows on navy */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist .avia-content-slider-inner,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist article.slide-entry { border-color: var(--border-navy); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist article.slide-entry:hover { border-bottom-color: var(--accent-light-orange); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist .slide-meta-time,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist .entry-content-header::after { color: var(--accent-light-orange); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist .slide-entry-title a { color: var(--text-primary-dark); }

/* 38.3 ------------------------------------------------------ listing as cards */
#top .lb-ds.lb-dsr .lb-ds-ticards .avia-content-slider { margin: 0; }
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-s5);
  margin: 0;
  padding: 0;
}
#top .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-s3);
  float: none;
  width: 100%;
  margin: 0;
  padding: var(--ds-s6);
  background: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: var(--ds-radius-card);
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry:hover { border-color: var(--brand-orange); }
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-image,
#top .lb-ds.lb-dsr .lb-ds-ticards .blog-categories,
#top .lb-ds.lb-dsr .lb-ds-ticards .av-vertical-delimiter { display: none; }

/* the date is the card eyebrow, so the footer is ordered above the content */
#top .lb-ds.lb-dsr .lb-ds-ticards .entry-footer {
  order: 1;
  margin: 0;
  padding: 0;
  border: 0;
}
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-content { order: 2; margin: 0; padding: 0; }
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-meta { margin: 0; padding: 0; }
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-meta-time {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--accent-light-orange);
}
#top .lb-ds.lb-dsr .lb-ds-ticards .entry-content-header { margin: 0 0 var(--ds-s3); padding: 0; }
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ticards .slide-entry-title {
  margin: 0;
  padding: 0;
  font-family: var(--ds-font-sans);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
/* 38.3a  the same (2,4,x) weight override as 38.2c. */
#top #wrap_all .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-ticards h3.slide-entry-title { font-weight: 600; font-size: 18px; }
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-title a { color: var(--text-primary-dark); text-decoration: none; }
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
#top .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-secondary-dark);
}

/* 38.4 ------------------------------------------------- section footer + routes */
/* The listing sits in its own column below .lb-ds-head, whose margin-bottom is
   --hub-half: the design system's head-to-content step, kept rather than the
   prototype's flat 32px so this hub opens on the same number as 19797 / 19848 /
   19882. The step from the listing to the footer IS the prototype's 32px. */
#top .lb-ds.lb-dsr .lb-ds-tifoot { margin-top: var(--ds-s6); }
#top .lb-ds.lb-dsr .lb-ds-tiroutes {
  display: flex;
  gap: var(--ds-s6);
  flex-wrap: wrap;
  margin: var(--ds-s4) 0 0;
}
#top .lb-ds.lb-dsr .lb-ds-tifoot .lb-ds-morewrap { margin: var(--ds-s5) 0 0; }
/* The arrow link takes the design system's OWN arrow-link spacing, which is
   already declared on `.lb-ds-band-copy .lb-ds-more` (inline-flex, --ds-s2, and
   a baseline-aligned arrow). Without it the label and the arrow render with no
   space between them, which is not what the prototype's ArrowLink draws. */
#top .lb-ds.lb-dsr .lb-ds-tifoot .lb-ds-more {
  display: inline-flex;
  gap: var(--ds-s2);
  align-items: baseline;
}
#top .lb-ds.lb-dsr .lb-ds-tifoot .lb-ds-more .lb-ds-arrow { transition: transform var(--ds-dur-fast) var(--ds-ease); }
#top .lb-ds.lb-dsr .lb-ds-tifoot .lb-ds-more:hover .lb-ds-arrow { transform: translateX(3px); }
/* The 製品別のガイド label is a SUB-label under a section that already carries an
   orange eyebrow. The prototype draws it in the secondary ink for exactly that
   reason. The family's `.lb-ds-eyebrow-mute` was restated in block 20 to the
   same orange as the light eyebrow, so it needs answering here at (2,5,0)
   rather than left to the modifier. Scoped to .lb-ds-tifoot, so no other page
   moves. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-tifoot .lb-ds-eyebrow.lb-ds-eyebrow-mute {
  color: var(--text-secondary-light);
  font-weight: 500;
}

/* 38.5 ----------------------------------------------------------- responsive */
@media only screen and (max-width: 1120px) {
  /* the prototype's own step: the case-study grid goes straight to one column */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-wrap { grid-template-columns: minmax(0, 1fr); }
}

@media only screen and (max-width: 767px) {
  /* Enfold gives every .flex_column `margin: 0 0 20px` at <=767 and
     article.slide-entry carries .flex_column, so without this each row and each
     card gains 20px of dead space under it. (2,4,1) to clear that. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry.flex_column,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry.flex_column { margin: 0; }
}

@media only screen and (max-width: 600px) {
  /* the prototype stacks both rows at 600: the index row and the listing row */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tirow {
    flex-wrap: wrap;
    gap: 6px var(--ds-s4);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tiname { min-width: 0; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tidesc { flex: 1 0 100%; }

  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tilist .entry-footer { grid-column: 1; grid-row: 1; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tilist .slide-content { grid-column: 1; grid-row: 2; }

  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tiroutes { gap: var(--ds-s4) var(--ds-s5); }
}


/* ============================================================================
   BLOCK 39 -- pagination for the 技術情報 listing pages. 2026-08-20.

   WHY IT EXISTS NOW. The 技術情報 hub (17675) shows a short teaser per category
   with `paginate='no'`, so it never needed this. The five dedicated landing
   pages (18074 / 18049 / 18101 / 18110 / 19924) are the canonical, indexable
   surface for their category and carry the FULL listing at `paginate='yes'`,
   12 per page. Every category is at or under 12 today (guide 11, seminar 12,
   release 5, notes 3), so Enfold renders no pagination chrome yet -- this block
   exists so the first category to pass 12 does not ship an unstyled Enfold
   control onto an approved page.

   Nothing else in lb-redesign.css touches `.pagination`: verified, zero
   matching rules across blocks 1-38. So this is the family's first and only
   pagination treatment, and every selector is scoped to `.lb-ds-tilist` or
   `.lb-ds-ticards` so no archive, single post or other ALB blog element moves.

   ENFOLD'S MARKUP, measured from a real render, not assumed:

     <div class='pagination-wrap pagination-slider'>
       <nav class='pagination'>
         <span class='pagination-meta'>Page 1 of 3</span>
         <span class='current'>1</span>
         <a href='...?avia-element-paging=2' class='inactive next_page'>2</a>
         <a href='...' class='inactive'>3</a>
       </nav>
     </div>

   The control is a mono row of square cells on the design system's hairline,
   which is the same vocabulary the listing rows above it already use: no new
   colour, radius or font. `--ds-radius-ctl` is the token the system reserves for
   controls. The current page is the only accented cell.
   ========================================================================= */

#top .lb-ds.lb-dsr .lb-ds-tilist .pagination-wrap,
#top .lb-ds.lb-dsr .lb-ds-ticards .pagination-wrap {
  margin: var(--ds-s6) 0 0;
  padding: 0;
  border: 0;
}
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination {
  display: flex;
  gap: var(--ds-s2);
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  line-height: 1;
}
/* Enfold floats and margin-hacks its pagination cells. Reset on the cells
   themselves rather than with a `> *` blanket, which loses to any two-class
   descendant rule the theme has (the trap recorded in block 25). */
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination a,
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination span,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination a,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination span {
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-ctl);
  background: transparent;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease);
}
/* the "Page 1 of 3" label is a caption, not a cell */
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination .pagination-meta,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination .pagination-meta {
  min-width: 0;
  height: auto;
  margin-right: var(--ds-s3);
  padding: 0;
  border: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination a,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination a { color: #A8500F; }
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination a:hover,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination a:hover {
  border-color: var(--brand-orange);
  color: #A8500F;
  text-decoration: none;
}
#top .lb-ds.lb-dsr .lb-ds-tilist nav.pagination span.current,
#top .lb-ds.lb-dsr .lb-ds-ticards nav.pagination span.current {
  border-color: var(--brand-orange);
  background: rgba(236, 118, 40, 0.08);
  color: var(--text-primary-light);
}

/* the same control on navy, for whichever listing lands on a dark section */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist nav.pagination a,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist nav.pagination span,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-ticards nav.pagination a,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-ticards nav.pagination span { border-color: var(--border-navy); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist nav.pagination .pagination-meta,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-ticards nav.pagination .pagination-meta { color: var(--text-muted-dark); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist nav.pagination a,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-ticards nav.pagination a { color: var(--accent-light-orange); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist nav.pagination a:hover,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-ticards nav.pagination a:hover {
  border-color: var(--accent-light-orange);
  color: var(--text-primary-dark);
}
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist nav.pagination span.current,
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-ticards nav.pagination span.current {
  border-color: var(--accent-light-orange);
  background: rgba(243, 154, 85, 0.12);
  color: var(--text-primary-dark);
}

@media only screen and (max-width: 600px) {
  /* the caption goes to its own line before the cells rather than squeezing them */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tilist nav.pagination .pagination-meta,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-ticards nav.pagination .pagination-meta {
    flex: 1 0 100%;
    margin: 0 0 var(--ds-s2);
  }
}


/* ============================================================================
   BLOCK 40 -- the 会社情報 hub (1504) and ニュース・イベント (19929). 2026-08-20.
   r2 (same day, Red1's refinement pass): 40.3 retuned, 40.5 and 40.6 added.

   SOURCE OF TRUTH. Composition comes from the approved `Company Hub.dc.html` and
   `Company Child Page.dc.html`. Tokens, typography, colour, borders, radii,
   links, buttons and responsive rules come from the Enterprise Hub design system
   (19848 / 19797 / 19882 / 17675).

   THIS BLOCK IS SMALL ON PURPOSE. Both pages are built almost entirely from
   components that already exist, and every one of them was checked against the
   prototype before being reused rather than reinvented:

     prototype            reused component                        prototype match
     -----------------------------------------------------------------------------
     .co-layers           .lb-ds-wcols / -wcol / -wnum /          3-up, number +
                          -wtitle / -wtext                        name + one line
     hero jump links      .lb-ds-anchors (+ .lb-ds-arrow)         mono row on a
                                                                  navy hairline
     .co-profile          .lb-ds-dom + .lb-ds-domhead / -domh /   5fr/7fr split
                          -domdesc, right side .lb-ds-fspecs      whose right side
                          + .lb-ds-spec / -spec-k / -spec-v-prose is a LIST
     .co-metrics          .lb-ds-wcols.lb-ds-wcols-4 +            4 -> 2 at 1120
                          .lb-ds-figure / -fig-n / -fig-l         -> 1 at 600,
                                                                  exactly the
                                                                  prototype's steps
     news teaser row      .lb-ds-tilist (CSS block 38)            date | title |
                                                                  arrow
     .co-cross            .lb-ds-cross.lb-ds-cross-eq +           1fr/1fr solid +
                          .lb-ds-xcard(.lb-ds-xghost)            ghost pair
     .cc-main aside       .lb-ds-cross.lb-ds-cross-eq             main + aside
     ClosingPanel         .lb-ds-close + .lb-btnrow               unchanged
     continuing band      .lb-ds-cont (design system, EXISTING)   r2: kills the
                                                                  dead air Red1
                                                                  called out

   So only three things genuinely needed writing in r1, and all three are the same
   kind of thing: a component that has only ever been used on a LIGHT surface is
   now being used on a DARK one, and its ink has to follow. This is the same defect
   block 30.3 recorded for `.lb-ds-spec-k` / `-v` in a hero, and it is
   load-bearing, not cosmetic -- without it the text is dark-on-dark.

   40.1  .lb-ds-wcol inside .lb-ds-hero. The family paints the hairline and the
         title for a light section, and gives `.lb-ds-navy` its own overrides --
         but `.lb-ds-hero` is a THIRD surface with neither set. Measured before
         this rule: hairline `--border-light` (#DCE3E9) burning across the navy
         gradient, and `.lb-ds-wtitle` at Enfold's default heading ink.
         `.lb-ds-wtitle` is emitted as a SPAN here, not a heading: these are the
         three labels of a diagram, not document headings, and a span keeps them
         out of the h1-h4 cascade entirely.
   40.2  .lb-ds-figure inside .lb-ds-navy. `.lb-ds-fig-n` resolves to
         `--text-primary-light` under `.lb-dsr` and `-fig-l` to
         `--text-secondary-light`; the 事業基盤 strip is a navy section, so both
         are unreadable without this.
   40.3  .lb-ds-covideo -- the 会社紹介ビデオ column that page 1504 already
         carried. Same `--ds-radius-media` and hairline as every other framed
         media slot in the family.
         r2 capped this at 560px to reduce visual dominance; r3, Red1: that
         over-corrected -- at desktop width the embed left an excessive empty
         field to its right. The cap is back on the design-system token,
         `max-width: var(--ds-reading)` (780px). Left-aligned, 16:9, same
         `--ds-radius-media`, same hairline, same `--hub-half` top margin; below
         780 the cap stops binding and the embed tracks its column as before.
         No arbitrary replacement value, and never the full container width.
   40.5  r2. The four navigation cards are ONE group. They used to be two
         `lb-ds-light` sections, so the gap between the rows was a full section
         pad twice over -- 128px of empty light ground inside what reads as one
         menu. Both rows are now siblings in ONE textblock in ONE section, and
         this is the only rule that needs to exist for that: the row gap.
         `--ds-s6` = 32px, the top of the 24-32px band Red1 asked for, and an
         EXISTING token -- no global section-spacing token was touched to solve a
         local problem. Scoped to `.lb-ds-navgroup` so that no other page which
         happens to stack two card pairs later inherits this spacing by accident.
         The news-teaser-to-first-card gap is handled WITHOUT new CSS, by the
         design system's own `.lb-ds-cont` modifier on the navigation section.
   40.6  r2. `.lb-ds-spec-v-prose` and `.lb-ds-spec-k` both resolve to
         `--text-secondary-light` (#465968), so on the 会社概要 list the value
         carried exactly as much ink as its own label and the right-hand column
         read washed out next to the left-hand statement. The value now takes
         `--text-primary-light` (#102435) at weight 500 -- contrast and weight
         only. Font size, line height, column width and the list structure are
         all unchanged: no cards, no table. Scoped to `.lb-ds-cospecs` so the
         spec lists on 19848 / 19797 / 19882 and the product pages do not move.
   ========================================================================= */

/* 40.1 ------------------------------------------- the three layers, on the hero */
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-wcol { border-top-color: var(--border-navy); }
#top .lb-ds.lb-dsr.lb-ds-hero .entry-content-wrapper .lb-ds-wtitle {
  color: var(--text-primary-dark);
}
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-wcol .lb-ds-wtext { color: var(--text-muted-dark); }
/* The layers sit under the lead and above the anchor row, so they take the
   design system's own head-to-content step rather than a new number. */
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-wcols { margin-top: var(--ds-s6); }

/* 40.2 ------------------------------------------ the 事業基盤 figures, on navy */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-figure .lb-ds-fig-n { color: var(--text-primary-dark); }
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-figure .lb-ds-fig-l { color: var(--text-secondary-dark); }
/* The factual Ansys note closes the section as a footnote, not as body copy. */
#top .lb-ds.lb-dsr.lb-ds-navy .lb-ds-wcols-4 + .lb-ds-small {
  margin: var(--ds-s6) 0 0;
  padding-top: var(--ds-s4);
  border-top: 1px solid var(--border-navy);
}

/* 40.3 -------------------------------------------------- the company video */
#top .lb-ds.lb-dsr .lb-ds-covideo { margin-top: var(--hub-half); }
#top .lb-ds.lb-dsr .lb-ds-covideo .avia-video {
  max-width: var(--ds-reading);
  /* Enfold sizes `.avia-video-16-9` with `padding-bottom: 56.25%`, and a
     percentage padding resolves against the CONTAINING BLOCK, not against the
     element's own width. The containing block here is the full 1196px column,
     so the capped 780px embed was rendering 780 x 672.75 -- 1.16:1, not 16:9.
     Measured 2026-08-20; it was wrong at 780px in r1 and worse at 560px in r2
     (560 x 672.75, portrait). `aspect-ratio` derives the height from the width
     actually rendered, which is what the 16-9 class was asking for. */
  aspect-ratio: 16 / 9;
  padding-bottom: 0;
  /* `width` must be stated. Enfold's `.avia-video` is not a plain block here
     and its only child is absolutely positioned, so with the percentage padding
     removed and `width:auto` the box sized to zero content -- measured 2 x 1px. */
  width: 100%;
  /* And `height`, for the same reason: the padding-hack Enfold uses pairs
     `padding-bottom: 56.25%` with `height: 0`, and `aspect-ratio` is ignored
     unless one axis is auto. */
  height: auto;
  display: block;
  margin: var(--ds-s4) 0 0;
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
  overflow: hidden;
}

/* 40.4 ----------------------------------------------------------- responsive */
@media only screen and (max-width: 600px) {
  /* the prototype stacks the hero jump links at 600 rather than letting five
     labels wrap into a ragged two-line row */
  #top #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-anchors {
    flex-direction: column;
    gap: var(--ds-s3);
  }
}

/* 40.5 ------------------------------------------- the navigation card group */
#top .lb-ds.lb-dsr.lb-ds-navgroup .lb-ds-cross-eq + .lb-ds-cross-eq {
  margin-top: var(--ds-s6);
}

/* 40.6 ------------------------------------- 会社概要 value vs label hierarchy */
#top .lb-ds.lb-dsr .lb-ds-fspecs.lb-ds-cospecs .lb-ds-spec-v-prose {
  color: var(--text-primary-light);
  font-weight: 500;
}

/* ============================================================================
   41  THE INDIVIDUAL ARTICLE PAGE                              (2026-08-20, D)
   ----------------------------------------------------------------------------
   Red1's article-prototype brief: one reusable article design for ニュース 255,
   セミナー・イベント 256 and リリースノート 253, built on the Enterprise Hub
   design system, "reading-oriented and restrained", and explicitly NOT Product
   Design V2. Nothing here imports a `lb-v2-*` component; every colour, radius,
   hairline and space below is an existing `--ds-*` / `--hub-*` token or an
   existing frozen literal (#A8500F on light, the AA-safe orange).

   SCOPE. Everything is `#top .lb-ds.lb-dsr .lb-article…`, and `.lb-article`
   is emitted only by lb-article.php, which runs only for the whitelisted
   prototype Post. No other page, Post or archive on this install can reach a
   single rule in this block.

   WHAT IS NEW HERE AND WHY. Four things the design system had no component for,
   because until now nothing on this site was long-form:
     41.2  a header meta row (publication date, event status)
     41.3  a featured-media figure at editorial width
     41.4  BODY typography — the system's h2 is 36px, which is a section
           heading, not a heading inside 5,000 characters of reading text
     41.6  a compact related-articles list that is a list, not a card grid
   Everything else reuses `.lb-ds-crumbs`, `.lb-ds-eyebrow`, `.lb-ds-h1wide`,
   `.lb-ds-lead`, `.lb-ds-spec-k`, `.lb-ds-spec-v`, `.lb-ds-pill`,
   `.lb-ds-more`, `.lb-ds-arrow`, `.lb-btnrow` and the `lb-ds-light` /
   `lb-ds-cont` / `lb-ds-close` surfaces unchanged.
   ========================================================================= */

/* 41.1 ------------------------------------------- the hand-emitted wrapper
   lb-article.php reproduces Enfold's `av_section` wrapper by hand (the
   shortcode is stateful and cannot be called outside an ALB page). On an ALB
   page Enfold's own stylesheet supplies the column behaviour of
   `.template-page.content`; here these three declarations stand in for it, so
   the section background cannot end short of its content and no float leaks. */
#top .lb-article .template-page.content {
  display: block;
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
}
#top .lb-article .post-entry,
#top .lb-article .entry-content-wrapper { margin: 0; }
#top .lb-article .flex_column.av_one_full { width: 100%; margin: 0; }

/* 41.2 ---------------------------------------------------- article header */
#top .lb-ds.lb-dsr .lb-article-title h1 { margin: 0; }

/* Publication date, and event status when the article itself states one. In the
   hero the `.lb-ds-spec-k` / `.lb-ds-spec-v` pair already resolves to
   --text-muted-dark / --text-primary-dark, so no colour is restated. The rule
   above it is --border-navy, the same hairline the 事業基盤 footnote uses. */
#top .lb-ds.lb-dsr .lb-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s6);
  margin: var(--hub-half) 0 0;
  padding: var(--ds-s4) 0 0;
  border-top: 1px solid var(--border-navy);
  list-style: none;
}
#top .lb-ds.lb-dsr .lb-article-meta > li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
#top .lb-ds.lb-dsr .lb-article-meta .lb-ds-spec-v { line-height: 1.7; }
#top .lb-ds.lb-dsr .lb-article-hero .lb-ds-lead { margin: var(--ds-s5) 0 0; max-width: 46em; }

/* 41.3 ---------------------------------------------------- featured media
   Capped at --ds-reading, the same token /about/'s 会社紹介ビデオ uses, so framed
   media across the Company family shares one editorial width. Left-aligned:
   no auto margins. --ds-radius-media and the --border-light hairline are the
   established treatment. Absent a featured image the figure is not emitted at
   all — there is no placeholder rule here to find. */
#top .lb-ds.lb-dsr .lb-article-media {
  margin: 0 0 var(--hub-half);
  max-width: var(--ds-reading);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
  overflow: hidden;
  line-height: 0;
}
#top .lb-ds.lb-dsr .lb-article-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
#top .lb-ds.lb-dsr .lb-article-media figcaption {
  padding: var(--ds-s3) var(--ds-s4);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary-light);
  background: var(--surface-white);
  border-top: 1px solid var(--border-light);
}

/* 41.4 ------------------------------------------------------ article body
   The measure is --ds-reading (780px), which at 17px is ~46 Japanese em — the
   same measure `.lb-ds-lead` already holds itself to. `.lb-ds-prose` was the
   near-miss: it is 52em, which is a 900px line and too long to track for five
   thousand characters.

   The heading scale is the system's, stepped down for reading: the DS section
   h2 is 36px and h3 24px, which inside body text read as page headings rather
   than as structure within an argument. 26 / 19 keeps the same weights, the
   same font stack and the same Japanese line-breaking, at a body-text rhythm.
   A hairline above each H2 does the scanning work a large size would. */
#top .lb-ds.lb-dsr .lb-article-prose {
  margin: 0;
  max-width: var(--ds-reading);
}
#top .lb-ds.lb-dsr .lb-article-prose > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#top .lb-ds.lb-dsr .lb-article-prose > :last-child { margin-bottom: 0; }

#top .lb-ds.lb-dsr .lb-article-prose p {
  margin: 0 0 var(--ds-s5);
  font-size: 17px;
  line-height: 2;
}
#top .lb-ds.lb-dsr .lb-article-prose h2 {
  margin: var(--hub-half) 0 var(--ds-s4);
  padding-top: var(--ds-s5);
  border-top: 1px solid var(--border-light);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 600;
}
#top .lb-ds.lb-dsr .lb-article-prose h3 {
  margin: var(--ds-s6) 0 var(--ds-s3);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 600;
}
#top .lb-ds.lb-dsr .lb-article-prose h4 {
  margin: var(--ds-s5) 0 var(--ds-s3);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 600;
}
#top .lb-ds.lb-dsr .lb-article-prose h2 + h3,
#top .lb-ds.lb-dsr .lb-article-prose h3 + h4 { margin-top: var(--ds-s4); }

/* Lists. The marker is the light-surface orange, which is the system's one
   decorative accent; it carries no information, so it is not held to 4.5:1. */
#top .lb-ds.lb-dsr .lb-article-prose ul,
#top .lb-ds.lb-dsr .lb-article-prose ol {
  margin: 0 0 var(--ds-s5);
  padding-left: 1.5em;
}
#top .lb-ds.lb-dsr .lb-article-prose ul { list-style: disc; }
#top .lb-ds.lb-dsr .lb-article-prose ol { list-style: decimal; }
#top .lb-ds.lb-dsr .lb-article-prose li {
  margin: 0 0 var(--ds-s2);
  font-size: 17px;
  line-height: 2;
}
#top .lb-ds.lb-dsr .lb-article-prose li > ul,
#top .lb-ds.lb-dsr .lb-article-prose li > ol { margin: var(--ds-s2) 0 0; }
#top .lb-ds.lb-dsr .lb-article-prose li::marker { color: #A8500F; }

/* Links. An underline is the editorial convention inside running text, and it
   is what stops a link being carried by colour alone. The colour itself is the
   light-surface #A8500F already set by the design system. */
#top .lb-ds.lb-dsr .lb-article-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#top .lb-ds.lb-dsr .lb-article-prose a:hover { text-decoration-thickness: 2px; }

/* Body images. Gutenberg emits width/height attributes; max-width:100% plus
   height:auto is what keeps a 1672px source inside a 780px measure. */
#top .lb-ds.lb-dsr .lb-article-prose figure,
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-image {
  margin: var(--ds-s6) 0;
  max-width: 100%;
}
#top .lb-ds.lb-dsr .lb-article-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
}
#top .lb-ds.lb-dsr .lb-article-prose figcaption {
  margin: var(--ds-s3) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary-light);
}
/* Gutenberg's wide/full alignments would escape the reading measure. */
#top .lb-ds.lb-dsr .lb-article-prose .alignwide,
#top .lb-ds.lb-dsr .lb-article-prose .alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

/* Tables. Same ink as `.lb-ds-table` on a light surface; the scroll lives on
   Gutenberg's own figure wrapper so a wide table scrolls itself instead of the
   page. */
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#top .lb-ds.lb-dsr .lb-article-prose table {
  width: 100%;
  max-width: 100%;
  margin: var(--ds-s6) 0;
  border-collapse: collapse;
}
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-table table { margin: 0; }
#top .lb-ds.lb-dsr .lb-article-prose th,
#top .lb-ds.lb-dsr .lb-article-prose td {
  padding: var(--ds-s3) var(--ds-s4);
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  vertical-align: top;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-article-prose thead th {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A8500F;
}
#top .lb-ds.lb-dsr .lb-article-prose tbody th {
  font-weight: 600;
  color: var(--text-primary-light);
}

/* Cells must be allowed to shrink. Without this a table's min-content width is
   the sum of its longest unbreakable words, and a wrapper-less table (classic
   -editor content, which has no `figure.wp-block-table` to scroll inside)
   measured 379px against a 318px column at 390 -- and was CLIPPED, not
   scrolled, because an Enfold ancestor carries overflow:hidden. `anywhere`
   matches what the design system already does for p and li. */
#top .lb-ds.lb-dsr .lb-article-prose th,
#top .lb-ds.lb-dsr .lb-article-prose td {
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}

/* Embedded video. 16:9 by aspect-ratio rather than a padding hack, framed the
   same way as every other media slot in the family. */
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-embed {
  margin: var(--ds-s6) 0;
  max-width: var(--ds-reading);
}
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-embed__wrapper { max-width: 100%; }
#top .lb-ds.lb-dsr .lb-article-prose iframe,
#top .lb-ds.lb-dsr .lb-article-prose video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
}

#top .lb-ds.lb-dsr .lb-article-prose blockquote {
  margin: var(--ds-s6) 0;
  padding: 0 0 0 var(--ds-s5);
  border-left: 2px solid var(--brand-orange);
  background: transparent;
}
#top .lb-ds.lb-dsr .lb-article-prose pre {
  margin: var(--ds-s6) 0;
  padding: var(--ds-s4);
  overflow-x: auto;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 1.8;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-card);
}
#top .lb-ds.lb-dsr .lb-article-prose code { font-family: var(--ds-font-mono); font-size: 0.92em; }
#top .lb-ds.lb-dsr .lb-article-prose hr {
  margin: var(--hub-half) 0;
  border: 0;
  border-top: 1px solid var(--border-light);
}

/* 41.5 ----------------------------------------------- contextual navigation
   One certain link plus at most one the article itself supplies. A hairline and
   a row of `.lb-ds-more` links — no button, no panel, no card. */
#top .lb-ds.lb-dsr .lb-article-navlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s7);
  margin: 0;
  padding: var(--ds-s5) 0 0;
  border-top: 1px solid var(--border-light);
  list-style: none;
  max-width: var(--ds-reading);
}
#top .lb-ds.lb-dsr .lb-article-navlist > li { margin: 0; }
#top .lb-ds.lb-dsr .lb-article-navlist .lb-ds-more {
  display: inline-flex;
  gap: var(--ds-s2);
  align-items: baseline;
  font-size: 15px;
  text-decoration: none;
}
#top .lb-ds.lb-dsr .lb-article-navlist .lb-ds-more .lb-ds-arrow {
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr .lb-article-navlist .lb-ds-more:hover .lb-ds-arrow,
#top .lb-ds.lb-dsr .lb-article-navlist .lb-ds-more:focus-visible .lb-ds-arrow {
  transform: translateX(3px);
}

/* 41.6 -------------------------------------------------- related articles
   A linked list, not a card grid: Red1, "Avoid creating another large Hub-like
   card grid inside an article." `min-width: 0` on the text column is the block
   38 lesson — without it a long Japanese title refuses to wrap inside a grid
   track and pushes the arrow off the section. */
#top .lb-ds.lb-dsr .lb-article-rel .lb-ds-eyebrow { margin: 0 0 var(--ds-s4); }
#top .lb-ds.lb-dsr .lb-article-rellist {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--ds-reading);
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-article-rellist > li {
  margin: 0;
  border-bottom: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr a.lb-article-relrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-s4);
  align-items: baseline;
  padding: var(--ds-s4) 0;
  text-decoration: none;
}
#top .lb-ds.lb-dsr .lb-article-reltext { display: block; min-width: 0; }
#top .lb-ds.lb-dsr .lb-article-reldate {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-article-reltitle {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--text-primary-light);
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}
#top .lb-ds.lb-dsr a.lb-article-relrow .lb-ds-arrow {
  color: #A8500F;
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}
#top .lb-ds.lb-dsr a.lb-article-relrow:hover .lb-article-reltitle,
#top .lb-ds.lb-dsr a.lb-article-relrow:focus-visible .lb-article-reltitle { color: #A8500F; }
#top .lb-ds.lb-dsr a.lb-article-relrow:hover .lb-ds-arrow,
#top .lb-ds.lb-dsr a.lb-article-relrow:focus-visible .lb-ds-arrow { transform: translateX(3px); }

/* 41.7 ------------------------------------------------------ closing panel
   The heading is a bare <h2>, so the design system's own closing-statement rule
   (`clamp(30px, 3vw, 52px)`, 24em, balanced) already owns it; only centring is
   added, which av_heading's alignment attribute would otherwise have supplied. */
#top .lb-ds.lb-dsr .lb-article-close .entry-content-wrapper { text-align: center; }
#top .lb-ds.lb-dsr .lb-article-close .lb-article-closeh { margin: 0 auto; }

/* 41.8 ---------------------------------------------------------- responsive */
@media only screen and (max-width: 1120px) {
  /* TWO ids, not one. `#top #wrap_all .lb-ds .entry-content-wrapper h2` is the
     design system's 30px section-heading step for this band and it is (2,3,0);
     a (1,4,0) rule loses to it, which is how the body H2 measured 30px between
     768 and 1120 on the first render of this block. */
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose h2 { font-size: 24px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose h3 { font-size: 19px; }
}

@media only screen and (max-width: 767px) {
  /* The backstop for a wrapper-less table. `display:block` turns the table into
     a scroll container whose inner anonymous table box may exceed it, so a
     table too wide for the column scrolls itself instead of being clipped by
     the ancestor overflow. Gutenberg tables already scroll inside their own
     `figure.wp-block-table`; this covers everything else. */
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose p,
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose li {
    font-size: 16px;
    line-height: 1.95;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose h2 { font-size: 22px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose h3 { font-size: 18px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose h4 { font-size: 16px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose th,
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose td { font-size: 14px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-meta { gap: var(--ds-s5); }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-navlist {
    flex-direction: column;
    gap: var(--ds-s4);
  }
}

@media only screen and (max-width: 600px) {
  /* 16px / 1.95 is the floor for this measure: at 390 the line holds ~21
     Japanese characters, which is the readable band for body text. Nothing here
     goes below 16px, and the mono date stays at 12px. */
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose h2 { font-size: 21px; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose ul,
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose ol { padding-left: 1.3em; }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-media { margin-bottom: var(--hub-half); }
  #top #wrap_all .lb-ds.lb-dsr .lb-article-reltitle { font-size: 15px; }
  #top #wrap_all .lb-ds.lb-dsr a.lb-article-relrow { padding: var(--ds-s3) 0; }
}

/* ============================================================================
   42  ARTICLE PAGE — round F revisions                        (2026-08-20, F)
   ----------------------------------------------------------------------------
   Red1: centre the editorial reading column; strengthen the related-article
   title; make the break between 「ニュース・イベント一覧へ」 and the related list
   clearer; and give the header its event-metadata row. Block 41 is otherwise
   unchanged — nothing here widens the measure past `--ds-reading`, adds a
   sidebar, a sticky TOC or anything else to occupy the right-hand side.
   ========================================================================= */

/* 42.1 ------------------------------------------- centre the editorial column
   The reading column was anchored to the container's left edge, which at 1440
   left 552px of empty ground to its right. Centring is done ONCE, on the single
   `.flex_column` each article section contains, rather than per element — that
   way the featured figure, the prose, the contextual nav, and the related
   eyebrow and list all share one axis instead of four. Block 41.1 sets
   `margin: 0` on this column; these rules come later in the file and win at
   equal specificity.

   The hero is deliberately NOT centred. It is the page header and stays on the
   family's full-width axis, exactly like every hub hero on the site.

   Text alignment is untouched — the column moves, the text stays flush left. */
#top .lb-article-main .flex_column.av_one_full,
#top .lb-article-nav .flex_column.av_one_full,
#top .lb-article-rel .flex_column.av_one_full {
  /* `float: none` FIRST. Enfold floats `.flex_column` left, and auto margins do
     nothing to a floated box -- measured 2026-08-20: with the auto margins alone
     the column stayed at the container's left edge, 114px, at 1440. */
  float: none;
  max-width: var(--ds-reading);
  margin-left: auto;
  margin-right: auto;
}

/* With the column itself now capped and centred, the inner caps from block 41
   are redundant. Left at 100% so nothing double-constrains and no element can
   end up narrower than the column it sits in. */
#top .lb-ds.lb-dsr .lb-article-media,
#top .lb-ds.lb-dsr .lb-article-prose,
#top .lb-ds.lb-dsr .lb-article-navlist,
#top .lb-ds.lb-dsr .lb-article-rellist,
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-embed { max-width: 100%; }

/* 42.2 ------------------------------------------------ header metadata rows
   For an event the header carries 開催日 / 開催形式 / 受付状況 from explicit
   metadata, and the publication date follows as secondary — Red1: the
   publication date "must not be the primary date shown to users for an event".
   Subordinated by ink, not by hiding it: the same 11px mono key, one step down
   in value contrast. */
#top .lb-ds.lb-dsr .lb-article-meta > li.lb-article-meta-sub .lb-ds-spec-v {
  color: var(--text-muted-dark);
}
#top .lb-ds.lb-dsr .lb-article-meta > li.lb-article-meta-sub .lb-ds-spec-k {
  color: var(--text-muted-dark);
  opacity: 0.85;
}

/* The pill sits on the value baseline of its neighbours rather than at the top
   of a taller row. */
#top .lb-ds.lb-dsr .lb-article-meta .lb-ds-pill { margin-top: 1px; }

/* 42.3 --------------------------------- separation before the related section
   The contextual nav and the related list were adjacent continuation sections,
   so only the related list's own top border marked the change of purpose. The
   related section keeps `lb-ds-cont` (no full section gap) but takes back a
   half-step of top padding. TWO ids: the rule it overrides,
   `#top #wrap_all .lb-ds.lb-ds-light.lb-ds-cont { padding-top: 0 }`, is
   (2,3,0). */
#top #wrap_all .lb-ds.lb-dsr.lb-article-rel { padding-top: var(--hub-half); }

/* 42.4 ------------------------------------------------ related-article list
   Red1: "slightly stronger article-title contrast/weight; dates remain visually
   subordinate; retain the arrow." Weight 500 → 600 and the row gains a little
   height; the date keeps its 12px mono in `--text-secondary-light`, and the
   arrow is untouched. Still a list — not converted to cards. */
#top .lb-ds.lb-dsr .lb-article-reltitle {
  font-weight: 600;
  color: var(--text-primary-light);
}
#top .lb-ds.lb-dsr a.lb-article-relrow { padding: var(--ds-s5) 0; }
#top .lb-ds.lb-dsr .lb-article-reldate { margin-bottom: 2px; }

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr a.lb-article-relrow { padding: var(--ds-s4) 0; }
}

/* ============================================================================
   43  ARTICLE PAGE — the two technical prototypes                (2026-08-21)
   ----------------------------------------------------------------------------
   Red1: one prototype each for 設計・解析ガイド and 技術ノート, on the same approved
   Enterprise article design as the セミナー・イベント prototype. That design needed
   exactly one correction to carry technical articles, and it is a correction the
   event prototype benefits from too.

   No new component. No change to the hero, the reading measure, the body
   typography, the related list or the ClosingPanel — those are shared, and the
   only per-category differences are in PHP (breadcrumb parent, archive link,
   closing copy), not in CSS.
   ========================================================================= */

/* 43.1 ------------------------------------ a featured image is never upscaled
   Block 41.3 set `width: 100%` on the featured image, which is right for a
   source wider than the measure and wrong for one narrower: 4578's featured
   image is 703 x 333 and was being stretched to 780 wide, and 9741's is
   147 x 133, which would have been blown up more than five times.

   `fit-content` on the figure plus `width: auto` on the image makes the frame
   shrink to whatever the source actually is, still capped at the reading
   measure by the `max-width: 100%` block 42.1 already sets. A 1730px source
   (10286) still fills the column; a 703px one (4578) sits at 703 and stays
   sharp. The radius, the hairline and the left alignment are untouched. */
#top .lb-ds.lb-dsr .lb-article-media {
  width: fit-content;
}
#top .lb-ds.lb-dsr .lb-article-media img {
  width: auto;
}

/* 43.2 ---------------------------------------------- body figures and captions
   Technical articles are figure-dense — 19 images in 10286, 10 in 4578 — and
   Gutenberg emits most of them as `figure.wp-block-image` with a caption. Block
   41.4 already caps and frames them; these two rules only stop a narrow figure
   from stretching its caption across the full measure, so the caption tracks
   the image it belongs to rather than the column. */
#top .lb-ds.lb-dsr .lb-article-prose figure.wp-block-image {
  width: fit-content;
  max-width: 100%;
}
#top .lb-ds.lb-dsr .lb-article-prose figure.wp-block-image > figcaption {
  max-width: 100%;
}

/* 43.3 -------------------------------------------------- consecutive headings
   A reference article stacks H2 immediately onto the previous section's last
   line more often than a news post does. Block 41.4 gives every H2 a hairline
   and `--hub-half` of space above; where an H2 follows a figure rather than a
   paragraph, the figure's own bottom margin was doubling that gap. */
#top .lb-ds.lb-dsr .lb-article-prose figure + h2,
#top .lb-ds.lb-dsr .lb-article-prose .wp-block-table + h2 {
  margin-top: var(--ds-s6);
}

/* 43.4 ------------------------- legacy inline presentation inside the prose
   The three prototype bodies are real historical content and are not being
   rewritten, so whatever the old editor stamped into them arrives with them.
   Two of those stamps fight the approved article design rather than the
   content, and both are corrected here in CSS so the post bodies stay
   untouched and the correction is reversible by deleting these rules.

   43.4a — hard-coded body size.
   10286 carries `style="color:#072c50;font-size:16px"` on 29 elements, so its
   body copy rendered a step smaller than 4578's on the same template: 16px
   against the design's 17px, at every width above the small-screen tier. The
   reading size belongs to the design, not to a 2019 paste, so the inline value
   is overridden back onto the design's own scale. The two custom properties
   exist only so the desktop and small-screen values are declared once each and
   track block 41.4's own pair.

   Nothing here touches Post 19384: its inline styles set colour only, carry no
   `font-size`, and so match no selector below. */
#top .lb-ds.lb-dsr .lb-article-prose {
  --lb-art-read: 17px;
  --lb-art-lh: 2;
}
#top .lb-ds.lb-dsr .lb-article-prose p[style*="font-size"],
#top .lb-ds.lb-dsr .lb-article-prose li[style*="font-size"],
#top .lb-ds.lb-dsr .lb-article-prose span[style*="font-size"] {
  font-size: var(--lb-art-read) !important;
  line-height: var(--lb-art-lh) !important;
}

/* 43.4b — the legacy accent orange.
   4578 sets four H2s to the old brand orange `#ec7628`, which measures 2.92:1
   against the light surface. That is below 3:1, so it fails AA even at large
   text size — which is exactly why this design system carries `#A8500F` (5.50:1)
   as its accent instead. The heading keeps the author's intent, an accented
   heading, at a contrast the rest of the site already meets.

   Scoped to the legacy value and its Gutenberg preset class, so it corrects
   this stamp and nothing else. Post 19384's one coloured run is
   `has-vivid-red-color` (#cf2e2e, 5.14:1) and already passes; it is not
   matched here and is left as approved. */
#top .lb-ds.lb-dsr .lb-article-prose .has-col-ec-7628-color,
#top .lb-ds.lb-dsr .lb-article-prose [style*="#ec7628"],
#top .lb-ds.lb-dsr .lb-article-prose [style*="#EC7628"] {
  color: #A8500F !important;
}

@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-article-prose {
    --lb-art-read: 16px;
    --lb-art-lh: 1.95;
  }
}

/* ============================================================================
   44  EVENT LISTING — the multi-day date column                   (2026-08-21)
   ----------------------------------------------------------------------------
   Red1: 「2026年7月15日・16日」 must stay on one line at desktop widths, without
   reducing the date font size and without losing the mobile stack.

   Block 38.2 gives every `.lb-ds-tilist` row `grid-template-columns: 8.5em
   minmax(0, 1fr)`. The row's own font-size is 13px, so that column is 110.5px —
   enough for every single-day date (the widest, 2024年11月14日, measures 104.3px)
   and short of the two-day form, which measures 138.9px and wrapped to two
   lines.

   Scoped to `.lb-ifcat-256`, the section class the event listing already carries.
   That is the only listing that can hold a multi-day date, so the ニュース and
   リリースノート sections on this page and the approved 技術ノート / リリースノート
   archives keep block 38's column exactly as it is.

   11em = 143px at the row's 13px: the measured 138.9px plus 4px of slack. (A
   first pass at 10.5em/136.5px still wrapped by 2.4px — the numbers above are
   Range.getBoundingClientRect() on the live node, not an estimate.) The date font-size, the row padding, the hairlines,
   the column gap and the title column's `minmax(0, 1fr)` are all untouched — the
   33px comes out of the title column, which is 1004px wide at 1440.
   ========================================================================= */

#top .lb-ds.lb-dsr.lb-ifcat-256 .lb-ds-tilist article.slide-entry {
  grid-template-columns: 11em minmax(0, 1fr);
}

/* The ≤600 stack in block 38.2 is `#top #wrap_all …` (2,4,1) and already
   outranks the rule above (1,5,1), so the single-column mobile layout needs
   nothing here. This comment exists so the next reader does not "fix" a
   collision that cannot happen. */

/* ============================================================================
   45  ARTICLE PAGE — TOC sidebar, wide media, pillar links      (2026-08-21, J)
   ----------------------------------------------------------------------------
   Red1, round J: a sticky left table of contents for the long technical
   categories, an opt-in wider treatment for detailed media, and grouped pillar
   links. Nothing here touches the hero, the event metadata rows, the related
   list, the ClosingPanel, global typography or any --ds-* / --hub-* token.

   THE BREAKPOINT IS 1320px, AND IT IS ARITHMETIC, NOT TASTE. Enfold's content
   column is `container - 100`, and the container is ~90% of the viewport.
   Measured on this install:

     viewport   container   content   content - (240 + 44)
     1600       1440        1340      1056
     1440       1296        1196       912
     1320       1188        1088       804
     1300       1170        1070       786
     1200       1080         980       696   <-- 780px measure no longer fits
     1120       1008         908       624

   So 1320 is the narrowest width at which a 240px TOC, a 44px gap and the
   approved 780px reading measure all fit with room to spare. Below it the same
   TOC element becomes the collapsible block above the body rather than squeezing
   the prose, because Red1 protected the measure explicitly. `lb-article-toc.js`
   reads the same 1320.
   ========================================================================= */

/* 45.0 ------------------------------------------------------------- locals
   New, namespaced properties. No existing token is redefined.
   --lb-toc-offset is where a heading lands after a jump and where the sticky
   sidebar parks: Enfold's header is `position: fixed` and measures 77px on this
   install, plus a step of breathing room. lb-article-toc.js reads this same
   property so the scroll-spy threshold cannot drift from the landing offset. */
:root {
  --lb-toc-offset: 104px;
  --lb-toc-w: 240px;
  --lb-toc-gap: 44px;
  --lb-wide: 1040px;
}

/* 45.1 --------------------------------------------- where an anchor lands
   Without this every jump parks the heading underneath the fixed header. */
#top .lb-ds.lb-dsr .lb-article-prose h2,
#top .lb-ds.lb-dsr .lb-article-prose h3 {
  scroll-margin-top: var(--lb-toc-offset);
}

/* 45.2 --------------------------------------------------------- the TOC itself
   One element, two presentations. Below the breakpoint it is a compact
   collapsible band above the article; above it, the sticky sidebar. Everything
   common to both lives here. */
#top #wrap_all .lb-ds.lb-dsr .lb-article-toc {
  margin: 0;
  font-family: var(--ds-font-sans);
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s4);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary-light);
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-head:disabled {
  cursor: default;
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-title {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary-light);
}

/* The chevron is only meaningful while the panel can actually be toggled, so it
   is absent on the disabled desktop button rather than decoratively inert. */
#top #wrap_all .lb-ds.lb-dsr .lb-toc-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #A8500F;
  border-bottom: 1.5px solid #A8500F;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--ds-dur-fast) var(--ds-ease);
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-head:disabled .lb-toc-chevron {
  display: none;
}

#top #wrap_all .lb-ds.lb-dsr .lb-article-toc[data-lb-open="1"] .lb-toc-chevron {
  transform: rotate(-135deg);
}

/* The list, and the subtle vertical rule it hangs off. Each row carries its own
   2px left edge over that hairline, transparent until the row is the current
   section — so the rule stays quiet and the indicator is the only accent. */
#top #wrap_all .lb-ds.lb-dsr .lb-toc-list {
  margin: var(--ds-s4) 0 0;
  padding: 0 0 0 1px;
  list-style: none;
  border-left: 1px solid var(--border-light);
}

#top #wrap_all .lb-ds.lb-dsr .lb-article-toc[data-lb-open="0"] .lb-toc-list {
  display: none;
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-item::before {
  display: none;
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-item > a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px calc(var(--ds-s4) + 2px);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  color: var(--text-secondary-light);
  transition: color var(--ds-dur-fast) var(--ds-ease),
              border-color var(--ds-dur-fast) var(--ds-ease);
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-item > a:hover {
  box-shadow: inset 2px 0 0 0 var(--border-light);
  text-decoration: none;
}

/* H2 is a primary entry, H3 a subordinate one: one indent step, one size step
   down, and no indicator of its own. Red1 asked for the current H2 section. */
#top #wrap_all .lb-ds.lb-dsr .lb-toc-l2 > a {
  font-weight: 500;
  color: var(--text-primary-light);
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-l3 > a {
  padding-left: var(--ds-s6);
  font-size: 12px;
}

/* THE INDICATOR IS A BOX-SHADOW, NOT A COLOUR, AND THAT IS DELIBERATE.
   `color` and `border-left-color` on a link inside Enfold's `.sidebar` could
   not be won on this install: a rule with two ids and four classes lost to
   Enfold even with !important, while `background-color`, `box-shadow`,
   `font-weight` and `::before` on the same selector all applied first time.
   Tested, not assumed. So the current-section marker is an inset 2px bar in
   the design system's AA-safe orange, which lands exactly where the
   transparent border used to sit, plus one step of weight. Nothing about the
   accent colour or its placement changes; only the property carrying it. */
#top #wrap_all .lb-ds.lb-dsr .lb-toc-l2 > a.is-current {
  box-shadow: inset 2px 0 0 0 #A8500F;
  font-weight: 600;
  background-color: rgba(168, 80, 15, 0.05);
}

/* 45.3 ------------------------------------- below 1320: collapsible, above body
   The aside is the first child of the section container, so with the grid off it
   simply stacks above the article. Same element, same anchors, no second copy. */
#top #wrap_all .lb-ds.lb-dsr .lb-article-side {
  float: none;
  /* Enfold hides `.sidebar` outright on the smallest screens, which took the
     whole table of contents with it at 390. Restated here because the TOC is not
     a widget area that can be dropped on a phone -- it is the article's own
     navigation, and Red1 asked for it at every width. */
  display: block;
  /* border-box so the collapsed panel lines up with the 780px measure exactly:
     content-box put its padding and border OUTSIDE the cap and it measured 830. */
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ds-reading);
  margin: 0 auto var(--hub-half);
  padding: var(--ds-s4) var(--ds-s5);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-ctl);
  background: transparent;
}

#top #wrap_all .lb-ds.lb-dsr .lb-toc-title-wide {
  display: none;
}

/* 45.4 --------------------------------------- the reading measure, restated
   Above the breakpoint the article column fills its grid cell and the 780px cap
   moves from the column onto the blocks inside it. That is what lets ONE flagged
   figure exceed the measure while every other block keeps it — and the geometry
   is unchanged for everything else: a block centred in a 1196px column at 780px
   wide sits exactly where a 780px column centred in 1196px used to. Verified by
   measurement on the event draft, which has no TOC and no wide media. */
@media only screen and (min-width: 1320px) {
  /* `position: sticky` needs its nearest scrolling ancestor to be the page.
     Enfold sets `overflow: hidden` on #wrap_all site-wide, which makes THAT
     the scroll container: the sidebar then sticks to an element that never
     scrolls, so it just rides up with the article. Measured, not guessed.
     Restated only under the article body class, so this reaches the five
     whitelisted pilot Posts and nothing else on the site. */
  html body.lb-article-page,
  html body.lb-article-page #wrap_all {
    /* `clip` clamps horizontally exactly as `hidden` did but does NOT create a
       scroll container, which is the whole reason sticky was dead: body and
       #wrap_all both computed `hidden auto`, so the sidebar was sticking to a
       box that never scrolls. */
    overflow-x: clip;
    overflow-y: visible;
  }

  #top .lb-article-main .flex_column.av_one_full {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* COMPOUND, not descendant: .lb-article-main sits on the same element as
     .lb-ds.lb-dsr, so a space here would ask for a descendant that does not
     exist and the rule would never match. It did not, first time round. */
  #top .lb-ds.lb-dsr.lb-article-main .lb-article-media,
  #top .lb-ds.lb-dsr.lb-article-main .lb-article-prose > *:not(.lb-article-wide) {
    max-width: var(--ds-reading);
    margin-left: auto;
    margin-right: auto;
  }

  /* 45.5 ------------------------------------- Enfold's left-sidebar structure
     The aside and the content column carry Enfold's own `.sidebar.sidebar_left`
     and `.av-content-small` classes, so the theme's rules sit underneath these;
     grid replaces its floats because a float cannot be `position: sticky` and
     because auto margins cannot centre one (block 42.1 learned that already). */
  #top .lb-ds.lb-dsr.lb-article-hastoc > .container {
    display: grid;
    grid-template-columns: var(--lb-toc-w) minmax(0, 1fr);
    column-gap: var(--lb-toc-gap);
    align-items: start;
  }

  #top .lb-ds.lb-dsr.lb-article-hastoc > .container > .sidebar,
  #top .lb-ds.lb-dsr.lb-article-hastoc > .container > .content {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* With a TOC the prose is left-aligned inside its column, per Red1, so the
     measure sits against the gap rather than drifting to the middle. */
  #top .lb-ds.lb-dsr.lb-article-hastoc .lb-article-media,
  #top .lb-ds.lb-dsr.lb-article-hastoc .lb-article-prose > *:not(.lb-article-wide) {
    margin-left: 0;
    margin-right: auto;
  }

  #top #wrap_all .lb-ds.lb-dsr .lb-article-side {
    position: sticky;
    top: var(--lb-toc-offset);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    max-height: calc(100vh - var(--lb-toc-offset) - var(--ds-s5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #top #wrap_all .lb-ds.lb-dsr .lb-toc-title-wide {
    display: inline;
  }

  #top #wrap_all .lb-ds.lb-dsr .lb-toc-title-narrow {
    display: none;
  }

  /* 45.6 ---------------------------------------------- opt-in wider media
     Only an element an editor named in `lb_article_wide_media` gets here. It
     grows to `--lb-wide` or the column, whichever is smaller, and stays centred
     — the radius, the hairline and the caption all come from block 41/43 and are
     untouched, and because the caption lives inside the same figure it tracks
     the media width rather than the measure.

     Widening is a desktop affordance only. Below 1320 a flagged figure is an
     ordinary figure, which is what keeps "responsive shrinking" honest and means
     a wide table still scrolls inside itself on a phone via block 41's <=767
     rule rather than pushing the page sideways. */
  #top .lb-ds.lb-dsr .lb-article-prose > .lb-article-wide {
    width: min(var(--lb-wide), 100%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  #top .lb-ds.lb-dsr .lb-article-prose > .lb-article-wide img {
    width: 100%;
    height: auto;
  }
}

/* 45.7 ------------------------------------------------------- pillar links
   Grouped under the label of the hub each group points into, so a reader can
   tell a product from an analysis technology from a solution. The rows reuse
   `.lb-ds-more` exactly as the archive link above them does — no new link
   vocabulary — and the group label reuses the muted eyebrow. */
#top .lb-ds.lb-dsr .lb-article-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hub-half) var(--ds-s7);
  margin: var(--ds-s5) 0 0;
  padding: var(--ds-s5) 0 0;
  border-top: 1px solid var(--border-light);
}

#top .lb-ds.lb-dsr .lb-article-pillar {
  flex: 0 1 auto;
  min-width: 0;
}

#top .lb-ds.lb-dsr .lb-article-pillar-k {
  margin: 0 0 var(--ds-s3);
}

#top .lb-ds.lb-dsr ul.lb-article-pillar-l {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#top .lb-ds.lb-dsr ul.lb-article-pillar-l > li {
  margin: 0 0 2px;
  padding: 0;
  list-style: none;
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-article-pillars {
    flex-direction: column;
    gap: var(--ds-s5);
  }

  #top #wrap_all .lb-ds.lb-dsr .lb-article-side {
    padding: var(--ds-s4);
  }
}

/* ==========================================================================
   BLOCK 46 -- 会社情報 hub (1504): the OUR STORY founder band. 2026-08-22.

   ONE new section between 会社概要 and 事業基盤. Nothing else on 1504 moves:
   this block adds no selector that can reach the hero, the profile split, the
   video, the 事業基盤 strip, the news teaser, the navigation cards or the
   closing panel, and it changes no global token.

   WHAT IS REUSED RATHER THAN REBUILT -- almost all of it. The section is
   `.lb-ds-light.lb-ds-cont` (the design system's own continuation modifier,
   the same device the navigation group already uses so two stacked light
   bands read as one surface instead of two islands 128px apart), the head is
   `.lb-ds-head` + `.lb-ds-eyebrow` + a plain h2, the copy is three
   `.lb-ds-prose` paragraphs, the CTA is `.lb-ds-morewrap` + `.lb-ds-more` +
   `.lb-ds-arrow`, and the caption is `.lb-ds-small`.

   The two-column layout is `.lb-ds-band` -- the family's EXISTING 1fr/1fr
   copy-plus-media row (block 8), which carries the grid, the align-items,
   the `:first-of-type` border/padding reset and the `.lb-ds-band-copy`
   last-child and ArrowLink rules already. It is live on no published page on
   this install, so using it here cannot regress anything.

   WHY A MODIFIER IS STILL NEEDED. `.lb-ds-band` is 1fr/1fr, which at 1440
   hands the photo a 600px+ column. A 0.743 portrait in that column renders
   ~810px tall and dominates a section whose subject is the copy. Red1's brief
   is explicit: use the photo naturally, do not crop it aggressively, do not
   let it dominate. So the media track is FIXED and narrow and the copy track
   is fluid but held to the design system's own reading measure. Two tracks,
   no crop, no frame -- the asset is a cut-out with a real alpha channel, so
   the light section ground IS its background and a plate would be invented
   furniture.

   SPECIFICITY, deliberately low. 46.1 is (1,4,0), which is LESS than the
   family's own stacked rule `#top #wrap_all .lb-ds .lb-ds-band` at (2,3,0) --
   trap 6a in reverse, and deliberate: the desktop rule must never out-specify
   a stacking rule. 46.4 is therefore written at (2,5,0) so that it beats both,
   rather than raising 46.1.
   ========================================================================== */

/* 46.1 the band: fixed media track, fluid copy track held to --ds-reading.
   padding-bottom is zeroed because this is the only band in its section, so
   `.lb-ds-band`'s own --hub-half bottom pad would stack on top of the
   section's 64px and open a 112px gap above 事業基盤.

   ROUND L (2026-08-22, Red1): the media track went 320px -> 360px, a 12.5%
   step. The two-column structure, the 48px gutter, the copy cap, the vertical
   alignment and the mobile stack are all untouched -- the portrait simply
   fills a slightly wider left column. This costs section height at the widest
   widths and nowhere else: at 1280 and below the COPY is the taller of the two
   columns, so the band height is copy-governed and does not move at all; at
   1440 the portrait already governed it (477 against 471), so the section
   grows there by exactly what the portrait gains. Unavoidable -- any increase
   in a column that is already the tallest raises the row. Measured both sides. */
#top .lb-ds.lb-dsr .lb-ds-band.lb-ds-band-story {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: center;
  padding-bottom: 0;
}
#top .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-copy {
  max-width: var(--ds-reading);
}
/* `.lb-ds-prose` declares `margin: var(--ds-s5) 0 0`, which on the first
   paragraph pushes the copy block 24px out of centre against the photo. */
#top .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-copy > .lb-ds-prose:first-child {
  margin-top: 0;
}

/* 46.2 the portrait. No frame, no radius, no shadow: the asset is a cut-out
   with a transparent ground, and the section's own light surface is the
   correct backdrop for it. `max-width` and not `width` so the image can never
   exceed its natural 900px and can shrink with its track. */
#top .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-photo {
  margin: 0;
}
#top .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-photo-i {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}
/* 46.3 the attribution line. MEASURED, not assumed: `.lb-ds-small` inherits
   16px here -- its size is declared only inside `.lb-ds-navy` (block 40.2, the
   Ansys footnote), so on a light surface it arrives at body size and competes
   with the story copy beside it. The design system's `small` step is 13/1.55,
   so it is restated here rather than left to inheritance. Body face, not mono:
   a name and a job title are not a value, a parameter or a date. */
#top .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-cap {
  margin: var(--ds-s4) 0 0;
  max-width: 360px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary-light);
}

/* 46.4 <=1200: stack. The breakpoint is ARITHMETIC, not taste -- the same
   kind of number as block 45's 1320px TOC threshold, and MEASURED at 1121,
   1201, 1280 and 1440 rather than guessed.

   Above 1201 the container holds 360px of portrait (320px before round L), a
   48px gutter and a copy track of 673px or more, which is ~39 Japanese
   characters per line: the copy block then measures close to the portrait and
   the two columns read as a pair. At 1121 the copy track would be 501px, the
   line drops to ~29 characters, the copy grows to ~700px tall, and the
   portrait is left floating in a wide band of empty ground above and below it.
   Stacking is the honest answer in that range, not a smaller photo. The round
   L portrait increase narrows the copy track by 40px and so makes this
   threshold slightly MORE necessary, not less; it was re-measured, not assumed.

   This is deliberately EARLIER than `.lb-ds-band`'s own 767 collapse. gap and
   the stacked order are the family's existing behaviour; the only new value is
   the 240px cap, which keeps a portrait from becoming a full-width banner on a
   phone. Left-aligned, like every other element on the page. */
@media only screen and (max-width: 1200px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-band.lb-ds-band-story {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s5);
  }
  /* The --ds-reading cap STAYS when stacked. Released, the copy would run the
     full 1080px container at 1200 -- a 63-character Japanese line, well past
     the system 720-840px measure. Below 780 the cap simply stops binding. */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-photo-i,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-band-story .lb-ds-band-cap {
    max-width: 240px;
  }
}
/* ==========================================================================
   BLOCK 47 -- the continuation modifier must answer to what is ACTUALLY
   above it.                                                       2026-08-22

   THE BUG, on /about/news/ (19929). `セミナー・イベント` sat flush against the
   hero with NO top padding. Nothing was wrong with that section, and nothing
   was wrong with the hero. The cause is that two mechanisms disagree about
   which section is first:

     - `lb-ds-cont` is an AUTHORING decision, baked into post_content. It says
       "the band above me is the same tone, so drop my top padding and let the
       two read as one surface" (block 2, line 2082).
     - `lb-ifcat-<term>` is a RENDER-TIME decision. lb-hubsections.php deletes
       the whole section when its category holds no published Post.

   19929 is authored `hero > ニュース[ifcat255] > セミナー・イベント[CONT+ifcat256]
   > リリースノート[CONT+ifcat253] > cross > close`. Category 255 has no
   published Post, so the ニュース section is dropped -- and the CONT that was
   written to continue it is still there, now continuing the HERO. Measured
   live at 1440: `padding-top: 0px`, previous sibling `.lb-ds-hero`.

   WHY THIS IS THE RIGHT PLACE TO FIX IT. The defect is not in 19929's content:
   the authoring is correct for the page as authored, and re-authoring it would
   break again the moment a ニュース article is published and the section returns.
   It is not in lb-hubsections.php either -- `pre_do_shortcode_tag` can only
   short-circuit a section, not rewrite the attributes of the next one. It is a
   CSS conditional: `lb-ds-cont` should only take effect when there is really a
   same-tone band above. Expressed as the four tone changes plus the
   no-predecessor case, which between them cover every possibility (the family
   declares exactly five tones: hero, light, navy, char, close).

   NO ARBITRARY VALUE IS INTRODUCED. The restored padding is `--hub-sec`, the
   single section pad block 18 gave every tone in this family (64px, stepping
   to 44px at <=600). A repaired section therefore measures IDENTICALLY to the
   section it replaced -- 19929's セミナー・イベント now has exactly the padding
   ニュース would have had. Nothing is added to an eyebrow, an H2, a lead, a card
   or any other element, and no token is touched.

   SPECIFICITY. The sibling selectors are (2,5,0) and the `:first-child` one is
   (2,4,0); the rule they override, block 2's
   `#top #wrap_all .lb-ds.lb-ds-light.lb-ds-cont`, is (2,3,0). Both win.

   BLAST RADIUS: exactly one section on the install today. Audited all 53
   lb-ds pages / 419 rendered sections (accounting for lb-ifcat drops against
   live term counts): every other `lb-ds-cont` section genuinely follows a
   light section, so no selector here matches it. The article template is also
   safe by construction -- `.lb-article-nav` and `.lb-article-rel` both follow
   `lb-ds-light` sections, so block 42.3's `--hub-half` on `.lb-article-rel` is
   never out-specified by this block.
   ========================================================================== */
#top #wrap_all .lb-ds.lb-ds-hero  + .lb-ds.lb-ds-light.lb-ds-cont,
#top #wrap_all .lb-ds.lb-ds-navy  + .lb-ds.lb-ds-light.lb-ds-cont,
#top #wrap_all .lb-ds.lb-ds-char  + .lb-ds.lb-ds-light.lb-ds-cont,
#top #wrap_all .lb-ds.lb-ds-close + .lb-ds.lb-ds-light.lb-ds-cont,
#top #wrap_all .lb-ds.lb-ds-light.lb-ds-cont:first-child {
  padding-top: var(--hub-sec);
}

/* ============================================================================
   BLOCK 48 -- the サポート hub (page 1471, /support/). 2026-08-22, round S.

   SOURCE OF TRUTH. Composition comes from the approved `Support Hub.dc.html`.
   Service claims come from page 1471's own pre-rebuild body, which is approved
   site copy. Tokens, typography, colour, borders, radii, links, buttons and
   responsive rules come from the Enterprise Hub design system as shipped on
   19848 / 19797 / 19882 / 17675 / 1504.

   SCOPE, and why nothing here can reach another page. Every selector below
   requires `lb-dsr` PLUS one of five class names introduced by this block:
   `.lb-ds-spentry`, `.lb-ds-spjumps`, `.lb-ds-spnum`, `.lb-ds-spcards` and
   `.lb-ds-spaux`. All five were asserted absent from lb-redesign.css AND from
   the post_content of every post on the install before this block was written
   (0 occurrences each). Inertness here is STRUCTURAL, not a specificity
   argument: with the class absent, no selector below can match.

   THIS BLOCK IS SMALL ON PURPOSE. Nine of the eleven things the page needs
   already had a component, and each was checked against the prototype before
   being reused rather than reinvented:

     prototype              reused component                    match
     -------------------------------------------------------------------------
     .sp-entry group        .lb-ds-wcols / -wcol / -wnum /      number + title
                            -wtitle (hero ink from 40.1)
     .sp-entry jump links   .lb-ds-anchors                      mono 13px on navy
     .sp-cards (5)          .lb-ds-cards.lb-ds-cards-3          3/2/1
     .sp-aux rows           .lb-ds-slist / .lb-ds-srow          name | sum | arrow
     .sp-train (3 tiers)    .lb-ds-wcols on navy                3-up -> 1-up
     .sp-steps (3)          .lb-ds-cards.lb-ds-cards-3          3/2/1
     .sp-cross              .lb-ds-cross-eq + .lb-ds-xcard      1fr/1fr + ghost
     ClosingPanel           .lb-ds-close + .lb-btnrow           unchanged

   NOT USED, deliberately: `.lb-ds-pill` (see 48.3), `.lb-ds-table` /
   `.lb-ds-tscroll`, `.lb-ds-cont` (round P: a new semantic section must not
   start with insufficient top padding), the 技術情報 listing families, the
   Solutions / Solution-page anatomy, the Products and Lumerical hub product
   rows, and all of Product Design V2. `gen_supporthub.py` fails the build if
   any of them is emitted.
   ========================================================================= */

/* 48.1 ------------------------------------ the hero entry pair, two across
   The prototype's `.sp-entry` is `1fr 1fr` collapsing to one column at 1120.
   The family already collapses `.lb-ds-wcols` to one column at 1120 with a
   (2,3,0) rule, and that rule out-specifies this (1,4,0) modifier -- so the
   whole responsive half of the prototype's behaviour comes free and is NOT
   restated here. That is the opposite of 30.1's `.lb-ds-wcols-4`, which had to
   restate its 1120 case because it wanted TWO columns there, not one. */
#top .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-spentry {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 48.2 -------------------------- the jump links inside a hero entry column
   `.lb-ds-anchors` is the hub hero's jump row: mono 13px, secondary-dark ink,
   accent-orange hover, and an absolutely-positioned touch overlay. All of that
   is exactly right here and none of it is restated -- the only difference is
   that six links in two labelled groups read as two columns, not one wrapping
   row. So this turns the flex row into a flex column and gives up the row's
   own hairline and top step, which the enclosing `.lb-ds-wcol` already draws.

   THE OVERLAY INSET HAS TO FOLLOW THE GAP, and this is the load-bearing part.
   Block 16.3 sets `inset: -12px 0` on every anchor link and its comment says
   why that is safe: "Horizontal inset stays 0, so neighbours never overlap
   (the anchor row's gap is --ds-s6 = 32px)". In a COLUMN the inset is no longer
   horizontal, so 24px of overlay in a 16px gap would make each link's hit area
   cover its neighbour's, and a tap between two labels would land on the wrong
   one. At -8px the two overlays meet exactly and never cross.

   The gap is then restated at both stops the family touches `.lb-ds-anchors`
   at: (2,3,0) sets --ds-s4 below 767 and (2,4,0) sets --ds-s3 below 600 for the
   hero row. Neither would out-specify a bare (1,4,0) modifier, so both are
   answered at equal-or-higher specificity rather than by adding one more class
   -- the same discipline as 21.9 and 27.3. Below 600 the family also sets
   `flex-direction: column`, which is what this block already wants. */
#top .lb-ds.lb-dsr .lb-ds-anchors.lb-ds-spjumps {
  flex-direction: column;
  gap: var(--ds-s4);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
#top .lb-ds.lb-dsr .lb-ds-anchors.lb-ds-spjumps a::after {
  inset: -8px 0;
}

/* 48.3 -------------------------------- the card ordinal on a LIGHT surface
   `.lb-ds-pill` is the family's chip and it is the obvious thing to reach for
   here -- it is what the Solution page's step cards use. It is wrong on this
   page. Its own comment records the measurement: "#F39A55 on the 12% orange
   wash over #0C385F measures 4.9:1", i.e. it is specified for a NAVY card. Both
   card grids on this page are on `lb-ds-light`, where that pairing has no
   contrast at all.

   So the ordinal takes #A8500F, the frozen darker orange that clears 4.5:1 on a
   light ground (block 21.2), at the family's own counter size and weight --
   the same values `.lb-ds-wcol .lb-ds-wnum` uses, with the colour following the
   surface. This is the sixth instance of "a token has to follow its surface" in
   this stylesheet (30.3, 37.5, 40.1, 40.2, 27.3-navy, and the
   `.lb-ds-navy`/`.lb-ds-char` card override), and it is load-bearing, not
   cosmetic. `.lb-ds-wkick` already carries exactly this treatment but cannot be
   reused: it is scoped inside `.lb-ds-wcol` and there is no wcol in a card. */
#top .lb-ds.lb-dsr .lb-ds-spnum {
  font-family: var(--ds-font-mono);
  font-size: var(--hub-num);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #A8500F;
}

/* 48.4 --------------------------------------------- the two card grids
   FOURTH INSTANCE of the wpautop empty-paragraph defect (22.6 in
   `.lb-ds-ppanel-copy`, block 32 in `.lb-ds-spec` and `.lb-ds-wcol`, 37.7 in
   `.lb-ds-so-flow`). A card's first child is the inline ordinal span, so
   wpautop opens a paragraph for it, closes it before the <h3>, and leaves an
   empty <p> behind. `.lb-ds-card` is a flex column, so that paragraph is a real
   flex item worth its own margin plus one gap. Same remedy, same shape, scoped
   to this page's grids -- 37.7's rule cannot help, being scoped to
   `.lb-ds-so-flow`.

   The link row is then pinned to the card's bottom edge. `.lb-ds-cards-3`
   gives `.lb-ds-card-link` a plain top margin, so on five cards with unequal
   descriptions the five links land at five different heights. This is the same
   `margin: auto 0 0` that `.lb-ds-card-fam` already uses for the same reason,
   and (1,4,0) against that rule's (1,3,0). */
#top .lb-ds.lb-dsr .lb-ds-spcards .lb-ds-card > p:empty {
  display: none;
}
#top .lb-ds.lb-dsr .lb-ds-spcards .lb-ds-card-link {
  margin: auto 0 0;
  padding-top: var(--ds-s3);
}

/* 48.5 ------------------------------- あわせてご利用いただける支援
   A sub-tier inside the same band, exactly as the prototype draws it: a
   hairline, a quiet sub-label, then the rows. It is NOT a separate section --
   these three are a lower tier of the same answer, not a new question, and a
   section of its own would need an H2 this page has no approved copy for.

   The sub-label's ink is answered at (2,5,0). `.lb-ds-eyebrow-mute` was
   restated in block 20 to the same orange as a plain light eyebrow, which would
   make this read as a second section eyebrow; block 38 had the identical
   problem with `.lb-ds-tifoot` and this is that fix, scoped here.

   The label track is the 37.2 / 37.3 treatment, copied fallback-first.
   `.lb-ds-srow`'s base name track is `minmax(0, 300px)`, built for the
   Solutions Hub where the name is a product-length string; these three names
   are 7 to 12 characters, so without this the summaries start 300px in and the
   row reads as a label marooned from its text -- the exact defect 27.2-R1 and
   28-R3 were written to fix. THREE tracks, not the two of 37.3, because these
   rows carry a trailing arrow: subgridding a three-child row into a two-track
   parent would wrap the arrow onto its own line. The duplicated
   `grid-template-columns` is deliberate: if `subgrid` is dropped the row keeps
   the fallback stated above it. `column-gap` is restated on both list and row
   because in a subgridded axis some implementations take the gutters from the
   parent. At 767 the family's (2,3,0) rule restacks these rows to
   `1fr | auto` with the summary on its own line, and it still does: nothing
   here is written above that specificity. */
#top .lb-ds.lb-dsr .lb-ds-spaux {
  margin-top: var(--hub-half);
  padding-top: var(--ds-s5);
  border-top: 1px solid var(--border-light);
}
#top .lb-ds.lb-dsr .lb-ds-spaux .lb-ds-slist {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
  column-gap: var(--ds-s4);
  margin-top: var(--ds-s5);
}
#top .lb-ds.lb-dsr .lb-ds-spaux .lb-ds-srow {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: var(--ds-s4);
}

@media only screen and (max-width: 767px) {
  /* answers the family's (2,3,0) `.lb-ds-anchors { gap: --ds-s4 }` at equal
     specificity plus one class, so the column keeps the gap its touch overlay
     was tuned against */
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-anchors.lb-ds-spjumps {
    gap: var(--ds-s4);
  }
}

@media only screen and (max-width: 600px) {
  /* and the (2,4,0) hero rule that drops the row to --ds-s3. Written after the
     767 block so that at 390, where both match, this one wins. */
  #top #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-anchors.lb-ds-spjumps {
    gap: var(--ds-s4);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-spaux {
    padding-top: var(--ds-s4);
  }
}

/* 48.6 ---------------------------------- the sub-label ink 48.5 promised
   MEASURED, and it was missing: 48.5's comment says the sub-label takes the
   secondary ink, and the rule that does it was never written. Without it the
   label rendered #C25A15 at weight 600 -- byte-identical to the section eyebrow
   above it -- so the band read as though it carried two section eyebrows.
   Block 20 restated `.lb-ds-eyebrow-mute` to the light eyebrow's own orange at
   (2,4,0); this answers it at (2,5,0), exactly as block 38 does for
   `.lb-ds-tifoot`. Scoped to `.lb-ds-spaux`, so no other page moves.
   Recorded rather than folded silently into 48.5: a CSS block cannot be
   verified by the page generator, and the only thing that caught this was
   reading the computed colour in the browser. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-spaux .lb-ds-eyebrow.lb-ds-eyebrow-mute {
  color: var(--text-secondary-light);
  font-weight: 500;
}

/* ============================================================================
   BLOCK 49 -- the サポート hub, Red1's final-fixes pass. 2026-08-22, round S r2.

   TWO rules groups and ONE new class, `.lb-ds-spcards5`, asserted absent from
   lb-redesign.css and from the post_content of every post on the install before
   this block was written. Everything else here is scoped to `.lb-ds-spentry`,
   which block 48 introduced and which appears on page 1471 alone. So this block
   is structurally inert everywhere else, as block 48 is.

   Neither change touches the tablet or mobile ladder. That is a requirement, not
   a side effect: Red1 asked for the desktop card row to be centred and for the
   hero groups to gain a container, and asked that the existing responsive
   behaviour be preserved.
   ========================================================================= */

/* 49.1 --------------------- the orphan second card row, centred at desktop
   Five cards on `repeat(3, 1fr)` render 3 + 2, and the two land in tracks 1 and
   2 with an empty track 3 beside them. Red1 asked for that row centred.

   WHY THIS IS A MIN-WIDTH BLOCK, and it is the whole design of the fix. The
   grid's own responsive behaviour is what must not move: block 21.6 steps
   `.lb-ds-cards-3` 3 -> 2 -> 1 at 1120 and 767 by setting
   `grid-template-columns`, and those declarations are meaningless on a flex
   container. Switching this grid to flex at every width would therefore have
   silently discarded the whole ladder and required it to be rebuilt in
   flex-basis terms -- three more rules to keep in sync with a family component
   that other pages share.

   So the flex treatment is confined to >=1121, where the grid is 3-up, and
   BELOW 1121 NOTHING HERE APPLIES: the grid, its two breakpoint rules and its
   left-aligned orphan row are byte-for-byte the behaviour shipped at r1. The
   2-up orphan at 989 and the 1-up stack at 390 are deliberately left alone.

   `justify-content: center` only has anything to centre on a line with free
   space, so the first row of three -- which exactly fills the line -- does not
   move. The basis reproduces the grid's own arithmetic: three tracks and two
   `--ds-s5` gaps. `gap` is inherited from `.lb-ds-cards` and works identically
   in flex, so it is not restated. `align-items` defaults to `stretch`, which is
   what the grid already did, so the cards in a row stay equal height and
   `.lb-ds-card-link`'s `margin: auto 0 0` (48.4) still bottom-aligns them.

   Precedent for a min-width block in this family: 29.3. */
@media only screen and (min-width: 1121px) {
  #top .lb-ds.lb-dsr .lb-ds-cards.lb-ds-spcards5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #top .lb-ds.lb-dsr .lb-ds-cards.lb-ds-spcards5 > .lb-ds-card {
    flex: 0 1 calc((100% - 2 * var(--ds-s5)) / 3);
  }
}

/* 49.2 ------------------------- the hero audience groups, as containers
   Red1: give the two groups a subtle bordered and padded treatment so they read
   as navigation groups. This is the prototype's own `.sp-entry` box --
   `border: 1px solid #285276; border-radius: 8px; padding: 24px` -- expressed
   in the family's tokens rather than in its literals: `--border-navy` is that
   same hairline, `--ds-radius-card` that same radius, `--ds-s5` that same 24px.
   No new value is introduced.

   It REPLACES rather than adds to the top rule. `.lb-ds-wcol` is a top-ruled
   column (block 22.4: "these are ruled columns, not boxes") and 40.1 recolours
   that rule for the hero. A box with a top rule still on it would draw a
   double line across the top edge, so the `border` shorthand here overrides
   both -- (1,5,0) against 22.4's (1,3,0) and 40.1's (1,4,0) -- and
   `padding` overrides the column's `padding-top`.

   Scoped to `.lb-ds-spentry`, so the three training tiers on the navy section,
   which are the SAME component, stay ruled columns. That is deliberate: the
   hero pair is navigation and the tiers are a diagram, and only the first was
   asked to look like a container.

   At <=600 the padding steps to `--ds-s4`, the family's own next step down, so a
   318px column keeps a usable measure. Nothing else moves: the 2 -> 1 collapse
   at 1120 is still the family's (2,3,0) rule and is untouched. */
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-spentry .lb-ds-wcol {
  padding: var(--ds-s5);
  border: 1px solid var(--border-navy);
  border-radius: var(--ds-radius-card);
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-spentry .lb-ds-wcol {
    padding: var(--ds-s4);
  }
}


/* ==========================================================================
   BLOCK 50 - Multiphysics hero (page 15929), LAYOUT ONLY. 2026-08-23, Red1.
   Page-scoped on purpose (#top.page-id-15929), the same device block 26 uses
   for 19863 on Red1's ruling, so nothing here can reach the other 16 V2 pages.
   Every number was MEASURED in headless Chromium at 1440/1280/1120/990/989/
   768/600/390 against the real server render, not inferred. Before/after
   table: claude/multiphysics-hero-layout-20260823.md
   No copy, no colour, no type scale and no section below the hero is touched.

   50.1  The H1 moved out of the 42fr copy column into a full-width
         .lb-v2-head row (an existing V2 component, already on ten pages), so
         the 24ch reading measure it inherits from `#top .lb-h1 h1` is now
         wrong here: 24ch computes to 614px and held the H1 at FOUR lines even
         after the move. `#top .lb-v2 .lb-h1 h1` never restates max-width,
         which is why the base rule still reached it. Lifted per page, exactly
         as the .lb-ds 34ch trap was handled - never family-wide.
         `text-wrap: balance` splits two lines evenly instead of a long line
         plus a short tail. Measured: 5 lines -> 2 at 1440/1280/1120/990.

   50.2  The content row top-aligns. The family sets align-items:center on the
         hero grid and align-self:center on .lb-v2-frame, which floated the
         visual 175px below the copy. Measured after: frame top == copy top
         == 352px at every desktop width, so the visual lines up with the lead.

   50.3  The placeholder slot steps 260px -> 220px so the visual supports the
         copy instead of setting the row height. 220px is block 26's value for
         19863, reused rather than invented. Measured: frame 260px against a
         268px copy column at 1440, i.e. the copy sets the height at every
         desktop width. NOTE for whoever adds the approved screenshot: a 16:10
         image in the 723px column renders ~452px tall and would drive the
         height again - cap it then, or crop wider.

   50.4  Below 990 none of the above applies and the single-column stack keeps
         its round-C behaviour, with one exception. .lb-v2-head carries
         margin-bottom: var(--lb-hdr-content), which turned the 22px
         H1-to-lead step into 64px once the H1 became its own row. Zeroed so
         the stack keeps the grid's own 28px row-gap instead. It has to be
         restated at TWO ids because the <=767 rule that sets it is
         `#top #wrap_all .lb-sec .flex_column.lb-v2-head`, and two ids beat
         any number of classes (trap 6).
   ========================================================================== */
@media only screen and (min-width: 990px) {
  /* 50.1 */
  #top.page-id-15929 .lb-v2-hero .lb-v2-head .lb-h1 h1 { max-width: none; text-wrap: balance; }
  /* 50.2 */
  #top.page-id-15929 .lb-v2-hero .entry-content-wrapper { align-items: start; }
  #top.page-id-15929 .lb-v2-hero .flex_column.lb-v2-frame { align-self: start; }
  /* 50.3 */
  #top.page-id-15929 .lb-v2-hero .flex_column.lb-v2-frame .lb-v2-slot { min-height: 220px; }
}
/* 50.4 */
@media only screen and (max-width: 989px) {
  #top.page-id-15929 #wrap_all .lb-v2-hero .flex_column.lb-v2-head { margin-bottom: 0; }
}


/* ==========================================================================
   BLOCK 51 - FDTD / MODE / INTERCONNECT / CML Compiler heroes, LAYOUT ONLY.
   2026-08-23, Red1: "apply the same visual work as the Multiphysics hero".
   This IS block 50 applied to four more pages - same three desktop rules, same
   mobile correction, same page-scoped device. 50.3's placeholder-slot cap is
   absent because these four carry a real screenshot, not a labelled slot.
   Measured in headless Chromium at 1440/1120/990/989/768/390 against the real
   server render. Record: claude/multiphysics-hero-layout-20260823.md (round 2).

   51.1  Lift the 24ch reading measure off the now-full-width H1. Identical
         reasoning to 50.1: `#top .lb-h1 h1` sets max-width:24ch, the V2 rule
         never restates it, 24ch computes to 614px, and the structural move
         alone left these H1s at 4 lines. Measured: 4-5 lines -> 2 on FDTD,
         INTERCONNECT and CML Compiler; MODE's H1 is 29 characters and lands
         on ONE line at full width, which Red1 chose to keep.

   51.2  Top-align the content row, so the screenshot's top edge sits on the
         lead's top edge instead of floating. Measured: frame top == copy top
         at every desktop width on all four.

   51.3  KNOWN AND ACCEPTED: on these four the screenshot is taller than the
         copy column, so it still sets the hero height, and the hero is
         ~30-200px TALLER than before because the H1 now occupies its own row
         instead of padding out a tall copy column. Red1 chose this over
         shrinking the plots (the alternative measured at ~230-370px wide,
         which loses axes and legends). Do not "fix" it by capping the image
         without asking - that decision was taken on 2026-08-23 with the
         numbers in front of it.

   51.4  Same two-id restatement as 50.4, for the same reason: the <=767 rule
         `#top #wrap_all .lb-sec .flex_column.lb-v2-head` sets the bottom
         margin and two ids beat any number of classes (trap 6).
   ========================================================================== */
@media only screen and (min-width: 990px) {
  /* 51.1 */
  #top.page-id-19520 .lb-v2-hero .lb-v2-head .lb-h1 h1,
  #top.page-id-19522 .lb-v2-hero .lb-v2-head .lb-h1 h1,
  #top.page-id-19530 .lb-v2-hero .lb-v2-head .lb-h1 h1,
  #top.page-id-19531 .lb-v2-hero .lb-v2-head .lb-h1 h1 { max-width: none; text-wrap: balance; }
  /* 51.2 */
  #top.page-id-19520 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19522 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19530 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19531 .lb-v2-hero .entry-content-wrapper { align-items: start; }
  #top.page-id-19520 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19522 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19530 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19531 .lb-v2-hero .flex_column.lb-v2-frame { align-self: start; }
}
/* 51.4 */
@media only screen and (max-width: 989px) {
  #top.page-id-19520 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19522 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19530 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19531 #wrap_all .lb-v2-hero .flex_column.lb-v2-head { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Block 52 : page 6871 Zemax OpticStudio : V2 hero layout parity
   Same correction already approved for 15929 (block 50) and
   19520 / 19522 / 19530 / 19531 (block 51). Three desktop rules restate the
   H1 width cap that #top .lb-h1 h1 { max-width: 24ch } would otherwise hold,
   and pin both hero columns to the top of the row; the <=989 rule cancels the
   head column's inherited bottom margin so H1 -> lead keeps its 28px rhythm.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 990px) {

  #top.page-id-6871 .lb-v2-hero .lb-v2-head .lb-h1 h1 { max-width: none; text-wrap: balance; }

  #top.page-id-6871 .lb-v2-hero .entry-content-wrapper { align-items: start; }

  #top.page-id-6871 .lb-v2-hero .flex_column.lb-v2-frame { align-self: start; }
}

@media only screen and (max-width: 989px) {

  #top.page-id-6871 #wrap_all .lb-v2-hero .flex_column.lb-v2-head { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Block 53 rev 3 : page 6871 Zemax OpticStudio : the three supplied figures.
   The masters are 400x267 / 400x267 / 435x245. Every figure renders at or below
   its natural width (width:100% + max-width), so nothing is ever upscaled and
   every one keeps its native aspect ratio. Nothing here sets a fixed or minimum
   frame height, so no figure can drive its section's height.
   rev 3 changes: hero frame moves 40px in from the container edge, is vertically
   centred on the copy, and its orange mat is halved (padding 20 -> 10) with a
   softer shadow; the OpticStudioとは panel is capped to the screenshot + a 10px
   mat and dropped 110px so its top meets the first body paragraph instead of the
   heading; the 解析モード figure moves down to the method rows and drops to 320.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 990px) {

  /* 1 hero : the copy leads (58/42, the same flip approved page 19863 uses). The
     frame is capped to the 300px visual + its own mat, pulled 40px in from the
     container edge, and centred on the copy column. It is shorter than the copy
     at every width, so the copy sets the hero height. */
  #top.page-id-6871 .lb-v2-hero .entry-content-wrapper { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }

  #top.page-id-6871 .lb-v2-hero .flex_column.lb-v2-frame {
    max-width: 320px;
    margin-left: auto;
    margin-right: 40px;
    align-self: center;
  }

  /* 2 OpticStudioとは : the panel is now a tight mat around the screenshot, not a
     card the width of the column, and it starts level with the first body
     paragraph. 110px is the measured eyebrow + H2 block height, which is stable
     from 990 to 1600 because that heading is one line throughout. */
  #top.page-id-6871 .lb-v2 .flex_column.lb-v2-panel.lb-v2-ovfig {
    align-self: start;
    justify-content: flex-start;
    margin-top: 110px;
    margin-left: auto;
    max-width: 340px;
    padding: 10px;
    gap: 0;
    border-radius: 10px;
  }

  /* 3 解析モード : 62/38, and the figure sits beside the method rows (grid row 2)
     rather than beside the section title. */
  #top.page-id-6871 .lb-v2-modesplit .entry-content-wrapper { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }

  #top.page-id-6871 .lb-v2-modesplit .flex_column.lb-v2-head { grid-column: 1; grid-row: 1; }

  #top.page-id-6871 .lb-v2-modesplit .flex_column.lb-v2-moderows { grid-column: 1; grid-row: 2; }

  /* the figure shares grid row 2 with the two method rows, so align-self:center
     centres it on the 01/02 block at every desktop width without a magic number:
     the row's height IS the rows column's height, which changes as the copy
     rewraps (412px at 1600 up to 643px at 990). */
  #top.page-id-6871 .lb-v2-modesplit .flex_column.lb-v2-modefig {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

/* the orange mat, halved, with a lighter shadow: the frame reads as a rim around
   the screenshot rather than a block of colour. */
#top.page-id-6871 .lb-v2 .flex_column.lb-v2-frame {
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

#top.page-id-6871 .lb-v2 .lb-v2-frame .lb-v2-shot,
#top.page-id-6871 .lb-v2 .lb-v2-frame .lb-v2-shot .avia-image-container-inner { width: 100%; }

#top.page-id-6871 .lb-v2 .lb-v2-frame .lb-v2-shot img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }

#top.page-id-6871 .lb-v2 .lb-v2-ovfig .lb-v2-fig { display: block; width: 100%; margin: 0 !important; max-width: 320px; }

#top.page-id-6871 .lb-v2 .lb-v2-ovfig .lb-v2-fig img { display: block; width: 100%; max-width: 320px; height: auto; }

#top.page-id-6871 .lb-v2 .lb-v2-modefig .lb-v2-fig { display: block; width: 100%; margin: 0 0 0 auto !important; max-width: 320px; }

#top.page-id-6871 .lb-v2 .lb-v2-modefig .lb-v2-fig img { display: block; width: 100%; max-width: 320px; height: auto; }

@media only screen and (max-width: 989px) {

  /* stacking: drop the desktop grid placement so DOM order governs, drop the
     desktop offsets, and centre every figure. */
  #top.page-id-6871 #wrap_all .lb-v2-modesplit .flex_column.lb-v2-head,
  #top.page-id-6871 #wrap_all .lb-v2-modesplit .flex_column.lb-v2-moderows,
  #top.page-id-6871 #wrap_all .lb-v2-modesplit .flex_column.lb-v2-modefig { grid-column: auto; grid-row: auto; margin-top: 0; }

  #top.page-id-6871 #wrap_all .lb-v2 .flex_column.lb-v2-frame { max-width: 320px; margin-left: auto; margin-right: auto; }

  #top.page-id-6871 #wrap_all .lb-v2 .flex_column.lb-v2-panel.lb-v2-ovfig {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 340px;
    padding: 10px;
  }

  #top.page-id-6871 #wrap_all .lb-v2 .lb-v2-ovfig .lb-v2-fig { margin: 0 auto !important; max-width: 320px; }

  #top.page-id-6871 #wrap_all .lb-v2 .lb-v2-modefig .lb-v2-fig { margin: 0 auto !important; max-width: 300px; }

  #top.page-id-6871 #wrap_all .lb-v2 .lb-v2-ovfig .lb-v2-fig img { max-width: 320px; margin: 0 auto; }

  #top.page-id-6871 #wrap_all .lb-v2 .lb-v2-modefig .lb-v2-fig img { max-width: 300px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Block 54 : the Zemax hero visual treatment applied to the product pages that
   carry a real hero image : 19520 FDTD, 19522 MODE, 19530 INTERCONNECT,
   19531 CML Compiler, 19564 RCWA. Approved by Red1 2026-08-23, including the
   300px cap, so all product heroes read the same as /products/zemax/.
   Masters are 600x400 / 784x544 / 683x285 / 683x471 / 1052x480, so every one is
   scaled DOWN to 300px: width:100% + max-width, never upscaled, ratio native.
   Pages whose hero is still a labelled placeholder slot (15929, 19528, 19861,
   19863) are deliberately NOT included - they keep the slot's own proportions
   until they get approved images.
   Blocks 50/51 keep their H1 width and align-items:start rules; only the frame
   is re-aligned here, so the copy stays top-aligned and the visual is centred.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 990px) {

  #top.page-id-19520 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19522 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19530 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19531 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19564 .lb-v2-hero .entry-content-wrapper { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }

  #top.page-id-19520 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19522 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19530 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19531 .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19564 .lb-v2-hero .flex_column.lb-v2-frame {
    max-width: 320px;
    margin-left: auto;
    margin-right: 40px;
    align-self: center;
  }
}

#top.page-id-19520 .lb-v2 .flex_column.lb-v2-frame,
#top.page-id-19522 .lb-v2 .flex_column.lb-v2-frame,
#top.page-id-19530 .lb-v2 .flex_column.lb-v2-frame,
#top.page-id-19531 .lb-v2 .flex_column.lb-v2-frame,
#top.page-id-19564 .lb-v2 .flex_column.lb-v2-frame {
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

#top.page-id-19520 .lb-v2 .lb-v2-frame .lb-v2-shot,
#top.page-id-19520 .lb-v2 .lb-v2-frame .lb-v2-shot .avia-image-container-inner,
#top.page-id-19522 .lb-v2 .lb-v2-frame .lb-v2-shot,
#top.page-id-19522 .lb-v2 .lb-v2-frame .lb-v2-shot .avia-image-container-inner,
#top.page-id-19530 .lb-v2 .lb-v2-frame .lb-v2-shot,
#top.page-id-19530 .lb-v2 .lb-v2-frame .lb-v2-shot .avia-image-container-inner,
#top.page-id-19531 .lb-v2 .lb-v2-frame .lb-v2-shot,
#top.page-id-19531 .lb-v2 .lb-v2-frame .lb-v2-shot .avia-image-container-inner,
#top.page-id-19564 .lb-v2 .lb-v2-frame .lb-v2-shot,
#top.page-id-19564 .lb-v2 .lb-v2-frame .lb-v2-shot .avia-image-container-inner { width: 100%; }

#top.page-id-19520 .lb-v2 .lb-v2-frame .lb-v2-shot img,
#top.page-id-19522 .lb-v2 .lb-v2-frame .lb-v2-shot img,
#top.page-id-19530 .lb-v2 .lb-v2-frame .lb-v2-shot img,
#top.page-id-19531 .lb-v2 .lb-v2-frame .lb-v2-shot img,
#top.page-id-19564 .lb-v2 .lb-v2-frame .lb-v2-shot img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }

@media only screen and (max-width: 989px) {

  #top.page-id-19520 #wrap_all .lb-v2 .flex_column.lb-v2-frame,
  #top.page-id-19522 #wrap_all .lb-v2 .flex_column.lb-v2-frame,
  #top.page-id-19530 #wrap_all .lb-v2 .flex_column.lb-v2-frame,
  #top.page-id-19531 #wrap_all .lb-v2 .flex_column.lb-v2-frame,
  #top.page-id-19564 #wrap_all .lb-v2 .flex_column.lb-v2-frame { max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   BLOCK 55 - Product Design V2 hero: vertical rhythm + image centring.
   2026-08-23, Red1: "Product Hero Alignment Fix". LAYOUT ONLY.

   Scope: the SIX V2 product pages Red1 named, which are exactly the six whose
   hero carries a full-width .lb-v2-head row -
     15929 Multiphysics . 19520 FDTD . 19522 MODE . 19530 INTERCONNECT .
     19531 CML Compiler . 6871 Zemax OpticStudio
   The other three V2 product pages (19528 STACK, 19564 RCWA, 19861 Speos) keep
   their H1 inside .lb-v2-copy, so neither correction below applies to them and
   they are deliberately NOT selected.

   No copy, no colour, no type scale, no H1 size, no image size and no
   grid-template-columns is touched. The text column keeps its width and its
   position at every width.

   Every number was MEASURED in the REAL browser against the REAL served page,
   in a same-origin iframe sized to each target viewport, at
   1440 / 1120 / 990 / 989 / 767 / 600 / 390. A local harness was NOT used: the
   staging site is served through PageSpeed, which rewrites stylesheet URLs to
   files that do not exist on disk, so an offline reconstruction cannot carry
   the site's real CSS - phase2-status.md records the overflow numbers such a
   harness produced as artefacts rather than defects.
   Before/after table: claude/v2-product-hero-alignment-20260823.md

   --------------------------------------------------------------------------
   55.1  ONE RHYTHM TOKEN FOR THE HERO.

   Measured before, identically on all six: eyebrow -> H1 was ALREADY 14px
   (12px at <=767), because block 15.2 drives it from --lb-hdr-eyebrow. But
   H1 -> lead measured 72.1px at every desktop width and 28px stacked. That is
   not a spacing choice anywhere - it is the sum of two unrelated values:

       .lb-v2-head margin-bottom   44px  (--lb-hdr-content, the section
                                          HEADER-to-CONTENT step, block 15)
     + hero grid row-gap            28px
     = 72px

   The H1 sits in a full-width .lb-v2-head row and the lead sits in the copy
   column of the NEXT grid row, so a step meant for "header -> body content"
   landed in the middle of one continuous piece of hero text. That is the whole
   defect, and it is why the two gaps could never look consistent.

   The fix makes the hero's row-gap the H1 -> lead step, at the same 14px the
   eyebrow -> H1 gap already uses, and removes the header margin stacking on top
   of it. --lb-hero-step is scoped to .lb-v2-hero, so the site-wide
   --lb-hdr-content token is untouched and every other section keeps its 44px.

   55.2  THE TWO COMPENSATORS, AND WHY THEY EXIST.

   row-gap governs EVERY row of the hero grid, not only the one being tightened.
   Two other distances are built from it and Red1 did not ask for either to
   move, so each is restated on its own column's margin as
   `calc(<distance to preserve> - var(--lb-hero-step))`. Written that way the
   number being preserved is visible in the declaration and no magic constant
   appears anywhere. All four values are measured, not assumed:

       crumbs -> eyebrow   32px  (>=768)        copy -> frame  28px  (768-989)
       crumbs -> eyebrow   48px  (<=767)        copy -> frame  48px  (<=767)

   These hold four measured distances constant. No negative margin and no
   per-page value: all six pages take the identical declarations.

   55.3  HERO IMAGE CENTRED IN ITS COLUMN.

   Measured before, on the five pages carrying block 53/54's 320px frame: the
   frame was pinned to the RIGHT of its grid cell by
   `margin-left: auto; margin-right: 40px`, so the auto margin absorbed the
   entire remainder on the left. Measured left/right space inside the cell:
   135/40 at 1440, 47.4/40 at 1120, 0.3/40 at 990. That is the asymmetry Red1
   is looking at, it grows with the viewport, and it nearly vanishes at 1120 -
   which is why it reads as an arbitrary offset rather than a design.

   `margin-right: auto` alongside the existing `margin-left: auto` centres the
   frame in whatever the cell measures, at every width, with no number to tune.
   The 320px cap and the 300px image inside it are the APPROVED sizes and are
   NOT changed. grid-template-columns is NOT changed, so the copy column keeps
   its width and its position.

   Vertically, `align-self: center` centres the frame on the content row. Five
   of the six already had it from blocks 53/54; 15929 had `align-self: start`
   from block 50.2 and is brought into line here. THIS DELIBERATELY REVERSES
   50.2 for the frame only, on Red1's instruction. `align-items: start` on the
   wrapper is left alone, so the COPY column still top-aligns - only the visual
   centres.

   15929 is the one page with no real hero image: its frame holds a labelled
   placeholder slot and fills its whole grid cell (measured 0/0 inset), so it is
   already centred horizontally and only the vertical rule has work to do. Its
   approved 220px slot height (block 50.3) is untouched.

   55.4  HERO HEIGHT.

   Removing 58px from the H1 -> lead step shortens all six heroes by 58px at
   desktop and 14px stacked, with no image resized.

   KNOWN AND UNCHANGED: on FDTD / MODE / INTERCONNECT / CML Compiler the 300px
   visual is still taller than the copy column at some widths, so the frame can
   still set the content row's height. That is a consequence of the image size
   approved on 2026-08-23; block 51.3 records that Red1 chose it over shrinking
   the plots, and "keep the current approved image sizes" forbids touching it
   here. No image is enlarged by this block, and none drives the height that did
   not already.
   ========================================================================== */

/* 55.1 - the hero's own rhythm token */
#top.page-id-15929 .lb-v2-hero,
#top.page-id-19520 .lb-v2-hero,
#top.page-id-19522 .lb-v2-hero,
#top.page-id-19530 .lb-v2-hero,
#top.page-id-19531 .lb-v2-hero,
#top.page-id-6871  .lb-v2-hero { --lb-hero-step: 14px; }

#top.page-id-15929 .lb-v2-hero .entry-content-wrapper,
#top.page-id-19520 .lb-v2-hero .entry-content-wrapper,
#top.page-id-19522 .lb-v2-hero .entry-content-wrapper,
#top.page-id-19530 .lb-v2-hero .entry-content-wrapper,
#top.page-id-19531 .lb-v2-hero .entry-content-wrapper,
#top.page-id-6871  .lb-v2-hero .entry-content-wrapper { row-gap: var(--lb-hero-step); }

/* the header-to-content step does not belong between an H1 and its own lead */
#top.page-id-15929 .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-19520 .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-19522 .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-19530 .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-19531 .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-6871  .lb-v2-hero .flex_column.lb-v2-head { margin-bottom: 0; }

/* 55.2 - compensator: hold crumbs -> eyebrow at its measured 32px */
#top.page-id-15929 .lb-v2-hero .flex_column.lb-v2-crumbrow,
#top.page-id-19520 .lb-v2-hero .flex_column.lb-v2-crumbrow,
#top.page-id-19522 .lb-v2-hero .flex_column.lb-v2-crumbrow,
#top.page-id-19530 .lb-v2-hero .flex_column.lb-v2-crumbrow,
#top.page-id-19531 .lb-v2-hero .flex_column.lb-v2-crumbrow,
#top.page-id-6871  .lb-v2-hero .flex_column.lb-v2-crumbrow { margin-bottom: calc(32px - var(--lb-hero-step)); }

/* 55.3 - centre the visual in its cell, horizontally and vertically.
   margin-right is the only property that changes on these five. */
#top.page-id-19520 .lb-v2-hero .flex_column.lb-v2-frame,
#top.page-id-19522 .lb-v2-hero .flex_column.lb-v2-frame,
#top.page-id-19530 .lb-v2-hero .flex_column.lb-v2-frame,
#top.page-id-19531 .lb-v2-hero .flex_column.lb-v2-frame,
#top.page-id-6871  .lb-v2-hero .flex_column.lb-v2-frame {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

/* 15929 has no capped frame and no image yet: only the vertical rule applies. */
#top.page-id-15929 .lb-v2-hero .flex_column.lb-v2-frame { align-self: center; }

/* ---- stacked layouts ---------------------------------------------------- */
/* Two ids throughout: Enfold's merged stylesheet loads AFTER this file and
   emits `.responsive #top #wrap_all .flex_column { margin: 0 0 20px }` at
   <=767 (2 ids, 2 classes), so these carry 2 ids and 4 classes and win on
   class count regardless of source order (trap 6). */
@media only screen and (max-width: 989px) {

  /* restated so this block does not depend on blocks 50.4 / 51.4 / 52 */
  #top.page-id-15929 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19520 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19522 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19530 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-19531 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
  #top.page-id-6871  #wrap_all .lb-v2-hero .flex_column.lb-v2-head { margin-bottom: 0; }

  /* compensator: hold copy -> frame at its measured 28px in the stack */
  #top.page-id-15929 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19520 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19522 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19530 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19531 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-6871  #wrap_all .lb-v2-hero .flex_column.lb-v2-copy { margin-bottom: calc(28px - var(--lb-hero-step)); }

  /* the visual centres under the text */
  #top.page-id-19520 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19522 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19530 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-19531 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame,
  #top.page-id-6871  #wrap_all .lb-v2-hero .flex_column.lb-v2-frame {
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 767px) {

  /* the two distances Enfold's 20px column margin makes larger at this width,
     both held at the values measured before the change */
  #top.page-id-15929 #wrap_all .lb-v2-hero .flex_column.lb-v2-crumbrow,
  #top.page-id-19520 #wrap_all .lb-v2-hero .flex_column.lb-v2-crumbrow,
  #top.page-id-19522 #wrap_all .lb-v2-hero .flex_column.lb-v2-crumbrow,
  #top.page-id-19530 #wrap_all .lb-v2-hero .flex_column.lb-v2-crumbrow,
  #top.page-id-19531 #wrap_all .lb-v2-hero .flex_column.lb-v2-crumbrow,
  #top.page-id-6871  #wrap_all .lb-v2-hero .flex_column.lb-v2-crumbrow { margin-bottom: calc(48px - var(--lb-hero-step)); }

  #top.page-id-15929 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19520 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19522 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19530 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-19531 #wrap_all .lb-v2-hero .flex_column.lb-v2-copy,
  #top.page-id-6871  #wrap_all .lb-v2-hero .flex_column.lb-v2-copy { margin-bottom: calc(48px - var(--lb-hero-step)); }
}

/* ==========================================================================
   BLOCK 56 - V2 product hero parity: RCWA centring + Multiphysics 58/42.
   2026-08-23, Red1: "Product Pages - Final Visual and Image Pass", the
   "Hero consistency" items. LAYOUT ONLY, two pages, no image work here.

   56.1  19564 RCWA - CENTRE THE FRAME.
         Block 55 corrected the right-pinned frame on the five pages Red1 named
         and flagged that RCWA still carried block 54's `margin-right: 40px`.
         This is that one selector. RCWA has NO .lb-v2-head row (its H1 lives in
         .lb-v2-copy), so block 55's H1-to-lead spacing work does not apply to it
         and is deliberately NOT added: only the centring is extended, which is
         exactly what Red1 asked for. The 320px cap, the 10px mat and
         align-self: center all come from block 54 and are unchanged.

   56.2  15929 Multiphysics - 58/42, AND the frame treatment that goes with it.
         Multiphysics was the one V2 product page blocks 53/54 never flipped: it
         still ran the base 42fr / 58fr, i.e. its COPY column was the narrower one
         and its visual the wider - measured 494.9px copy against a 683.5px frame
         cell at 1376px, the mirror image of every other product page. Red1 asked
         for the same 58/42 split as the rest.

         The split alone is not parity. On the other five the visual is a 320px
         capped, 10px-matted, centred frame; Multiphysics' frame had no cap at all
         and filled its whole cell. Flipping the columns without capping the frame
         would just move the same oversized panel into a narrower column. So this
         gives it the identical frame treatment - cap, mat, radius, shadow,
         centring - and the same 300px image cap the others use, which takes
         effect the moment its hero image is inserted.

         This DOES change Multiphysics' text column width, which block 55 was
         required to preserve. That is Red1's explicit instruction in this round
         and supersedes the earlier constraint for this page only.

         Block 50.3's approved 220px placeholder-slot height is untouched; it
         stops applying by itself once a real image replaces the slot.

   No copy, no colour, no type scale, no H1 size. Nothing outside these two
   pages' heroes is selected. Verified in the real browser at
   1440 / 1120 / 990 / 989 / 767 / 600 / 390 - record:
   claude/v2-product-hero-alignment-20260823.md
   ========================================================================== */

/* 56.1 */
#top.page-id-19564 .lb-v2-hero .flex_column.lb-v2-frame {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}
@media only screen and (max-width: 989px) {
  #top.page-id-19564 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 56.2 */
@media only screen and (min-width: 990px) {
  #top.page-id-15929 .lb-v2-hero .entry-content-wrapper {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }
}

#top.page-id-15929 .lb-v2-hero .flex_column.lb-v2-frame {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

#top.page-id-15929 .lb-v2-hero .lb-v2-frame .lb-v2-shot,
#top.page-id-15929 .lb-v2-hero .lb-v2-frame .lb-v2-shot .avia-image-container-inner { width: 100%; }

#top.page-id-15929 .lb-v2-hero .lb-v2-frame .lb-v2-shot img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

@media only screen and (max-width: 989px) {
  #top.page-id-15929 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   BLOCK 57 - image pass: no-upscale containers for the newly inserted .webp
   figures. 2026-08-24, Red1: "Product Pages - Final Visual and Image Pass".
   Three new classes, all introduced by that pass. Nothing pre-existing is
   restyled, and no rule reaches a page outside Product Design V2 or the two
   product hubs.

   57.1  APPLICATION-CARD IMAGES - equal height AND no upscaling.
         Two of Red1's rules collide here. "Keep all application-card image
         areas equal in height and aligned" is already guaranteed by the
         approved component: `.lb-v2-appcard .lb-v2-fig img` and
         `.lb-v2-appcard .lb-v2-slot` both carry `aspect-ratio: 16/10`, so an
         image card and a placeholder card are the same height by construction.
         But that rule also sets `width: 100%` on the img, and the supplied
         card art is 400-423px native in a card that measures ~440-500px at
         desktop - so it would be scaled UP, against "never upscale beyond
         native resolution".

         Resolved by moving the 16/10 box from the IMG to its CONTAINER. Enfold
         puts an av_image `custom_class` on the wrapping .avia-image-container,
         not on the img, so `.lb-v2-appimg` is the container: it keeps the
         16/10 box that holds the card heights equal, and the img inside drops
         to `width: auto`, rendering at native size and capped by the box. No
         image is ever enlarged, and no card changes height.

         Scoped to `.lb-v2-appimg`, which exists only on the three card images
         inserted in this pass, so every other application card - including the
         placeholders Red1 asked to keep - is untouched.

   57.2  HUB PRODUCT-ROW THUMBNAILS.
         `.lb-ds-shot` replaced a `.lb-ds-slot` div, which had supplied the
         frame, the radius and a min-height. A bare img would have inherited
         none of it and rendered at native width - 1132px for Lumerical.webp,
         which would have burst the row. The container now carries the frame and
         a consistent box height, and the img sits at native size inside it,
         centred. "Keep thumbnail sizing and alignment consistent" and "never
         upscale" also collide (natives run 338px to 1132px), and this resolves
         it the same way: the BOX is consistent, the pixels are never stretched.

   57.3  WIDE EXPLANATORY FIGURES.
         `.lb-v2-figwide` marks the two figures Red1 called out as needing real
         width rather than the small placeholder: MODE's FDE/varFDTD/EME panel
         (1672x941) and INTERCONNECT's layer-linking figure (1030x488). Both sit
         in a `.lb-v2-g75` section, whose 6fr/6fr split would have held them to
         about half the container. The figure column is widened to 62% on the
         sections that actually contain such a figure - selected with `:has()`,
         the same device blocks 15.5 and 15.2 already use - so no other g75
         section on any page is affected. The figure then fills that column up
         to its native width and never beyond.
   ========================================================================== */

/* 57.1 */
#top .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FFFFFF;
  border-bottom: 1px solid var(--v2-bd-light);
}
#top .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg .avia-image-container-inner,
#top .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg .avia_image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#top .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  border-bottom: 0;
  object-fit: contain;
}

/* 57.2 */
#top .lb-ds .lb-ds-brow-media:has(> .lb-ds-shot) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
  background: var(--surface-white);
}
#top .lb-ds .lb-ds-shot {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 190px;
  margin: 0 auto;
  border-radius: 6px;
}
/* the Products Hub family rows carry the thumbnail without a -brow-media wrapper */
#top .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot {
  max-height: 200px;
}
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds .lb-ds-brow-media:has(> .lb-ds-shot) { min-height: 140px; }
  #top #wrap_all .lb-ds .lb-ds-shot { max-height: 160px; }
}

/* 57.3 */
@media only screen and (min-width: 990px) {
  #top .lb-v2-g75 .entry-content-wrapper:has(.lb-v2-figwide) {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  }
}
#top .lb-v2 .lb-v2-fig.lb-v2-figwide {
  display: block;
  width: 100%;
  margin: 0 !important;
}
#top .lb-v2 .lb-v2-fig.lb-v2-figwide .avia-image-container-inner { width: 100%; }
#top .lb-v2 .lb-v2-fig.lb-v2-figwide img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
/* never beyond native: MODE 1672px, INTERCONNECT 1030px */
#top.page-id-19522 .lb-v2 .lb-v2-fig.lb-v2-figwide img { max-width: 1672px; }
#top.page-id-19530 .lb-v2 .lb-v2-fig.lb-v2-figwide img { max-width: 1030px; }

/* the panel holding a wide figure is a frame for it, not a card around it */
#top .lb-v2 .flex_column.lb-v2-panel:has(.lb-v2-figwide) {
  padding: 10px;
  gap: 0;
}

/* ==========================================================================
   BLOCK 58 - Products Hub family rows: the thumbnail inherits the slot's grid
   placement. 2026-08-24, image pass follow-up. LAYOUT ONLY, one component.

   WHY THIS EXISTS. On the Products Hub the media slot was not a plain child of
   `.lb-ds-frow`: it was a positioned grid item. Three rules placed it -
   `grid-column: 3; grid-row: 1` at <=1120 (block 21.7) and
   `grid-column: 1; grid-row: auto` at <=767 (block 21.9, which exists precisely
   because that placement once outranked the `> *` reset and crushed the copy
   into a 0px track). The image pass replaced `<div class="lb-ds-slot">` with
   `<img class="lb-ds-shot">`, and an img matches none of those selectors, so
   below 1120 the thumbnail would have fallen back to auto-flow and reopened the
   exact defect block 21.9 was written to close.

   So `.lb-ds-shot` is added alongside `.lb-ds-slot` at both breakpoints, at the
   same specificity and later in the file, and given the slot's own 16/10 box so
   the row keeps its proportions. Block 57 already caps the image at its native
   size inside that box, so nothing is upscaled.

   The Lumerical Hub needs none of this: there the `.lb-ds-brow-media` wrapper
   was kept and only its inner slot div was swapped, so that hub's own placement
   rules still apply to the wrapper.
   ========================================================================== */

/* the frow thumbnail sits in a 16/10 box, like the slot it replaced */
#top .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot {
  align-self: start;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: var(--ds-s5);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
  background: var(--surface-white);
}

@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot { grid-column: 3; grid-row: 1; }
}

@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot { grid-column: 1; grid-row: auto; }
}

/* ==========================================================================
   BLOCK 59 - Products Hub (page 1479) family rows: bare thumbnails.
   2026-08-24, Red1: "Products Hub - Final Refinements". LAYOUT ONLY, ONE PAGE.

   Red1: remove the white image containers, show each image directly in the
   right-hand visual area at roughly 150-170px, preserve aspect ratio with
   object-fit: contain, centre each one vertically, and keep the visual
   footprint consistent across all four rows.

   THIS SUPERSEDES BLOCK 58'S VISUAL TREATMENT, FOR THIS PAGE ONLY. Block 58
   gave the frow thumbnail the white framed 16/10 box it inherited from the
   `.lb-ds-slot` it replaced - background, 1px border, --ds-s5 padding, media
   radius. That is exactly what Red1 is removing, so every one of those
   declarations is reversed here explicitly rather than left to chance.

   BLOCK 58'S GRID PLACEMENTS ARE NOT TOUCHED and must not be. They are the
   reason the row does not collapse below 1120px, and block 21.9 documents what
   happens when that placement is missing: the copy is crushed into a 0px track
   and the media takes the full width. This block changes only how the image
   looks inside its cell, never which cell it occupies.

   WHY 3/2 AND 160px. All three supplied thumbnails are close to 3:2 -
   Lumerical.webp 1132x764 (1.482), zemax-product-card.webp 400x267 (1.498),
   ansys-speos-product.webp 400x267 (1.498) - so a 160px-wide 3:2 box holds each
   one with effectively no letterboxing, which is what makes the footprint read
   as consistent without cropping anything. `object-fit: contain` guarantees no
   technical content is cut even if a later image has a different ratio. 160px
   is a DOWNSCALE for all three (smallest native is 400px wide), so nothing is
   enlarged.

   PHOTONICA STAYS PENDING, and its placeholder is given the same 160px 3:2
   footprint so the four rows keep one rhythm while the family-level visual is
   outstanding. Only the box and the label size change; the placeholder's copy
   is untouched.

   Scoped to `#top.page-id-1479` throughout, so the Lumerical Hub - which uses
   `.lb-ds-shot` inside a `.lb-ds-brow-media` wrapper - is unaffected, and so is
   every other page. The hero and the application-routing section are not
   selected by anything here.
   ========================================================================== */

#top.page-id-1479 .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot {
  /* the box */
  width: 160px;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  /* centred in its cell, both axes */
  align-self: center;
  justify-self: center;
  margin: 0;
  /* block 58's frame, removed */
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* the pending Photonica placeholder keeps the same footprint as the three
   images so the rows stay on one rhythm. Copy unchanged; only the box and the
   label size are adjusted so the existing caption still fits. */
#top.page-id-1479 .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot {
  width: 160px;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
  padding: 8px;
  align-self: center;
  justify-self: center;
  font-size: 10px;
  line-height: 1.7;
}

@media only screen and (max-width: 767px) {
  /* Block 19 sets `#top #wrap_all .lb-ds .lb-ds-slot { min-height: 180px }` at
     this width - TWO ids, so it outranked block 59's one-id rule and the pending
     Photonica box grew to 160x180 while the three images stayed 160x106.7.
     Measured at 600 and 390. Restated with two ids so the fourth row keeps the
     same footprint as the other three. */
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot {
    min-height: 0;
    aspect-ratio: 3 / 2;
    padding: 8px;
  }

  /* stacked: the visual sits centred under its copy at the same size */
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot,
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-frow .lb-ds-slot {
    justify-self: center;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   BLOCK 59 rev 2 - centre the element that is ACTUALLY the grid item.

   Measured, not assumed. A raw <img> in an ALB text block is wrapped by
   wpautop in a bare <p>, and that <p> - not the img - is the frow's grid item.
   So `align-self: center` on `.lb-ds-shot` was inert and the three thumbnails
   measured 42.6px above true centre at every desktop width. The placeholder in
   row 4 is a <div> and was already the grid item, which is why it alone centred
   correctly and why the two behaved differently.

   Auto-placement itself is CORRECT and is left alone: measured at 1361px the
   tracks are 64 / 434 / 289 / 217 and the items land num->1, copy->2,
   fspecs->3, media->4. An earlier attempt added `grid-row: 1 / -1` to force the
   span; that made the row definite with an auto column, which sent the
   placeholder to column 1 (measured 64px wide under the number). No row or
   column is declared here for that reason - the grid already has a single row,
   so align-self alone is sufficient.
   -------------------------------------------------------------------------- */
#top.page-id-1479 .lb-ds.lb-dsr .lb-ds-frow > p:has(> .lb-ds-shot) {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 100%;
  margin: 0;
}

/* ==========================================================================
   BLOCK 60 - final product visual fixes. 2026-08-24, Red1.
   Scope: the Products Hub, the Lumerical Hub and eight Product V2 pages.
   RCWA (19564) is deliberately NOT selected - Red1's item-1 list names ten
   pages and RCWA is not among them, so its seven non-hero figures keep their
   current treatment. Flagged in the round record rather than assumed.

   60.1  THE STANDARD NON-HERO IMAGE HOLDER (item 1).
         One rule, one geometry: 10px radius, exactly 20px on all four sides,
         holder shrink-wrapped to the image. `width: fit-content` is what keeps
         it from opening the large empty white areas Red1 is removing - the
         holder is as wide as the image it holds and no wider. The image keeps
         `width: auto` and `height: auto` so nothing is stretched, cropped or
         upscaled, and `max-width: 100%` keeps it inside its column.

         HERO IMAGES ARE EXCLUDED throughout via `:not(.lb-v2-shot)`, per
         "do not change hero-image styling".

         THIS PARTLY REVERSES BLOCK 59 for the Products Hub thumbnails, which
         were stripped bare last round. The difference is the geometry: what was
         removed then was a --ds-s5 padded box with a 240px floor, which did
         create large empty areas; 20px snug is the standard Red1 is setting now.

   60.2  WIDE FIGURES keep their column width - they are the two explanatory
         figures Red1 asked to be wide - and take the same radius and padding.

   60.3  APPLICATION-CARD IMAGES keep the 16/10 box that holds card heights
         equal, and gain the same 20px / 10px holder inside the card. The box is
         retained because the supplied card art is 1.50-1.78 against a 1.60 box,
         so letterboxing is a few percent - not a "large empty white area" - and
         dropping it would misalign the cards Red1 asked to keep aligned.
         `box-sizing: border-box` keeps the 16/10 on the padded border box.

   60.4  HUB THUMBNAILS. The holder is the img itself: padding plus a ground on
         an <img> paints a frame around the image with no extra element, which
         avoids depending on the wpautop <p> that wraps a raw img in an ALB text
         block (block 59 rev 2 documents that trap). `box-sizing: content-box`
         so the declared width stays the IMAGE width and the 20px is added
         outside it, keeping the padding exactly equal on all four sides.

   60.5  HERO TITLE WRAPPING (item 3). Speos and STACK have no `.lb-v2-head`
         row - their H1 sits inside `.lb-v2-copy` - so they never received the
         `max-width: none` that blocks 50.1 / 51.1 / 52 gave the pages that do.
         They were still capped by the base `#top .lb-h1 h1 { max-width: 24ch }`
         while carrying 29-character titles, which is why both wrapped early and
         left the rest of the text column empty. The cap is lifted on those two
         and `text-wrap: balance` splits the remaining lines evenly. No copy is
         changed. The Products Hub H1 is a `.lb-ds` hero and gets the same
         treatment for the same reason.

   60.6  STACK HERO WEIGHT (item 5). 19528 was never in block 54's page list, so
         its hero frame had no cap at all and the 600x400 image filled the whole
         42% column - visibly heavier than every other V2 hero, which run a
         320px frame around a 300px image. It is given exactly that treatment,
         so the hero matches its siblings. This is the ONE hero change in this
         block and it is the one Red1 asked for.

   60.7  COMPARISON TABLE (item 7). The table's intrinsic width is 860px against
         a 791px container at 990, so it scrolled. `table-layout: fixed` with
         `width: 100%` makes the table adopt its container instead of its
         content, so it cannot exceed it and never scrolls at these widths;
         tighter cell padding and a small type step buy the room back, and
         `overflow-wrap` lets long tokens break rather than force a wider track.
         Held to >=900px so the narrow widths keep block 21.8's scroll, which
         Red1 allows.
   ========================================================================== */

/* ---- 60.1 the standard holder, eight V2 pages ------------------------- */
#top.page-id-19520 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-19522 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-15929 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-19530 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-19531 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-19528 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-6871  .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot),
#top.page-id-19861 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot) {
  box-sizing: border-box;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 20px;
  border-radius: 10px;
  background: var(--surface-white, #FFFFFF);
  margin: 0 !important;
}

#top.page-id-19520 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-19522 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-15929 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-19530 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-19531 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-19528 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-6871  .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img,
#top.page-id-19861 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
}

/* ---- 60.2 wide explanatory figures fill their column ------------------ */
#top.page-id-19522 .lb-v2 .avia-image-container.lb-v2-figwide,
#top.page-id-19530 .lb-v2 .avia-image-container.lb-v2-figwide { width: 100%; }
#top.page-id-19522 .lb-v2 .lb-v2-figwide img,
#top.page-id-19530 .lb-v2 .lb-v2-figwide img { width: 100%; }

/* ---- 60.3 application-card images ------------------------------------- */
#top.page-id-6871  .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg,
#top.page-id-19861 .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  padding: 20px;
  border-radius: 10px;
  border-bottom: 0;
  background: #FFFFFF;
}
#top.page-id-6871  .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg img,
#top.page-id-19861 .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

/* ---- 60.4 hub thumbnails: the img is its own holder ------------------- */
#top.page-id-1479  .lb-ds .lb-ds-shot,
#top.page-id-16626 .lb-ds .lb-ds-shot {
  box-sizing: content-box;
  padding: 20px;
  border-radius: 10px;
  background: var(--surface-white, #FFFFFF);
  height: auto;
}
/* block 59 sized the Products Hub thumbnail; the image stays 160px and the
   20px is added outside it, so the padding is exactly equal on all sides. */
#top.page-id-1479 .lb-ds.lb-dsr .lb-ds-frow .lb-ds-shot {
  width: 160px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  /* block 59 zeroed these with 1 id + 5 classes, outranking 60.4's 1 id + 2.
     Measured: padding 0px, radius 0px, transparent. Restated at equal
     specificity and later in the file so document order decides. */
  box-sizing: content-box;
  padding: 20px;
  border-radius: 10px;
  background: var(--surface-white, #FFFFFF);
}

/* ---- 60.5 hero titles use the whole text column ---------------------- */
#top.page-id-19861 .lb-v2-hero .lb-h1 h1,
#top.page-id-19528 .lb-v2-hero .lb-h1 h1 {
  max-width: none;
  text-wrap: balance;
}
#top.page-id-1479 .lb-ds-hero .lb-ds-h1,
#top.page-id-1479 .lb-ds-hero h1 {
  max-width: none;
  text-wrap: balance;
}

/* ---- 60.6 STACK hero matches the other V2 heroes --------------------- */
#top.page-id-19528 .lb-v2-hero .flex_column.lb-v2-frame {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
#top.page-id-19528 .lb-v2-hero .lb-v2-frame .lb-v2-shot,
#top.page-id-19528 .lb-v2-hero .lb-v2-frame .lb-v2-shot .avia-image-container-inner { width: 100%; }
#top.page-id-19528 .lb-v2-hero .lb-v2-frame .lb-v2-shot img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 989px) {
  #top.page-id-19528 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- 60.7 the comparison table adopts its container at >=900px -------- */
@media only screen and (min-width: 900px) {
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll table.lb-ds-table {
    width: 100%;
    /* MEASURED: the table also carries min-width: 860px, which held it at 860
       against a 791px container at 990 even with table-layout: fixed. Releasing
       the floor is what actually makes it adopt the container. */
    min-width: 0;
    table-layout: fixed;
  }
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll { overflow-x: visible; }
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll table.lb-ds-table th,
  #top.page-id-1479 #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll table.lb-ds-table td {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12.5px;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* ==========================================================================
   BLOCK 61 - the two findings from block 60's measurement pass.
   2026-08-24. LAYOUT ONLY.

   61.1  SPEOS AND STACK HERO COLUMNS (item 3, the real cause).
         Lifting the 24ch cap in 60.5 was necessary but not sufficient. MEASURED
         after it: on both pages the H1 was already using 100% of its column -
         460px at 1440, 407px at 1120, 360px at 990 - and still ran to 3, 4 and
         5 lines. The column itself is the problem. Blocks 53 and 54 flipped five
         product heroes to 58fr/42fr so the COPY leads; Speos and STACK were
         never in that list, so they still run the base 42fr/58fr and their text
         sits in the NARROWER column while the visual takes the wider one. That
         is why the title wrapped early and left the hero text area unused.

         Both are flipped to 58/42, which is what "uses the available hero text
         area and remains balanced with the image" means here, and it also makes
         all V2 product heroes consistent. No copy is shortened. STACK's frame
         already got the shared 320px treatment in 60.6, and Speos' visual is
         still a placeholder pending its hero image.

   61.2  APPLICATION-CARD HOLDERS NO LONGER RESERVE HEIGHT (item 1).
         MEASURED on Speos with 60.3 in place: the 16/10 box left real vertical
         slack inside the holder - 63px and 33px at 1440, and 154px and 124px at
         767 - which is exactly the "large empty white areas / excess section
         height" this round is removing. The aspect box is dropped so the holder
         shrink-wraps its image like every other non-hero holder, keeping the
         20px padding exactly equal on all four sides.

         CONSEQUENCE, STATED RATHER THAN HIDDEN: the earlier requirement that
         application-card IMAGE AREAS be equal in height was met by that box.
         Removing it means a card's image area is now as tall as its own image
         (the supplied art runs 1.50 to 1.78 in aspect), so image areas differ by
         up to roughly a tenth of the card width. The cards themselves still
         align, because the card grid stretches them. If equal image areas matter
         more than tight holders, the box goes back in one rule - but the two
         cannot both hold.
   ========================================================================== */

/* 61.1 */
@media only screen and (min-width: 990px) {
  #top.page-id-19861 .lb-v2-hero .entry-content-wrapper,
  #top.page-id-19528 .lb-v2-hero .entry-content-wrapper {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }
}

/* 61.2 */
#top.page-id-6871  .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg,
#top.page-id-19861 .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg {
  aspect-ratio: auto;
  width: fit-content;
  max-width: 100%;
  height: auto;
}
#top.page-id-6871  .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg img,
#top.page-id-19861 .lb-v2 .lb-v2-appcard .lb-v2-fig.lb-v2-appimg img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
}

/* ==========================================================================
   BLOCK 62 - product-page round: one holder per non-hero image, hero titles
   that use their row, and the Zemax overview figure centred.
   2026-08-25. LAYOUT ONLY. No copy, no colour tokens.

   62.1  THE REAL CAUSE OF THE "OVERSIZED IMAGE HOLDERS" (all named pages).
         MEASURED at 1440 before this block, on CML Compiler: the figure itself
         was already compliant - padding exactly 20px, radius 10px, slack 0,0,
         no upscale. The oversized box is its PARENT. `.lb-v2-panel` is a white
         card (1px border, 12px radius, 34px padding at desktop) and section 2's
         panel also carries `.lb-v2-ovfig`, which is `align-self: stretch;
         justify-content: center`. So a figure that needs 290px of height sat
         inside a 533px white card and the leftover 243px was split above and
         below it. Two defects in one: a SECOND white frame around a frame that
         already has one, and reserved vertical white from the row stretch.

         Measured extra panel height over figure height, at 1440:
           FDTD    sec2 +302  sec3 +69
           CML     sec2 +243  sec3 +69
           MODE    sec2 +185
           IC      sec2 +159
           Speos   sec2 +180  sec3 +69
         Every one of those is white space nothing asked for.

         A panel whose only child is a single non-wide figure stops being a
         holder: transparent, no border, no radius, no padding, and shrink-wrap
         (align-self: center, not stretch) so it adds no height. The FIGURE is
         then the one holder, and it already satisfies the round's rule -
         radius 10px, exactly 20px on all four sides, no crop, no upscale.

         `align-self: center` rather than `start`: with the panel transparent
         there is no white left to remove either way, and centre keeps the
         figure optically level with the copy it sits beside, which is what the
         `.lb-v2-ovfig` stretch was approximating in the first place.

         `.lb-v2-figwide` is excluded - that is the deliberate wide treatment
         (panel padding 10px, image at 100%), not a defect. `.lb-v2-appcard` is
         excluded - handled in 62.3.

   62.2  RCWA WAS NEVER IN THE NON-HERO HOLDER RULE. Every other V2 product
         page (19520, 19522, 15929, 19530, 19531, 19528, 6871, 19861) is listed
         on the `.lb-v2-fig:not(.lb-v2-shot)` 20px/10px rule. 19564 is not, so
         its section-3 figure had no holder treatment at all. Added.

   62.3  APP-CARD IMAGES STOP BEING LETTERBOXED INTO A 16/10 BOX.
         `#top .lb-v2 .lb-v2-appcard .lb-v2-fig img` sets `aspect-ratio: 16/10`
         plus `object-fit: contain`. The per-page rule that follows it overrides
         width and height but NOT aspect-ratio, so a square source still gets a
         16/10 element box and is letterboxed inside it. MEASURED at 1440: the
         528x528 LiDAR image renders in a 504x315 box - 189px of the box is
         white that no image covers. Block 61.2 already fixed this for 6871 and
         19861; the same defect is on the other six pages, so the same fix.

         CONSEQUENCE, STATED RATHER THAN HIDDEN, and it is the same trade block
         61.2 recorded: a card's image area is now as tall as its own image, so
         image areas differ between cards. The cards still align because the
         grid stretches them. Equal image areas and tight holders cannot both
         hold; this round asked for no reserved white space.

   62.4  RCWA HERO H1 (item: "Fix hero H1 width/wrapping").
         The title was hoisted into a full-width `.lb-v2-head` row this round,
         matching FDTD / MODE / INTERCONNECT / Multiphysics. That alone did not
         fix it: MEASURED after the hoist, the H1 was 651px in a 1138px row and
         still ran to 3 lines, because the base `#top .lb-h1 h1 { max-width:
         24ch }` was still capping it. Blocks 52 and 61 lifted that cap for
         every other product hero and skipped 19564. Lifted here.

   62.5  SPEOS HERO FRAME JOINS THE 320px CAP. JUDGEMENT CALL, not asked for
         explicitly. 19861 is the only V2 product page missing from the hero
         `.lb-v2-frame { max-width: 320px }` group, so its frame ran to 460px
         and its hero image rendered ~40% larger than every sibling page's.
         With the H1 now in its own full-width row the wide frame no longer
         buys anything. Revert by removing 19861 from this one rule.

   62.6  ZEMAX "OpticStudioとは" FIGURE CENTRED IN THE RIGHT COLUMN.
         MEASURED at 1440: the grid is `552px 552px` with a 48px gap, so the
         right column runs 656..1208. The panel is capped at max-width 340px and
         had `margin-left: auto` with no matching `margin-right`, so it sat
         flush against the column's right edge at 868..1208 - 212px of the
         column empty on its left. It also carried `margin-top: 110px`, a hand
         tuned vertical offset against a copy column that is 405px tall.
         Both replaced by real centring: auto on both sides, `align-self:
         center`, and the hand-tuned top margin reset to 0. 62.1 has already
         made the panel transparent, so what centres is the figure itself.
   ========================================================================== */

/* ---- 62.1 a panel holding one figure is not itself a holder ------------- */
#top.page-id-19520 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-19522 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-19528 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-19530 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-19531 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-19564 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-15929 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-19861 .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)),
#top.page-id-6871  .lb-v2 .flex_column.lb-v2-panel:not(.lb-v2-appcard):has(> .avia-image-container.lb-v2-fig:not(.lb-v2-figwide)) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
  align-self: center;
  justify-content: flex-start;
  max-width: 100%;
}

/* ---- 62.2 RCWA joins the non-hero holder rule --------------------------- */
#top.page-id-19564 .lb-v2 .avia-image-container.lb-v2-fig:not(.lb-v2-shot) {
  box-sizing: border-box;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 20px;
  border-radius: 10px;
  background: var(--surface-white, #FFFFFF);
  margin: 0 !important;
}
#top.page-id-19564 .lb-v2 .lb-v2-fig:not(.lb-v2-shot) img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
}

/* ---- 62.3 app-card images shrink-wrap instead of letterboxing ----------- */
#top.page-id-19520 .lb-v2 .lb-v2-appcard .lb-v2-fig img,
#top.page-id-19522 .lb-v2 .lb-v2-appcard .lb-v2-fig img,
#top.page-id-19528 .lb-v2 .lb-v2-appcard .lb-v2-fig img,
#top.page-id-19530 .lb-v2 .lb-v2-appcard .lb-v2-fig img,
#top.page-id-19531 .lb-v2 .lb-v2-appcard .lb-v2-fig img,
#top.page-id-19564 .lb-v2 .lb-v2-appcard .lb-v2-fig img {
  aspect-ratio: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
  border-bottom: 0;
  object-fit: contain;
}
#top.page-id-19520 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig,
#top.page-id-19522 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig,
#top.page-id-19528 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig,
#top.page-id-19530 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig,
#top.page-id-19531 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig,
#top.page-id-19564 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig {
  width: fit-content;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
}

/* ---- 62.4 RCWA hero H1 is no longer capped at 24ch ---------------------- */
#top.page-id-19564 .lb-v2-hero .lb-v2-head .lb-h1 h1 {
  max-width: none;
  text-wrap: balance;
}

/* ---- 62.5 Speos hero frame matches the family --------------------------- */
#top.page-id-19861 #wrap_all .lb-v2-hero .flex_column.lb-v2-frame {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
#top.page-id-19861 #wrap_all .lb-v2-hero .lb-v2-frame .lb-v2-shot,
#top.page-id-19861 #wrap_all .lb-v2-hero .lb-v2-frame .lb-v2-shot .avia-image-container-inner {
  width: 100%;
}
#top.page-id-19861 #wrap_all .lb-v2-hero .lb-v2-frame .lb-v2-shot img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

/* ---- 62.6 Zemax overview figure centred in the right column ------------- */
/* THREE ids: it overrides `#top.page-id-6871 #wrap_all .lb-v2 .flex_column
   .lb-v2-panel.lb-v2-ovfig`, which is already at three. */
#top.page-id-6871 #wrap_all .lb-v2 .flex_column.lb-v2-panel.lb-v2-ovfig {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  justify-content: center;
  max-width: 100%;
  width: fit-content;
}
#top.page-id-6871 #wrap_all .lb-v2 .lb-v2-ovfig .avia-image-container.lb-v2-fig {
  margin: 0 auto !important;
  max-width: 100%;
  width: fit-content;
}
#top.page-id-6871 #wrap_all .lb-v2 .lb-v2-ovfig .lb-v2-fig img {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* ---- 62.7 the Multiphysics H1 is a textblock, not an av_heading --------- */
/* Enfold strips every html tag from a shortcode ATTRIBUTE (its wpautop
   cleanup removes tags found inside square brackets), so the exact two-line
   title cannot be expressed as heading='...<br />...' - verified: both a
   <br /> and an empty <span> were removed at render. The heading is therefore
   a textblock carrying the same `lb-h1` hook, and these two rules only restate
   the box the av_heading container used to provide. */
#top.page-id-15929 .lb-v2-hero .lb-v2-head .avia_textblock.lb-h1-tb {
  margin: 0;
  padding: 0;
}
#top.page-id-15929 .lb-v2-hero .lb-v2-head .lb-h1-tb h1 {
  margin: 0;
  max-width: none;
  text-wrap: normal;
}
/* ---- 62.8 the wide-figure panel is not a second holder either ----------- */
/* MEASURED after 62.1, at 1440: the two `.lb-v2-figwide` sections still failed
   the round's holder rule. `#top .lb-v2 .flex_column.lb-v2-panel:has(.lb-v2-
   figwide) { padding: 10px }` keeps the white card, so a figure that already
   carries its own 20px white pad sat inside a 10px white ring plus a 1px
   border - 31px of white on the sides and +21px of height. 62.1 deliberately
   excluded figwide as "the deliberate wide treatment"; that was right about the
   WIDTH (the image should still run the full column) and wrong about the frame.
   The panel goes transparent here too; the figure stays at width 100% with its
   20px / 10px holder, which is what MODE section 3 and INTERCONNECT section 3
   were asked for.
   TWO ids plus :has(), so it outranks the one-id figwide padding rule. */
#top.page-id-19522 #wrap_all .lb-v2 .flex_column.lb-v2-panel:has(> .avia-image-container.lb-v2-figwide),
#top.page-id-19530 #wrap_all .lb-v2 .flex_column.lb-v2-panel:has(> .avia-image-container.lb-v2-figwide) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
  align-self: center;
}

/* ---- 62.9 Lumerical hub: the support sentence uses the full container --- */
/* The shared rule is `#top .lb-ds.lb-dsr .lb-ds-pointer2 { max-width: 78ch }`,
   which MEASURED 689px inside a 1038px section container - the "narrow width
   constraint" this round removes. Scoped to this page's support section rather
   than lifted globally, because `.lb-ds-pointer2` is shared with other hubs
   that were not part of this instruction.\n   The section IS the `.lb-ds.lb-dsr` element, so `#support` is compounded onto\n   it rather than written as a descendant - a descendant combinator here matched\n   nothing (verified: max-width stayed at 78ch / 689px). */
#top.page-id-16626 #wrap_all .lb-ds.lb-dsr#support .lb-ds-pointer2 {
  max-width: none;
}
/* ---- 62.10 the three restructured heroes align top, like the family ---- */
/* A REGRESSION THIS ROUND SURFACED, found by measuring after 62.4, not asked
   for. Hoisting the title into a full-width row exposed that STACK, RCWA and
   Speos run their hero row at `align-items: center` while FDTD, MODE, CML and
   INTERCONNECT run it at `start`. While the title sat INSIDE the copy column
   the whole block centred together and it read fine; with the title now in its
   own row above, only the copy centred, and it floated away from the title.

   MEASURED gap between H1 bottom and lead top at 1512, before this rule:
     FDTD 14   MODE 14   CML 14   INTERCONNECT 14   <- the family
     RCWA 72   STACK 80  Speos 114                  <- the three
   All three brought to `start`. The image frame keeps its own
   `align-self: center`, which is what the family pages do. */
#top.page-id-19528 #wrap_all .lb-v2-hero .entry-content-wrapper,
#top.page-id-19564 #wrap_all .lb-v2-hero .entry-content-wrapper,
#top.page-id-19861 #wrap_all .lb-v2-hero .entry-content-wrapper {
  align-items: start;
}
/* ---- 62.11 ...and inherit the family's hero head spacing, not the generic - */
/* 62.10 fixed the alignment but not the distance. MEASURED at 1512 after it,
   STACK still showed 72px between H1 and lead against the family's 14px, and
   the 72 decomposes exactly: the hero grid was running the GENERIC
   `row-gap: 28px` instead of the hero's 14px, and `.lb-v2-head` was carrying
   the generic section `margin-bottom: 44px` that the family pages zero out
   inside the hero. 28 + 44 = 72. Both restated for the three pages that only
   grew a `.lb-v2-head` this round, so all seven V2 product heroes now measure
   the same 14px. */
#top.page-id-19528 #wrap_all .lb-v2-hero .entry-content-wrapper,
#top.page-id-19564 #wrap_all .lb-v2-hero .entry-content-wrapper,
#top.page-id-19861 #wrap_all .lb-v2-hero .entry-content-wrapper {
  row-gap: 14px;
}
#top.page-id-19528 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-19564 #wrap_all .lb-v2-hero .flex_column.lb-v2-head,
#top.page-id-19861 #wrap_all .lb-v2-hero .flex_column.lb-v2-head {
  margin-bottom: 0;
}
/* ==============================================================================
   BLOCK 63 - the remaining 会社情報 pages. 2026-08-24, Red1.
   Pages built this round: 20001 パートナー /about/partners/ (new),
   1768 採用情報 /recruit/ (rebuilt from legacy Enfold),
   1494 お問い合わせ /contact/ (rebuilt from legacy Enfold).

   ONE new component only. Every other part of all three pages reuses a
   component that already exists, and each was checked against a deployed page
   before reuse rather than reinvented: .lb-ds-hero + -herocopy + -crumbs +
   -h1wide + -anchors (1504), .lb-ds-head (7984), .lb-ds-cards + -cards-3 +
   -card-title/-desc/-fam/-link (1479), .lb-ds-doms/-dom/-domhead/-domh/-domdesc
   (19883), .lb-ds-slist/-srow/-srow-name/-srow-sum (19870), .lb-ds-fspecs +
   -cospecs + .lb-ds-spec/-spec-k/-spec-v-prose (1504), .lb-ds-tscroll +
   .lb-ds-table incl. its navy variant (7984), .lb-ds-wcols/-wcol/-wnum/-wtitle/
   -wtext incl. the navy ink overrides block 40.1 records (1504),
   .lb-ds-prose, .lb-ds-note, .lb-ds-small, .lb-ds-morewrap/-more/-arrow,
   .lb-ds-cross/-cross-eq/-xcard/-xghost, .lb-ds-close + .lb-btnrow, .lb-ds-covideo.

   63.1  .lb-form-inline -- the Zoho contact form, now rendered from
         lb-forms.php by [lb_form_inline] instead of sitting in an av_codeblock.
         It is a 1557px-tall third-party iframe; left at the 1480px container it
         reads as a full-bleed panel rather than a form, so it is held to the
         same --ds-reading measure the company video uses. The iframe keeps its
         own inline height because Zoho resizes it by postMessage -- only the
         width and the surrounding rhythm are ours.
   63.2  the fallback line reuses .lb-ds-small for type; this sets its gap and
         gives its link the design system ink rather than Enfold theme colour.
   63.3  <=767 the measure IS the container, so the cap is released rather than
         fought with a percentage.
   ============================================================================== */

/* 63.1 ------------------------------------------------ the inline form embed */
#top .lb-ds.lb-dsr .lb-form-inline {
  margin: var(--hub-half) 0 0;
  max-width: var(--ds-reading);
}
#top .lb-ds.lb-dsr .lb-form-inline iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* 63.2 ------------------------------------------------------- fallback line */
#top .lb-ds.lb-dsr .lb-form-inline .lb-form-inline-fb {
  margin: var(--ds-s4) 0 0;
}
#top .lb-ds.lb-dsr .lb-form-inline .lb-form-inline-fb a {
  color: var(--brand-orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 63.3 --------------------------------------------------------- <=767 reset */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-form-inline {
    max-width: none;
  }
}

/* 63.4 ------------------------------ .lb-ds-wtitle on navy: on-dark ink */
/* MEASURED DEFECT, not a preference. On page 1768 the three-layer strip is the
   first time .lb-ds-wcol has ever been used on a navy surface, and .lb-ds-wtitle
   came out rgb(105,105,105) on rgb(7,44,80) -- about 2.6:1, below AA, and DIMMER
   than its own gloss .lb-ds-wtext (rgb(158,158,158), ~4.6:1). The hierarchy was
   inverted: the title read weaker than the sentence explaining it.

   Cause is the same one block 40.1 recorded for the hero. The family paints
   .lb-ds-wtitle with the LIGHT-surface secondary token and gives .lb-ds-navy an
   override for .lb-ds-wtext but never for .lb-ds-wtitle, because no navy section
   had carried a .lb-ds-wcol before. .lb-ds-wtitle is emitted as a SPAN, not a
   heading, so the navy h2/h3 ink rule does not reach it either.

   Same remedy block 40.1 applied to the hero, at the surface that was missed.
   (1,4,1) so it out-specifies the family rule at (1,3,1). Load-bearing, not
   cosmetic: without it the title is grey-on-navy. */
#top .lb-ds.lb-dsr.lb-ds-navy .entry-content-wrapper .lb-ds-wtitle {
  color: var(--text-primary-dark);
}

/* ============================================ 62 ZOHO RECRUIT EMBED (1768)

   2026-08-25, Red1: "Embed the Zoho listing cleanly inside the page and
   visually integrate the surrounding section with the approved LightBridge
   design. Make the embedded area responsive. Do not alter the Zoho embed
   functionality or application flow."

   Scope: page 1768 only, and inside it only the codeblock carrying the
   Zoho-supplied snippet (custom_class='lb-ds-zoho', which Enfold lands on the
   wrapping .avia_codeblock). Nothing here can reach another page, and nothing
   here touches the anchor href, the target, the widget's XHR, or the facet
   checkbox controls -- i.e. the application flow is untouched by construction.

   WHAT WE ARE INTEGRATING WITH, measured rather than assumed. The widget
   loads its own stylesheet from the Zoho CDN via a <link> inside the body, so
   it lands AFTER lb-redesign.css in document order. Equal-specificity rules
   would therefore lose. Every selector below carries #top plus .page-id-1768,
   so ordering is irrelevant and no !important is needed -- with exactly one
   exception, recorded at 62.6, where Zoho writes the colour INLINE.

   Zoho's markup, captured from a real render (see the round record):

     .avia_codeblock.lb-ds-zoho
       .embed_jobs_head.embed_jobs_with_style_2
         .embed_jobs_head2                 <- margin: 0 10%  (measured 113.85px)
           .embed_jobs_head3
             #rec_job_listing_div
               .rec_filter_cls             <- facet row (layout 3 markup)
                 .rec_facet_group
                   div > .cw-rec-filter > ul.rec_ul_filter > li
                     label.cw-facet-checkbox-label
                       input.cw-facet-checkbox + span
                   .job-type-div > span.job-type + .cw-rec-filter > ...
               .rec_job_listing_div_jobs
                 ul.rec-group
                   ul.rec-job-info         <- one per opening
                     li.zr_fillayout_info
                       ul
                         li.rec-job-title > a
                         li.zrsite_Location
                         li.zrsite_Job_Description
                     li.zrsite_Date_Opened
                       span.zrsite_Date_Opened
                       span.zrsite_Job_Type

   ONE ZOHO-SIDE MISMATCH WORTH RECORDING, because it is the reason this block
   has to supply a layout at all. embed_jobs.js switches its MARKUP on
   resp_info.layout, which this account's careers page returns as 3. The
   snippet's wrapper class hardcodes embed_jobs_with_style_2, and Zoho's
   stylesheet keys its LAYOUT rules off that class. So the page gets layout-3
   markup (with the facet group) styled by layout-2 rules -- which is why the
   cards arrived as 276.9px inline-block tiles with a 10% inset around them.
   Neither half is wrong on its own; they simply do not match. Fixing it at
   source would mean either changing the careers page's layout in Zoho Recruit
   or changing the wrapper class in the snippet, and Red1's instruction is not
   to alter the snippet. So the layout is supplied here instead. */

/* 62.1 -- release Zoho's own frame.
   The widget ships an off-white ground (#FBFBFB) and a 10% horizontal margin
   on .embed_jobs_head2. Inside a .lb-ds-light section both are wrong: the
   ground fights --surface-light, and the 10% inset pulls the content 113.85px
   off the DS column at desktop and (being a percentage) keeps eating width all
   the way down to 390. Released here so the widget occupies exactly the column
   the rest of the section occupies. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .embed_jobs_head {
  background: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .embed_jobs_head2 {
  /* rev 2, 2026-08-25, after measuring. THREE Zoho declarations sit on this
     one element and all three had to be released, not only the margin:
       margin: auto;   width: 80%;   font: normal 14px sans-serif;
     The width is why releasing the margin alone still left the widget
     726.4px inside a 908px column at 1120 -- 80% exactly, and now flush
     left instead of centred, which read worse than before the fix. The font
     SHORTHAND is the costly one: it resets font-family, so every glyph in
     the widget, Japanese job titles included, was rendering in the browser
     generic sans-serif rather than Inter / Noto Sans JP. Measured on the
     real render, not inferred: computed font-family inside
     .embed_jobs_head2 came back as the bare keyword sans-serif while its
     own parent reported the full site stack. */
  width: auto;
  margin: 0;
  padding: 0;
  font-family: inherit;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .embed_jobs_head3 {
  padding: 0;
}

/* 62.2 -- the facet row.
   Layout-3 markup emits a filter group that layout-2 CSS leaves as a narrow
   136.9px column 161px tall for three checkboxes. Laid out here as a single
   wrapping bar in the DS card idiom, so it reads as a control strip above the
   list rather than as a stray sidebar.

   The checkbox CONTROL is deliberately not touched. Zoho draws it with
   :before/:after on the span that follows the input, and those pseudo-elements
   are the visible, clickable affordance -- restyling them is how you silently
   break a filter. Only the container flow and the label typography are set. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_filter_cls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s5) var(--ds-s6);
  margin: 0 0 var(--ds-s5);
  padding: var(--ds-s4) 20px;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-card);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_facet_group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s4) var(--ds-s6);
  width: auto;
  padding: 0;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_facet_group > div {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec_ul_filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s2) 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec_ul_filter > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox-label {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary-light);
  cursor: pointer;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho span.job-type {
  display: block;
  margin: 0 0 var(--ds-s2);
  font-size: 12px;
  font-weight: var(--lb-weight-semibold);
  letter-spacing: var(--lb-tracking-eyebrow);
  color: var(--text-secondary-light);
}

/* 62.3 -- the listing becomes a DS card grid.
   Zoho leaves ul.rec-job-info as a 276.9px inline-block, which packs the
   openings as ragged tiles of unequal height. An auto-fill grid on the parent
   gives equal-height cards that reflow on their own at every width with no
   breakpoint to maintain.

   minmax(min(320px, 100%), 1fr), not minmax(320px, 1fr): at 390 the DS column
   is narrower than 320, and a bare 320px minimum would make the track wider
   than its container and push the page into horizontal overflow. The min()
   caps the track at the container. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_job_listing_div_jobs {
  width: auto;
  margin: 0;
  padding: 0;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec-job-info {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  /* rev 2: Zoho sets height: max-content here. To the grid that is a
     DEFINITE cross size, so align-self: stretch never applied and two cards
     sharing a row measured 282.6 and 232.2 -- exactly the ragged edge the
     grid was introduced to remove. Released to auto, which lets the row
     equalise and lets li.zr_fillayout_info grow so the meta row settles on
     the card floor. Confirmed by experiment before being written: forcing
     height auto on the live nodes took the pair to 282.6 / 282.6, while
     forcing align-items: stretch on the container changed nothing. */
  height: auto;
  margin: 0;
  padding: var(--ds-s5);
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-media);
  list-style: none;
  transition: border-color var(--lb-duration-fast) var(--lb-ease),
              box-shadow var(--lb-duration-fast) var(--lb-ease);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec-job-info:hover {
  /* rev 2: Zoho paints ul.rec-job-info:hover with background-color #F5F6FA.
     The white ground above out-specifies it, so nothing was actually wrong
     -- but relying on that is fragile, and stating the surface in the hover
     state costs one line and removes the question. */
  background: var(--surface-white);
  border-color: #C3D0DB;
  box-shadow: 0 6px 20px rgba(16, 36, 53, 0.08);
}

/* 62.4 -- card internals.
   li.zr_fillayout_info takes the growth so that li.zrsite_Date_Opened settles
   on the card floor, which is what makes a row of cards read as one row
   rather than as three separately-sized boxes. */
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zr_fillayout_info {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zr_fillayout_info > ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.rec-job-title {
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: var(--lb-heading-lh-ja);
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Location {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary-light);
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-secondary-light);
  list-style: none;
}
/* Job_Description is author-entered rich HTML in Zoho, so it can arrive with
   paragraphs, lists or an image. Flattened to plain flowing text inside the
   clamp; nothing is hidden, the full description is one click away on the
   opening's own page. */
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description p,
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description ul,
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description ol,
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description div {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description img {
  display: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Date_Opened {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s2) var(--ds-s3);
  align-items: center;
  margin: var(--ds-s4) 0 0;
  padding: var(--ds-s4) 0 0;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  list-style: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho span.zrsite_Date_Opened {
  color: var(--text-secondary-light);
  letter-spacing: var(--lb-tracking-mono);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho span.zrsite_Job_Type {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-light);
  color: var(--text-primary-light);
  font-weight: var(--lb-weight-medium);
  white-space: nowrap;
}

/* 62.5 -- the opening title link.
   THE ONE !important IN THIS BLOCK, and the reason is Zoho's, not ours.
   embed_jobs.js builds the anchor as
     {name:"a", attrs:{ ..., "style":"color:" + brand_color }}
   i.e. it writes the careers page's brand_color STRAIGHT INTO THE STYLE
   ATTRIBUTE on every job title. This account's brand_color is #EB5C23, an
   orange that is neither --brand-orange (#EC7628) nor the light-section link
   ink (#A8500F) the rest of the DS uses. An inline declaration outranks every
   stylesheet selector regardless of specificity, so this is the one place
   where !important is the only instrument that exists.

   The honest alternative, recorded so the choice is visible: change
   brand_color in the Zoho careers page settings (or in the snippet), and this
   !important can be deleted. Until then it stays, with this note attached. */
#top.page-id-1768 .lb-ds .lb-ds-zoho li.rec-job-title a {
  color: var(--brand-navy) !important;
  font-weight: var(--lb-weight-bold);
  text-decoration: none;
  overflow-wrap: anywhere;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho li.rec-job-title a:hover,
#top.page-id-1768 .lb-ds .lb-ds-zoho li.rec-job-title a:focus-visible {
  color: #A8500F !important;
  text-decoration: underline;
}

/* 62.6 -- the "closed" pill.
   embed_jobs.js appends a span next to the title when !eachJob.Publish, also
   with an inline style (red on #FEECEB). Left as Zoho paints it -- it is
   status information and recolouring it would be a lie -- but given the DS
   type scale so it does not shout next to a 17px title. */
#top.page-id-1768 .lb-ds .lb-ds-zoho li.rec-job-title > span {
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}

/* 62.7 -- the empty state.
   With no published openings the widget replaces the whole listing with the
   bare empty_job_msg string as a TEXT NODE inside #rec_job_listing_div. There
   is no element to select, so the container itself becomes the panel, gated on
   :not(:has(.rec-group)) so it reverts to a plain block the moment real
   openings arrive. Dashed rather than solid to read as "nothing here yet"
   instead of as an empty card. */
#top.page-id-1768 .lb-ds .lb-ds-zoho #rec_job_listing_div:not(:has(.rec-group)) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--ds-s6) var(--ds-s5);
  background: var(--surface-white);
  border: 1px dashed var(--border-light);
  border-radius: var(--ds-radius-media);
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary-light);
}

/* 62.8 -- responsive.
   The grid and both flex rows already reflow on their own, so these are the
   two things that do not: the type step the DS takes on small screens, and
   the card padding, which at 390 would otherwise spend 48 of ~350px on air. */
@media only screen and (max-width: 767px) {
  #top.page-id-1768 .lb-ds .lb-ds-zoho .rec_filter_cls {
    gap: var(--ds-s4) var(--ds-s5);
    padding: var(--ds-s3) var(--ds-s4);
  }
  #top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec-group {
    gap: var(--ds-s4);
  }
  #top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec-job-info {
    padding: 20px;
  }
  #top.page-id-1768 .lb-ds .lb-ds-zoho li.rec-job-title {
    font-size: 16px;
  }
}

@media only screen and (max-width: 600px) {
  #top.page-id-1768 .lb-ds .lb-ds-zoho ul.rec-job-info {
    padding: var(--ds-s4);
  }
  #top.page-id-1768 .lb-ds .lb-ds-zoho li.zrsite_Job_Description {
    -webkit-line-clamp: 4;
  }
  #top.page-id-1768 .lb-ds .lb-ds-zoho #rec_job_listing_div:not(:has(.rec-group)) {
    padding: var(--ds-s5) var(--ds-s4);
    min-height: 96px;
  }
}

/* 62.9 -- Enfold's own stacked-column margin.
   At <=767 Enfold emits .responsive #top #wrap_all .flex_column { margin: 0 0
   20px }, which lands on .lb-ds-zohowrap and adds 20px the DS rhythm did not
   ask for. Restated at matching specificity, as blocks 40 and 58 do for the
   same reason elsewhere. */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .lb-ds .lb-ds-zohowrap.flex_column {
    margin-bottom: 0;
  }
}

/* 62.10 -- rev 3, 2026-08-25: the SEARCH BAR, which the first pass missed.
   Found by measurement, not by reading: a repeated-render artefact in the QA
   harness stacked twelve copies of .rec-what-where, which is how it became
   visible that the element exists at all. It is a sibling of
   #rec_job_listing_div rather than a child, which is exactly why clearing
   the listing container never removed it -- and why the first pass, which
   only ever inspected the listing container, did not see it.

   Left unstyled it was the loudest thing in the section: two browser-default
   text fields at Arial 13.33px with a 4px radius, and an orange button, all
   laid out flex-wrap: nowrap at width 40%/40%/20%, which at 390 squeezes
   three controls into 318.9px.

   NOTE ON A ZOHO CLASS TRAP, recorded because it will catch the next person:
   Zoho puts the SAME class, .rec-job-info, on the job CARD (a ul) and on
   each SEARCH FIELD (an input). Every card rule in 62.3/62.4 above is
   therefore tag-qualified as ul.rec-job-info deliberately. Drop the ul and
   the card padding, radius and white ground land on the search inputs too. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec-what-where {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s3);
  margin: 0 0 var(--ds-s5);
  padding: 0;
  border: 0;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec-what-where input.rec-job-info {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
  height: auto;
  /* rev 4: measured 44px tall at every width EXCEPT where the button wraps to
     full width at <=600, which came out 42. --lb-touch-target is 44px and
     these are the only real controls in the section, so the floor is stated
     rather than left to whatever the padding happens to add up to. */
  min-height: var(--lb-touch-target);
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-card);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary-light);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec-what-where input.rec-job-info::placeholder {
  color: #7B8B99;
  opacity: 1;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec-what-where input.rec-job-info:focus {
  border-color: var(--brand-navy);
  outline: 2px solid var(--brand-navy);
  outline-offset: 1px;
}

/* The search button is the SECOND place Zoho writes brand_color inline:
     btn.setAttribute(style, "color:#fff;background-color:#eb5c23")
   so it needs the same !important as the title link at 62.5, for the same
   reason. Unified to --brand-orange (#EC7628) rather than left at Zohos
   #EB5C23 because the two are a hair apart and .lb-ds-note two paragraphs
   below paints its rule in #EC7628 -- side by side, two near-identical
   oranges read as a mistake rather than as a choice. Same escape hatch as
   62.5: set brand_color to #EC7628 in Zoho and both !importants can go. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec-what-where input.searchButton {
  flex: 0 0 auto;
  min-width: 120px;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--ds-radius-card);
  background: var(--brand-orange) !important;
  color: #FFFFFF !important;
  font-weight: var(--lb-weight-semibold);
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  #top.page-id-1768 .lb-ds .lb-ds-zoho .rec-what-where input.searchButton {
    flex: 1 1 100%;
  }
}

/* 62.11 -- rev 5, 2026-08-25. THE ROOT CAUSE, found by looking at a
   screenshot instead of at numbers, and the reason 62.2 was not enough.

   embed_jobs.css v1.1 is written for Zoho own hosted careers site, where a
   theme layer defines six CSS custom properties. In an EMBED none of them
   exists. Enumerated from the stylesheet and each one resolved against the
   live document: --background-wcolor, --background-color, --blue-color,
   --border-color, --sub-title-color, --field-hover-state. ALL SIX RESOLVE
   EMPTY, so every declaration built on them is dropped at computed-value
   time. That single fact explains the whole shape of this block:
     - no border or ground on .embed_jobs_head2 (62.1 supplies the layout)
     - no border on the job cards (62.3 supplies it)
     - no border on the search fields (62.10 supplies it)
     - and, worst, NO VISIBLE CHECKBOX on the facet filters, because the box
       is drawn as box-shadow: inset 0 0 0 2px var(--background-color) on
       .cw-facet-checkbox + span:before while the real input sits at
       position: absolute; opacity: 0. Unchecked, the control was invisible.
       Checked, it became a bare #285CC3 square with no outline.

   62.2 said the checkbox control was deliberately not touched, on the
   grounds that restyling a working affordance is how you break a filter.
   That reasoning was sound and the premise was wrong: the affordance was
   not working. THIS REVERSES THAT DECISION, and does it the narrow way --
   Zoho geometry (14px box, 2px radius, the absolute offsets, the 3x7
   rotated tick) is left exactly as shipped; only the paint is supplied. */

/* Zoho puts flex-direction: row-reverse on .rec_filter_cls together with
   justify-content: space-between, which with a single child parks the whole
   facet group against the right edge of an otherwise empty bar. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_filter_cls {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_facet_group {
  align-items: center;
  /* Zoho caps the group at max-height: 300px, which silently clips the list
     once there are enough job types to fill it. Released. */
  max-height: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_facet_group > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-s2) var(--ds-s4);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .rec_facet_group .cw-rec-filter {
  width: auto;
  padding: 0;
}
/* The group label reads as a lead-in on the same line as its own checkboxes
   rather than as a heading above them, so the one facet that has no label
   (Remote_Job) still sits on the same baseline as the one that does. */
#top.page-id-1768 .lb-ds .lb-ds-zoho span.job-type {
  display: inline;
  margin: 0;
}

/* Zoho resets font-family to the sans-serif keyword here too, exactly as it
   does on .embed_jobs_head2 (see 62.1 rev 2). */
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox + span {
  font-family: inherit;
  color: var(--text-secondary-light);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox + span:before {
  box-shadow: inset 0 0 0 2px #9FB0BE;
  background: var(--surface-white);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox + span:hover:before {
  box-shadow: inset 0 0 0 2px var(--brand-navy);
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox:checked + span:before {
  background: var(--brand-navy);
  box-shadow: none;
}
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox:focus-visible + span:before {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* rev 6: the tick. Zoho draws it as a rotated 3x7 box with
   border-right/border-bottom, and the checked state never gives those
   borders a colour that survives an embed -- measured on the checked control
   they came back as rgb(70, 89, 104), i.e. the inherited label ink from
   62.11, which is near-invisible on the navy box the line above paints.
   White, and thick enough to read at 14px. Geometry untouched. */
#top.page-id-1768 .lb-ds .lb-ds-zoho .cw-facet-checkbox:checked + span:after {
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}

/* ==============================================================================
   BLOCK 64 - 会社情報 family refinement round. 2026-08-25, Red1.

   Two new component families and one spacing correction:
   .lb-ds-pblock / -pgrid  the partner-ENTITY block on 20001. The page used to
       present Lumerical, OpticStudio and Speos as three peer cards, which read
       as three partner companies. Now Ansys is one block that owns three
       product rows, and each foundry platform is one block that names its
       partner. Logos are real assets, never redrawn.
   .lb-ds-formwrap        the contact form gap and centring on 1494.
   ============================================================================== */

/* 64.1 -------------------------------------------- the partner block shell */
#top .lb-ds.lb-dsr .lb-ds-pblock {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ds-s6);
  border: 1px solid var(--border-light);
  border-radius: var(--ds-radius-card);
  background: var(--surface-white);
}
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-pbody {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* 64.2 ------------------------------------------------- the logo band */
/* The three assets have wildly different ratios: the Ansys badge is 392x123
   (3.2:1), the LIGENTEC wordmark 2084x260 (8:1) and SMART Photonics 195x137
   (1.4:1). A fixed-height band with object-fit: contain is the only way three
   marks that different sit on one baseline without being distorted, and the
   brief forbids altering a partner logo. Height is the constant, width floats. */
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 72px;
  margin: 0 0 var(--ds-s5);
}
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo-i {
  display: block;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}
/* Silicon Photonics has no partner and must NOT show an empty logo slot. The
   band carries a real sentence instead, so the three blocks stay the same
   height and nothing reads as a missing image. */
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo .lb-ds-pnote {
  margin: 0;
  font-family: var(--ds-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary-light);
}

/* 64.3 ------------------------------------------- name / role / desc / link */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-pblock .lb-ds-pname {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-primary-light);
}
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-pblock .lb-ds-prole {
  margin: var(--ds-s2) 0 0;
  font-family: var(--ds-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary-light);
}
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-pk {
  display: inline-block;
  margin-right: var(--ds-s3);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
}
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-pblock .lb-ds-pdesc {
  margin: var(--ds-s5) 0 0;
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary-light);
}
/* auto pins every CTA to its own card floor, so three blocks with unequal copy
   still align their links across the row. */
#top .lb-ds.lb-dsr .entry-content-wrapper .lb-ds-pblock .lb-ds-plink {
  margin: auto 0 0;
  padding-top: var(--ds-s5);
}

/* 64.4 ------------------------------------------ the platform grid, 3 -> 1 */
/* Family step: the other multi-column strips on these pages collapse at 1120,
   so this does too rather than inventing a fourth breakpoint. */
#top .lb-ds.lb-dsr .lb-ds-pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-s6);
  align-items: stretch;
  margin-top: var(--hub-half);
}
@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 64.5 -------------------------------- the Ansys block: identity beside body */
#top .lb-ds.lb-dsr .lb-ds-pblock-wide {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--ds-s7);
  align-items: start;
  margin-top: var(--hub-half);
}
#top .lb-ds.lb-dsr .lb-ds-pblock-wide .lb-ds-plogo {
  margin-bottom: var(--ds-s5);
}
#top .lb-ds.lb-dsr .lb-ds-pblock-wide .lb-ds-plist {
  margin-top: var(--ds-s5);
}
/* Family step: 1504 own 5fr/7fr .lb-ds-dom split collapses at 1120, so the Ansys
   identity/body split does too rather than inventing a fourth breakpoint. */
@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-s6);
  }
}

/* 64.6 --------------------------------------- <=767 logo band and padding */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock {
    padding: var(--ds-s5);
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo {
    min-height: 56px;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo-i {
    max-height: 48px;
    max-width: 168px;
  }
}

/* 64.7 ------------------------------------ 1494 contact form: gap and centring */
/* Two separate defects, both fixed at the WordPress wrapper. Nothing inside the
   Zoho iframe is touched.

   GAP. The lead-to-form distance was the sum of three separate tokens: the
   .lb-ds-head bottom margin, the Enfold column margin, and .lb-form-inline own
   margin-top (--hub-half). Zeroing the first and third makes .lb-ds-formwrap the
   ONE place the gap is declared, so the specified number is the number in the
   file: 52px desktop (brief: 48-56), 36px at <=767 (brief: 32-40).

   CENTRING. The wrapper sat left-aligned in a 1296px container, leaving a large
   dead area to its right. It is now centred and held to a form measure rather
   than stretched to fill the row. The residual slack INSIDE the iframe is Zoho
   own 90 percent content width; it is not reachable from here, and it is
   recorded as a Zoho-side item rather than hacked around with a negative
   margin. */
#top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-formhead {
  margin-bottom: 0;
}
#top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-formwrap {
  margin-top: 52px;
  margin-bottom: 0;
}
#top .lb-ds.lb-dsr .lb-ds-formwrap .lb-form-inline {
  margin: 0 auto;
  max-width: 720px;
}
#top .lb-ds.lb-dsr .lb-ds-formwrap .lb-form-inline .lb-form-inline-fb {
  margin-top: var(--ds-s5);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-formwrap {
    margin-top: 36px;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-formwrap .lb-form-inline {
    max-width: none;
  }
}

/* 64.8 --------------------------- 1494: the last 14px of the lead-to-form gap */
/* Measured 66px against a declared 52px. The extra 14 is the bottom margin the
   theme puts on the last av_textblock inside the head column, which survives
   zeroing the column margin. Released here so .lb-ds-formwrap margin-top is the
   only thing declaring this gap and the measured number equals the declared one:
   52px desktop, 36px at <=767. */
#top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-formhead > *:last-child {
  margin-bottom: 0;
}
#top #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-formhead > *:last-child p:last-child {
  margin-bottom: 0;
}

/* 64.9 ------------------------- the Ansys badge is a REVERSED asset. Measured. */
/* authorized-channel-partner-rev.webp is 87 percent transparent and its opaque
   pixels are 90 percent WHITE plus 9 percent Ansys gold. The rev in the filename
   is literal: it is the reversed, light-on-dark variant. On the white partner
   card only the gold accent was visible and the wordmark disappeared entirely.
   Sampled per-pixel on the live file, not inferred from the name.

   The brief forbids redrawing or altering a partner logo, so the logo is left
   exactly as shipped and the GROUND is corrected instead: a navy chip, which is
   the context a reversed badge is drawn for. White on #072C50 is the design
   system own on-dark pairing and clears AA comfortably.

   Only this one band gets the chip. Checked the other two the same way:
   Ligentec-logo.webp is a 100 percent black wordmark and smartphotonics_logo.webp
   is a colour logo on a solid white field - both correct on the white card, and a
   navy chip would have made the LIGENTEC wordmark invisible in turn. */
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo.lb-ds-plogo-rev {
  align-self: flex-start;
  padding: var(--ds-s4) var(--ds-s5);
  border-radius: var(--ds-radius-media);
  background: var(--surface-navy);
}
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo.lb-ds-plogo-rev {
    padding: var(--ds-s3) var(--ds-s4);
  }
}

/* 64.10 ---------------- spacing drift: the partner blocks declared their own top */
/* MEASURED against approved 1504 and 19929 at 1440: every other head-to-content
   gap in the family is 62px, produced by the .lb-ds-head bottom margin alone.
   .lb-ds-pgrid and .lb-ds-pblock-wide each added margin-top: var(--hub-half) on
   top of that, so page 20001 measured 110px where the family measures 62 - a
   48px drift, and the only one the whole family audit found.

   Released rather than re-tuned: the shared rule already owns this gap, so the
   component should not declare it a second time. Same reasoning as 64.7 for the
   contact form, where the gap now has exactly one declaration site. */
#top .lb-ds.lb-dsr .lb-ds-pgrid,
#top .lb-ds.lb-dsr .lb-ds-pblock-wide {
  margin-top: 0;
}

/* 64.11 ------------------------- logo band: optical weight, not just alignment */
/* MEASURED after the 2025 SMART Photonics asset replaced the older one. The three
   marks have very different aspect ratios, so a single max-height plus a single
   max-width renders them at very different optical weights:

     Ansys badge     392x123 (3.2:1) -> 200 x 63  width-bound
     LIGENTEC        2084x260 (8:1)  -> 200 x 25  width-bound
     SMART Photonics 725x597 (1.2:1) ->  78 x 64  height-bound  <- far too small

   A near-square mark is the case a height cap punishes hardest, and this one is
   also a light logo on a near-white field, so at 78px it read as an empty slot in
   the render even though the file had loaded (naturalWidth 725, complete true).
   Raising the band and the cap together brings it to 87x72 without touching the
   other two, which stay width-bound. Applied to the shared rule so all three
   blocks move as one; no per-logo exception. */
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo {
  min-height: 80px;
}
#top .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo-i {
  max-height: 72px;
}
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo {
    min-height: 64px;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-pblock .lb-ds-plogo-i {
    max-height: 56px;
  }
}


/* ============================================================================
   BLOCK 65 -- 技術情報 hub (17675) and its five child pages. 2026-08-26, Red1.

   SCOPE. Every rule in this block is page-scoped with
   `:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101,
   .page-id-18110, .page-id-19924)`. `:is()` takes the specificity of its most
   specific argument, so that group counts as exactly ONE class, which keeps
   every selector below predictable against blocks 20 / 21 / 38 / 39. Nothing
   outside these six pages moves, and no design token is redefined: the values
   used here are the ones the system already froze.

   WHAT RED1 ASKED FOR, and what each part answers:
     a. darker approved orange for small text on light grounds   -> 65.1
     b. hero breadcrumb / supporting text contrast               -> 65.2
     c. closing CTA: all white text must clear contrast          -> 65.3
     d. article rows fully clickable, hover AND keyboard focus   -> 65.4
     e. no fixed/min-height dead space under short lists         -> 65.5, 65.7
     f. child heroes slightly more compact than the hub hero     -> 65.6

   MEASURED IN-BROWSER before writing, at 1440 on 17675 and 18049:
     * `.lb-ds-light .lb-ds-eyebrow` computed to rgb(194,90,21) = #C25A15.
       On the light surface #F5F7F9 that is 4.10:1 -- BELOW the 4.5:1 AA floor
       for normal text. The dates, the row arrow, `.lb-ds-more` and the
       pagination cells were already on #A8500F (5.12:1), the frozen darker
       orange from block 21.2, so the eyebrow was the only small-text hole
       left. 65.1 closes it with the SAME frozen value; no new colour.
     * `.lb-ds-close` computed to `--lb-gradient-warm`, whose first stop is
       #F39A55. Against it the panel's own body colour #FFF1E4 is 1.98:1 and
       pure white is 2.20:1 -- both fail, and white fails even the 3:1 large
       -text floor. 65.3 darkens the light end of the ramp for these six pages
       only; the token itself is a shared consumer (`.lb-warm`, `.lb-tile-warm`,
       `.lb-v2-close`, `.lb-photonica`) and is deliberately untouched.
     * On 18049 the gap between the last article row and the 「ほかのカテゴリ」
       label measured 160px: 64px of listing-section bottom padding, then 64px
       of sibling-section top padding, then 32px of `.lb-ds-tifoot` margin-top.
       That is the "large empty area below the three articles". 65.7 removes
       the duplicated section step and the spurious margin. It is NOT a
       min-height: nothing in the family sets one on a listing, verified.
     * An empty category renders NOTHING at all -- `do_shortcode()` on
       `[av_blog categories='121']` returns a zero-length string, not an empty
       slider and not a "Nothing Found" notice. So the column survives as a
       1px-tall `.flex_column` and only its neighbours' margins show. 65.5
       removes the column and the head margin above it, so the section height
       follows its content exactly.

   WHY THE CONDITIONAL SECTIONS ARE GONE. lb-hubsections.php dropped any
   `[av_section]` carrying `lb-ifcat-<id>` whose term count was 0. That is why
   セミナー・資料 and 活用事例 had no body section on the hub and no listing
   section on their own pages: categories 121 and 254 hold no published Posts.
   Red1, 2026-08-26: both must have dedicated sections. The generator now emits
   every section unconditionally, so no `lb-ifcat-*` class remains on any of
   these six pages. lb-hubsections.php is left installed and untouched -- it is
   generic and simply no longer matches anything here.
   ========================================================================= */

/* 65.1 ------------------------------------- small text on a light ground */
/* Block 20 restated the light-surface eyebrow to #C25A15 at (2,3,0). This is
   (2,4,0) and page-scoped, so only these six pages take the darker value. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-ds-light .lb-ds-eyebrow {
  color: #A8500F;
}
/* The ghost cross-card on the hub carries `.lb-ds-eyebrow-mute`, which block 20
   also unified to #C25A15. `.lb-ds-tifoot`'s own mute rule already resolves to
   the secondary slate #465968 (7.0:1) and must NOT be disturbed, so this is
   aimed at the xcard alone. */
#top.page-id-17675 #wrap_all .lb-ds.lb-dsr .lb-ds-xcard .lb-ds-eyebrow.lb-ds-eyebrow-mute {
  color: #A8500F;
}

/* 65.2 ------------------------------------------- hero supporting text */
/* The crumb text itself already resolves to #C9C9C9 (8.5:1 on the navy ramp);
   the separator did not -- `#top .lb-crumb-sep { opacity: .5 }` halved it to
   roughly 4:1 and made the crumb read as one blurred string. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds-hero .lb-ds-crumbs .lb-crumb-sep {
  opacity: 0.75;
}
/* The hub's five-row hero index: its one-line description was on
   --text-muted-dark (#9E9E9E, 5.28:1 at 13px). #B4BAC0 is 7.22:1 and still
   sits clearly below the row name, which keeps the hierarchy the design draws. */
#top.page-id-17675 .lb-ds.lb-dsr .lb-ds-tiidx .lb-ds-tidesc {
  color: #B4BAC0;
}

/* 65.3 ------------------------------------------------ closing CTA panel */
/* ROLLED BACK 2026-08-26 (round T3, Red1). This block briefly carried a
   darkened four-stop ramp here. Red1 has restored the approved
   `--lb-gradient-warm`, which these pages now inherit from block 17.6 exactly
   as every other `.lb-ds-close` does. No background is declared here any more,
   and the shared token is NOT redefined.

   KNOWN CONSEQUENCE, recorded rather than worked around: measured against the
   ramp's first stop #F39A55, the panel's own body colour #FFF1E4 is 1.98:1 and
   the white H2 is 2.20:1 -- below the WCAG AA floor (4.5:1 normal text, 3:1
   large text). The measurement stands; keeping the approved gradient is Red1's
   decision. If the contrast has to be closed without touching the ramp, the
   remaining levers are the panel's text treatment or an overlay, not this
   block. */

/* 65.4 ------------------------------- the article row as a real control */
/* The row was ALREADY fully clickable: block 38 stretches the title's own
   anchor over `article.slide-entry` with `::after { inset: 0 }`. What it had
   was a border-colour hover and NO keyboard state at all -- the stretched
   pseudo-element means the browser's default ring draws around the title text
   only, several rows away from what the user is actually on.

   Hover now also moves the title, so the affordance does not depend on a 1px
   hairline. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry:hover .slide-entry-title a {
  color: #A8500F;
}
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist article.slide-entry:hover .slide-entry-title a {
  color: var(--accent-light-orange);
}
/* The card is a dark surface whatever tone its section carries, so it takes the
   light orange in both places. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry:hover .slide-entry-title a {
  color: var(--accent-light-orange);
}

/* 65.4a  MEASURED with elementFromPoint across the row at 1440: every point
   returned the row's stretched anchor EXCEPT the date itself, which returned
   `TIME.slide-meta-time`. So the row was clickable everywhere but on the one
   element a reader's eye lands on first. Block 38 stretches the anchor with
   `::after { position: absolute; inset: 0 }` at `z-index: auto`, which is only
   guaranteed to paint above NON-positioned siblings; Enfold's own footer chrome
   wins the hit test. One explicit stacking step fixes it. Safe here because the
   only other anchor in the row, `a.slide-image`, is `display: none` in this
   component, so nothing interactive is covered. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-title a::after,
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-title a::after {
  z-index: 1;
}

/* A family focus ring. `.lb-ds` never had one -- block 11's utility is scoped to
   `.lb-sec` and block 22's to `.lb-v2` -- so every link on these pages fell back
   to the UA default. (1,3,0) / (1,4,0): below the (2,4,0) button rules, which
   keep their own white ring on the warm panel. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds a:focus-visible {
  outline: 2px solid var(--accent-light-orange);
  outline-offset: 2px;
}
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-ds-light a:focus-visible {
  outline-color: #A8500F;
}

/* The row itself takes the ring, not the title. Guarded by @supports so a
   browser without :has() keeps the default ring rather than losing the focus
   indicator entirely -- the ring is only suppressed inside the guard. */
@supports selector(:has(*)) {
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-tilist .slide-entry-title a:focus-visible,
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-ticards .slide-entry-title a:focus-visible {
    outline: none;
  }
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-tilist article.slide-entry:has(.slide-entry-title a:focus-visible) {
    outline: 2px solid #A8500F;
    outline-offset: 3px;
    border-radius: 3px;
    border-bottom-color: var(--brand-orange);
  }
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr.lb-ds-navy .lb-ds-tilist article.slide-entry:has(.slide-entry-title a:focus-visible),
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .lb-ds-ticards article.slide-entry:has(.slide-entry-title a:focus-visible) {
    outline: 2px solid var(--accent-light-orange);
    outline-offset: 3px;
    border-radius: 3px;
    border-bottom-color: var(--accent-light-orange);
  }
  /* Hover and focus read the same, so a keyboard user sees what a pointer user
     sees. The hairline is folded into the rules ABOVE rather than carried by a
     second rule of its own: an otherwise identical `:has(a:focus-visible)` rule
     measured as not applied on the real render, while the `:has(.slide-entry
     -title a:focus-visible)` rules did apply. One selector, one declaration
     block, one measured result. */

  /* 65.5 ------------------------------- an empty category takes no space */
  /* Verified server-side: an av_blog whose category has no published Posts
     returns an empty string. The column is then a 1px `.flex_column` whose only
     effect is to hold the head's 48px bottom margin away from the section
     footer. Remove the column, and remove that margin with it, so the section
     is exactly head + footer. */
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .flex_column.lb-ds-tilist:not(:has(article.slide-entry)),
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .flex_column.lb-ds-ticards:not(:has(article.slide-entry)) {
    display: none;
  }
  /* NOTE: `:has()` may NOT be nested inside another `:has()` -- the first
     version of this rule was `:has(> .lb-ds-tilist:not(:has(article)))` and the
     whole selector was therefore INVALID and silently dropped (caught in the
     render check on 18101, where the head kept its 48px). `:has()` inside
     `:not()` IS allowed, which is why the display:none rule above works. The
     two conditions are split into sibling pseudo-classes on the wrapper: it
     owns a listing column, and it contains no article anywhere. */
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr .entry-content-wrapper:has(> .flex_column.lb-ds-tilist):not(:has(article.slide-entry)) .flex_column.lb-ds-head,
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr .entry-content-wrapper:has(> .flex_column.lb-ds-ticards):not(:has(article.slide-entry)) .flex_column.lb-ds-head {
    margin-bottom: 0;
  }
}

/* 65.6 --------------------------------------------- compact child heroes */
/* The hub hero opens the section and carries the five-row index; a child hero
   carries crumbs, eyebrow, H1 and one lead. `.lb-dsr` gives every section
   `--hub-sec` (64px) top and bottom, which on a four-element hero reads loose
   next to the hub. 44px is the same rhythm one step down, and it scales with
   the token at the two lower breakpoints. The hub keeps 64/64 untouched, so the
   two are visibly different depths. */
#top:is(.page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-hero {
  padding-top: clamp(28px, 3.1vw, 44px);
  padding-bottom: clamp(28px, 3.1vw, 44px);
}
/* and the crumb's own step down to the eyebrow, from 20/32 to 14/24 */
#top:is(.page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds-hero .lb-ds-crumbs {
  padding-top: 14px;
  padding-bottom: 24px;
}

/* 65.7 ------------------- the sibling row is a continuation, not a section */
/* MEASURED on 18049: the listing section closes with 64px, the sibling-row
   section opens with another 64px, and `.lb-ds-tifoot` adds 32px on top of
   that -- 160px of nothing between the last article and 「ほかのカテゴリ」.
   The 32px is block 38.4's step from a listing DOWN to its footer, which is
   right on the hub, where the footer sits inside the listing section. On a
   child page the footer is the first and only child of its own section, so it
   has nothing to step away from.
   Both sections are `lb-ds-light`, i.e. the same surface, so closing the seam
   costs nothing visually and leaves one clean 64px step. */
#top:is(.page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-light + .lb-ds.lb-dsr.lb-ds-light {
  padding-top: 0;
}
#top:is(.page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) .lb-ds.lb-dsr .flex_column.lb-ds-tifoot:first-child {
  margin-top: 0;
}

/* 65.9 ------------------- hero and CTA measure. 2026-08-26, round T3, Red1. */
/* MEASURED FIRST, at 1376 CSS px on 17675 / 18074 / 18049 / 18110, before any
   rule was written. The awkward breaks are NOT caused by container padding:
   `.container` carries 50px left and right, which is the design system's
   standard and is shared with every approved page in the family, and the inner
   column measured 1138px on all four. The text boxes inside that column were
   being capped far below it by their OWN max-width:

     element                    cap         available   longest line needed
     .lb-ds-hero .lb-ds-lead    46em = 736  1138        hub 1020, release 862, guide 830
     .lb-ds-close h2            24em = 991  1138        notes 1278, hub 1155, guide 1155
     .lb-ds-close .lb-ds-lead   52ch = 525  1138        guide 924, release 702, notes 559

   That is the whole defect. A 559px sentence folded into a 525px box is why
   the 技術ノート closing panel put 「承ります。」 alone on a second line, and a
   924px sentence in the same box is why 設計・解析ガイド broke where it did.
   Range.getClientRects() confirmed both breaks character by character.

   The container padding is deliberately LEFT ALONE: it is not the cause, and
   moving it would shift the approved content alignment on all six pages away
   from the rest of the design system for no gain.

   Copy, font-size, line-height, text-align, `word-break: auto-phrase` and
   `text-wrap: balance` are all untouched, there is no page-specific rule, and
   no manual <br>. `min(100%, ...)` means the caps can never exceed the column,
   so 767 / 600 / 390 keep wrapping naturally with no overflow.

   BODY-section leads keep the 46em reading measure on purpose: only the hero
   and the closing panel are widened, which is the scope Red1 listed. A hub or
   child H2 whose text is genuinely longer than the column still wraps -- to two
   balanced lines instead of one long line plus an orphan. */

#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-lead {
  max-width: min(100%, 66em);
}
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper h2 {
  max-width: min(100%, 1180px);
}
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper .lb-ds-lead {
  max-width: min(100%, 66em);
}

/* 65.9a  THE ONE PLACE PADDING REALLY IS RESPONSIBLE. After the caps above,
   the 技術情報 and 設計・解析ガイド closing titles measured 1155px intrinsic
   against 1138px of column -- SEVENTEEN pixels short of one line, so both were
   folding into two lines and `text-wrap: balance` was choosing a mid-clause
   break (「探している情報が見つからない / ときは、お問い合わせください」) rather
   than the comma. 50px -> 32px on the closing panel's own container returns
   36px and both fit.

   Scoped to `.lb-ds-close` ALONE and left at the approved 50px everywhere else
   on the page, because the closing panel is a centred, full-bleed band whose
   inner edges align with nothing: changing it moves no approved relationship.
   The hero, the listings and the sibling row keep the design system's 50px, so
   the page's content alignment is unchanged.

   >=768 only. Below that the approved 50px stays, so the mobile panel is
   untouched and text never comes closer to the screen edge than the design
   already allows. */
@media only screen and (min-width: 768px) {
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-close .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* 65.9b  ORPHAN CONTROL, found in the responsive pass, not on desktop. At 767
   the 技術ノート closing paragraph re-created exactly the defect Red1 named:
   the column is 590px there and the sentence needs about 692px, so it broke
   29 characters / 5 characters and put 「承ります。」 alone again. Widening cannot
   solve this one -- at 767 the sentence genuinely does not fit on a line.

   `text-wrap: balance` is the design system's OWN answer to this: block 17.6
   already sets it on `.lb-ds-close h2`. Applying the same property to the two
   lead paragraphs makes the browser split them evenly, which lands the break on
   the comma (「…確認から、 / 個別の…承ります。」) at 767 and 600 instead of leaving a
   five-character last line. It changes no font, size, weight, colour or copy,
   and it is inert on a paragraph that already fits one line, so desktop is
   unaffected. */
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-lead,
#top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper .lb-ds-lead {
  text-wrap: balance;
}

/* 65.8 ------------------------------------------------------- responsive */
@media only screen and (max-width: 767px) {
  /* Enfold gives every `.flex_column` `margin: 0 0 20px` at this width. Block
     38 already clears it on the article rows; the listing COLUMN keeps its own,
     which under a short list is 20px of dead space directly above the section
     footer. */
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-tilist,
  #top:is(.page-id-17675, .page-id-18074, .page-id-18049, .page-id-18101, .page-id-18110, .page-id-19924) #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-ticards {
    margin-bottom: 0;
  }
}

/* ============================================================================
   BLOCK 66 -- Ansys Optics システム要件 (page 10452,
   /support/ansys-optics-system-requirement/). 2026-08-27.

   SOURCE OF TRUTH for composition: the approved サポート hub (page 1471,
   block 48). Same hero, same section grammar, same closing panel. This page is
   a Support page and deliberately borrows NOTHING from Product Design V2.

   SCOPE, and why nothing here can reach another page. Every selector below
   requires `lb-dsr` PLUS one of four class names introduced by this block:
   `.lb-ds-srmeta`, `.lb-ds-srtbl`, `.lb-ds-srul` and `.lb-ds-srsub`. All four
   were asserted absent from lb-redesign.css AND from the post_content of every
   post on the install before this block was written (0 occurrences each).
   Inertness here is STRUCTURAL, not a specificity argument: with the class
   absent, no selector below can match.

   THIS BLOCK IS SMALL ON PURPOSE. Nine of the twelve things the page needs
   already had a component, and each was checked against the Support hub before
   being reused rather than reinvented:

     need                         reused component                     match
     -------------------------------------------------------------------------
     hero crumbs/eyebrow/H1/lead  .lb-ds-crumbs / -eyebrow /           unchanged
                                  -h1wide / -lead / -herocopy
     hero metadata pairs          .lb-ds-spec / -spec-k / -spec-v      hero ink
                                  (hero ink comes free from 30.3)      free
     product quick navigation     .lb-ds-cards.lb-ds-cards-3 +         3/2/1
                                  .lb-ds-card / -card-title / -desc
     requirement tables           .lb-ds-tscroll.lb-ds-cmp +           stacked
                                  .lb-ds-table                         at <=767
     official vs LightBridge      .lb-ds-badge / .lb-ds-badge-lb       neutral
                                                                       vs orange
     section heads                .lb-ds-head + .lb-ds-eyebrow + h2    unchanged
     inline notes                 .lb-ds-note                          unchanged
     hardware guidance, 3-up      .lb-ds-wcols / -wcol / -wnum /       3-up -> 1-up
                                  -wtitle / -wtext (on navy)
     reference + related rows     .lb-ds-slist / .lb-ds-srow /         name | sum
                                  -srow-name / -srow-sum / .lb-ds-spaux       | arrow
     closing CTA                  .lb-ds-close + .lb-btnrow            unchanged

   The mobile behaviour the brief asks for -- "convert tables into stacked
   requirement rows rather than forcing horizontal scrolling" -- is ALREADY the
   `.lb-ds-cmp` contract (block 33/40): at <=767 it releases the min-width,
   hides the thead, turns every row into a block and prints `data-l` above each
   value. Nothing about that is restated here. Block 66 only releases the
   desktop 860px floor, because a two-column requirement table has no business
   scrolling at 990.

   NOT USED, deliberately: Product Design V2 (`lb-v2-*`), the 解析技術 anatomy
   (`lb-ds-at*` / `lb-ds-am*` / `lb-ds-sel*` / `lb-ds-journey`), the Products
   and Lumerical hub product rows (`lb-ds-frow` / `lb-ds-brow`), the 技術情報
   listing families, `.lb-ds-pill` (block 48.3's ruling stands: the family chip
   is not a requirement label -- `.lb-ds-badge` is), and `.lb-ds-cont` (round
   P: a new semantic section must not start with insufficient top padding).
   ========================================================================= */

/* 66.1 -------------------------------------- the hero metadata row
   Two `.lb-ds-spec` pairs side by side, wrapping to one column when the hero
   narrows. The pairs themselves are NOT restyled: block 30.3 already resolves
   `.lb-ds-spec-k` to `--text-muted-dark` and `-spec-v` to `--text-primary-dark`
   inside `.lb-ds-hero`, which is exactly the ink a metadata row wants. All this
   rule does is lay them out. */
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-srmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ds-s5) var(--ds-s7);
  margin: var(--ds-s6) 0 0;
}
#top .lb-ds.lb-dsr.lb-ds-hero .lb-ds-srmeta .lb-ds-spec {
  gap: 6px;
}

/* 66.2 ------------------------------------ the small secondary line
   Used under a value inside a requirement cell, and once in the hero for the
   "requirements change by release" note. Explicit ink per surface: inherited
   colour is not reliable here because the same class appears on navy, on light
   and inside a table cell whose td colour is already overridden by
   `.lb-ds-cmp`. Two ids so Enfold's own paragraph rules cannot win. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-srsub {
  margin: var(--ds-s2) 0 0;
  font-size: 13px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
#top #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-srsub {
  color: var(--text-secondary-dark);
  max-width: 62ch;
}
#top #wrap_all .lb-ds.lb-dsr.lb-ds-light .lb-ds-srsub { color: var(--text-secondary-light); }
#top #wrap_all .lb-ds.lb-dsr.lb-ds-navy .lb-ds-srsub { color: var(--text-secondary-dark); }

/* 66.3 ------------------------------------ the requirement-table modifier
   Three things, all of them corrections the base `.lb-ds-table` cannot make on
   its own for a two-column spec table:

     a) `tbody th { white-space: nowrap }` is right for a four-column comparison
        table with short labels. It is wrong for 「オペレーティングシステム」 and
        「ストレージ（インストール）」, which would push the table past its
        container. Restated at the same specificity, later in the file.
     b) the row label carries its Ansys公式要件 / LightBridge推奨 badge, which
        must sit on its own line under the label -- and must get there without a
        hand-written <br>, which the brief forbids.
     c) the family's generic `.lb-ds-tscroll .lb-ds-table` floor of 860px makes
        a TWO-column table scroll at 990 for no reason. Released here at equal
        specificity; `.lb-ds-cmp` already releases it again at <=767. */
/* Enfold sets `text-transform: uppercase` on every `th`, and text-transform
   INHERITS -- so both the Japanese row label and the badge span inside it were
   rendering as 「対応OS（WINDOWS）」 and 「LIGHTBRIDGE推奨」. Measured on the
   deployed page before this rule existed. Cleared on the modifier only, so no
   other table on the install changes. */
#top .lb-ds.lb-dsr .lb-ds-srtbl tbody th,
#top .lb-ds.lb-dsr .lb-ds-srtbl tbody th .lb-ds-badge {
  text-transform: none;
}
#top .lb-ds.lb-dsr .lb-ds-srtbl tbody th {
  white-space: normal;
  width: 26%;
  padding-right: var(--ds-s5);
  overflow-wrap: anywhere;
}
#top .lb-ds.lb-dsr .lb-ds-srtbl tbody th .lb-ds-badge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: var(--ds-s2);
}
#top .lb-ds.lb-dsr .lb-ds-srtbl td {
  overflow-wrap: anywhere;
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll .lb-ds-srtbl {
  min-width: 0;
}

/* 66.4 ------------------------------------ the value list inside a cell
   OS lists, GPU driver lists and install-size lists are lists, and reading
   them as a run-on sentence is exactly the density the brief rejects. Enfold
   styles `.entry-content-wrapper ul` with its own padding, markers and
   margins, so all three are cleared. The marker is a 5px orange rule rather
   than a disc: restrained, and it reads as part of the design system's
   existing orange rather than as a new decoration. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-srul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-srul > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-srul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 5px;
  height: 1px;
  background: var(--brand-orange);
}
#top #wrap_all .lb-ds.lb-dsr.lb-ds-light .lb-ds-srul > li { color: var(--text-secondary-light); }
#top #wrap_all .lb-ds.lb-dsr.lb-ds-navy .lb-ds-srul > li { color: var(--text-secondary-dark); }
#top #wrap_all .lb-ds.lb-dsr.lb-ds-navy .lb-ds-srul > li::before {
  background: var(--accent-light-orange);
}
/* Inside a guidance card on navy the list follows `.lb-ds-wtext` and needs the
   same separation the card's own paragraphs get. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-wcol .lb-ds-srul {
  margin-top: var(--ds-s4);
}

/* 66.5 ------------------------------------------------------- responsive
   `.lb-ds-cmp` already does the stacking. These are the two things it does not
   know about: the label column's percentage width (meaningless once the row is
   a block) and the list's own type size. */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srtbl tbody th {
    width: auto;
    padding-right: 0;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srtbl tbody th .lb-ds-badge {
    margin-top: 6px;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-srul > li {
    font-size: 14px;
    line-height: 1.8;
  }
  #top #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-srmeta {
    gap: var(--ds-s4) var(--ds-s5);
    margin-top: var(--ds-s5);
  }
}

/* ============================================================================
   BLOCK 67 -- the four サポート child pages (2026-08-27):
   /support/technical-support/ · /support/knowledge-base/ ·
   /support/training/ · /support/design-analysis/

   SOURCE OF TRUTH for composition: the approved サポート hub (1471, block 48)
   and the approved Ansys Optics システム要件 page (10452, block 66). The four
   pages are built ENTIRELY from components those two already ship -- hero,
   crumbs, eyebrow, h1wide, lead, anchors, cards-3, wcols, slist/srow, spaux,
   cross/xcard, note, srul, srsub, cmp tables, close + btnrow. Product Design
   V2 is not used anywhere on them.

   SCOPE. This block adds exactly ONE class, `.lb-ds-srtbl3`, asserted absent
   from lb-redesign.css AND from the post_content of every post on the install
   before the append. Its other two rules extend `.lb-ds-srul` -- itself a
   block-66 class -- into two contexts block 66 did not have. Neither can reach
   a page that does not already carry block-66/67 markup, so inertness here is
   STRUCTURAL, not a specificity argument.
   ========================================================================= */

/* 67.1 ------------------------------- the three-column comparison variant
   `.lb-ds-srtbl` (66.3) releases the family's 860px floor, which is right for
   a TWO-column requirement table. A three-column comparison
   (項目 | テクニカルサポート | 設計・解析支援) is a different shape: with no
   floor at all, the two value columns crush to ~190px between 768 and 900.
   A 560px floor keeps them readable between 768 and 900, where the table is
   still a table. The label column is narrower here than in 66.3 because there
   are two value columns to feed rather than one.

   MEASURED, and the reason 67.3 exists: `.lb-ds-cmp` does release the floor at
   <=767 -- but it does so from `#top #wrap_all .lb-ds.lb-dsr .lb-ds-cmp
   .lb-ds-table` (2 ids, 4 classes), which this rule (2 ids, 6 classes)
   out-specifies from inside a media query it does not participate in. On the
   first deploy the training comparison therefore stayed at its floor inside a
   318px column at 390 and pushed the whole section off-screen. The floor has to
   be released again, here, at this specificity. */
#top .lb-ds.lb-dsr .lb-ds-srtbl.lb-ds-srtbl3 tbody th {
  width: 22%;
}
#top #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll .lb-ds-srtbl.lb-ds-srtbl3 {
  min-width: 560px;
}

/* 67.2 --------------------------------- the value list inside a card
   Block 66.4 gave `.lb-ds-srul` its separation only inside `.lb-ds-wcol`,
   because that was the only place 10452 put one. The training and
   設計・解析支援 pages also put a short list inside `.lb-ds-card`, under the
   card's own `.lb-ds-card-desc`, which needs the same step. Restated rather
   than widened in place so block 66 stays exactly what 10452 was reviewed
   against. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-card .lb-ds-srul {
  margin-top: var(--ds-s4);
}
/* The card list runs at the card's own descriptive size, not the table's. */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-cards-3 .lb-ds-card .lb-ds-srul > li {
  font-size: 14px;
  line-height: 1.9;
}

/* 67.3 ------------------------------------------------------- responsive
   Releases 67.1's floor once `.lb-ds-cmp` has stacked the table. Written here
   rather than relying on the family's own release, for the specificity reason
   recorded in 67.1. */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-tscroll .lb-ds-srtbl.lb-ds-srtbl3 {
    min-width: 0;
  }
}

/* ============================================================================
   BLOCK 68 -- one spacing correction on the サポート section (2026-08-27).

   This block exists because of a spacing QA sweep across the six サポート pages
   (1471 hub, 20032, 20033, 10452, 20034, 20035), measured at 1440 and 390
   against the approved 技術情報 hub (17675), the approved ファウンドリ hub
   (7984), the 解析技術 hub (19882) and the products hub (1479).

   EVERYTHING ELSE MEASURED IDENTICAL and is NOT touched:
     section pad, every band, every page      64 / 64  (section 18's --hub-sec)
     .lb-ds-head margin-bottom                48       (--hub-half)
     crumbs -> eyebrow / eyebrow -> H1        0 / 24
     H1 -> lead                               14
     eyebrow -> H2 / H2 -> lead               24 / 24
     .lb-ds-cards / -wcols / -cross gap       24 / 24
     .lb-ds-note margin-top                   24
     .lb-ds-slist margin-top                  24
     .lb-ds-spaux margin-top                  48
     hero lead -> .lb-ds-anchors              16 + 24 padding + rule
     close H2 -> lead -> button row           24 / 32
     last section -> CTA                      64 + 64
   Hero, light, navy, table, card-grid, comparison-block and closing-CTA
   differences that ARE intentional were left exactly as they are.

   THE ONE INCONSISTENCY, and why it is one -----------------------------------

   `.lb-ds-morewrap` has two approved values, and which one you get depends on
   how the link is used:

     - tucked under prose INSIDE a textblock  ->  4px  (--ds-s1). Approved page
       7984 uses it exactly this way, three times, and correctly reads 4px.
     - standing ALONE as a section footer     ->  24px (--ds-s5). The base rule
       does not say this; the owning family restates it. `.lb-ds-navy` restates
       it (which is why the hub 1471's own morewrap is right at 24), and the
       技術情報 family restates it as `.lb-ds-tifoot .lb-ds-morewrap`, which is
       why approved page 17675 reads 24 on a LIGHT band.

   The Support pages put standalone footer links on light bands without such a
   wrapper, so all six fell through to the 4px prose value. Measured on the
   deployed pages at 1440: `.lb-ds-tscroll` -> `.lb-ds-morewrap` = 4px on 10452
   (x3), 20032 (x1) and 20034 (x1), and `.lb-ds-note` -> `.lb-ds-morewrap` = 4px
   on 20032 (x1) -- a link glued to the bottom edge of a table or a note, where
   the same structural role reads 24px on 17675.

   THE FIX. Restate the same 24px step, with the same token, the same way the
   two existing families do -- but keyed on the STRUCTURE that distinguishes the
   two uses rather than on a new wrapper class, so no markup changes and the
   prose case cannot be caught by accident:

     `:first-child` = this morewrap opens its own textblock  -> section footer.
     not first child = it follows prose or another link      -> stays 4px.

   That second half is deliberate and load-bearing: 10452 stacks three footer
   links in one textblock, so the group gets 24px above it and keeps 4px
   between its own rows. 7984's in-prose links are never `:first-child`, so
   they are untouched by construction.

   SCOPE. Page-scoped to the three Support pages that actually have the pattern,
   following the stylesheet's existing convention for page-scoped spacing
   corrections (see the `#top:is(.page-id-18074, ...)` blocks in the 技術情報
   round). 20033 and 20035 carry no morewrap at all and are deliberately not
   listed. Nothing outside these three page ids can match.
   ========================================================================= */

#top:is(.page-id-10452, .page-id-20032, .page-id-20034) #wrap_all
  .lb-ds.lb-dsr.lb-ds-light .avia_textblock > .lb-ds-morewrap:first-child {
  margin-top: var(--ds-s5);
}

/* ============================================================================
   BLOCK 69 -- the ファウンドリ family's hero panel, step connector and
   related-pages block (2026-08-27).

   Red1 asked for four visual improvements on 19921 Design to Fabrication. All
   four turned out to sit on patterns shared VERBATIM with 19917 MPW, which is
   approved and published, plus the five sibling ファウンドリ children. Red1's
   ruling: fix the whole family rather than diverge one page. Measured before
   and after on 19921 and 19917.

   SCOPE. Every rule is keyed to the seven ファウンドリ pages that actually carry
   these patterns:

     5235  Indium Phosphide (InP)            draft
     11032 Silicon Nitride (窒化シリコン)      draft
     19917 MPW (マルチプロジェクトウェハ)      PUBLISHED
     19918 Silicon Photonics                 draft
     19919 Dedicated Run (専用製造ラン)        draft
     19920 PDK (プロセスデザインキット)        draft
     19921 Design to Fabrication             draft

   This matters because the three components involved reach far outside the
   family and must not move there:

     .lb-ds-spec-v   1479, 1494, 1504, 19917 and all 21 published 解析技術
                     method pages -- 30+ approved pages. NEVER touched globally.
     .lb-ds-rescols  also 19538 Photonica (PUBLISHED) and the eleven Solutions
                     drafts 19870-19880. Left alone.
     .lb-ds-wcols-6  also 19539 Solutions hub (draft, and the only page with a
                     genuine six items). Left alone.

   Page-id scoping follows the stylesheet's own convention for family-scoped
   corrections (the `#top:is(.page-id-18074, ...)` blocks in the 技術情報 round).
   ========================================================================= */

/* 69.1 ------------------------------------------- the hero metadata panel
   MEASURED on 19921 at 1280: the three values (起点 / 終点 / 進めかた) rendered
   at 13px/26px in IBM Plex Mono. Mono at 13px is the right treatment for a
   short spec token -- it is the wrong treatment for a Japanese sentence like
   「対象ファウンドリとランの条件に沿って進めます。」, which is what this panel
   actually holds. It read as an annotation rather than as hero content.

   Sans at 15px/1.85 is the design system's own body-copy pairing, so nothing
   new is introduced. The label (.lb-ds-spec-k) keeps its 11px mono uppercase
   treatment -- that IS the intentional part, and the label/value contrast is
   what gives the panel its hierarchy. The H1 runs at 38.4px here, so 15px
   cannot compete with it, and the panel's own height changes by ~9px across
   three rows, which leaves the hero height effectively unchanged. */
#top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
        .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr.lb-ds-hero .lb-ds-heropanel .lb-ds-fspecs {
  gap: var(--ds-s5);
}
#top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
        .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr.lb-ds-hero .lb-ds-heropanel .lb-ds-spec-v {
  font-family: var(--ds-font-sans);
  font-size: 15px;
  line-height: 1.85;
}

/* 69.2 --------------------------------------- the 01 -> 05 step connector
   MEASURED on 19921: the rule above each stage was `--border-navy` (#285276)
   at 0.67px on a #0C385F navy band -- a 1.3:1 luminance step, effectively
   invisible -- and the connecting arrow was a 13px glyph sitting 7px above the
   column edge, off the rule it was meant to join. The sequence did not read.

   The fix stays restrained on purpose: no timeline bar, no dots, no boxes. The
   existing rule is re-tinted with the design system's own brand orange at 50%
   so it reads on navy without becoming a graphic, and the existing arrow is
   grown to 15px and re-seated so it sits ON the rule, centred in the 24px grid
   gap. Same two elements, same colour, just legible. */
#top:is(.page-id-19917, .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr.lb-ds-navy .lb-ds-wcols-6 .lb-ds-wcol {
  border-top-color: rgba(236, 118, 40, 0.5);
}
#top:is(.page-id-19917, .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr.lb-ds-navy .lb-ds-wcols-6 .lb-ds-wcol + .lb-ds-wcol::before {
  font-size: 15px;
  top: -10px;
  left: -20px;
}

/* 69.3 ------------------------------------ the related-pages block
   MEASURED on 19921: `.lb-ds-rescols` carries `padding-top: var(--hub-half)`
   (48px) plus a top rule, so that it can separate itself from content ABOVE it
   inside the same section. On every ファウンドリ page it is the FIRST and only
   element of its section, so it is separating itself from nothing -- and its
   48px stacked on the section's own 64px put 112px of air above 「関連ページ」.
   Removing the redundant pair returns the section to the design system's plain
   64/64 rhythm and takes ~48px out of the page. Nothing is compressed: the
   64/64 section pad, the 24px column gap and the 12px row gap are untouched.

   `align-items: start` stops the short right column (eyebrow + one paragraph +
   one link) from being stretched to match the left column's four links, which
   is what made the pair read as unbalanced -- 74px of it, measured. */
#top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
        .page-id-19919, .page-id-19920, .page-id-19921)
  #wrap_all .lb-ds.lb-dsr .avia_textblock > .lb-ds-rescols:first-child {
  padding-top: 0;
  border-top: 0;
}
#top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
        .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr .lb-ds-rescols {
  align-items: start;
}

/* ============================================================================
   BLOCK 70 -- 光学・フォトニクス 設計・シミュレーション デモ
   (page 11874, /products/demo/). 2026-08-27.

   Red1's brief asked for eleven fixes on this page. MOST OF THEM ARE ANSWERED
   BY RETIRING PAGE-SPECIFIC MARKUP, not by adding CSS. The hero's `#243f75`
   fill + `#084a79` overlay and its `headline_padding='50px,30%,,'` /
   `padding=',30%,,'` are gone; the section is now `lb-ds lb-dsr lb-ds-hero`
   and the band below it `lb-ds lb-dsr lb-ds-light`. That alone gives the H1
   the full content width (MEASURED at 1440: 1196px wide, ONE line, so
   「シミュレーション」 no longer breaks -- with no <br> anywhere), takes the
   navy from `--ds-gradient-navy` rather than a page-only blue, puts the
   approved `.lb-ds-crumbs` breadcrumb in the content with Enfold's own title
   bar hidden exactly as every approved page does it, and gives Photonica /
   Lumerical / Zemax the approved inline-link treatment for free from
   `#top .lb-ds.lb-ds-hero a` (MEASURED rgb(243,154,85) = --accent-light-orange,
   display:inline -- still text links, not buttons). The `av_one_half` pair kept
   its 50/50 proportion but shed the equal-height/`margin='30px,'` hacks, the
   empty fourth column and the `padding='-50px,,,'` pull, so the secondary CTA
   is now simply the last thing in the form card.

   TWO DEFECTS FOUND BY MEASUREMENT, both pre-existing, both fixed in markup:

     1. The デモ実施概要 codeblock namespaced its internals as `.lb-card`,
        `.lb-title`, `.lb-grid`, `.lb-item`, `.lb-ico`, `.lb-label`,
        `.lb-value`. `.lb-card` IS A LIVE DESIGN-SYSTEM COMPONENT --
        `#top .lb-card { display:flex; margin:0!important; padding:0!important;
        border:0!important; background:none!important }` -- and it was winning:
        the card rendered with 0 padding, no border and as a flex row, which is
        why its grid collapsed to a single 170px column and 「デモ実施概要」 sat
        on five lines. All seven names are renamed to `lbdo-*` in the codeblock,
        so the collision cannot recur for any of them. No global CSS touched.
     2. Enfold's icon-list title is `.av_iconlist_title`, not `.iconlist_title`.
        70.2 below is written against the real class name.

   SCOPE. Every rule is keyed to `#top.page-id-11874`, following the
   stylesheet's existing convention for single-page corrections (see the
   `#top.page-id-1768` block in the recruit round). Four class names are
   introduced -- `.lb-ds-demoform`, `.lb-ds-demolist`, `.lb-ds-demoh2` and
   `.lb-ds-demosec` -- all four asserted absent from lb-redesign.css and from
   the post_content of every post on the install before this append (0 each).
   Nothing here can reach another page.

   NOT DONE, and why: the 送信 button and the field placeholder contrast live
   inside a cross-origin iframe served from forms.zohopublic.jp. They are not
   reachable from WordPress CSS by any means, and changing them means editing
   the form in Zoho. The form codeblock is carried across byte-identically
   (md5 c9d515ca50895f302da4918cbe75d0b6) -- fields, names, required flags,
   validation, submission, the ZFAdvLead UTM handling and the destination are
   all untouched.
   ========================================================================= */

/* 70.1 --------------------------------------- the two-column demo layout
   Enfold stacks columns at <=767 only. Between 768 and 989 each half is
   ~340px, and the Zoho iframe inside the right one renders at 100% of that --
   a form that is technically present and practically unusable. The pair is
   stacked one breakpoint earlier, at Enfold's own 989 stop, which the
   stylesheet already uses elsewhere rather than inventing a new one. */
@media only screen and (max-width: 989px) {
  #top.page-id-11874 #wrap_all .lb-ds.lb-dsr.lb-ds-light .flex_column.av_one_half {
    width: 100%;
    margin-left: 0;
  }
  #top.page-id-11874 #wrap_all .lb-ds.lb-dsr.lb-ds-light .flex_column.lb-ds-demoform {
    margin-top: var(--hub-half);
  }
}

/* 70.2 ------------------------------------------------------ the checklist
   MEASURED before: the three items ran at 25px, each title carrying a leading
   U+3000, so the text started off the icon's optical line and the phrases
   broke mid-word against the narrow column. The U+3000s are out of the markup
   and the size is now 17px, the design system's own list scale.
   `auto-phrase` + `line-break: strict` is what the rest of the site already
   applies to Japanese running text; `.av_iconlist_title` is a div, so it does
   not inherit those from the `.lb-ds` prose rules and has to be told. No <br>
   anywhere -- the phrases break at phrase boundaries or not at all. */
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-ds-demolist .av_iconlist_title {
  word-break: auto-phrase;
  line-break: strict;
  line-height: 1.7;
  font-weight: 600;
}
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-ds-demolist {
  margin: var(--ds-s5) 0 0;
}

/* 70.3 -------------------------------------------------- the heading ladder
   MEASURED at 1440 before this rule: H1 43.2px, all three H2s 36px, and the
   overview card's own title 32px/800 -- four weights within 11px of each
   other, which is the "competing heading weights and sizes" in the brief.
   These H2s are not section heads spanning the page; they are column heads
   inside a half-width prose column, which the design system ALREADY has a
   value for: `#top .lb-ds.lb-dsr .lb-article-prose h2` runs 26px for exactly
   this situation. Reused rather than invented. The ladder now reads
   43 -> 26 -> 18 (card title) -> 16 (body).
   The second H2 follows a list rather than a section boundary, so it takes the
   design system's half-step above it to read as a new subject. */
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr.lb-ds-light .entry-content-wrapper h2 {
  font-size: 26px;
  line-height: 1.5;
}
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-ds-demoh2 {
  margin-top: var(--hub-half);
}

/* 70.4 ------------------------------ the secondary action in the form card
   「すでに製品選定が進んでいる場合」 + ライセンス見積を依頼 used to sit in a
   fourth column pulled up by `padding='-50px,,,'`, which is what made it read
   as detached. It is now the last thing inside the form card, separated by the
   design system's own hairline and half-step, so it reads as the alternative
   to the form it sits under rather than as a stray block. */
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-ds-demosec {
  margin-top: var(--ds-s6);
  padding-top: var(--ds-s5);
  border-top: 1px solid var(--border-light);
}
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-ds-demosec p {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary-light);
}
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-ds-demoform .avia-button-wrap {
  margin-top: var(--ds-s4);
}

/* 70.5 ------------------------------------------------------- responsive
   At 390 the half-width columns are already stacked by 70.1. The two things
   that still need saying: the column heads come down one step so they do not
   dominate a 318px column, and the form card's 32px padding comes down to the
   24px the design system uses for cards at this width (section 16's rule for
   `.lb-ds-card`, restated here because this card is an Enfold column and
   carries its padding as an inline style). */
@media only screen and (max-width: 767px) {
  #top.page-id-11874 #wrap_all .lb-ds.lb-dsr.lb-ds-light .entry-content-wrapper h2 {
    font-size: 22px;
  }
  #top.page-id-11874 #wrap_all .lb-ds.lb-dsr .flex_column.lb-ds-demoform {
    padding: var(--ds-s5) !important;
  }
}


/* ============================================================================
   BLOCK 71 -- the ファウンドリ family, revision round of 2026-08-28.

   Two rules only, both keyed to the eight ファウンドリ page ids, exactly as block
   69 keyed its seven. Nothing shared moves: `.lb-ds-wcols-6` still reaches
   19539 (the Solutions hub, and the only page on this install with a genuine
   six items) and `.lb-ds-spec` reaches 30+ approved pages. Neither is touched
   globally here.

     7984  ファウンドリ hub                       PUBLISHED
     5235  Indium Phosphide (InP)             draft
     11032 Silicon Nitride (窒化シリコン)         draft
     19917 MPW (マルチプロジェクトウェハ)          PUBLISHED
     19918 Silicon Photonics                  draft
     19919 Dedicated Run (専用製造ラン)          draft
     19920 PDK (プロセスデザインキット)           draft
     19921 Design to Fabrication              draft
   ========================================================================= */

/* 71.1 ------------------------------ the five-stage workflow strip, desktop
   MEASURED at 1440 on 19917 / 19919 / 19920 / 19921: each carries FIVE stages
   inside `.lb-ds-wcols-6`, so the desktop `repeat(6, minmax(0, 1fr))` left a
   visible empty sixth column and squeezed the five real stages into 5/6 of the
   available width. `.lb-ds-wcols-6` itself must not change -- 19539 has six
   real items and is approved as it stands.

   So the correction is a modifier, `.lb-ds-wcols-f5`, carried by those four
   strips and answered only inside the ファウンドリ family. Asserted absent from
   lb-redesign.css and from the post_content of all non-trashed posts before it
   was written.

   This is a DESKTOP-ONLY rule by construction, which is what preserves the
   approved tablet and mobile ladders. Its specificity is (1,6,0): it beats the
   base `#top .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-6` at (1,4,0), but it LOSES
   to the 1120 rule `#top #wrap_all .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-6`
   and to the 600 rule, both (2,4,0), because those carry two ids. So 3-up at
   <=1120 and 1-up at <=600 stand exactly as approved, including the
   `:nth-child(3n+1)::before { content: none }` arrow suppression and the
   downward arrow when stacked.

   The connector is untouched: gap, the `+ .lb-ds-wcol::before` arrow and block
   69.2's re-tint and re-seat all key off `.lb-ds-wcols-6`, not off the column
   count. */
#top:is(.page-id-19917, .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr .lb-ds-wcols.lb-ds-wcols-6.lb-ds-wcols-f5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 71.2 ------------------------------------------------- 最終更新日 (E-E-A-T)
   The family had no page-level revision date. The approved atom for a labelled
   metadata pair on this install is `.lb-ds-spec` / `-spec-k` / `-spec-v`, which
   is what both 10452 (Ansys Optics システム要件, published) and the 21 published
   解析技術 method pages use; only their WRAPPER is per-family (`.lb-ds-srmeta`,
   `.lb-ds-am-meta`). `.lb-ds-am*` is on the ファウンドリ generator's FORBIDDEN
   list, so this family gets its own wrapper and reuses the atom unchanged.

   One rule, and it is deliberately the same treatment the design system already
   uses for a trailing note under a workflow strip
   (`.lb-ds-navy .lb-ds-wcols-4 + .lb-ds-small`): s6 above, s4 of breathing room
   under a hairline. No new colour, no new type size, no new radius.

   Only 最終更新日 is rendered. There is no 著者, no 技術監修 and no references
   block, because no author or reviewer has been verified for these pages. */
#top:is(.page-id-7984, .page-id-5235, .page-id-11032, .page-id-19917,
        .page-id-19918, .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr .lb-ds-fupdated {
  margin: var(--ds-s6) 0 0;
  padding-top: var(--ds-s4);
  border-top: 1px solid var(--border-light);
}


/* ============================================================================
   BLOCK 72 -- the ファウンドリ CHILD hero metadata panel (2026-08-28, round 2).

   Two corrections, both keyed to the seven ファウンドリ CHILD page ids. The hub
   (7984) has no `.lb-ds-heropanel` at all, so it is not in the list and cannot
   be reached by either rule.

     5235  Indium Phosphide (InP)             draft
     11032 Silicon Nitride (窒化シリコン)         draft
     19917 MPW (マルチプロジェクトウェハ)          PUBLISHED
     19918 Silicon Photonics                  draft
     19919 Dedicated Run (専用製造ラン)          draft
     19920 PDK (プロセスデザインキット)           draft
     19921 Design to Fabrication              draft

   `.lb-ds-spec-k` and `.lb-ds-fspecs` reach 30+ approved pages (1479, 1494,
   1504, 10452, the 21 published 解析技術 method pages, the Product V2 family and
   the Solutions drafts). NEITHER is touched globally here, and no Product hero
   selector is referenced.
   ========================================================================= */

/* 72.1 --------------------- the right metadata column's vertical position
   MEASURED on all seven children at 1121 / 1160 / 1200 / 1240 / 1280 / 1320 /
   1440 / 1920: the panel column top-aligns with the copy column, so its first
   label sat at y=179 while the left column's orange eyebrow sat at y=253. The
   metadata therefore started level with the BREADCRUMB, not with the hero
   content. The gap is 74px on every page at every two-column width, and it is
   the same 74px block 17.2 already documents: the crumb paragraph's 32px
   padding-bottom plus the 50px line box it sits in, less the 8px
   `.lb-ds-fspecs` padding-top.

   The top-alignment is deliberate (block 17.2 zeroes Enfold's
   `.column-top-margin` on BOTH hero columns "so the two stay top-aligned"), so
   this is a change of intent, scoped to this family and to this family only.

   WHY A TRANSFORM. `padding-top` on the panel, or any margin that contributes
   to flow, grows the column box; on a page where the panel is the taller of
   the two columns that grows the hero section by the full 74px and pushes every
   later section down. `transform` is outside flow, so the section height,
   the next section's position and the document height are all bit-identical
   before and after -- verified on all seven pages.

   The transform creates a containing block and a stacking context on
   `.lb-ds-fspecs`. Checked: its subtree (`.lb-ds-spec`, `-spec-k`, `-spec-v`)
   has no absolutely-positioned descendant, no ::before and no ::after, so
   neither has any effect here. A static transform is not motion, so the
   prefers-reduced-motion blocks are not involved.

   HEADROOM. The offset can only be absorbed by the hero's 64px bottom padding
   plus whatever the copy column is taller than the panel:
     residual = 64 + copyH - panelH - 74
   Measured residual after this change: 10-129px, minimum 10px on 19919 at
   1121. It is never negative, so the panel can never cross into the following
   section. 19919 needed one metadata value shortened by six characters to
   reach that -- without it, its panel was the taller column between ~1121 and
   ~1300 and the shifted content overhung the section by 10px. See
   claude/foundry-hero-panel-alignment-20260828.md. */
#top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
        .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr.lb-ds-hero .lb-ds-heropanel .lb-ds-fspecs {
  transform: translateY(74px);
}

/* The offset is meaningless once the hero is one column: below the family's
   stacking stop the panel already follows the copy in normal flow, with the
   40px gap block 20 gives it. Reset here rather than gating the rule above on
   `min-width: 1121px`, because Enfold's own stack rule is `max-width: 1120px`
   and a min-width pair leaves a sub-pixel band (a 1120.5px viewport) that is
   two-column with no offset. Answering the SAME query the stack uses closes
   it exactly. Equal specificity to the rule above, so source order decides --
   this block must stay last in the file. */
@media only screen and (max-width: 1120px) {
  #top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
          .page-id-19919, .page-id-19920, .page-id-19921)
    .lb-ds.lb-dsr.lb-ds-hero .lb-ds-heropanel .lb-ds-fspecs {
    transform: none;
  }
}

/* 72.2 ------------------------------------- the metadata label legibility
   起点 / 終点 / 進めかた, 材料系 / 得意な領域 / 提供方式, 方式 / プロセス /
   スケジュール, 提供元 / 入手条件 / 内容 all rendered at 11px/400 in
   `--text-muted-dark` (#9E9E9E, 5.1:1 on the #0C385F band) against 15px values
   in `--text-primary-dark`. At 11px the Japanese label glyphs were the weakest
   text on the page.

   14px / 500 / `--text-secondary-dark` (#C9C9C9, 8.9:1). IBM Plex Mono is
   loaded at 400/500/600, so 500 is a real face and not synthesised. The
   hierarchy is preserved by construction: the label stays mono, uppercase and
   letter-spaced against a sans value, one step down in size and three steps
   down in contrast (8.9:1 vs 13.6:1). Values are untouched -- block 69.1's
   15px/1.85 sans still governs them.

   `line-height: 17.6px` is the load-bearing part, not a rounding artefact.
   11px x 1.6 is exactly 17.6px, so pinning the line box in px keeps each
   label's box at 17.60px while the glyphs grow from 11px to 14px. The panel's
   height is therefore UNCHANGED to the hundredth of a pixel -- which matters
   because on 19920 (and on 19917 at 1280) the panel is the taller hero column,
   where any growth would have pushed the hero section and every section below
   it down the page. Measured label boxes before and after: 17.60 / 17.60 /
   17.60 on all seven pages. The 3.6px of leading left over is not tight in
   context: `.lb-ds-spec` puts an 8px gap under the label and `.lb-ds-fspecs`
   24px under each pair.

   The labels are 3-6 characters and never wrap: the widest, スケジュール, is
   ~94px at 14px with 0.12em tracking, in a panel that is 331px at its
   narrowest two-column width and full-bleed once stacked. */
#top:is(.page-id-5235, .page-id-11032, .page-id-19917, .page-id-19918,
        .page-id-19919, .page-id-19920, .page-id-19921)
  .lb-ds.lb-dsr.lb-ds-hero .lb-ds-heropanel .lb-ds-spec-k {
  font-size: 14px;
  line-height: 17.6px;
  font-weight: 500;
  color: var(--text-secondary-dark);
}


/* ==========================================================================
   BLOCK 73 -- the three native Zoho forms and the Thank You page. 2026-08-28.

   SCOPE. Everything the FORMS need visually lives in lb-zoho-form.css, scoped
   to `.lb-zoho-form`; nothing about them is repeated here. This block carries
   only what belongs to the PAGES around them:

     73.1  the shortcode slot's rhythm on all three pages (.lb-zf-slot)
     73.2  page 13268 (見積): stack the two columns one breakpoint early, the
           same 989 stop block 70.1 already uses on the demo page
     73.3-73.7  page 10177 (サンクスページ / thank-you)

   Fifteen class names are introduced -- .lb-zf-slot and fourteen .lb-ty-* --
   and all fifteen were asserted absent from lb-redesign.css (0) and present in
   no post_content other than the pages built this round, before this append.

   ONE RECORDED DEVIATION. The design system's approved closing treatment is
   `.lb-ds-close`: a warm-gradient panel with a white primary button. It is NOT
   used on the Thank You page. That panel is a marketing closing CTA, and the
   brief for this page says the opposite twice -- "Do not turn it into another
   marketing landing page" and "restrained use of orange". The two navigation
   buttons therefore sit on the light band as a navy primary and an outlined
   secondary, which is the same button geometry (--ds-radius-ctl, 1px border on
   both so they are the same height) with the system's own ink.
   ========================================================================= */

/* 73.1 ---------------------------------------------- the shortcode slot
   [lb_form_inline] renders into an ordinary av_textblock. On the Contact page
   the form is alone in a full-width column and the card centres itself (its
   own max-width: 800px, inside the 760-820 band the brief asks for), so all
   this rule supplies is the gap above it. On 見積 and デモ the slot is inside a
   column that IS the card, so there is no second frame to space away from. */
#top .lb-ds.lb-dsr .lb-zf-slot {
  margin: var(--hub-half) 0 0;
}

#top .lb-ds.lb-dsr .lb-zf-slot > p:empty {
  display: none;
}

/* The 見積 page is not a `.lb-ds` page -- it still carries its own 2026-07 hero
   and column shells -- so it needs the slot spacing addressed on the page id.
   Both selectors are needed; neither is redundant. */
#top.page-id-13268 .lb-zf-slot {
  margin: 8px 0 24px;
}

#top.page-id-13268 .lb-zf-slot > p:empty {
  display: none;
}

/* 73.2 ------------------------------------- 13268, the two-column stack point
   Enfold stacks `av_one_half` at <=767 only. Between 768 and 989 each half is
   ~340px, which is not a usable form column -- the same defect block 70.1
   recorded on 11874 while the form was still an iframe, and it survives the
   move to first-party markup because it is a COLUMN width problem, not a form
   problem. Answered at Enfold's own 989 stop, as 70.1 does, rather than
   inventing a breakpoint. */
@media only screen and (max-width: 989px) {
  /* MEASURED: `width: 100%` alone did nothing here, because 13268's first
     column pair is an EQUAL-HEIGHT pair -- Enfold renders those as
     `display: table` with `display: table-cell` children, and a table cell
     ignores width for stacking purposes (both cells stayed in one row at
     299px each). The table has to be dissolved first. The second pair on this
     page is an ordinary `flex_column_div`, which the width rule alone does
     handle, so both selectors are needed. */
  #top.page-id-13268 #wrap_all .flex_column_table {
    display: block;
    width: 100%;
  }
  #top.page-id-13268 #wrap_all .flex_column.av_one_half,
  #top.page-id-13268 #wrap_all .flex_column_table_cell.av_one_half {
    display: block;
    width: 100%;
    margin-left: 0;
  }
  #top.page-id-13268 #wrap_all .flex_column.av_one_half + .flex_column.av_one_half {
    margin-top: 32px;
  }
}

/* 73.3 -------------------------------------------- 10177, the success state
   The confirmation has to be legible before anything is scrolled, so the hero
   band is deliberately shorter than the family default: this page has three
   lines of content in it, not a hero composition. --hub-hero (56/44/36) is the
   family's own hero token; this takes the step below it on each side. */
/* MEASURED: the band was 382px tall for 158px of content, because the
   section's own 64/64 and the container's 48/48 stack. The container's
   vertical padding is dropped and the section's 64/64 left to do the work --
   286px, which is the 'significantly shorter' the brief asks for without
   inventing a value: 64px is --hub-sec, the family's own section rhythm. */
#top.page-id-10177 #wrap_all .lb-ds.lb-dsr.lb-ty-hero .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* The check mark is a 20px glyph on the eyebrow's own baseline, in the
   eyebrow's own colour -- not a decorative illustration, and not a second
   accent. `currentColor` means it can never drift from the eyebrow ink. */
#top.page-id-10177 #wrap_all .lb-ds .lb-ty-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ds-s2);
}

#top.page-id-10177 #wrap_all .lb-ds .lb-ty-check {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: currentColor;
}

#top.page-id-10177 #wrap_all .lb-ds .lb-ty-check svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* 73.4 ------------------------------------------------------ the three steps
   The cards come from the design system (.lb-ds-cards.lb-ds-cards-3 +
   .lb-ds-card + .lb-ds-card-title + .lb-ds-card-desc), so nothing about their
   fill, border, radius or padding is restated. Only two things are local: the
   01/02/03 counter is an eyebrow used as a NUMBER, so it loses the eyebrow's
   24px bottom margin, and the row gets the family's half-step above it.
   The 3-track grid collapses on its own: `.lb-ds-cards` falls back to
   `auto-fit, minmax(min(100%, 300px), 1fr)` below the family's own stop. */
#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-steps {
  margin: var(--hub-half) 0 0;
}

#top.page-id-10177 #wrap_all .lb-ds .lb-ty-steps .lb-ty-stepn {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* The three steps are 3-up or 1-up, never 2+1. MEASURED at 990 before this
   pair: the family's own `.lb-ds-cards` fallback resolved the row to two
   tracks, leaving 担当者よりご連絡 alone on a second row -- which reads as a
   two-step flow with an afterthought, not as three steps. Held at three
   across the whole tablet band (three 240px cards at 768 carry one short
   sentence each comfortably) and stacked below Enfold's own 767 stop. */
@media only screen and (min-width: 768px) {
  #top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ty-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 767px) {
  #top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ty-steps {
    grid-template-columns: 1fr;
  }
}

/* 73.5 ---------------------------------- the two short notes under the steps
   確認メールが届かない場合 and お急ぎの場合. Two hairline-topped blocks, not
   cards: they are footnotes to the three steps, and giving them the card
   treatment would make the page read as six equal things instead of three
   steps plus two asides. */
#top.page-id-10177 #wrap_all .lb-ds .lb-ty-notes {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--ds-s5) var(--ds-s7);
  margin: var(--hub-half) 0 0;
}

#top.page-id-10177 #wrap_all .lb-ds .lb-ty-note {
  padding-top: var(--ds-s4);
  border-top: 1px solid var(--border-light);
}

#top.page-id-10177 #wrap_all .lb-ds .entry-content-wrapper .lb-ty-notek {
  margin: 0 0 var(--ds-s2);
  font-family: var(--ds-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-primary-light);
}

#top.page-id-10177 #wrap_all .lb-ds .entry-content-wrapper .lb-ty-notev {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary-light);
}

/* The number is the whole of お急ぎの場合, so it is set in the system's mono
   at value scale and is a real tel: link on touch devices. */
#top.page-id-10177 #wrap_all .lb-ds .entry-content-wrapper a.lb-ty-tel {
  font-family: var(--ds-font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--text-primary-light);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
}

#top.page-id-10177 #wrap_all .lb-ds .entry-content-wrapper a.lb-ty-tel:hover,
#top.page-id-10177 #wrap_all .lb-ds .entry-content-wrapper a.lb-ty-tel:focus-visible {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
}

@media only screen and (max-width: 767px) {
  #top.page-id-10177 #wrap_all .lb-ds .lb-ty-notes {
    grid-template-columns: 1fr;
    gap: var(--ds-s5);
  }
}

/* 73.6 ------------------------------------------------ the closing rule line
   An empty <p> carrying only a hairline, so the two navigation buttons read as
   the end of the page rather than as a third note. It is aria-hidden in the
   markup and carries no text. */
#top.page-id-10177 #wrap_all .lb-ds .lb-ty-navwrap {
  margin: var(--hub-half) 0 0;
}

#top.page-id-10177 #wrap_all .lb-ds .entry-content-wrapper .lb-ty-navrule {
  margin: 0;
  padding: 0;
  height: 1px;
  background: var(--border-light);
}

/* 73.7 ------------------------------------------ the two navigation buttons
   See the recorded deviation at the top of this block. Specificity mirrors the
   `.lb-ds-close` rules (2 ids + 4 classes + an element), which is what clears
   Enfold's per-button `#top #wrap_all .avia-button.av-lbXXXX` without
   !important. Primary is the first anchor; `~ a.avia-button` selects every
   later one, because Enfold injects a <style> element between the anchors and
   `:not(:first-child)` would therefore match both. */
#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .avia-buttonrow-wrap.lb-ty-btnrow {
  justify-content: center;
  margin-top: var(--ds-s6);
}

#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button {
  background-color: var(--brand-navy);
  color: #FFFFFF;                     /* 12.6:1 on #072C50 */
  border: 1px solid var(--brand-navy);
  border-radius: var(--ds-radius-ctl);
  transition: background-color var(--ds-dur-base) var(--ds-ease),
              border-color var(--ds-dur-base) var(--ds-ease),
              color var(--ds-dur-base) var(--ds-ease);
}

#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button:hover,
#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button:focus-visible {
  background-color: #0C385F;
  border-color: #0C385F;
  color: #FFFFFF;
}

#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button ~ a.avia-button {
  background-color: transparent;
  color: var(--brand-navy);           /* 12.1:1 on #F5F7F9 */
  border: 1px solid #C3CFDA;
}

#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button ~ a.avia-button:hover,
#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button ~ a.avia-button:focus-visible {
  background-color: transparent;
  color: var(--brand-orange);
  border-color: var(--brand-orange);
}

#top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ty-btnrow a.avia-button:focus-visible {
  outline: 2px solid var(--accent-light-orange);
  outline-offset: 3px;
}

/* 73.8 ------------------------------- 13268, the form card's own alignment
   MEASURED at 1512 before this rule: the ライセンス見積を依頼 heading sat 30px
   to the right of the first field, because the ALB gave it
   `margin='30px,10px,0px,30px'` to clear the old Zoho iframe, which was
   `width:90%` and floated inside the column. The iframe is gone; the heading's
   horizontal margins go with it, and heading and fields now share one left
   edge. The column's own `padding='0,10,0,10'` is untouched -- the extra 14px
   comes from the slot and the heading equally, so the card reads as inset from
   the column's 10px radius instead of flush against it.
   Vertical margin (30px top) is deliberately kept: it is the gap between the
   card's top edge and its heading. */
#top.page-id-13268 #wrap_all .av-special-heading.lb-zf-slot-h {
  margin-left: 14px;
  margin-right: 14px;
}

/* The inset is applied to the form card, not to the slot: Enfold's dynamic
   per-post stylesheet (post-13268.css) loads last and pins
   `.avia_textblock { padding: 0 }` from the element's own ALB padding setting,
   so a padding rule on the slot is silently dropped (measured: 0px). */
/* Four classes, not three: lb-zoho-form.css is enqueued AFTER lb-redesign.css,
   so its `.lb-zoho-form--bare .lbzf-card { padding: 0 }` (2 ids, 3 classes)
   beats an equal-weight selector here on source order. Adding the variant
   class settles it without !important. */
#top.page-id-13268 #wrap_all .lb-zoho-form.lb-zoho-form--quote .lbzf-card {
  padding-left: 14px;
  padding-right: 14px;
}


/* ==========================================================================
   BLOCK 74 -- Quote / Demo / Thank You revision round. 2026-08-28 (r2).

   THE ICON-FONT AUDIT THAT STARTED THIS BLOCK, AND WHAT IT FOUND
   Measured on all three pages, logged in, at 1440 and 390, with the mobile
   menu opened: `entypo-fontello-enfold.woff2` was ALREADY not requested
   (`performance.getEntriesByType('resource')` -> 0 entypo entries; the
   FontFace's status stayed `unloaded`), 0 elements resolved to a
   `font-family` containing "entypo", 0 `::before`/`::after` did, and there
   were 0 `[data-av_icon]` elements in the served HTML. Enfold on this install
   is in SVG-icon mode, so the scroll-to-top control is
   `.avia-svg-icon.avia-font-svg_entypo-fontello` -- an inline <svg>, not a
   glyph -- and the Thank You success mark was already first-party inline SVG.
   The @font-face declaration is still emitted in Enfold's inline CSS on every
   page of the site, but an unused @font-face is never fetched, and removing
   it means editing the parent theme's output for the whole site, which is out
   of scope here.

   The dependency that DID exist was structural, not a download: the redesigned
   content still went through Enfold's icon system (`av_iconlist` with
   `font='svg_entypo-fontello'`, `av_icongrid` with `svg_fontello_download` /
   `svg_photonics`). Those elements are gone from 13268 and 11874. What is
   below is what replaces them -- CSS-drawn check marks and inline SVG on
   `currentColor`, no icon font of any kind, Font Awesome included.

   Also here: the two wrapping fixes, the Quote benefit panel, and the
   Quote/Demo form-spacing parity pass.
   ========================================================================= */

/* 74.1 ---------------------------------------------- the no-break utility
   `Zemax OpticStudio` split between its two words in the Demo hero, and
   `ライセンス構成` split after 構 in the Quote column head. Japanese breaks
   between any two characters by default and Latin breaks at the space, so both
   are the browser behaving correctly on text that should be atomic.

   This is applied to the PRODUCT NAME and the NOUN, never to the sentence or
   the paragraph: `.lb-nb` wraps exactly the run that must stay together, and
   the rest of the line still wraps normally. Used on 11874 (Ansys Lumerical,
   Zemax OpticStudio) and in 13268's 商用製品開発向け ライセンス構成 heading. */
#top .lb-nb {
  white-space: nowrap;
}

/* Belt and braces for the Japanese heading: `auto-phrase` keeps the rest of
   the line breaking at phrase boundaries rather than mid-word, which is what
   the rest of the site already asks for (block 70.2). `.lb-nb` is what
   actually guarantees 「ライセンス構成」, since auto-phrase is Chromium-only. */
/* NO blanket `word-break: auto-phrase` on this page's headings. It was tried
   and reverted: applied to every `.av-special-heading-tag` it also re-wrapped
   the hero H1 and the second column head, leaving a two-character 「光学・」
   orphan on their first lines. That is a layout change on headings this round
   was not asked to touch. `.lb-nb` above is the whole fix: it is deterministic,
   it is scoped to the one noun that was being cut, and every other heading
   wraps exactly as it did before this round. */

/* 74.2 ------------------------------------------- the CSS-only check list
   Replaces the `av_iconlist` on both 13268 and 11874. The circle is a bordered
   pseudo-element and the tick is two borders on a rotated box -- no glyph, no
   SVG, no extra request. `currentColor` is not used here on purpose: the mark
   is the accent and the text is body ink, which is the same pairing the old
   icon list had. */
#top .lb-ds .lb-zq-checks,
#top .lb-zq-checks {
  margin: var(--ds-s5) 0 0;
  padding: 0;
  list-style: none;
}

#top .lb-ds .lb-zq-checks > li,
#top .lb-zq-checks > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 36px;
  min-height: 24px;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 600;
  color: var(--text-primary-light);
  word-break: auto-phrase;
  line-break: strict;
}

#top .lb-ds .lb-zq-checks > li + li,
#top .lb-zq-checks > li + li {
  margin-top: var(--ds-s3);
}

/* the ring */
#top .lb-zq-checks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--brand-orange);
  border-radius: 50%;
  box-sizing: border-box;
}

/* the tick: two borders on a rotated box, optically centred in the ring */
#top .lb-zq-checks > li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 5px;
  height: 9px;
  border: solid var(--brand-orange);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
  #top .lb-zq-checks > li { font-size: 16px; padding-left: 32px; }
  #top .lb-zq-checks > li::before { width: 20px; height: 20px; }
  #top .lb-zq-checks > li::after { left: 6px; top: 8px; }
}

/* 74.3 ------------------------------------------- 13268, the benefit panel
   Was three `av_icongrid` tooltip cards at 30px padding in a half-width
   column: at 1440 each card was ~130px wide, so 正規パートナー wrapped onto
   three lines and its subtitle onto four. Three cards is the wrong container
   for three two-line facts in a narrow column.

   One panel, three rows, hairline-separated. The icon is inline SVG drawn on
   `currentColor`, so it takes the row's own colour and cannot drift from it.
   The row is a 3-column grid (icon / label / value) that collapses to
   icon + stacked text below 600, where the value would otherwise be squeezed
   to a couple of characters. */
#top.page-id-13268 #wrap_all .lb-zq-benwrap {
  margin: var(--ds-s6) 0 0;
}

#top .lb-zq-benefits {
  display: block;
  margin: 0;
  padding: var(--ds-s5) var(--ds-s6);
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

#top .lb-zq-benefit {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--ds-s3);
  padding: var(--ds-s4) 0;
}

#top .lb-zq-benefit + .lb-zq-benefit {
  border-top: 1px solid var(--border-light);
}

#top .lb-zq-benefits .lb-zq-bico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(236, 118, 40, 0.10);
  color: var(--brand-orange);
}

#top .lb-zq-benefits .lb-zq-bico svg {
  display: block;
  width: 20px;
  height: 20px;
}

#top .lb-zq-btext {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--ds-s4);
}

#top .lb-ds .entry-content-wrapper .lb-zq-bk,
#top .entry-content-wrapper .lb-zq-bk,
#top .lb-zq-bk {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-primary-light);
  white-space: nowrap;
}

#top .lb-ds .entry-content-wrapper .lb-zq-bv,
#top .entry-content-wrapper .lb-zq-bv,
#top .lb-zq-bv {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary-light);
  word-break: auto-phrase;
  line-break: strict;
}

@media only screen and (max-width: 600px) {
  #top .lb-zq-benefits { padding: var(--ds-s4) var(--ds-s5); }
  #top .lb-zq-btext { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  #top .lb-zq-bk { white-space: normal; }
}

/* 74.4 ------------------------------- Quote / Demo form-card spacing parity
   MEASURED before this rule, at 1440:

     heading -> first field    13268  8px      11874  48px
     card inset (horizontal)   13268  24px     11874  32px

   Both are form cards carrying the same component, so both take the same two
   values. 24px is the horizontal inset 13268's column already implies (its own
   `padding='0,10,0,10'` plus block 73.8's 14px); 11874 keeps its ALB 32px, so
   only the vertical gap is equalised -- moving 11874's column padding would
   mean editing an approved page's layout, which this round is not for.
   Everything else (field spacing, label spacing, submit spacing, note spacing)
   is already one shared value: it comes from lb-zoho-form.css, which both
   variants load unchanged. */
#top.page-id-11874 #wrap_all .lb-ds.lb-dsr .lb-zf-slot {
  margin-top: var(--ds-s5);
}

#top.page-id-13268 .lb-zf-slot {
  margin: var(--ds-s5) 0 var(--ds-s5);
}

/* The secondary route out of each form sits the same distance below the
   primary action on both pages. 11874 already had the hairline + half-step
   from block 70.4; 13268's alternative lives in its own column below the card,
   so only its top gap needs saying. */
#top.page-id-13268 #wrap_all .flex_column.av_one_half + .flex_column.av_one_half .avia-button-wrap {
  margin-top: var(--ds-s4);
}

/* =============================================================================
   BLOCK 75 -- the global site footer. 2026-08-29 (r2).

   r1 transcribed SiteFooter.jsx correctly but mounted it INSIDE Enfold's
   #footer .container, so the black surface ended at the content width instead of
   spanning the viewport, and the switcher sat against that edge. r2 separates the
   two jobs the prototype's <footer> does at once:

     the SURFACE is full-bleed          -> #footer + .lb-ft carry the ground
     the CONTENT is the site container  -> .lb-ft-inner carries --lb-container

   That is what the prototype's own `background: var(--canvas-deep)` on <footer>
   plus `width: var(--container)` on its inner div express; r1 lost the
   distinction because Enfold had already wrapped everything in a fixed-width
   .container. Values are unchanged from r1 and still come from SiteFooter.jsx
   (74e2d375fde1) and LanguageSwitcher.jsx (96152a4839a1).

   Every selector is prefixed #top and touches only #footer or .lb-ft.
   ============================================================================= */

/* 75.1 ------------------------------------- the full-bleed surface
   MEASURED, not assumed. Enfold does not render the footer page in #footer; it
   renders it in <footer id="footer-page" class="footer-page-content footer_color">
   and then wraps the page body in the SAME chrome an ALB page gets:

     #footer-page            full width, Enfold footer colour #111111
       .container_wrap       full width, main_color -> WHITE
         .container         1201px, 50px side padding, auto margins
           .template-page   50px top/bottom padding
             .lb-ft         1101px  <- r1 stopped here, which is why the
                                       black ground ended at the content width

   So four wrappers have to stand down before .lb-ft can be full-bleed. Each is
   scoped inside #footer-page, so no page body, header or section anywhere else
   on the site is affected -- .container_wrap and .container are global Enfold
   classes and are deliberately NOT touched outside this one ancestor. */
/* NOTE: #footer-page is deliberately given NO background. Measured on this
   install its border box spans far more than the footer region (Enfold's own
   clearfix behaviour around the floated section wrappers), so painting it would
   risk a black field behind page content. The band comes from .lb-ft, which is
   full-bleed once the three wrappers below stand down. Only the box model is
   reset here. */
#top #footer-page {
  padding: 0;
  margin: 0;
}
#top #footer-page .container_wrap {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
/* Enfold restates the container at <=767 as
     .responsive #top #wrap_all .container { width:85%; max-width:85% }
   which is (2,2,0) and beat the plain #top #footer-page .container (2,1,0) at
   mobile -- the footer stopped being full-bleed at 390 and the black band
   inset by 28px each side. Trap 6a. The selector below is (3,2,0), so it wins
   at every width without a media query and without touching .container
   anywhere outside #footer-page. */
.responsive #top #wrap_all #footer-page .container,
#top #footer-page .container {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}
.responsive #top #wrap_all #footer-page .template-page,
.responsive #top #wrap_all #footer-page .post-entry,
.responsive #top #wrap_all #footer-page .entry-content-wrapper,
#top #footer-page .template-page,
#top #footer-page .post-entry,
#top #footer-page .entry-content-wrapper {
  padding: 0;
  margin: 0;
  width: 100%;
}
/* r3: the band is made full-bleed against the VIEWPORT, not against its parent.
   Standing the four Enfold wrappers down (75.1) is correct and still applies, but
   it only works while #footer-page is a child of #main. On a page whose ALB body
   emits unbalanced HTML the browser re-nests the footer INSIDE the page content
   -- measured on /resource-hub/, where .post-entry-17675 appears 8 times and
   #footer-page ends up 1101px wide at x=82. No footer rule can widen a parent it
   is trapped in, so the band takes its width from the viewport instead.
   Safe because Enfold's own grid.css sets #wrap_all { overflow: hidden }
   (verified computed on this install), which clips the scrollbar-width overhang
   100vw introduces -- so this cannot produce a horizontal scrollbar.
   The CONTENT is unaffected: .lb-ft-inner keeps --lb-container and stays centred. */
#top .lb-ft {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--lb-canvas-deep);
  border-top: 1px solid var(--lb-border-subtle);
  padding: var(--lb-section-pad) 0 28px;
  font-family: var(--lb-font-sans);
}
/* the content container: the approved --container, centred, with a floor on the
   side gutter so nothing reaches the edge at any width. */
#top .lb-ft-inner {
  width: var(--lb-container);
  max-width: calc(100% - 48px);
  margin: 0 auto;
}
#top .lb-ft-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--lb-space-7);
  row-gap: 40px;
  padding-bottom: 44px;
}

/* 75.2 --------------------------------- the brand row, spanning the whole grid
   The prototype's row is mark | description | switcher, the switcher pushed right
   by margin-left:auto. r2 keeps that and adds the social row as a full-width
   third line, left-aligned to the logo so the brand block reads as one unit. */
/* r5 (2026-08-31): the row is an explicit three-column grid instead of a wrapping
   flex row. A flex row cannot express "the social pair sits UNDER the logo and is
   centred ON IT" -- the icons were a full-width third line pinned to the logo's
   left edge. With named areas the mark column is exactly as wide as the logo, so
   `justify-content: center` on the list centres the pair on the mark and nothing
   else has to know the logo's width. The description occupies its own column
   across BOTH rows, so it is centred against the whole logo + social block rather
   than hanging off the top of the logo. Column order, the logo's position, the
   switcher's top-right position and the grid the seven nav columns sit on are all
   unchanged. */
#top .lb-ft-brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "mark   desc lang"
    "social desc lang";
  column-gap: var(--lb-section-pad);
  row-gap: var(--lb-space-4);
  align-items: start;
}
#top .lb-ft-mark { grid-area: mark; display: flex; align-items: flex-start; margin: 0; }
#top .lb-ft-lang { grid-area: lang; justify-self: end; align-self: start; }
/* the official asset, at its own aspect ratio. width:auto keeps 340:156 exactly;
   the intrinsic width/height attributes are on the <img>, so nothing reflows. */
#top .lb-ft-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
}
/* r4: the description was capped at the prototype's 52ch, which measures ~375px
   and forced the 60-character sentence onto 3 lines while ~730px of the brand row
   sat empty between the logo and the switcher. The cap is raised so the sentence
   takes the space it has and settles on 2 lines across the desktop range; it is
   not removed altogether, because with no cap at all the line would run past 1000px
   at 1920 and read as a single over-long measure. `flex: 1 1 320px` is unchanged,
   so the tablet/mobile wrap behaviour is exactly as before. Type, colour, leading,
   the logo, the switcher and the row's vertical alignment are all untouched. */
/* r5: 13px/1.85 was set from the prototype's Latin artboard and read as fine
   print next to a 72px logo. 17px at the regular body weight with 1.7 leading is
   the body setting for Japanese running text. `word-break: keep-all` is the whole
   trick for the wrap: it suppresses the break-anywhere behaviour Japanese
   normally gets, so the line can only break at the sentence's own punctuation --
   which puts the break after the comma and keeps the following phrase intact
   instead of splitting it. `overflow-wrap: break-word` is the safety net for any
   width too narrow for that (the mobile step below returns to normal Japanese
   wrapping outright). The measure is capped in `em` so it tracks the font size:
   at 17px, 37em is ~629px, one line wider than the sentence's first clause.
   No <br>, no nowrap. */
#top .lb-ft-desc {
  grid-area: desc;
  align-self: center;
  font-size: 17px;
  font-weight: var(--lb-weight-regular);
  line-height: 1.7;
  color: var(--lb-text-muted-dark);
  max-width: 37em;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 75.3 ------------------------------------------- the WPML language switcher */
#top .lb-ft-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--lb-border-navy);
  border-radius: var(--lb-radius-sm);
  padding: 2px;
  flex: 0 0 auto;
  margin-left: auto;
}
#top .lb-ft-langbtn {
  background: transparent;
  color: var(--lb-text-muted-dark);
  border: 0;
  border-radius: 4px;
  padding: 7px 12px;
  font-family: var(--lb-font-sans);
  font-size: 13px;
  font-weight: var(--lb-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--lb-duration-fast) var(--lb-ease), background var(--lb-duration-fast) var(--lb-ease);
}
#top .lb-ft-langbtn.is-active { background: var(--lb-surface-navy); color: var(--lb-text-primary-dark); }
#top .lb-ft-langbtn:hover { color: var(--lb-text-primary-dark); text-decoration: none; }

/* 75.4 --------------------------------------------------- the social icons */
/* r5: placed in the grid's `social` area -- directly under the logo, no longer a
   full-width line -- and centred within it, which is the logo's own width. The
   gap to the logo is the row-gap on .lb-ft-brand (--lb-space-4). */
#top .lb-ft-social {
  grid-area: social;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
#top .lb-ft-social li { margin: 0; }
#top .lb-ft-solink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--lb-text-muted-dark);
  text-decoration: none;
  transition: color var(--lb-duration-fast) var(--lb-ease);
}
#top .lb-ft-solink:hover,
#top .lb-ft-solink:focus-visible { color: var(--lb-brand-orange); text-decoration: none; }
#top .lb-ft-solink svg { display: block; width: 18px; height: 18px; }

/* 75.5 ----------------------------------------------- the navigation columns */
/* r5: the seven top-level labels are now the brand orange, 18px and bold against
   14px regular muted children, so the two levels read as two levels. `uppercase`
   and the 0.06em tracking came from the Latin prototype and do nothing for
   Japanese except loosen it; tracking drops to 0.02em and the transform is
   dropped. Labels, order and targets are untouched -- type and colour only. The
   heading-to-children gap is one value for all seven columns. */
#top .lb-ft-h {
  font-size: 18px;
  line-height: 1.5;
  font-weight: var(--lb-weight-bold);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--lb-brand-orange);
  margin-bottom: 14px;
}
#top .lb-ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#top .lb-ft-list li { margin: 0; }
/* r5: 13px -> 14px. The children stay muted and regular-weight so they remain
   clearly secondary to the orange headings; nothing here goes orange except the
   existing hover/focus state. */
#top .lb-ft-link {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lb-text-muted-dark);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  transition: color var(--lb-duration-fast) var(--lb-ease);
}
#top .lb-ft-link:hover,
#top .lb-ft-link:focus-visible { color: var(--lb-brand-orange); text-decoration: none; }

/* 75.6 ------------------------------------------------------- the bottom bar */
#top .lb-ft-bottom {
  border-top: 1px solid var(--lb-border-subtle);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lb-space-5);
  flex-wrap: wrap;
}
#top .lb-ft-legal { display: flex; gap: var(--lb-space-5); flex-wrap: wrap; }
#top .lb-ft-legallink {
  font-size: 12px;
  color: var(--lb-text-muted-dark);
  text-decoration: none;
  transition: color var(--lb-duration-fast) var(--lb-ease);
}
#top .lb-ft-legallink:hover,
#top .lb-ft-legallink:focus-visible { color: var(--lb-brand-orange); text-decoration: none; }
#top .lb-ft-copy {
  font-size: 12px;
  color: var(--lb-text-muted-dark);
  font-family: var(--lb-font-mono);
  letter-spacing: var(--lb-tracking-mono);
}

/* 75.7 --------------------------------------------------------- Enfold resets
   The footer page is ordinary page content to Enfold, so its list and link
   styling would otherwise reach these lists. Scoped to .lb-ft only. */
#top .lb-ft ul { margin: 0; padding: 0; }
#top .lb-ft li { list-style: none; }
#top #footer-page .lb-ft a { color: inherit; }
#top #footer-page .lb-ft .lb-ft-link,
#top #footer-page .lb-ft .lb-ft-legallink,
#top #footer-page .lb-ft .lb-ft-solink { color: var(--lb-text-muted-dark); }
#top #footer-page .lb-ft .lb-ft-link:hover,
#top #footer-page .lb-ft .lb-ft-legallink:hover,
#top #footer-page .lb-ft .lb-ft-solink:hover { color: var(--lb-brand-orange); }
#top #footer-page .lb-ft .lb-ft-h { color: var(--lb-brand-orange); }
#top #footer-page .lb-ft img { border: 0; box-shadow: none; border-radius: 0; }

/* 75.8 ------------------------------------------------------------ responsive
   SiteFooter.jsx is a desktop artboard with a fixed repeat(4,1fr) and no media
   query. These are this stylesheet's own breakpoints (1120 / 767 / 600), so the
   footer steps where every other family steps. Seven columns never collapse to
   one: a single stack at 390 would be roughly 2,400px tall. */
@media only screen and (max-width: 1120px) {
  #top .lb-ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--lb-space-6); }
  /* r5: below 1120 the description would be squeezed under 350px between the logo
     and the switcher, which is not enough measure for the sentence to wrap
     naturally. It drops to its own full-width row; the logo keeps its place and
     the social pair stays centred under it. */
  #top .lb-ft-brand {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "mark   lang"
      "social lang"
      "desc   desc";
    column-gap: var(--lb-space-6);
  }
  #top .lb-ft-desc { max-width: none; align-self: start; }
}
@media only screen and (max-width: 767px) {
  #top .lb-ft { padding: 44px 0 24px; }
  #top .lb-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; padding-bottom: 32px; }
  #top .lb-ft-lang { margin-left: 0; justify-self: start; }
  /* r5: at phone widths the measure is too short for punctuation-only breaking to
     fit, so normal Japanese line breaking is restored. Still no <br>, no nowrap. */
  #top .lb-ft-desc { max-width: none; word-break: normal; }
  #top .lb-ft-logo { height: 56px; }
}
@media only screen and (max-width: 600px) {
  #top .lb-ft-inner { max-width: calc(100% - 32px); }
  #top .lb-ft-grid { column-gap: var(--lb-space-4); row-gap: 28px; }
  #top .lb-ft-h { font-size: 17px; }
  #top .lb-ft-desc { font-size: 16px; }
  #top .lb-ft-bottom { flex-direction: column; align-items: flex-start; gap: var(--lb-space-3); }
}

/* end block 75 */

/* ============================================================================
   BLOCK 76 -- THE TECHNICAL ARTICLE STANDARD                    (2026-08-30)
   技術ノート (category 119) and 設計・解析ガイド (category 120)
   ----------------------------------------------------------------------------
   Red1: the two technical article kinds needed ONE standard -- a shorter hero,
   a slightly wider measure, one spacing system, one heading hierarchy, one
   figure and caption system, one table style, and no accidental blank bands at
   the foot of the article. The prototype was Post 4578
   「大規模PIC設計におけるvarFDTDの優位性」; everything measured on it is applied
   from here to both categories at once.

   SCOPE, AND WHY IT CANNOT LEAK. Every rule below is prefixed with
   `#top:is(.lb-article-kind-guide, .lb-article-kind-note)`. `#top` is the body
   element on this install, and those two classes are emitted by
   lb_article_body_class() in lb-article.php for a Post whose primary category
   is 120 or 119 and for nothing else. The 技術情報 hub, the four category
   landing pages, セミナー・資料, リリースノート, ニュース・イベント, every Product,
   解析技術, Solution, Foundry, Support and Company page, the global header and
   the global footer therefore cannot match a single selector in this block.

   WHAT IS DELIBERATELY NOT TOUCHED:
     - the approved 「この記事の内容」 table of contents (block 45). No selector
       below reaches `.lb-article-toc`, `.lb-toc-*` or `.lb-article-side`.
     - the global Closing Panel (`.lb-ds-close`): its gradient, colours, button,
       typography, structure AND its own 64px padding are untouched. Only the
       padding of the article section that precedes it is normalised.
     - the article hero's colours, gradient, H1 scale and metadata vocabulary.
     - blocks 41-45, which stay the shared article system. This block adjusts
       that system for the two technical kinds; it does not replace it.
   ========================================================================= */

/* 76.0 --------------------------------------------------- the reading measure
   ONE token, redefined for these two kinds only, and every rule in blocks
   41-45 that already reads `var(--ds-reading)` follows it: the prose measure,
   the centred column below 1320, the collapsed TOC panel's width and the
   embed cap. 780 -> 840 is +7.7%, inside the 5-10% Red1 allowed.

   WHY IT IS SAFE TO MOVE THE TOKEN RATHER THAN RESTATE EIGHT RULES: on an
   article page the ONLY consumers of --ds-reading are blocks 41-45. The other
   three consumers in this stylesheet are block 40.3 (the 会社紹介ビデオ on /about/),
   block 46 (the OUR STORY band on page 1504) and block 63 (the 会社情報 video) --
   all page-scoped to Pages, none of which can be a Post. Audited line by line,
   2026-08-30.

   840px at 17px is ~49 Japanese characters per line, still inside the
   comfortable 45-55 band for body copy, and it is what stops a long technical
   H2 such as 「varFDTDの動作原理：3D構造を実効的な2D分散材料へ落とし込む仕組み」
   wrapping for the sake of 60px. */
#top.lb-article-kind-guide,
#top.lb-article-kind-note {
  --ds-reading: 840px;
}

/* 76.1 ------------------------------------------------------------- the hero
   MEASURED on 4578 at 1440 before anything was written. The hero was 600px
   tall and its own content -- crumbs 30, eyebrow 23, H1 123, lead 91, metadata
   66 -- accounted for 333 of it. The other 267 was empty navy:

     64  section padding-top            ->  clamp(20, 2.5vw, 36)
     20  crumb padding-top              ->  12
     32  crumb padding-bottom           ->  20
     24  eyebrow margin-bottom          ->  16
     48  metadata margin-top            ->  20
     16  metadata padding-top           ->  12
     64  section padding-bottom         ->  clamp(18, 2vw, 28)

   plus one line of the lead recovered by widening it from 46em to 60em, which
   is the same remedy block 65.9 applied to the 技術情報 hub and child heroes and
   for the same measured reason. THE H1 IS NOT REDUCED: 44px at 1440, 36 at 767
   and 30 at 390 all stay exactly as the design system sets them, because Red1
   asked for a shorter hero, not a smaller headline. The clamps carry the
   reduction proportionally through tablet to 390 with no separate breakpoint.

   Two ids everywhere, because the rules being answered are block 18's
   `#top #wrap_all .lb-ds.lb-ds-hero` (2,2,0) and block 17.2's crumb padding. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-ds-hero {
  padding-top: clamp(20px, 2.5vw, 36px);
  padding-bottom: clamp(18px, 2vw, 28px);
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-crumbs {
  padding-top: 12px;
  padding-bottom: 20px;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-eyebrow {
  margin-bottom: 16px;
}

/* `min(100%, ...)` so the cap can never exceed the column and 767 / 600 / 390
   keep wrapping naturally. `text-wrap: balance` is the design system's own
   answer to a short orphan line and is already used on the hub heroes. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-ds-hero .lb-ds-lead {
  max-width: min(100%, 60em);
  text-wrap: balance;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-meta {
  margin-top: 20px;
  padding-top: 12px;
}

/* 76.2 -------------------------------- the article comes up to meet the hero
   The body section opened with another 64px, so the gap between the hero's
   last metadata row and the top of the table of contents was 64 + 64 = 128px.
   40 + 28 = 68 reads as one step instead of two, which is what "bring the
   TOC/article content visibly closer to the hero" asked for. The same clamp
   closes the article, so the foot of the body matches its head. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-main {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* 76.3 -------------------------------------------- the foot of the article
   final content -> references (the body's own) -> 一覧へ + related pillars ->
   関連する技術情報 -> Closing Panel, with one step between each. Block 42.3's
   `--hub-half` (48px) top pad on the related section is replaced by the same
   clamp the body uses, so the three light bands step evenly instead of
   0 / 48 / 64. TWO ids + :is(), because 42.3 is (2,4,0).

   The Closing Panel's own 64px top padding is NOT touched -- it is the global
   approved component and it is what separates the article from the CTA. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-nav {
  padding-bottom: clamp(24px, 3vw, 40px);
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-rel {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* 76.4 ------------------------------------------------- heading hierarchy
   SEMANTIC LEVELS ARE NOT CHANGED ANYWHERE. This is presentation only.

     H2  26px / 600, --text-primary-light, hairline above, the strongest
         body-section heading. Sizes stay on block 41.4's responsive ladder
         (26 / 24 / 22 / 21) so nothing about the small-screen scale moves.
     H3  19px / 600, #A8500F -- the design system's AA-safe light-surface
         accent (5.50:1), which is the approved orange treatment. Visibly
         subordinate to H2 by seven pixels and by carrying no rule.
     H4  16px / 600, --text-primary-light. Smaller and quieter than H3, still
         unmistakably a heading against 17px body copy.

   ONE SPACING VALUE PER RELATION, and the same value in every article:

     preceding content -> H2   48px, then the hairline, then 24px, then the text
     H2 -> first content       20px
     preceding content -> H3   32px
     H3 -> first content       12px
     preceding content -> H4   24px
     H4 -> first content       12px
     H2 immediately -> H3      20px   (no section has closed, so no full step)
     H3 immediately -> H4      16px

   Block 43.3 reduced figure -> H2 and table -> H2 to 32px, which is exactly the
   "large differences between equivalent sections" Red1 named: the same relation
   measured 48 after a paragraph and 32 after a figure in the same article. It
   is restated to 48 here for these two kinds, and left alone for the other
   three. Adjacent margins collapse, so 48 is the whole gap, not 48 + 32. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h2 {
  margin: 48px 0 20px;
  padding-top: var(--ds-s5);
  color: var(--text-primary-light);
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h3 {
  margin: 32px 0 12px;
  font-size: 19px;
  color: #A8500F;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h4 {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary-light);
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h2 + h3 {
  margin-top: 20px;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h3 + h4 {
  margin-top: 16px;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose figure + h2,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-table + h2,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns + h2,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose table + h2,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose ul + h2,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose ol + h2 {
  margin-top: 48px;
}

/* 76.4a ------------------------------ legacy heading colour stamps, corrected
   These bodies are migrated content and carry whatever the old editor put in
   them. MEASURED across the fourteen target Posts: 4578 and 5020 stamp their
   H2s with the retired brand orange (`has-col-ec-7628-color`), while 3915 and
   4121 stamp theirs navy -- so the same level rendered orange in one article
   and navy in the next, which is precisely the inconsistency Red1 named.

   The correction is in CSS, so no post body is rewritten and deleting these
   rules restores exactly what the authors saved. `!important` is required
   twice over: block 43.4b already remaps `#ec7628` with `!important`, and an
   inline `style` attribute beats any stylesheet rule without it. The reach is
   limited to h2/h3/h4 and to inline spans inside them, so coloured runs in
   body copy, tables and captions are untouched. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose :is(h2, h4)[style*="color"],
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose :is(h2, h4)[class*="-color"] {
  color: var(--text-primary-light) !important;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h3[style*="color"],
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h3[class*="-color"] {
  color: #A8500F !important;
}

/* MEASURED, not assumed: Enfold's merged stylesheet colours a bare <strong>
   inside a heading with the theme's primary accent, and it loads AFTER the
   child theme. 4578 wraps four of its six H2s in <strong>, so those headings
   painted #EC7628 while getComputedStyle on the H2 itself still reported the
   design system's navy -- the colour was coming from the child, not the
   heading. Every inline run inside a heading therefore inherits the heading's
   own ink, whatever stamped it: the legacy Gutenberg preset classes, an inline
   style attribute, or a theme rule on the bare element.

   `a` is excluded so a genuine link inside a heading keeps its link colour. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose :is(h2, h3, h4) :is(span, strong, b, mark, em, i, u, small, ins, del) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}

/* 76.4b ------------------------------- H3 keeps block 41.8's responsive step
   76.4 states H3 at 19px, which is (2,5,0) and therefore outranks block 41.8's
   `#top #wrap_all … h3 { font-size: 18px }` at <=767 -- measured 19px at 390
   before this rule existed. The ladder is restored at the same specificity so
   H3 steps down with H2 (26/24/22/21) instead of sitting flat. H4 needs no
   entry: 76.4's 16px is already block 41.8's <=767 value. */
@media only screen and (max-width: 767px) {
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose h3 {
    font-size: 18px;
  }
}

/* 76.5 ---------------------------------------------------- vertical rhythm
   The relations block 41.4 already sets correctly -- p -> p 24, list -> next 24,
   figure/table/embed/blockquote/pre 32 above and below, image -> caption 12 --
   are NOT restated; restating a value that is already right only creates a
   second place to change it. What is added here is the handful of block types
   those rules never covered, given the same numbers, so a columns block or an
   embed steps like a figure instead of like a paragraph. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-group,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-embed {
  margin-top: var(--ds-s6);
  margin-bottom: var(--ds-s6);
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns > .wp-block-column > *:first-child {
  margin-top: 0;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns > .wp-block-column > *:last-child {
  margin-bottom: 0;
}

/* An empty paragraph left behind by a migration is a blank band that no reader
   asked for. The ones that survive as literal `<p></p>` are removed from the
   bodies themselves; this closes the rest -- a paragraph holding nothing but
   whitespace, an `&nbsp;` or a stray `<br>` -- WITHOUT hiding anything a
   reader can see. `:empty` alone would miss all three. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose p:empty {
  display: none;
}

/* 76.6 ------------------------------------------------ figures and captions
   ONE FIGURE SYSTEM, WHICH IS NOT ONE FIGURE WIDTH. Block 43.2 already gives
   `figure.wp-block-image` `width: fit-content`, so a 442px diagram stays 442px
   and a 1600px comparison plot is capped at the measure -- nothing is upscaled
   and nothing is distorted. What was inconsistent was where that box sat and
   how its caption behaved:

     - every figure was flush LEFT, so a narrow diagram hung off one edge of
       the column with a long empty gutter beside it. Figures are centred in
       the measure here, at every width and in both column layouts.
     - the caption inherited `text-align: center` from Gutenberg's
       `.aligncenter`, so a two-line caption centred itself independently of
       its own figure. Captions are LEFT-ALIGNED, and because they live inside
       a `fit-content` figure their box already tracks the image's width, so
       the caption's left edge lands exactly on the image's left edge.

   `> figure` only, so a figure nested inside a columns block keeps whatever
   its column gives it. A `.lb-article-wide` figure is excluded from the
   restatement under the TOC layout because block 45.6 owns its geometry. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > figure {
  margin-left: auto;
  margin-right: auto;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose figcaption {
  margin: var(--ds-s3) 0 0;
  font-size: 13px;
  line-height: 1.75;
  text-align: left;
  color: var(--text-secondary-light);
}

/* No decorative frame is added and none is removed: block 41.4's 1px
   --border-light hairline and --ds-radius-media stay exactly as approved, and
   the axes, labels and panel borders drawn inside the source images are
   untouched. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > figure > img,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > figure > a > img {
  margin-left: 0;
  margin-right: 0;
}

@media only screen and (min-width: 1320px) {
  /* With the table of contents in the left column, block 45.4 pins every prose
     child to `margin-left: 0` so the measure sits against the gap. That is
     right for text and wrong for a figure, which Red1 asked to be centred, so
     figures alone take their auto margins back. (1,7,0) against 45.4's
     (1,4,0). */
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-hastoc .lb-article-prose > figure:not(.lb-article-wide) {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 76.6a --------------------------- galleries stop cropping and upscaling
   MEASURED on 3155 and 10746, the only two target Posts using
   `wp-block-gallery`: WordPress core's `is-cropped` variant sets
   `flex-grow: 1` on each nested figure and `object-fit: cover` on its image, so
   the row fills the measure whatever the sources are. On 3155 that stretched a
   264px source to 393px -- a 1.5x upscale AND a crop, i.e. both of the things
   Red1 ruled out for technical figures, on diagrams whose axes and labels are
   the content.

   Natural size, contained, centred in the row. A source WIDER than the row
   still shrinks to fit, because `max-width: 100%` is untouched. Nothing here
   changes the gallery's column count, its gaps or its captions. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-gallery.has-nested-images {
  justify-content: center;
  align-items: flex-start;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-gallery.has-nested-images figure.wp-block-image {
  /* `width: auto` is NOT shrink-to-fit on a block box -- it fills. Measured:
     3155's 264px source still rendered at 793. `fit-content` is what block
     43.2 already uses for a standalone figure, and it is what makes the frame
     take the image's own width. */
  flex-grow: 0;
  flex-basis: auto;
  width: fit-content;
  max-width: 100%;
}

/* The gallery box itself shrink-wraps and centres as ONE composite figure.
   MEASURED on 3155: WordPress core's flex layout stylesheet is not enqueued on
   this install, so `.wp-block-gallery` computes `display: block` and
   `justify-content` is inert -- its nested figures simply stack at the left of
   an 840px box. Centring the nested figures individually would leave the
   gallery's own caption stranded at the column edge, which is the exact defect
   76.6 exists to fix. Shrink-wrapping the gallery instead centres the group AND
   keeps the caption on the left edge of its widest figure. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > figure.wp-block-gallery {
  width: fit-content;
  max-width: 100%;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-gallery.has-nested-images figure.wp-block-image img {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 76.7 ---------------------------------------------------------- tables
   One restrained style for both categories, built from the design system's own
   ink: no fills beyond a white header, no outer frame, no heavy rules. The
   header is separated from the data by weight, by ground and by one firmer
   hairline -- not by a border box.

   Block 41.4's header was 12px uppercase mono in the accent orange, which was
   right when it was invented for a two-column spec list and is wrong for a
   Japanese technical comparison table: `text-transform: uppercase` does
   nothing to Japanese, 0.08em tracking loosens it, and 12px is a step below
   the readable floor for a header carrying 「シミュレーション・タイプ」. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose thead th {
  font-family: var(--ds-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--text-primary-light);
  background: var(--surface-white);
  border-bottom: 1px solid #B9C6D2;
  vertical-align: bottom;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose th,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose td {
  padding: var(--ds-s3) var(--ds-s4);
  font-size: 15px;
  line-height: 1.8;
}

/* Same Enfold rule, same remedy, one level down: 4578 and 3155 wrap their
   header cells in <strong>, which painted the header row in the theme accent
   while the neighbouring tables (10286, 10746) -- whose headers carry no
   <strong> -- painted navy. The header row is one style across all fourteen. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose thead th :is(span, strong, b, mark, em) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}

/* Gutenberg's zebra style is a second table aesthetic. 3155 is the only target
   Post carrying it; neutralised so all fourteen read the same. The separator
   hairlines from block 41.4 do the row-tracking work instead. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-table.is-style-stripes table,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-table.is-style-stripes tbody tr,
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: transparent;
  border-bottom: 0;
}

/* A link in a cell must still read as a link once the cell has its own ink. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose :is(th, td) a {
  color: #A8500F;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 3155's Gutenberg comparison table stamps its header cells with the retired
   `#f46c3a`, which measures 3.0:1 on white and fails AA. Remapped to the
   system's 5.50:1 accent. Scoped to `thead`, so the same colour on the navy
   band rows inside that Post's two classic-editor tables -- where it sits on
   #072C50 and passes -- is left exactly as authored. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose thead th[style*="#f46c3a"],
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose thead th[style*="#F46C3A"] {
  color: #A8500F !important;
  background-color: transparent !important;
}

/* The scroll container can never be wider than the measure, so a table that
   scrolls scrolls itself and the page does not. Block 41.8's <=767 backstop for
   wrapper-less classic tables is unchanged and still applies underneath. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 767px) {
  /* 14px is the floor. Padding tightens one step so a three-column table has a
     chance of fitting at 390 before the scroll container is needed at all. */
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose th,
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose td {
    padding: var(--ds-s3);
    font-size: 14px;
  }

  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose thead th {
    font-size: 13px;
  }
}

/* 76.8 ------------------------------------------------------- 390px checks
   Nothing here is new behaviour; these are the two places the narrower hero
   and the wider measure could have introduced an overflow, closed explicitly.
   The H1, the TOC and the closing panel are untouched at every width. */
@media only screen and (max-width: 600px) {
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > figure,
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns {
    max-width: 100%;
  }

  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns {
    display: block;
  }

  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: 100%;
  }

  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose .wp-block-columns > .wp-block-column + .wp-block-column {
    margin-top: var(--ds-s5);
  }
}

/* end block 76 */

/* ============================================================================
   BLOCK 78 -- THE BODY H2 CANVAS                                (2026-08-30 r3)
   技術ノート (119) and 設計・解析ガイド (120)
   ----------------------------------------------------------------------------
   SUPERSEDES AND REPLACES BLOCK 77, which has been deleted from this file.
   Block 77 widened the H2 only inside `@media (min-width: 1320px)` and so did
   nothing at the widths people actually browse at. Red1, correctly: at 1280 the
   heading still wrapped while space sat unused to its right, and "the criterion
   is available physical space, not an arbitrary 1320px breakpoint".

   THE REAL CAUSE IS THE WRAPPER, NOT THE BREAKPOINT. Measured on 4578 at 1280:

     .container                       1152 @ 56    padding 0 50px
     .content / .post-entry / wrapper 1052 @ 106
     .flex_column.av_one_full          840 @ 212   <- max-width 840, margin 0 106
     .lb-article-prose                 840 @ 212
     paragraphs                        840 @ 212
     H2                                840 @ 212   <- and 106px sat unused to its right

   Block 42.1 caps the COLUMN at the reading measure and centres it, so below
   1320 every descendant inherits an 840px ceiling and the slack to the right of
   the column is unreachable. Above 1320 block 45.4 already does the right thing
   -- the column fills its grid cell and the CHILDREN carry the measure -- which
   is why block 77 worked there and only there.

   SO THIS BLOCK GIVES BOTH BANDS ONE ARCHITECTURE, the one Red1 specified:

     a wide article canvas  ->  H2 may consume it  ->  prose children stay 840

   rather than an 840px container the H2 has to escape.

   THE CANVAS IS OFFSET, NOT RE-CENTRED. `margin-left` is set to exactly the
   centring offset the column had before -- `(100% - 840px) / 2`, which is the
   106px measured above -- and `margin-right` to 0. The canvas therefore BEGINS
   on the reading column's existing left edge and grows only to the RIGHT, into
   the space that was already empty. Paragraphs, lists, figures, captions and
   tables keep `max-width: var(--ds-reading)` and land on that same left edge,
   so the prose does not move by a single pixel. `max(0px, ...)` clamps the
   offset at narrow widths, where there is no slack to distribute -- there is no
   negative margin here at any viewport width.

   MEASURED RESULT, article canvas available to the H2 (4578):

     viewport  .container  content  canvas  H2 needs 853 / 882 / 889
     1920        1480       1380     1096    all three fit
     1600        1440       1340     1056    all three fit
     1440        1296       1196      912    all three fit
     1280        1152       1052      946    all three fit   <- was 840, all wrapped
     1200        1080        980      910    all three fit   <- was 840, all wrapped
     1120        1008        908      874    all three fit at the 24px tier
      768         691        591      591    wraps naturally, correctly
      390         351        318      318    wraps naturally, correctly

   THE BREAKPOINT IS NOT A BREAKPOINT. The widening is continuous: the canvas is
   whatever the container leaves over, so it engages by itself the moment the
   content box exceeds the reading measure (content > 840px, i.e. viewport
   > ~1045px) and is arithmetically inert below that, where `max(0px, ...)`
   resolves to 0 and the canvas equals the column. 1320 survives ONLY as the
   width at which the table of contents moves into the sidebar -- block 45's own
   measured arithmetic, untouched here -- and both sides of it now behave the
   same way.

   NO HACKS. No `white-space: nowrap`, no `<br>`, no `&nbsp;`, no font-size
   change, no negative margin, no transform, no absolute positioning, nothing
   that can overflow the article or the page, no per-heading and no per-post
   rule. The H2's 26px size, navy ink, weight, line-height, 48px preceding step,
   24px head-to-text step and normal wrapping are block 76.4's and are not
   restated. H3, H4, the hero, the TOC, figures, captions, tables, the related
   section and the Closing Panel are not reachable by any selector below.
   ========================================================================= */

/* 78.1 ---------------------------------------- the canvas, below the TOC band
   Only `.lb-article-main`. Block 42.1 applies the same 840px centred column to
   `.lb-article-nav` and `.lb-article-rel`; those two keep it exactly as
   approved -- the contextual links, the pillar groups and 「関連する技術情報」 do
   not move.

   The stacked table of contents needs nothing: block 45.3 centres
   `.lb-article-side` inside the same 1052px box with the same `(100% - 840)/2`
   offset, so its left edge still lands on the prose's left edge, at 212px.
   Verified, not assumed. */
/* `not all and (min-width: 1320px)` is the EXACT complement of block 45.4's
   query, not an approximation of it. `(max-width: 1319px)` is not: measured on
   this install at an iframe width of 1319 CSS px with a 1.5 device pixel ratio,
   the media width resolves fractionally and BOTH `(max-width: 1319px)` and
   `(min-width: 1320px)` reported false -- a sub-pixel dead band in which neither
   canvas rule applied and block 42.1's 840px cap won, so the heading wrapped
   again. The complement form tiles the whole axis with no gap and no overlap at
   any pixel ratio. */
@media not all and (min-width: 1320px) {
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-main .flex_column.av_one_full {
    /* `width: auto` is REQUIRED and was the first measured defect of this block:
       block 41.1 puts an explicit `width: 100%` on this column, and an explicit
       width does not shrink for a margin -- the canvas came out 1052px wide
       starting at 212, i.e. 106px past the container's content edge. With
       `auto` the box resolves to containing block - margins = 946 and ends
       exactly on the content edge. */
    width: auto;
    max-width: none;
    margin-left: max(0px, calc((100% - var(--ds-reading)) / 2));
    margin-right: 0;
  }

  /* The measure moves off the column and onto the children, which is exactly
     what block 45.4 does above 1320. `margin-left: 0` anchors them to the
     canvas's left edge -- the column's old left edge -- so nothing shifts. */
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-main .lb-article-prose > * {
    max-width: var(--ds-reading);
    margin-left: 0;
    margin-right: auto;
  }

  /* Figures keep block 76.6's centring, restated here because the rule above
     would otherwise pin them left. */
  #top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-main .lb-article-prose > figure {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 78.2 ------------------------------------------- the H2 takes the canvas
   No media query: one rule for every width. Above 1320 block 45.4 caps prose
   children at the measure and this lifts that cap for H2 alone; below 1320
   78.1's cap is lifted the same way. `min(100%, 1060px)` means the heading can
   never exceed the canvas it lives in, so no width can produce overflow, and
   1060 is the ceiling because the widest H2 in either category measures 1000px
   (Post 5014) -- 60px of headroom, and a length a 26px heading can still be
   read across.

   Specificity: block 45.4's cap is `#top .lb-ds.lb-dsr.lb-article-main
   .lb-article-prose > *:not(.lb-article-wide)` (1,5,0) and 78.1's is (2,6,0).
   This is (2,6,1) and is later in the file. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr.lb-article-main .lb-article-prose > h2 {
  max-width: min(100%, 1060px);
}

/* 78.3 ------------------------------- the divider is not the heading's width
   Block 41.4 draws the section rule as `border-top` ON the H2, so the moment the
   heading box widened the rule widened with it -- an accidental side effect that
   made the divider a different length at every viewport. Red1: the divider must
   follow the approved article section width consistently and must not vary with
   whatever width the heading happens to receive.

   The rule is therefore drawn as a background line sized to the READING MEASURE
   and pinned to the top-left of the padding box -- the pixel the border occupied
   -- while the heading text is free to use the wider canvas. It is a plain
   background, so there is no pseudo-element to position, no `position:
   absolute`, and nothing leaves the box.

   `min(100%, ...)` keeps it inside the heading at narrow widths, where the
   canvas is smaller than the measure and the line spans the column exactly as
   `border-top` used to.

   Colour, thickness and position are unchanged: 1px of --border-light on the
   padding-box edge, 24px above the text. `:first-child` reproduces block 41.4's
   `> :first-child { border-top: 0 }`, so a leading H2 -- 5014, 4121, 11840 --
   still opens without a rule. */
#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > h2 {
  border-top: 0;
  background-image: linear-gradient(var(--border-light), var(--border-light));
  background-repeat: no-repeat;
  background-size: min(100%, var(--ds-reading)) 1px;
  background-position: left top;
}

#top:is(.lb-article-kind-guide, .lb-article-kind-note) #wrap_all .lb-ds.lb-dsr .lb-article-prose > h2:first-child {
  background-image: none;
}

/* end block 78 */

/* ============================================================================
   BLOCK 79 -- the ソリューション family: one Solution-child system. 2026-08-30.

   Round: propagate the approved 19875 メタレンズ／メタサーフェス Solution build to the
   other ten children (19870-19874, 19876-19880) and normalise the family.
   19875 stays the visual/component reference; this block adds no new colour,
   radius, font or shadow, and defines no new component. It does three things.

   79.1  .lb-ds-bal -- a balancing grid for the Solution card rows.
         WHY. `.lb-ds-cards-sm` is `repeat(4, 1fr)` and `.lb-ds-cards-3` is
         `repeat(3, 1fr)`, so a row whose card count is not a multiple of the
         track count leaves an empty cell. Measured on 19875: seven workflow
         cards in a four-track grid render 4 + 3 and leave one dead cell at
         1440 and 1280 (audit 2026-08-30, deviation 13), and 3 + 1 in the
         two-track band. The same happens to a five-card product row.
         HOW. The container becomes a twelve-track grid and each card is given
         an explicit span from the count class the markup carries
         (.lb-ds-n2 .. .lb-ds-n7), so every row is full at every width. Nothing
         is added, duplicated, hidden or reordered -- 19875 still renders its
         seven authored steps, now as 4 + 3 with the second row's three cards
         each one track wider. Below 1121 the grid is two columns and an odd
         count gives its last card the full width instead of half a row.
         The spans are declared inside the three width bands so they never race
         the `.lb-ds-cards-3` / `.lb-ds-cards-sm` template rules, which are
         themselves restated per band.

   79.2  the closing-panel measure on Solution pages.
         WHY. `.lb-ds-close h2` is `clamp(30px, 3vw, 52px)` capped at `24em`,
         i.e. 1036.8px at 1440. Measured intrinsic width of the Solution CTA
         headline: 1078.7px on 19870 and 19871 (wraps to two lines), 1034.2px
         on 19876 (1 line, 2.6px of clearance). The inner column is 1196px, so
         the wrap is a measure that is narrower than the space available, not a
         copy problem.
         HOW. The cap is raised to 27em on the twelve Solution pages only --
         1166.4px at 1440, still inside the 1196px column, and 1036.8px at 1280
         against a 958.8px intrinsic. No copy is shortened, `white-space` is
         untouched, `text-wrap: balance` still governs, and the global closing
         panel is unchanged everywhere else. Same page-scoped idiom as the
         17675 family rule above.

   79.3  H3 tiers, recorded rather than re-declared.
         The ten children are moved off `.lb-ds-cards-3.lb-ds-so-steps` (H3 20px)
         onto 19875's `.lb-ds-cards-sm.lb-ds-so-steps.lb-ds-so-flow` (H3 17px)
         and their product rows onto `.lb-ds-cards-3.lb-ds-so-rel` (H3 20px), so
         after this round each Solution component has exactly ONE H3 size across
         all eleven children -- workflow card 17px/1.5/600, product card
         20px/1.4/600, row heading `.lb-ds-srow-name` 18px/1.5/600 -- all three
         inherited from the approved 19875 build. The audit's "three sizes for
         one semantic level" (15 / 17 / 20) is resolved by the markup change;
         no override is written here, because adding one would fork the values
         away from the reference page.

   NOT DONE HERE, deliberately: `.lb-ds-light.lb-ds-cont`'s `padding-top: 0` is
   left in place. It is the family's own mechanism for joining an adjacent light
   pair into one surface and both of its uses on 19875 are exactly that, so it
   is load-bearing rather than a stray zero. It is applied on the propagated
   pages only where a light section directly follows another light section, and
   nowhere else.
   ========================================================================= */


/* 79.1a ------------------------------------- the twelve-track balancing grid */
#top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media only screen and (min-width: 1121px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n2 > .lb-ds-card { grid-column: span 6; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n3 > .lb-ds-card { grid-column: span 4; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n4 > .lb-ds-card { grid-column: span 3; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card { grid-column: span 4; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card:nth-child(n+4) { grid-column: span 6; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n6 > .lb-ds-card { grid-column: span 4; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card { grid-column: span 3; }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card:nth-child(n+5) { grid-column: span 4; }
}

/* 79.1b ------ two columns from 1120 to 768; an odd count takes the full width
   on its last row rather than sitting alone in half of one. */
@media only screen and (min-width: 768px) and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n2 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n3 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n4 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card:nth-child(n+4),
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n6 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card:nth-child(n+5) {
    grid-column: span 6;
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n3 > .lb-ds-card:last-child,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card:last-child,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card:last-child {
    grid-column: span 12;
  }
}

/* 79.1c ------------------------------------------- one column at 767 and below */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n2 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n3 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n4 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card:nth-child(n+4),
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n6 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card:nth-child(n+5),
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n3 > .lb-ds-card:last-child,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n5 > .lb-ds-card:last-child,
  #top #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ds-bal.lb-ds-n7 > .lb-ds-card:last-child {
    grid-column: span 12;
  }
}

/* 79.2 ------------------------- the Solution closing-panel headline measure */
#top:is(.page-id-19539, .page-id-19870, .page-id-19871, .page-id-19872, .page-id-19873,
        .page-id-19874, .page-id-19875, .page-id-19876, .page-id-19877, .page-id-19878,
        .page-id-19879, .page-id-19880) #wrap_all
  .lb-ds.lb-dsr.lb-ds-close .entry-content-wrapper h2 {
  max-width: min(100%, 27em);
}

/* end block 79 */
/* ============================================================================
   BLOCK 80 -- primary navigation: the ソリューション mega menu and the
   desktop / burger breakpoint. 2026-08-31.

   SUPERSEDES the 2026-08-30 first draft of this block, which stepped the menu
   item padding from 13px to 7px between 768 and 1400 to buy back the space the
   new ソリューション item took. **That rule is removed.** Red1: do not solve the
   collision by permanently compressing the menu. The menu keeps its 13px
   padding at every width; the band where it does not fit now uses the burger
   instead.

   80.1  WHERE THE DESKTOP MENU ACTUALLY FITS.
   The menu is right-aligned beside a 256px logo, and Enfold was set to
   "Activate only for Smartphones (below 768px)", so the desktop menu was being
   asked to render in bands where it cannot. Measured logo-right to first-item
   distance at 13px padding, with the eight top-level items the menu now has:

     1440  +117px      1280   -35px      1120  -187px      990  -256px

   The distance falls almost exactly 1:1 with viewport width, so it reaches zero
   at about 1317px. Two changes:

     a. Enfold's own option `header_mobile_activation` is set to
        `mobile_menu_tablet`, which is the theme's supported way of moving the
        switch to 990px. That brings the theme's own CSS, its JS and the burger
        overlay with it, rather than re-implementing them.
     b. The rule below carries the same three switch declarations up to 1365px,
        using Enfold's own selectors verbatim, so the band from 990 to 1365 --
        which the theme has no option for -- behaves exactly like the band below
        it. 1365 is chosen so the desktop menu returns at 1366px with about 43px
        of clearance and 117px at 1440.

   Deliberately NOT copied from Enfold's 768-989 block: its
   `height/line-height: 90px` and `padding: 0 0 0 20px` header rules. Those
   resize the header for tablet; from 990 up the header keeps its 75px desktop
   size, so copying them would make the header jump at 1366.

   80.2  the two-column mega panel. Enfold renders a mega menu natively --
   `.avia_mega_div`, `.avia_mega_menu_columns_2`, `.mega_menu_title` -- and a
   depth-1 item whose URL is `#` is emitted as a bare
   `<span class="mega_menu_title">`, i.e. a heading with no anchor. That is what
   フォトニクス and 光学システム are: grouping labels only, no page, no URL. Only
   the type scale and spacing are set here, to the design system's own tokens.
   ========================================================================= */


/* 80.1 ------------------------- carry the burger band from 990 up to 1365 */
@media only screen and (min-width: 990px) and (max-width: 1365px) {
  .responsive.html_mobile_menu_tablet .av-burger-menu-main {
    display: block;
  }
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block;
  }
}

/* 80.2 ------------------------------------------- the Solutions mega panel
   MEASURED on the render, not assumed: Enfold paints the mega panel with
   --brand-navy (rgb(7,43,80)) and keeps the site's existing dropdown treatment
   for the links themselves -- #EC7628 block, white 14px Noto Sans JP -- which is
   exactly what the 製品・解析ソフトウェア dropdown already does, so nothing is
   restyled there. Only the two group labels are new, and they take the family's
   navy-surface eyebrow role: IBM Plex Mono 12px in --accent-light-orange over a
   --border-navy hairline. #A8500F, the light-surface eyebrow, was tried first
   and measures about 2:1 on this panel -- it is a light-ground colour and does
   not belong here. */
#top #wrap_all #header .avia_mega_div > .sub-menu > li > .mega_menu_title {
  display: block;
  margin: 0 0 var(--ds-s3);
  padding-bottom: var(--ds-s2);
  border-bottom: 1px solid var(--border-navy);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: none;
  color: var(--accent-light-orange);
}

#top #wrap_all #header .avia_mega_div > .sub-menu > li > ul.sub-menu > li > a {
  font-family: var(--ds-font-sans);
  font-size: 14px;
  line-height: 1.6;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* end block 80 */

/* ==========================================================================
   81 -- THE LEGAL DOCUMENT PAGES                               (2026-09-01)

   Scope: 1884 ご利用条件 and 20041 プライバシーポリシー, via `lb-ds-legal` on
   every section of both pages. No other page carries the class.

   Three things this block does, and nothing else:

   81.1  The hero clause index. `.lb-ds-anchors` is the Products-hub jump row:
         13px IBM Plex Mono, built for three to five short labels. These two
         pages carry six and seven Japanese labels of up to twelve characters
         (クッキーおよびアクセス解析), and 13px mono renders Japanese small and
         tight. The labels move to the body face at 15px; the counter STAYS
         mono and orange, because the counter is the system's own device and
         the label never was. Gaps become explicit row/column values so a
         wrapped second line sits on the same rhythm as the first, and each
         entry is `nowrap` so the row breaks BETWEEN entries, never inside a
         Japanese label.

   81.2  The reading measure. `.lb-ds-prose` is 52em -- a ~900px line at 17px.
         Block 41.4 already recorded that as "too long to track for five
         thousand characters" and set the article body to --ds-reading (780px).
         A legal document is the same reading problem, so it takes the same
         token. Carried as TC-3 since 2026-08-29.

   81.3  Nothing else. No colour, no new component, no section rhythm change,
         no closing panel, no card. The hero, .lb-ds-crumbs, .lb-ds-eyebrow,
         .lb-ds-lead, .lb-ds-light / -cont and .lb-ds-fupdated are reused
         exactly as the Company family already declares them.

   Deliberately NOT overridden: the <=600 rule in block 40 that stacks
   .lb-ds-anchors into a column, and the <=767 gap step. Both carry two id
   selectors and keep winning, which is the intent -- this block changes how
   the index reads on desktop and tablet, not its mobile behaviour.
   ========================================================================== */

/* 81.1 ------------------------------------------------ hero clause index */
#top .lb-ds.lb-ds-legal .lb-ds-anchors {
  gap: var(--ds-s4) var(--ds-s6);
}
#top .lb-ds.lb-ds-legal .lb-ds-anchors a {
  gap: 10px;
  font-family: var(--ds-font-body);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
}
#top .lb-ds.lb-ds-legal .lb-ds-anchors a .lb-ds-n {
  font-family: var(--ds-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* 81.2 -------------------------------------------- legal reading measure */
#top .lb-ds.lb-ds-legal .lb-ds-prose {
  max-width: var(--ds-reading);
}


/* ==========================================================================
   82 -- FOOTER BOTTOM BAR: CLEARING THE CHAT WIDGET             (2026-09-02)

   MEASURED, and the first measurement was wrong -- recorded here so it is not
   repeated. `div.zsiq_floatmain` reports a 60x60 box fixed 25px from the right
   and 10px from the bottom, but it PAINTS a child, `div.zsiq_cnt`, which is
   `position: absolute`, 200x60, and overflows LEFTWARD out of that box. The
   real painted footprint of the widget plus its teaser is:

       275 x 60, i.e. the rightmost 300px and the bottom 70px of the viewport

   at z-index 2147483647. Against that, `span.lb-ft-copy` was still overlapped
   by 133px at 1280 with a 96px right padding in place. The teaser is not
   transient -- it was still painted after 9s.

   Reserving the lane horizontally does not work: clearing 300px needs ~248px
   of right padding at 1280 and ~262px at 768, and at 768 that overflows the
   691px bar (legal 200 + copy 384) and forces `flex-wrap` to break the row.
   Wrapping the bar, or moving its stacking breakpoint, would change the
   approved footer layout.

   So the bar is lifted instead of narrowed. 88px of bottom padding puts every
   child of `.lb-ft-bottom` above the widget's 70px band at EVERY width,
   whatever its horizontal position, with 18px to spare. One declaration, no
   breakpoint, no direction change, no wrap.

   Unchanged: the `space-between` row, the stacking at <=600, all gaps, the
   75.6 hairline (padding is inside the border box, so it still spans the full
   width), every colour, font, label and URL. The widget itself is not moved,
   restyled or re-anchored.

   Also checked and already clear: Enfold's `#scroll-top-link` (50x50, 65px
   from the right, 50px from the bottom).
   ========================================================================== */

#top .lb-ft .lb-ft-bottom { padding-bottom: 88px; }


/* ============================================================================
   BLOCK 83 -- the recording/materials panel on a past seminar   (2026-09-02)
   録画・資料 band, emitted by lb_seminar_resource_panel() on the
   `lb_article_after_body` hook, between the article body and the contextual
   navigation. Reachable ONLY through `.lb-article-respanel`, which nothing else
   on this install emits, and only on a セミナー・イベント Post that carries a
   supplied resource mapping.

   THREE RULES, NO NEW COMPONENT AND NO NEW VALUE. The band reuses the
   `lb-ds-light lb-ds-cont` surface, `.lb-ds-eyebrow`, `.lb-ds-lead`,
   `.lb-btnrow` and Enfold's `avia-button avia-size-large
   avia-color-theme-color` -- the approved orange primary -- exactly as
   lb_article_closing() does. Nothing here restyles the button, the eyebrow or
   the surface.
   ========================================================================= */

/* 83.1 ------------------------------------------------------- the column
   Block 42.1 centres the reading column on `.lb-article-main`,
   `.lb-article-nav` and `.lb-article-rel` BY NAME. This is a fourth band, so
   without the same treatment its column stays floated at the container's left
   edge -- 106px to the left of the prose immediately above it, measured. Same
   three declarations in the same order; `float: none` first for block 42.1's
   own measured reason (auto margins do nothing to a floated box). */
#top .lb-article-respanel .flex_column.av_one_full {
  float: none;
  max-width: var(--ds-reading);
  margin-left: auto;
  margin-right: auto;
}

/* 83.2 ------------------------------------------------- the heading scale
   The design system's section h2 is 36px, stepping to 30px and 25px at the
   narrow tiers -- inside an article that reads as a page heading, not as a
   heading within the page. The value for a heading at article scale ALREADY
   EXISTS in this file: block 41.4's `.lb-article-prose h2` is 26px / 1.5 / 600.
   Reused, not invented. Its hairline and its `--hub-half` top margin are
   deliberately not copied -- this h2 opens a band, it does not divide prose.

   TWO ids, not one: the rule it overrides,
   `#top #wrap_all .lb-ds .entry-content-wrapper h2`, is (2,3,0) at <=1120 and
   <=600, and a (1,4,0) rule loses to it -- block 41.4 records the same trap. */
#top #wrap_all .lb-ds.lb-dsr.lb-article-respanel .entry-content-wrapper h2 {
  margin: 0 0 var(--ds-s4);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 600;
}

/* 83.3 ------------------------------------------------------- compact rhythm
   The band takes NO extra top padding. `lb-ds-cont` resolves it to 0 and the
   step above is the body band's own 64px bottom padding -- which is exactly
   the step the contextual nav already sat at, so inserting this band does not
   change the article's vertical rhythm anywhere else. Block 42.3's
   `--hub-half` is deliberately NOT copied: 64 + 48 would make a 112px gap and
   reintroduce the double-padding defect block 40.5 documents.

   Only two margins are set, both to existing tokens: the lead sits one 24px
   step above the button, and the button row carries nothing of its own. */
#top .lb-ds.lb-dsr.lb-article-respanel .lb-ds-lead { margin: 0 0 var(--ds-s5); }
#top .lb-ds.lb-dsr.lb-article-respanel .lb-btnrow { margin: 0; }

/* 83.4 ------------------------------------ the heading's responsive tiers
   MEASURED at a 371px iframe viewport before this rule existed: the panel
   heading held 26px and set three lines in a 315px column, while the body H2
   immediately above it had already stepped to 21px. A heading inside the
   article that is LARGER than the article's own headings at the width where
   space is scarcest is the defect block 41.4 was written to avoid.

   So the tiers are block 41.4's, verbatim -- 24 / 22 / 21 at 1120 / 767 / 600,
   the same three breakpoints, the same three values. No new value and no new
   breakpoint is introduced; the panel heading simply tracks the article scale
   at every width instead of only at desktop.

   Each selector carries the same TWO ids as 83.2, so it beats the design
   system's own `#top #wrap_all .lb-ds .entry-content-wrapper h2` (2,3,0) steps
   of 30px and 25px that would otherwise apply here. */
@media only screen and (max-width: 1120px) {
  #top #wrap_all .lb-ds.lb-dsr.lb-article-respanel .entry-content-wrapper h2 { font-size: 24px; }
}

@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds.lb-dsr.lb-article-respanel .entry-content-wrapper h2 { font-size: 22px; }
}

@media only screen and (max-width: 600px) {
  #top #wrap_all .lb-ds.lb-dsr.lb-article-respanel .entry-content-wrapper h2 { font-size: 21px; }
}

/* end block 83 */

/* ==========================================================================
   84  HOMEPAGE 19513 REVISION  ---  2026-09-03

   Scope: page 19513 only, except 84.2 and 84.3, whose selectors carry classes
   (.lb-head-row, .lb-products) that a body-content audit on 2026-09-03 found
   on 19513 and nowhere else on the install. No rule here is a duplicate of an
   existing declaration; 84.3 continues the edit made in place at block 2.
   ========================================================================== */

/* --- 84.1 hero: LightBridge_Photonics.webp UNDER the approved navy gradient
   The ALB now carries attachment 20098 on the hero av_section, so Enfold emits
   an inline `background-image: url(...)` that outranks block 2's
   `#top .lb-hero { background-image: var(--lb-gradient-navy) }`. The approved
   gradient is therefore re-applied as a translucent overlay layer: same
   custom property, same 135deg direction, same three stops, so its graduated
   character is unchanged -- only its opacity is. The image reads through it
   rather than replacing it, and no flat dark scrim is introduced.
   `cover` + `center center` keeps the aspect ratio (1672x941) and lands the
   light-wave sweep across the middle of the band at every width. */
#top.page-id-19513 .lb-sec.lb-hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  position: relative;
}
#top.page-id-19513 .lb-sec.lb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--lb-gradient-navy);
  opacity: 0.72;
  pointer-events: none;
  z-index: 0;
}
/* The section's own children must sit above the overlay. Enfold nests
   .av_section > .container > main.content, so one rule is enough. */
#top.page-id-19513 .lb-sec.lb-hero > .container {
  position: relative;
  z-index: 1;
}

/* --- 84.2 the ~400px void under a `.lb-head-row` heading -------------------
   Cause, measured 2026-09-03 at 1280: block 15.2's header-column rule
   `#top .lb-sec .flex_column:not(...x6):has(> :where(.lb-eyebrow-wrap, ...))`
   is (1,9,0) and forces `flex-direction: column`. Block 4's
   `#top .lb-sec .flex_column.lb-head-row { flex-direction: row }` is only
   (1,3,0) and loses. Once the axis flips, block 4's
   `.lb-head-row > .av-special-heading { flex: 1 1 400px }` resolves its basis
   against the BLOCK axis, so a one-line H2 reserved 400px of HEIGHT: the
   header column measured 480px tall against a ~100px content box on both
   `.lb-solutions` and `.lb-resources`.
   Fix is at the source -- restore the row axis -- not a compensating margin.
   Two ids, per trap 6, because (1,9,0) cannot be beaten with classes.
   Nothing else about the section changes: padding above the H2, the section's
   own padding and the header-to-content distance are all untouched. */
#top #wrap_all .lb-sec .flex_column.lb-head-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--lb-space-5);
  row-gap: var(--lb-hdr-eyebrow);
}
/* Restated at the same two ids so the basis is read on the inline axis. */
#top #wrap_all .lb-sec .flex_column.lb-head-row > .av-special-heading {
  flex: 1 1 400px;
  max-width: 640px;
}
/* Block 15.3 adds `margin-top: calc(--lb-hdr-intro - --lb-hdr-eyebrow)` to the
   element after a heading. In a baseline row that pushes the "see all" link
   8px off the H2 baseline it is supposed to sit on. */
#top #wrap_all .lb-sec .flex_column.lb-head-row > .av-special-heading + * {
  margin-top: 0;
}

/* --- 84.3 software grid steps (four cards since Ansys Speos was added) ----
   Desktop track count is set in place at block 2. Canonical stops only. */
@media only screen and (max-width: 1120px) {
  #top .lb-products .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 600px) {
  #top .lb-products .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); }
}

/* --- 84.4 paragraph measure -----------------------------------------------
   Block 3 caps `.lb-lead p` and `.lb-body p` at `max-width: 52ch`. On this
   page every text container is already narrower than a comfortable Japanese
   measure, so the cap only ever bound tighter than the column and left the
   copy stranded on the left. Measured at 1280 before this block:
     .lb-cap / .lb-products / .lb-workflow lead   480px inside a 760px column
     .lb-photonica / .lb-audience body            375px inside a 548px column
   Removing the cap hands the measure back to the column, which is capped at
   760px by block 4 (`.lb-head`) or ~548px by the split columns -- about 46 and
   33 full-width characters per line respectively, both inside the comfortable
   range. Body copy therefore never reaches full viewport width, and no font
   size is reduced. `.lb-v2` pages keep block 11c's own 76ch override.
   Page-scoped: `.lb-lead` / `.lb-body` are shared with 11 other pages. */
#top.page-id-19513 .lb-sec .lb-lead p,
#top.page-id-19513 .lb-sec .lb-body p {
  max-width: none;
}
/* --- 84.5 a card can never be wider than its grid track --------------------
   `.lb-card` is `display: flex` and `.avia-promocontent` is its flex item, so
   the item inherits `min-width: auto` and takes the min-content width of the
   longest unbreakable run inside it. Japanese sets `line-break: strict` (block
   3), which forbids a break before a small kana or a long-vowel mark, so a long
   katakana compound is one unbreakable unit. Measured at 390px before this
   rule: one product card's content box was 370px inside a 359px track.
   `min-width: 0` is the standard flex-item correction and lets the run wrap
   inside the card instead of widening it. The copy on that card was also
   reworded to shorten the run, so this rule is a floor, not the only fix. */
#top.page-id-19513 .lb-sec .lb-card > .avia-promocontent {
  min-width: 0;
}

/* end block 84 */


/* --- 84.6 hero stat tiles: exactly two columns at every width -----------------
   MEASURED at 390 before any rule here: the hero was 1076px, of which the four
   stat tiles accounted for 386px. `.lb-hero-panel` was
   `repeat(auto-fit, minmax(min(100%, 150px), 1fr))` with a 20px gap inside 20px
   padding, so at 390 its content box is 317.5px -- and two 150px tracks plus the
   gap need 320px. The panel missed a second column by 2.5px and all four tiles
   stacked in one column. Individual tiles measured 59 / 83 / 83 / 59.
   MEASURED at 1440 (2026-09-03, during the proof-point round): the same auto-fit
   rule resolves to THREE tracks of 158.2px inside a 540px content box (3x150 plus
   2x32 of gap = 514 fits; four tracks would need 696), so the four proof points
   render 3 + 1 with an orphan on the second row.
   Auto-fit is therefore the wrong primitive at both ends: it under-fills at 390
   and over-fills at 1440, and the panel is specified as a 2x2 block of four proof
   points. An explicit two-column template gives 2x2 at every width and drops the
   150px floor that caused the 390 collapse. `minmax(0, 1fr)` rather than `1fr` so
   a long unbreakable token (Authorized Channel Partner) wraps inside its track
   instead of widening it.
   Nothing else changes: the gap, the padding, the tile type (`.lb-stat-num` at
   its 28px clamp floor, `.lb-stat-label` at 13px/1.8) and all four values are
   untouched. Supersedes the max-width:600px variant this block used to carry.
   PAGE-SCOPED. `.lb-hero-panel` appears on 19513 alone today, but 19513 is still
   an unapproved draft, so the rule must not become a family default before the
   homepage is signed off. */
#top.page-id-19513 .lb-sec .flex_column.lb-hero-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- 84.7 Photonica panel: the screenshot is the visual focus ----------
   Red1, 2026-09-03. The right-hand panel of the Photonica section read as
   "heading -> padded screenshot -> tags". The PHOTONICA METALENS ENGINE
   eyebrow is removed in the page content (it repeated the section heading
   to its left); this block hands the recovered space to the image.

   MEASURED IN-BROWSER at 1280 before writing, on 19513:
     panel  548 x 440.6   padding 36, gap 20, eyebrow 21.8 tall
     image  474.7 x 278.1  (548 - 36 - 36 - 2 of border)
   That is 148 px of chrome and gap around a 278 px picture. Padding goes
   36 -> 16 (flat, not clamped: the panel is a media card, not a text
   card, so it does not need the reading-column inset) and the image-to
   -tags gap 20 -> 10. The panel therefore gets SHORTER, not taller,
   while the screenshot gets wider: both were explicit requirements.

   `justify-content: center` centres the stack if the card is ever stretched
   by a future `align-items` change on `.lb-split`; today the grid uses
   `align-items: start` so the card hugs its content and there is no slack
   to distribute. Horizontal centring is structural: the image fills the
   content box edge to edge, so the remaining space is the padding itself.
   Tags are centred under the picture rather than left-aligned to the old
   eyebrow. Aspect ratio is untouched: block 4 already sets width 100% /
   height auto, and the rounded corner and hairline border there stay.
   Page-scoped: `.lb-photonica-panel` exists only on 19513, but the scope
   keeps the intent readable and matches 84.4 / 84.6. */
#top.page-id-19513 .lb-sec .flex_column.lb-photonica-panel {
  padding: 16px;
  gap: 10px;
  justify-content: center;
}
#top.page-id-19513 .lb-sec .flex_column.lb-photonica-panel .lb-tags {
  justify-content: center;
}

/* --- 84.10 MPW proof point: a controlled break, not a mid-phrase one ---------
   Red1, 2026-09-03. The fourth hero proof point reads
     MPW / SiN・InPを中心とした / 欧州ファウンドリへのアクセス
   MEASURED in the page font (13px Noto Sans JP, letter-spacing as computed):
     欧州ファウンドリへのアクセス   181.4px
     欧州ファウンドリ               104.0px
     へのアクセス                    77.4px
   MEASURED tile (== label) widths: 148.7 at 390, 235.3 at 600, 304.9 at 768,
   187.7 at 1120, 253.3 at 1440. So the phrase fits everywhere EXCEPT the narrow
   two-column mobile tile, where the default CJK rule (a break opportunity at
   every character) put the break after ア. Note 1120 clears it by only 6.3px,
   and the tile is 100px narrower than the panel, so the failing band is not a
   simple "mobile" range: panel widths under about 463px fail at any viewport.
   The page content now carries an explicit `<br class="lb-br-sm">` at the
   particle boundary 欧州ファウンドリ / へのアクセス. This block decides when that
   break is honoured, and the decision is made from the TILE, not the viewport:
   a container query on `.lb-stat` turns the break on only when the tile cannot
   hold the phrase on one line (184px threshold = 181.4 plus headroom). Wider
   tiles keep the approved two-line label, so no tile grows a third line at 600,
   768, 1120 or 1440 and the 2x2 rows stay level.
   The `max-width: 440px` media query is the fallback for engines without
   container queries. 440 is chosen because the tile is about 154px there, well
   under the phrase width, so the fallback can never fire at a width where two
   clean lines would have fitted.
   No font size, track count, gap, padding or wording changes. */
#top.page-id-19513 .lb-sec .flex_column.lb-hero-panel .lb-stat {
  container-type: inline-size;
}
#top.page-id-19513 .lb-sec .lb-stat-label br.lb-br-sm {
  display: none;
}
@container (max-width: 184px) {
  #top.page-id-19513 .lb-sec .lb-stat-label br.lb-br-sm {
    display: inline;
  }
}
@media only screen and (max-width: 440px) {
  #top.page-id-19513 .lb-sec .lb-stat-label br.lb-br-sm {
    display: inline;
  }
}

/* ============================================================
   BLOCK 85.1 - Photonica hub (19538) hero right panel offset. 2026-09-04, Red1.

   The right column is a bare .lb-ds-heropanel whose only child is the approved
   .lb-ds-chain card. Both hero columns are top-aligned by block 17.2, so the
   card's top border landed at 253px, level with the orange eyebrow, and read as
   sitting above the H1 rather than beside it.

   Measured on the rendered page at 1440, 1280 and 1121 (the geometry is
   identical at all three): eyebrow top 253, H1 box top 300, H1 first line box
   299-361 with font-size 43.2px in a 60.48px line box, so the H1's ink top is
   at about 308. translateY(60px) puts the card's top border at 313, level with
   the cap height of the first H1 line. Confirmed against a screenshot at 60px
   after checking 56px; 47px (the H1 BOX top) reads a few px high because of the
   line box's half-leading.

   transform, not margin, so the hero box is unchanged and the section does not
   grow: the card's bottom moves 553 -> 613 against a hero that ends at 758, and
   579 -> 639 against 748 at 1121. Nothing else in the hero is selected.

   The rule lives inside min-width: 1121px, so at 1120 and below - where the two
   columns stack - it simply does not apply and the stacked layout keeps its
   normal spacing with no artificial gap above the card. No reset is needed.
   ============================================================ */
@media only screen and (min-width: 1121px) {
  #top.page-id-19538 .lb-ds .lb-ds-heropanel .lb-ds-chain {
    transform: translateY(60px);
  }
}

/* ==========================================================================
   HOMEPAGE 19513 - homepage revision round 2026-09-04
   --------------------------------------------------------------------------
   Scope: page-id-19513 only. Nothing here changes the approved layout,
   typography, cards, CTA styling, section order, colours, column
   proportions or responsive behaviour. Each rule corrects one measured
   defect and is scoped so no other page can be reached.
   ========================================================================== */

/* A1 - the 2026 hero asset (1672x941) carries its own near-black navy field
   across its left third, so the approved navy scrim no longer has to darken a
   bright photograph. Measured: at 0.72 the wafer, lens stack and photonic IC
   were almost invisible. The gradient itself is UNCHANGED - only its opacity.
   White copy over the left field still clears AA by a wide margin. */
#top.page-id-19513 .lb-sec.lb-hero::before { opacity: 0.56; }

/* A1 - crop control. background-size stays cover, never 100% 100%, so the
   1.777 aspect ratio is never altered and the image is never tiled or
   stretched. At >=1200px cover scales by width: nothing is cropped
   horizontally and center is correct. Below that it scales by height and
   crops the sides instead, so the focal point is biased right - the
   composition subject sits right of centre and the copy keeps the clean navy
   field on the left. Hero height is not increased at any width. */
@media only screen and (max-width: 1199px) {
  #top.page-id-19513 .lb-sec.lb-hero { background-position: 70% center; }
}
@media only screen and (max-width: 479px) {
  #top.page-id-19513 .lb-sec.lb-hero { background-position: 64% center; }
}

/* A3 - hero rhythm. eyebrow / H1 / lead / CTA were separated by a uniform
   28px, which read as dead space under the heading rather than one group. */
#top.page-id-19513 .lb-hero-copy { gap: 22px; }

/* A4 - section intros were capped at 760px inside 1152px of container, so a
   three-line lead sat beside ~390px of empty ground. 960px keeps a
   comfortable Japanese measure and removes most of the void. Homepage only -
   the 760px cap stays everywhere else. */
#top.page-id-19513 .lb-sec .flex_column.lb-head { max-width: 960px; }

/* B8 - the Photonica visual was top-aligned against a much taller copy
   column, so it sat level with the eyebrow. Offset downward only. The copy
   column remains the tallest child, so the section height is unchanged and no
   bottom space is added. Column proportions are untouched. Same vocabulary as
   the existing .lb-stmt-media offset. */
/* Gated at 900px, not 768px: the .lb-split grid is minmax(min(100%,420px),1fr),
   so two columns only exist from ~896px up. Below that the section is stacked
   and the offset would read as an arbitrary gap between two stacked blocks. */
@media only screen and (min-width: 900px) {
  #top.page-id-19513 .lb-sec .flex_column.lb-photonica-panel {
    margin-top: clamp(24px, 4.4vw, 84px);
  }
}

/* ==========================================================================
   CML COMPILER 19531 - application-card media box, 2026-09-04
   --------------------------------------------------------------------------
   Four cards, four assets, two ratios: the three supplied 2026-09-04 assets
   are 1200x750 (1.60, i.e. exactly 16:10) and the Silicon Photonics figure
   (20136) is 1020x768 (1.33). Left on the page-family no-crop treatment the
   media areas measured 319px against 385px and the Silicon Photonics row ran
   65px taller than its neighbours.

   The card family already owns a fixed 16:10 media box with object-fit:
   contain (.lb-v2-appimg). This applies that same treatment to 19531 only:
   all four media areas become one height, the three 16:10 assets fill the box
   exactly, and 20136 is CONTAINED - letterboxed on the white ground, never
   cropped and never stretched, so no axis or label is lost. The white padded
   box and the 10px/4px radii already on this page are kept. Scoped to 19531:
   FDTD, MODE, INTERCONNECT and RCWA keep their own treatment untouched. */
#top.page-id-19531 .lb-v2 .lb-v2-appcard .avia-image-container.lb-v2-fig {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 20px;
  border-radius: 10px;
  background: #FFFFFF;
}

#top.page-id-19531 .lb-v2 .lb-v2-appcard .lb-v2-fig .avia-image-container-inner,
#top.page-id-19531 .lb-v2 .lb-v2-appcard .lb-v2-fig .avia-image-overlay-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#top.page-id-19531 .lb-v2 .lb-v2-appcard .lb-v2-fig img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-bottom: 0;
  border-radius: 4px;
}

/* ==========================================================================
   BURGER MENU - group headings are labels, not links. 2026-09-04
   --------------------------------------------------------------------------
   The two ソリューション group headings (フォトニクス / 光学システム) carry
   href="#" because they are labels with no page of their own. In the desktop
   megamenu Enfold already renders them as <span class="mega_menu_title"> with
   no anchor at all. In the burger menu it renders them as real anchors, so on
   mobile they measured as two dead links that do nothing when tapped.

   This makes them inert, matching the desktop treatment exactly. No menu item
   is removed and no destination is invented: they were never meant to lead
   anywhere, and their children remain listed and tappable beneath them. Keyed
   on href="#" so a heading that later receives a real URL becomes a working
   link with no change here. */
#top #av-burger-menu-ul a[href="#"],
#top .av-burger-overlay a[href="#"] {
  pointer-events: none;
  cursor: default;
}

/* ============================================================================
   BLOCK 86 -- BURGER MENU: the LightBridge treatment. 2026-09-05.

   CONTEXT, STATED PLAINLY. Before this block the child theme carried NO burger
   styling at all beyond block 85's `pointer-events:none` on the two href="#"
   group labels. Everything the burger overlay looked like came from Enfold's
   own generated dynamic stylesheet - its "Advanced Styling" block - which is
   Enfold's dark default: a 350px right-hand flyout on #111111, links in
   'oswald' 700, UPPERCASE, letter-spacing 2px, dividers #383838, hover on a
   #383838 block. So this block does not restore a previous LightBridge design;
   there was never one in the child theme. It implements the treatment Red1
   specified on 2026-09-05 (navy ground, light links, #EC7628 headings and
   hover, the LightBridge hairline, Inter + Noto Sans JP, full-viewport panel).

   Two of those Enfold defaults were actively wrong for this site rather than
   merely off-brand: 'oswald' carries no Japanese glyphs, so every Japanese
   label silently fell through to a different face than the rest of the site,
   and `text-transform:uppercase` with `letter-spacing:2px` does nothing useful
   to Japanese while forcing awkward mid-word wraps on the long Latin product
   names (measured: "LUMERICAL マルチフィジックス" wrapped inside the word).

   WHY THESE SELECTORS LOOK LIKE THIS. Enfold's asset manager prints its merged
   stylesheet late in wp_head, AFTER this file - the long-standing gotcha
   recorded in enfold-pilot-phase-P-status.md item 7. So this block cannot win
   on source order and must win on specificity. Enfold's generated burger
   declarations are already heavy, the worst being

     .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll
         #av-burger-menu-ul li:hover a          -> (3 ids, 3 classes, 3 types)

   so each rule below takes Enfold's own chain and prefixes `html` +
   `.html_av-overlay-side`, which adds one type and one class and therefore
   always outranks it. No `!important` is used anywhere in this block, and no
   Enfold option and no parent-theme file is changed.

   WHAT IS DELIBERATELY LEFT TO ENFOLD. The per-depth left padding that creates
   the submenu indentation (50px / 70px / 90px, measured) and the
   `.avia-bullet` dashes are Enfold's side-classic treatment and are the
   approved hierarchy, so only their colour is touched, never their geometry.
   ========================================================================= */

/* 86.1 -------------------------------------- the panel: full viewport, navy
   Enfold ships the flyout at `width:350px` with `transform:translateX(350px)`
   as the closed state. Widening it to 100% means the closed state must become
   `translateX(100%)`, or the panel would sit 350px off a full-width box and
   stay partly on screen. The open state is restated here for the same reason:
   Enfold's generated stylesheet re-declares the CLOSED transform a second time
   after its own open rule, so the pair has to be re-established together. */
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll {
  width: 100%;
  max-width: 100%;
  right: 0;
  left: auto;
  background-color: var(--lb-brand-navy);
  overscroll-behavior: contain;
}

/* The open and closed transforms are written as a MUTUALLY EXCLUSIVE pair on
   `:not(.av-burger-overlay-active-delayed)` / `.av-burger-overlay-active-delayed`
   rather than as a base value plus an override. Both spellings are equally
   specific here, but the override form was measured failing: with five rules
   matching this element across Enfold's merged sheet and this file, the panel
   stayed at `translateX(100%)` while `.av-burger-overlay-active-delayed` was
   present on <html> and the higher-specificity open rule matched (verified
   with Element.matches on the live node at 390px). Written as an exclusive
   pair there is no cascade contest to lose: exactly one of the two rules can
   ever apply, so the panel's position is decided by the class on <html> and
   nothing else. */
html.html_av-overlay-side:not(.av-burger-overlay-active-delayed) #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll {
  transform: translateX(100%);
}

html.html_av-overlay-side.av-burger-overlay-active-delayed #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll {
  transform: translateX(0);
}

/* The tint behind the panel. With a full-width opaque panel it is only visible
   during the 0.5s slide, but it is made opaque navy so no page content shows
   through at any point of the animation - Enfold leaves it at opacity 0.3. */
html.html_av-overlay-side #top #wrap_all div.av-burger-overlay-bg {
  background-color: var(--lb-brand-navy);
  opacity: 1;
}

/* 86.2 ------------------------------------------------- the list container
   Full-bleed rows, which is what a full-viewport panel wants: the divider runs
   the width of the panel and the label sits on Enfold's own 50px indent. A
   620px centred cap was tried first and removed - Enfold wraps the list in
   `.av-burger-overlay-inner`, which is `display:table`, and a max-width on a
   child of that box is not honoured (measured: used width stayed 1249px
   against `max-width:min(100%,620px)`). Not worth forcing for an effect the
   spec does not ask for.

   The bottom padding is load-bearing: 58 items are ~2980px tall against a
   665px panel, so the list always scrolls and the last row would otherwise
   finish flush against the viewport edge. */
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul {
  width: 100%;
  padding-bottom: var(--lb-space-7);
  text-align: left;
}

/* 86.2b ----------------------------------- the logo is NOT raised. Why not.
   Enfold nests `.av-burger-overlay` INSIDE the header, in
   `.avia-menu.av-main-nav-wrap`, at z-index 100, so at full width the panel
   paints over `.logo` (z-index 1) and the top band carries no wordmark.
   Raising the logo above the panel was tried and REVERTED: the official logo
   is built for the white header - "LIGHT" is dark navy, "BRIDGE" orange - so
   on the navy panel the first half of the wordmark disappeared and the mark
   read as "BRIDGE" (confirmed on the render at 1280).

   Left as Enfold has it: the panel covers the header band, and the language
   flags, the search icon and the close control keep their own higher stacking
   and stay visible and usable on the navy. That is the ordinary full-screen
   menu behaviour and needs no new asset.

   If Red1 wants the wordmark in the overlay, the correct fix is a light-on-
   dark logo variant swapped in for the open state - the footer already sits on
   a dark ground and would share it - not a z-index change. Flagged, not done:
   it needs a brand asset decision, not a CSS one. */

/* 86.3 --------------------------------------------------- links: base state
   Only type, colour and the divider are set. Padding is left to Enfold except
   for the vertical rhythm, which is restated so every row clears the 44px
   touch target at every depth. */
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
  color: var(--lb-text-primary-dark);
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: var(--lb-weight-medium);
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: var(--lb-touch-target);
  border-bottom: 1px solid var(--lb-border-navy);
  transition: color var(--lb-duration-fast) var(--lb-ease);
}

/* The seven top-level items carry the weight; this is the hierarchy step. */
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > a {
  font-size: 16px;
  font-weight: var(--lb-weight-semibold);
}

/* Third level is the quiet one. */
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li li li a {
  color: var(--lb-text-secondary-dark);
  font-size: 14px;
}

/* 86.4 --------------------------------------------- group labels are orange
   The two ソリューション grouping labels (フォトニクス / 光学システム) have no page
   of their own and are already inert from block 85. They are the "section
   heading" role in Red1's spec, so they take the accent and lose the divider -
   a heading is not a row. Keyed on href="#" exactly as block 85 is, so a label
   that later gains a real URL becomes an ordinary link with no change here. */
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a[href="#"] {
  color: var(--lb-accent-orange);
  font-weight: var(--lb-weight-semibold);
  letter-spacing: var(--lb-tracking-mono);
  border-bottom-color: transparent;
}

/* 86.5 ------------------------------------------------ hover / active state
   Enfold paints a #383838 block behind the row on hover. Replaced by the
   site's accent on the text, with no block, matching how every other
   LightBridge navigation surface behaves. The `li:hover a` half of Enfold's
   pair is the (3,3,3) rule named in the header, hence the extra class here. */
html.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover > a,
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li > a:hover,
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li > a:focus,
html.html_av-overlay-side #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li.current-menu-item > a {
  color: var(--lb-accent-orange);
  background-color: transparent;
}

/* A grouping label must not light up on hover - it does not go anywhere. */
html.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover > a[href="#"] {
  color: var(--lb-accent-orange);
}

/* 86.6 ------------------------------------------------------- the bullets
   Enfold's side-classic dashes in front of nested rows. Kept (they carry the
   depth read at a glance) but taken off Enfold's #383838 onto the hairline. */
html.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay li li .avia-bullet,
html.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay li li li .avia-bullet {
  background-color: var(--lb-border-navy);
}

/* ============================================================================
   BLOCK 87 -- the two-column Input/Output table: column proportions.
   2026-09-05. Third and final revision of this block.

   r1 fixed only <=767px and left the desktop defect untouched.
   r2 fixed the desktop defect but imposed the English-driven split on Japanese
      too, taking the Japanese desktop tables from their content-driven 33/67
      and 44/56 to a uniform 47/53. Red1 called that a Japanese regression, and
      it was: Japanese was made to adopt a column width that only English needs.
   r3 (this one) splits the two concerns by the axis that actually differs -
      the width band - and by document language:

     >=768px   ENGLISH ONLY. Japanese keeps auto layout, nowrap labels and its
               original content-driven proportions, byte for byte.
     <=767px   BOTH languages restack. See "why both" below - this is not a
               convenience, Japanese is materially broken there without it.

   ------------------------------------------------- the defect, >=768, English
   The label carries `white-space: nowrap` (block 21.7). A nowrap cell's
   min-content width is its whole single-line width, and with `table-layout:
   auto` that becomes a floor the browser satisfies before the value column gets
   anything. Japanese labels are short so the floor is low. English labels are
   long, uppercase and tracked at 1.5px, so the floor swallows the table.
   Measured on the English MTF page before this block:

     1440   table 511px   th 372px (73%)   td 139px (27%)   13 lines @ 9 chars
     1024   table 724px   th 372px (51%)   td 352px (49%)    4 lines @ 30 chars
      768   table 511px   th 372px (73%)   td 139px (27%)   13 lines @ 9 chars

   The label held only 324px of text inside a 372px column, so the excess was
   not even used by the label - it was denied to the sentence. Structure was
   never the problem: all 93 JA/EN pairs are structurally identical on 50
   signals. Row and column counts are necessary but not sufficient; the
   proportions have to be right too.

   ---------------------------------------------------------- the fix, >=768
   For English only: let the label wrap, and give the table a deterministic
   `table-layout: fixed` split at `th { width: 42% }`.

   WHY 42%, measured on the two extremes of the family at 1440:

     share  MTF label/value        EME (longest EN label, 44 chars)
     34%    3 lines / 30 chars     5-line label
     38%    3 lines / 30 chars     5-line label
     42%    3 lines / 24-25 chars  4-line label, 26 chars
     47%    3 lines / 24-25 chars  4-line label, 22 chars   (r2's value)

   42% is the point where the worst-case English label settles at four lines
   while the value column still reads at 24-30 characters. It also sits inside
   the range Japanese occupies naturally (33% on Inputs, 44% on Outputs), so the
   two languages look like the same component rather than two different ones -
   which was the original complaint. 47% was measured and dropped: it costs the
   value column ~20px on every page and buys nothing English needs.

   JAPANESE IS NOT TOUCHED AT >=768. Every rule in the 87.1 block is scoped
   `html:lang(en)`, which matches `lang="en-US"` by language-range matching and
   never matches the Japanese pages. Verified on the render: Japanese reports
   `table-layout: auto`, `white-space: nowrap`, and 164/325 (33/66) and 213/276
   (44/56) at 1440 - identical to the values measured before any of this work.

   ------------------------------------------------------- why BOTH at <=767
   Japanese is not merely tight below 768, it is broken, and it was broken
   before any of this work. The nowrap label takes the width it needs and the
   value column gets the remainder, which at 390 is almost nothing. Measured on
   the Japanese MTF page at 390 with no rule applied:

     Inputs    th 141px (56%)   td 113px (45%)    8 lines @ 5 characters
     Outputs   th 187px (74%)   td  66px (26%)   18 lines @ 2 characters

   Two characters per line is not a layout, so restacking is a correction for
   Japanese, not a regression: after it, Japanese labels sit on one line and the
   sentence reads at 12 characters per line across the full 253px card. English
   goes from a 73-102px label column wrapping into 7 one-word lines to the same
   full-width stack at 24-26 characters. Both languages improve, so 87.2 is
   deliberately NOT language-scoped.

   The restack uses the design system's own idiom - `display: block` on the
   cells, exactly as `.lb-ds-cmp` (block 21) does for the comparison table.
   `border-top: 0` is load-bearing: `border-collapse: collapse` stops applying
   once the cells are blocks, so each cell's own top border reappears and draws
   a second, lighter rule between label and value. Only the `td`'s bottom border
   is kept - that is the row divider.

   ----------------------------------------------------------------- the scope
   `.lb-ds-table` that is two-column AND NOT `.lb-ds-srtbl`.

   `:not(:has(tr > *:nth-child(3)))` excludes the four-column comparison matrix,
   which sits in `.lb-ds-tscroll` with its own 860px floor and scrolls
   correctly; measured after this block it is untouched at `table-layout: auto`,
   1196 / 860 / 860 / 318px.

   `:not(.lb-ds-srtbl)` excludes the Ansys Optics システム要件 specification tables
   (10452 / 20277). They are two-column and English, but were measured and are
   ALREADY CORRECT - 311/885 (26%/74%), 29-38 characters per line at 1440, and
   already stacked at 390 - because they sit in a full-width container rather
   than a half-width card. Forcing the split on them made them 50/50 and halved
   a value column that was fine.

   Colours, borders, padding, type and the ALB are untouched; the only
   declarations here are layout ones.
   ========================================================================= */

/* 87.1 ---------------------------- >=768: English only, deterministic 42/58 */
@media only screen and (min-width: 768px) {
  html:lang(en) #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) {
    table-layout: fixed;
    width: 100%;
  }

  html:lang(en) #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) tbody th {
    white-space: normal;
    width: 42%;
  }

  html:lang(en) #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) tbody th,
  html:lang(en) #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) td {
    overflow-wrap: anywhere;
  }
}

/* 87.2 ------------------------- <=767: both languages restack, label over value */
@media only screen and (max-width: 767px) {
  #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) {
    table-layout: auto;
    width: 100%;
  }

  #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) tbody th,
  #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) tbody td {
    display: block;
    width: auto;
    border-top: 0;
    overflow-wrap: anywhere;
  }

  #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) tbody th {
    white-space: normal;
    padding-bottom: 0;
    border-bottom: 0;
  }

  #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(:has(tr > *:nth-child(3))) tbody td {
    padding-top: 2px;
  }
}


/* =========================================================================
   BLOCK 88 -- ENFOLD QUICK CSS CONSOLIDATION                     (2026-09-06)

   The Enfold "Quick CSS" field (theme options -> General Styling) carried
   441 lines / 11,139 bytes of styling that predates the redesign. Every
   block was audited against the published JA and EN DOM (222 rendered URLs,
   crawled 2026-09-06), against post_content / _aviaLayoutBuilderCleanData of
   every published post, and against this stylesheet. Result:

     KEPT (moved here, verbatim in effect) ........ the three rules below
     REMOVED as UNUSED (no rendered occurrence) ... .lb-max-720,
         .lb-iconlist-horizontal, .no-underline, .lb-iconbox-nudge,
         .mpw-flow-*, .app-areas, .lb-footer*, .lb-iconlist-min,
         all masonry rules (excerpt clamp, date hiding, animation
         disabling, sort/filter styling incl. #ee833d) -- no page renders
         .av-masonry-*; the only carriers were the trashed page 1328 and
         the ZZ TEST / draft pages.
     REMOVED as SUPERSEDED ........................ .toggle_wrap .toggle_content
         {color:#072b50; background:#fff} -- every rendered toggle (20 product
         pages, JA+EN) sits inside .lb-sec, where blocks 11/5.x above set
         colour and background with higher specificity.

   The field is now empty in all three option sets (default, _en, _ja), so a
   regeneration of the dynamic stylesheet in either language produces the
   same result and the styling below is version-controlled.
   ========================================================================= */

/* 88.1 -- Enfold title bar (header_title_bar = breadcrumbs_only). Rendered
   only on the non-redesigned templates: /products/startup-program/ (JA+EN),
   the five legacy application posts, search results, 404 and the category
   archives. Breadcrumbs are hidden on phones and the "You are here" label
   is never shown. */
@media only screen and (max-width: 767px) {
  .title_container .breadcrumb {
    display: none;
  }
}

span.trail-before {
  display: none !important;
}

/* 88.2 -- .lb-iconlist-spacing: custom class on the Enfold icon lists of the
   five legacy application posts (13361, 13675, 18679, 18728, 18745; JA only).
   10px between items, none after the last. In Quick CSS the rule was compiled
   AFTER Enfold's `.avia-icon-list li{margin:0}` and won on order; this file is
   enqueued BEFORE the merged Enfold stylesheet, so the selector carries #top
   to win on specificity instead (measured: without it the 10px was lost). */
#top .lb-iconlist-spacing li {
  margin-bottom: 10px;
}

#top .lb-iconlist-spacing li:last-child {
  margin-bottom: 0;
}


/* =========================================================================
   BLOCK 89 -- CUSTOMIZER "ADDITIONAL CSS" CONSOLIDATION          (2026-09-06)

   The WordPress Customizer field (custom_css post 3009, printed inline as
   #wp-custom-css on every page) carried 5,109 bytes of pre-redesign rules.
   Each rule was tested by disabling the inline style on the live JA/EN DOM
   and diffing computed styles at 1440 / 768 / 390:

     KEPT (moved here) ............ 89.1 mobile Enfold data tables
                                    89.2 category-archive template chrome
     REMOVED, no effect anywhere .. every `info` CPT rule (post-type-archive-
         info, tax-info-cat, type-info, single-info -- the CPT has 0 posts and
         /info/ redirects), the `#top.page-id-6687` block (page no longer
         exists), the `.footer-info` news block (no carrier), the commented
         `.archive .avia-section .container .av-content-full.units` block,
         and `body.archive . .container_wrap ...` (invalid selector).

   The Customizer field is now empty.
   ========================================================================= */

/* 89.1 -- Enfold av_table at <=767. Enfold's responsive table stacks each
   cell, hides the first-row <th> and prints the column label through
   td::before. The approved product-page tables (18 pages, JA+EN, .lb-spec)
   keep the header row visible and suppress the generated labels instead
   (measured: without this, the 8-row FDTD table grows by 259 px at 390).
   !important is required -- Enfold's own responsive rules carry it. */
@media only screen and (max-width: 767px) {
  .avia-data-table td:before {
    display: none !important;
    content: "" !important;
  }

  .responsive .avia_responsive_table .avia-data-table .avia-button-row,
  .responsive .avia_responsive_table .avia-data-table tr:first-child th {
    display: block !important;
  }
}

/* 89.2 -- Category archives (archive.php: /seminars-events/, /resources/*,
   /en/ブログ/). The archive hero pulls an ALB section whose overlay and
   heading are restyled here; the post list is allowed the full column.
   No design-system block covers these templates. */
.archive .av-section-color-overlay {
  background: #00467f;
  opacity: 0.5;
}

.archive .avia-section.av-minimum-height .container {
  display: table;
  table-layout: fixed;
}

#top.archive #wrap_all .av-section-color-overlay-wrap .av-special-heading .av-special-heading-tag {
  font-size: 40px;
  color: #FFF;
}

/* #wrap_all added: the Customizer rule used to win a specificity tie with
   Enfold's mobile `.responsive #top .fullsize ... > *{max-width:100%}` on
   source order; this file loads earlier, so the tie is broken here. */
#top.archive #wrap_all .fullsize .template-blog .post .entry-content-wrapper > * {
  max-width: none;
}

@media only screen and (max-width: 767px) {
  #top.archive #wrap_all .av-special-heading .av-special-heading-tag {
    font-size: 0.8em;
  }
}

/* ============================================================================
   BLOCK 90 -- table label cells that cannot wrap. 2026-09-06.

   Sibling of BLOCK 87, and the general case of the same defect that BLOCKS 33,
   66.3 and 87 each fixed for one carrier. Reported by Red1 as an overlap on the
   English Lumerical FDTD page, where the OUTPUT row label "Electromagnetic
   field distribution" paints over the sentence beside it.

   ------------------------------------------------------------- THE MECHANISM
   One cause, three carriers. Two rules in this file give a table's LABEL cell
   `white-space: nowrap`:

     section 8     `.lb-spec td:first-child`      (product pages, av_table)
     section 21.7  `.lb-ds-table tbody th`        (解析技術 family, incl. .lb-ds-cmp)

   A nowrap cell cannot wrap. Where the column it sits in is narrower than the
   label's single-line width, the text has nowhere to go and `overflow` is
   visible, so the ink simply leaves its box. What that looks like depends on
   the presentation:

     side by side (desktop)  it paints straight OVER the neighbouring cell
     restacked   (mobile)    it runs past the container and is CLIPPED

   It is not a spacing, height, alignment or absolute-positioning problem. The
   cells are laid out correctly; only the ink escapes. Under Enfold's own
   `table-layout: fixed` on `.avia-table` the label ALSO cannot widen its
   column -- a two-column table is exactly 50/50 -- so there is no self-repair.

   WHY IT IS ALMOST ALWAYS ENGLISH. Japanese labels run 4-12 characters
   (「ジオメトリ」「スペクトル」「物理光学伝搬（本手法）」) and never reach the
   column boundary. English labels run 19-41 characters ("Electromagnetic field
   distribution", "PHYSICAL OPTICS PROPAGATION (THIS METHOD)") and do.

   ------------------------------------------------------------------ MEASURED
   /en/products/lumerical/fdtd/, OUTPUT table, worst row, before this block:

     1440   column 235px (content 199px)   label ink 241px   overlap    6px
     1024   column 151px (content 115px)   label ink 241px   overlap   90px
      768   side by side in a full-width column               no overlap
      390   Enfold restacks the row                           no overlap

   Worst case found site-wide: /en/products/speos/ at 1024, 131px of overlap.
   /en/products/ (5-column hub matrix) at 1024, 76px. /en/technology/pop/ at
   390, the restacked row header clipped 85px past the container.

   Site-wide sweep, 138 published JA+EN pages x 4 widths (552 loads):
   41 overlaps on 12 pages, 38 mobile clips on 8 pages. All are this mechanism.

   ---------------------------------------------------------------- 90.1 SCOPE
   `.lb-spec` label cell, BOTH LANGUAGES, >=768.

   Japanese is included here -- unlike 87.1 -- because Japanese genuinely
   overlaps in this family: 「INTERCONNECT用CML」 on the CML Compiler page and
   「メタアトムライブラリ」 on the Metalens page each overrun the 50% column by 8px
   at 1024. `white-space: normal` only PERMITS wrapping; a label that fits stays
   on one line. Verified by A/B on all 9 Japanese pages in this family at 4
   widths: 34 of 36 page/width combinations have byte-identical label geometry,
   and the 2 that change are exactly the 2 that were overlapping. That is a
   correction, not a redesign -- the same argument 87.2 made for its restack.

   `overflow-wrap: anywhere` on both cells is the backstop for a single token
   wider than its column ("INTERCONNECT", "OpticStudio"), which
   `white-space: normal` alone cannot break.

   No width is declared. 87.1 needed `width: 42%` because that family runs
   `table-layout: auto`, where the label column has no fixed share at all.
   `.lb-spec` is already deterministic at 50/50 through Enfold's `fixed`, and
   50/50 measures well: at 1440 the value column keeps 29-33 characters per
   line while the worst-case label settles at two lines. Declaring a width would
   be churn with no measured gain.

   ---------------------------------------------------------------- 90.2 SCOPE
   `.lb-ds-table` row header, ENGLISH ONLY. Japanese was clean in this family at
   every width, so it is not touched at all.

   >=768   only 3-or-more-column tables, and not `.lb-ds-cmp`. This is the hub
           comparison matrix (/products/, 5 columns, `table-layout: fixed`),
           which 87 excluded by its two-column guard and which nothing else
           covers. `.lb-ds-cmp` is excluded because it runs `table-layout: auto`
           at desktop, where letting the header wrap would change the column
           proportions -- and it was measured clean at 768/1024/1440, so there
           is nothing to fix there.

   <=767   all of them. Below 768 the cells are blocks, the header is on its own
           line, and wrapping cannot alter any column proportion -- it only
           stops the clip. This is what fixes the 8 English 解析技術 pages.

   `:not(.lb-ds-srtbl)` mirrors 87's exclusion of the Ansys Optics システム要件
   tables, which were measured clean at every width in both languages.

   ------------------------------------------------------------------ NOT DONE
   On 2 Japanese pages a closing bracket 「）」 hangs 7px past the last cell and
   is clipped by the table's `overflow: hidden`. That is CJK hanging
   punctuation, a different mechanism, and every available remedy either changes
   the approved Japanese padding or turns the table wrapper's `overflow: auto`
   into a visible scrollbar. Recorded, deliberately not changed.

   Colours, borders, padding, type, dimensions and the ALB are untouched; every
   declaration below is a wrapping declaration.
   ========================================================================= */

/* 90.1 ------------------------ .lb-spec label cell: let it wrap. Both langs. */
@media only screen and (min-width: 768px) {
  #top #wrap_all .lb-sec table.avia-table.lb-spec td:first-child,
  #top #wrap_all .lb-v2 table.avia-table.lb-spec td:first-child,
  #top #wrap_all .lb-ds table.avia-table.lb-spec td:first-child {
    white-space: normal;
  }

  #top #wrap_all .lb-sec table.avia-table.lb-spec td,
  #top #wrap_all .lb-v2 table.avia-table.lb-spec td,
  #top #wrap_all .lb-ds table.avia-table.lb-spec td {
    overflow-wrap: anywhere;
  }

/* 90.2a ---------------- .lb-ds-table row header, English, wide matrices only */
  html:lang(en) #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl):not(.lb-ds-cmp):has(tr > *:nth-child(3)) tbody th {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 90.2b ------------- .lb-ds-table row header, English, restacked below 768 */
@media only screen and (max-width: 767px) {
  html:lang(en) #top #wrap_all .lb-ds .lb-ds-table:not(.lb-ds-srtbl) tbody th {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* =========================================================================
   BLOCK 91 -- English IN/OUT panel: label-to-value gutter. 2026-09-06.

   Residual 1 from the BLOCK 90 audit. `.lb-v2-io .lb-spec td` is `padding: 13px 0`
   (rule at 5.8), so inside the dark INPUT/OUTPUT panels the only separation
   between the label cell and the value cell is whatever the text leaves. The
   table is `table-layout: fixed` at exactly 50/50, so the two cells touch when
   an English label fills its half: measured 1.1px on /en/products/lumerical/fdtd/
   INPUT "Boundary conditions" at 1024, 1.1px on /en/products/lumerical/fdtd/rcwa/
   and /en/products/lumerical/fdtd/stack/, 2px on /en/products/photonica/metalens/.
   Japanese labels are 4-12 characters and never approach the boundary (minimum
   measured gap 60.7px at 1024, 105.9px at 1440), so Japanese has nothing to fix.

   THE FIX. 16px of right padding on the LABEL cell, English pages only
   (`html:lang(en)` matches lang="en-US" and can never match a Japanese page).
   Padding on a `fixed`-layout cell does not move the column boundary -- the
   two columns stay 50/50 on every page at every width -- it only reserves a
   gutter inside the label's half, so a label that used to touch the value now
   wraps one word earlier and leaves at least 16px of clear space.

   Measured A/B on all 8 English pages that carry `.lb-v2-io` at 1440 / 1024 /
   768 / 390 (32 loads): minimum label-to-value gap 1.1px -> 16.1px; column
   widths identical everywhere; table height identical in 31 of 32 loads (the
   label wraps into a row whose value was already taller); one load,
   /en/products/photonica/metalens/ at 1024, grows both panels by one 27px line
   in step, so the paired panels stay level. No horizontal overflow anywhere.
   Japanese: `html:lang(en)` cannot match, and the A/B on the Japanese pages is
   byte-identical at all four widths.

   Nothing else is touched: no width, colour, border, type or ALB change.
   ========================================================================= */
html:lang(en) #top #wrap_all .lb-v2 .lb-v2-io table.avia-table.lb-spec td:first-child {
	padding-right: 16px;
}
/* end block 91 */


/* =========================================================================
   BLOCK 92 -- English contact thank-you (20283): the three step cards in the
   narrow tablet band. 2026-09-06.

   Residual 3 from the BLOCK 90 audit. Block 73.4 holds the JA page 10177's
   `.lb-ty-steps` at three tracks for the whole >=768 band ("3-up or 1-up,
   never 2+1"), and lb-wpml-page-css-parity.php gives the English translation
   20283 the same `page-id-10177` body class, so English inherits that hold.
   Japanese step titles are 4-8 characters and fit a 116px content box with
   room to spare (measured 26-38px clear at 768). The English title
   "Confirmation" is ONE word 131px wide at 20px, and the card content box in
   a 3-up row is 116px at 768 and 125px at 800: the word overruns its box by
   15.4px / 5.8px into the card's own padding. It clears at 840 (137px box,
   6px spare) and at every width above.

   THE FIX. English only, 768-839px only: the row stacks 1-up, which is the
   layout the page already uses below 768. The "never 2+1" rule is honoured,
   no title is hyphenated or broken mid-word, and the type scale is untouched.
   At 840 and above the approved 3-up row is unchanged; below 768 nothing
   changes either. `html:lang(en)` cannot match the Japanese page.

   Measured A/B: EN 768 -> 1 column, overrun 15.4px -> none; EN 800 -> 1
   column, 5.8px -> none; EN 840 unchanged (3 columns); JA 768/800/840
   unchanged (3 columns). No horizontal overflow.
   ========================================================================= */
@media only screen and (min-width: 768px) and (max-width: 839px) {
	html:lang(en) #top.page-id-10177 #wrap_all .lb-ds.lb-dsr .lb-ds-cards.lb-ty-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* end block 92 */

/* =========================================================================
   BLOCK 93 -- .lb-sec phone container: let the 92vw wrapper centre. 2026-09-08.

   MEASURED on the cached mobile home page (JA and EN, 375px device): every
   .lb-sec .entry-content-wrapper sat at x 28-387, i.e. 12px past the right
   edge of the viewport, clipped by #wrap_all { overflow: hidden } - the
   "All solutions ->" arrows were cut. 172 elements past the edge, page
   scrollWidth unchanged, so no earlier overflow check could see it.

   CAUSE. Block 2 makes `#top .lb-sec > .container` full width so that the
   design's fluid wrapper (--lb-container = min(90vw, 1480px); 92vw in the
   767 block of section 12) can centre with margin: 0 auto. Enfold's own phone
   rule `.responsive #top #wrap_all .container { width: 85%; max-width: 85% }`
   carries TWO ids and wins below 768px, so the container stays 85% (318px)
   while the wrapper is 92vw (345px): over-constrained, margin-right resolves
   negative, the box pins left at the container's edge and overflows right.

   FIX. Same declaration as block 2, one class more specific than Enfold's,
   phones only. The wrapper then centres at 4vw either side, which is the
   geometry the 92vw value was written for. No other selector changes.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .lb-sec > .container {
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   24. TYPOGRAPHY CLOSURE - 2026-09-11 (PageSpeed round after the Xserver
   host move). Approved by Red1 on 2026-09-11.

   (a) Inter is declared HERE, self-hosted from /fonts/, because WP Rocket's
       Remove-Unused-CSS output for DESKTOP carried no Inter @font-face at
       all (the mobile output did). Desktop Latin text was therefore falling
       through to Noto Sans JP glyphs while phones showed Inter. This file is
       excluded from RUCSS (lb-rocket-rucss.php), so the face is now
       deterministic on both devices. The file is Google Fonts' Inter v20
       latin variable subset (wght 100-900; the same bytes WP Rocket was
       already serving on mobile from cache/fonts/), 48,256 B. Later-defined
       face wins for the latin range, so mobile downloads this copy instead of
       the Google copy - still one Inter request per page.

   (b) Enfold's theme-option body font (Lato, Google-hosted, injected by
       Enfold's inline "google webfont replacement" script and therefore
       invisible to WP Rocket's local font hosting) reached only legacy Enfold
       elements outside the .lb-* scope: the desktop main-navigation labels
       (#avia-menu .avia-menu-text - JA labels rendered in the OS Japanese
       fallback, EN labels in Lato), clearfix pseudo-elements, the cookie bar,
       the SalesIQ launcher. Zero visible elements needed Lato for the design.
       The approved stack now applies to <body> itself (html body beats
       Enfold's body.lato regardless of sheet order), and Enfold's Google Fonts
       script is switched off in functions.php via
       avf_output_google_webfonts_script. Nothing used Oswald.

   Measured 2026-09-11 before the change: 2 x fonts.gstatic.com requests
   (Lato 400 + 700, 29-47 KiB) plus a preconnect on every page; desktop Inter
   absent; 7 visible desktop nav labels computing `lato`.
   ========================================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  /* 2026-09-13: single source. Inter is no longer in the Google Fonts enqueue
     (functions.php), so WP Rocket's cache/fonts/1/... copy is not maintained
     any more and must not be listed here. This theme file is byte-identical to
     Google's Inter v20 latin variable slice (48,256 B, md5 260c81a4...).
     functions.php rewrites WP Rocket's Preload-Fonts href for Inter to this
     same URL, so the preload and the face share one download. */
  src: url(/wp-content/themes/enfold-child/fonts/inter-v20-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --enfold-font-family-body: Inter, "Noto Sans JP", sans-serif;
}
html body,
html body.lato {
  font-family: Inter, "Noto Sans JP", sans-serif;
}