.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}/* ============================================================
   FR. Funding Readiness. CSS
   Paste into the Custom CSS panel in Liferay's Advanced tab,
   or keep the inlined <style> block at the head of each page.

   Written to the same conventions as the HIC stylesheet:
   1. Every selector is scoped under .fr-page. Nothing bare, so
      nothing reaches the Liferay theme or another portlet.
   2. Custom properties are declared on .fr-page and prefixed
      --fr-. Nothing on :root, so no collision with the HIC,
      VERITAS or H-BMC stylesheets if two load together.
   3. Palette, type scale, nav, accordion, pill controls,
      callouts and breakpoints are the HIC values, so the two
      sections read as one site.
   4. No !important anywhere. No global scroll-behavior.

   v6.0 added .fr-crit-sold, which carries the point-of-sale
   standard on the nine criteria that have one.

   v6.1 removed the solution type and funder logic toggles, and
   added .fr-nav-back, .fr-nav-title, .fr-nav-current and
   .fr-hidden so the nav block carries no inline styles.
   Both changes are marked in place below.
   ============================================================ */

/* ── Scope root and tokens ── */
.fr-page {
  --fr-navy:        #1a2744;
  --fr-blue:        #2d5fa3;
  --fr-teal:        #1e7a8c;
  --fr-warm:        #c8703a;
  --fr-gold:        #d4a84b;
  --fr-green:       #2e7d52;
  --fr-light-blue:  #e8f0f8;
  --fr-light-teal:  #e6f4f6;
  --fr-light-warm:  #faf0e8;
  --fr-gray-100:    #f7f8fa;
  --fr-gray-200:    #edeef2;
  --fr-gray-400:    #9aa0b0;
  --fr-gray-600:    #5a6070;
  --fr-gray-800:    #2e3340;
  --fr-white:       #ffffff;
  --fr-text:        #2e3340;
  --fr-text-light:  #5a6070;

  color: var(--fr-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

.fr-page *,
.fr-page *::before,
.fr-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
}

/* ── Navigation banner ── */
.fr-page nav {
  position: sticky; top: 0; background: var(--fr-navy); z-index: 100;
  padding: 0 2rem; display: flex; align-items: center; overflow-x: auto;
  width: 100%; max-width: 100%;
  margin-top: 1.5rem;        /* white space above the dark bar */
}
.fr-page nav a {
  color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 1rem 1.1rem; white-space: nowrap; transition: opacity .2s ease;
}
.fr-page nav a:hover { opacity: .7; }

/* Nav parts that are not plain links. These replace the inline styles
   the nav block used to carry, so content HTML stays class-only. */
.fr-page .fr-nav-back {
  color: rgba(255,255,255,.45); font-size: 12px; text-transform: none;
  letter-spacing: .04em; padding: 1rem 1.4rem 1rem 0; margin-right: .5rem;
  border-right: 1px solid rgba(255,255,255,.15);
}
.fr-page .fr-nav-title {
  color: #fff; font-size: 15px; font-weight: 700;
  padding-right: 2rem; margin-right: .5rem; white-space: nowrap;
}
.fr-page .fr-nav-current {
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 1rem 1.1rem; white-space: nowrap;
}

/* Initial state for the blocks the Overview page swaps with script.
   The script sets an inline display, which wins over this class. */
.fr-page .fr-hidden { display: none; }

/* Centred illustration that is not a full fr-figure, used on the
   Overview pathway section. The img keeps its own inline sizing,
   which the Liferay sanitizer preserves on img tags. */
.fr-page .fr-center-figure { margin-top: 1.5rem; text-align: center; }

/* A standalone button on its own line, used for the workbook download
   on the Self-Assessment page. Replaces an inline margin. */
.fr-page .fr-btn-row { margin: 1.4rem 0; }

/* ── Layout ── */
.fr-page .container      { max-width: 780px;  margin: 0 auto; padding: 0 2rem; }
.fr-page .container-wide { max-width: 1060px; margin: 0 auto; padding: 0 2rem; }

/* ── Page header banner ── */
.fr-page .fr-page-header {
  background: var(--fr-gray-100); border-top: 4px solid var(--fr-teal);
  padding: 2.2rem 2rem 2rem; margin-bottom: 1.2rem; position: relative;
}
/* object-fit keeps a source image that is not square from being
   stretched to fill the 48px box. Without it the icon is distorted. */
.fr-page .fr-page-header-icon {
  width: 48px; height: 48px; object-fit: contain; object-position: top right;
  float: right; margin: 0 0 .5rem 1rem; opacity: .9;
}
.fr-page .fr-page-parent-label {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fr-teal); margin-bottom: .6rem;
}
.fr-page .fr-page-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--fr-navy);
  font-weight: 700; line-height: 1.2; margin-bottom: 1rem;
}
.fr-page .fr-page-header-sub {
  font-size: 1.1rem; color: #3e4450; font-weight: 400;
  font-style: italic; max-width: 680px; margin-bottom: 1rem;
}
.fr-page .fr-page-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.fr-page .fr-meta-pill {
  display: inline-block; padding: .28rem .8rem; border-radius: 20px;
  font-size: .78rem; font-weight: 600; line-height: 1.4; border: 1.5px solid transparent;
}
.fr-page .fr-meta-risk { background: var(--fr-light-warm); color: var(--fr-warm); border-color: #e6c8b2; }
.fr-page .fr-meta-geo  { background: var(--fr-gray-100); color: var(--fr-gray-600); border-color: var(--fr-gray-200); }

/* ── Typography ── */
.fr-page h3 { font-size: 1.35rem; color: var(--fr-navy); font-weight: 600; margin-bottom: .9rem; margin-top: 2rem; }
.fr-page h3:first-child { margin-top: 0; }
.fr-page h4 { font-size: 1rem; font-weight: 700; color: var(--fr-navy); margin-bottom: .35rem; margin-top: 1.4rem; }
.fr-page p  { margin-bottom: 1rem; line-height: 1.75; }
.fr-page p:last-child { margin-bottom: 0; }
.fr-page ul, .fr-page ol { margin: .8rem 0 1rem 1.5rem; }
.fr-page li { margin-bottom: .4rem; line-height: 1.6; }
.fr-page strong { font-weight: 600; color: var(--fr-gray-800); }
.fr-page a { transition: opacity .2s ease; }

.fr-page .fr-overview-section { margin-bottom: 1.4rem; }
.fr-page .fr-notes { font-size: .875rem; color: var(--fr-gray-600); }
.fr-page .fr-funder-logic {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--fr-gray-200);
  font-size: .95rem; color: var(--fr-gray-600);
}
.fr-page .fr-funder-logic strong { color: var(--fr-navy); }

/* ── Pill controls ── */
.fr-page .fr-ov-controls { display: flex; gap: .5rem; justify-content: flex-end; margin: .5rem 0 .25rem; }
.fr-page .fr-ov-ctrl-btn,
.fr-page .fr-expand-all {
  background: transparent; border: 1.5px solid var(--fr-teal); color: var(--fr-teal);
  border-radius: 20px; padding: .25rem .9rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer; font-family: inherit;
  transition: background .2s ease, color .2s ease;
}
.fr-page .fr-ov-ctrl-btn:hover,
.fr-page .fr-expand-all:hover { background: var(--fr-teal); color: #fff; }
.fr-page .fr-ov-ctrl-btn:focus-visible,
.fr-page .fr-expand-all:focus-visible { outline: 2px solid var(--fr-navy); outline-offset: 2px; }
.fr-page .fr-expand-all { margin-left: .65rem; padding: .15rem .75rem; font-size: .72rem; vertical-align: middle; }

/* ── Accordion sections ── */
.fr-page .fr-ov-section { border-bottom: 1px solid var(--fr-gray-200); }
.fr-page .fr-ov-section:first-of-type { border-top: 1px solid var(--fr-gray-200); }
.fr-page .fr-ov-section > summary {
  padding: .7rem 0; cursor: pointer;
  display: flex; align-items: center; gap: 1rem;
  list-style: none; user-select: none;
}
.fr-page summary::-webkit-details-marker { display: none; }
.fr-page summary::marker { content: ''; }
.fr-page .fr-ov-section > summary h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; flex: 1; }
.fr-page .fr-ov-section > summary:hover h3 { color: var(--fr-teal); }
.fr-page .fr-ov-section > summary:focus-visible { outline: 2px solid var(--fr-teal); outline-offset: 2px; }

.fr-page .fr-ov-section-chevron,
.fr-page .fr-section-chevron,
.fr-page .fr-stage-chevron,
.fr-page .fr-signin-invite-chevron {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 1.5px solid var(--fr-teal); border-radius: 50%;
  color: var(--fr-teal); font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.fr-page .fr-ov-section[open] > summary .fr-ov-section-chevron,
.fr-page .fr-signin-invite[open] .fr-signin-invite-chevron { transform: rotate(90deg); }

.fr-page .fr-ov-section-body { padding-bottom: 1.1rem; }

/* legacy aliases */
.fr-page .fr-section-block { margin-bottom: 1.2rem; }
.fr-page .fr-section-details { border-bottom: 1px solid var(--fr-gray-200); }
.fr-page .fr-section-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: .7rem 0; list-style: none; }
.fr-page .fr-section-summary-left { display: flex; align-items: baseline; gap: .6rem; }
.fr-page .fr-section-header { margin-bottom: .5rem; }
.fr-page .fr-section-title { font-weight: 700; color: var(--fr-navy); }
.fr-page .fr-section-desc { font-size: .875rem; color: var(--fr-gray-600); line-height: 1.5; }
.fr-page .fr-section-body { padding-bottom: 1.1rem; }

/* ── Numbered foundation cards ── */
.fr-page .fr-solution-cards { display: grid; gap: .9rem; margin: 1.2rem 0; }
.fr-page .fr-solution-card {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--fr-gray-100); border: 1px solid var(--fr-gray-200);
  border-radius: 10px; padding: 1.2rem;
}
.fr-page .fr-solution-card-num {
  background: var(--fr-teal); color: #fff; font-weight: 700; font-size: .85rem;
  min-width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .15rem;
}
.fr-page .fr-solution-card-content { flex: 1; min-width: 0; }
.fr-page .fr-solution-card-heading { font-size: 1rem; font-weight: 700; color: var(--fr-navy); margin-bottom: .35rem; }
.fr-page .fr-solution-card-content p { font-size: .95rem; color: var(--fr-gray-600); line-height: 1.65; margin-bottom: .6rem; }
.fr-page .fr-solution-card-content p:last-child { margin-bottom: 0; }

/* ── Dimension cards ── */
.fr-page .fr-dim-flex { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.fr-page .fr-dimension-card {
  background: var(--fr-gray-100); border: 1px solid var(--fr-gray-200);
  border-radius: 10px; padding: 1.2rem;
}
.fr-page .fr-dimension-card p { font-size: .95rem; color: var(--fr-gray-600); line-height: 1.65; margin-bottom: .6rem; }
.fr-page .fr-dimension-card p:last-child { margin-bottom: 0; }
.fr-page .fr-dimension-label,
.fr-page .fr-dim-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fr-teal); margin-bottom: .4rem;
}
.fr-page .fr-dim-heading { font-size: 1rem; font-weight: 700; color: var(--fr-navy); margin-bottom: .5rem; line-height: 1.3; }
.fr-page .fr-dimension-card.fr-project { border-top: 3px solid var(--fr-blue); }
.fr-page .fr-dimension-card.fr-team    { border-top: 3px solid var(--fr-teal); }
.fr-page .fr-dimension-card.fr-funding { border-top: 3px solid var(--fr-gold); }

/* ── Callouts ── */
.fr-page .fr-funding-factors-inline,
.fr-page .fr-caveat-box {
  background: var(--fr-light-teal); border-left: 4px solid var(--fr-teal);
  padding: 1.4rem 1.6rem; border-radius: 8px; margin: 1rem 0 1.5rem;
}
.fr-page .fr-funding-factors-inline h4 { margin-top: 0; }
.fr-page .fr-funding-factors-inline p,
.fr-page .fr-caveat-box p { font-size: .95rem; line-height: 1.65; color: #2d3748; margin-bottom: .75rem; }
.fr-page .fr-funding-factors-inline p:last-child,
.fr-page .fr-caveat-box p:last-child { margin-bottom: 0; }
.fr-page .fr-caveat-label,
.fr-page .fr-funding-subhead,
.fr-page .fr-stages-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fr-teal); margin-bottom: .6rem;
}

/* A caveat box that collapses. Open by default. It is deliberately not
   an .fr-ov-section, so the Expand all and Collapse all controls on the
   Overview page cannot reach it and a reader cannot lose the notice by
   collapsing everything. */
.fr-page details.fr-caveat-box > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 1rem;
}
.fr-page details.fr-caveat-box > summary .fr-caveat-label { margin-bottom: 0; flex: 1; }
.fr-page details.fr-caveat-box > summary:focus-visible { outline: 2px solid var(--fr-teal); outline-offset: 2px; }
.fr-page details.fr-caveat-box[open] > summary { margin-bottom: .7rem; }
.fr-page details.fr-caveat-box[open] > summary .fr-ov-section-chevron { transform: rotate(90deg); }

.fr-page .fr-funding-items { display: grid; gap: .8rem; }
.fr-page .fr-funding-item { display: flex; gap: 1rem; align-items: flex-start; }
.fr-page .fr-funding-item-num {
  background: var(--fr-gold); color: #fff; font-weight: 700; font-size: .78rem;
  min-width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem;
}
.fr-page .fr-funding-item-text { flex: 1; font-size: .95rem; line-height: 1.6; color: var(--fr-gray-600); }
.fr-page .fr-funding-item-text strong { color: var(--fr-navy); }
.fr-page .fr-funding-source { margin-top: .9rem; font-size: .82rem; color: var(--fr-gray-600); }

/* ── Stage cards ── */
.fr-page .fr-stages-flex { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.fr-page .fr-stage-card {
  display: block; background: var(--fr-gray-100); border: 1px solid var(--fr-gray-200);
  border-radius: 10px; text-decoration: none; color: var(--fr-text); overflow: hidden;
  transition: background .2s ease, border-color .2s ease;
}
.fr-page .fr-stage-card:hover { background: #fff; border-color: var(--fr-teal); opacity: 1; }
.fr-page .fr-stage-card-cap { height: 4px; background: var(--fr-teal); }
.fr-page .fr-card-s1 .fr-stage-card-cap { background: #9ec8d1; }
.fr-page .fr-card-s2 .fr-stage-card-cap { background: #6fadb9; }
.fr-page .fr-card-s3 .fr-stage-card-cap { background: var(--fr-teal); }
.fr-page .fr-card-s4 .fr-stage-card-cap { background: #1a5560; }
.fr-page .fr-card-s5 .fr-stage-card-cap { background: var(--fr-navy); }
.fr-page .fr-stage-card-body { padding: 1.2rem; }
.fr-page .fr-stage-card-num {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fr-teal); margin-bottom: .4rem;
}
.fr-page .fr-stage-card-name { font-size: .95rem; font-weight: 700; color: var(--fr-navy); margin-bottom: .3rem; line-height: 1.3; }
.fr-page .fr-stage-card-desc { font-size: .82rem; color: var(--fr-gray-600); line-height: 1.5; margin-bottom: .5rem; }
.fr-page .fr-stage-card-risk { font-size: .78rem; color: var(--fr-warm); line-height: 1.45; }
.fr-page .fr-stage-card-arrow { margin-top: .5rem; color: var(--fr-teal); font-weight: 700; }
.fr-page .fr-stage-card-ref { font-size: .8rem; color: var(--fr-gray-600); }
.fr-page .fr-stages-list { display: grid; gap: .4rem; }
/* A grid item will not shrink below its content, which kept the wide
   table from scrolling inside it. */
.fr-page .fr-stages-list > .fr-stage-details { min-width: 0; }
.fr-page .fr-stage-details { border-bottom: 1px solid var(--fr-gray-200); }

/* v6.1: the stage summary had no layout rule, so its four spans ran
   together on one line and the chevron wrapped below. Name and stage
   number sit on the first line with the chevron at the right, and the
   description takes the second line. */
.fr-page .fr-stage-details > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem;
  padding: .7rem 0; cursor: pointer; list-style: none; user-select: none;
}
.fr-page .fr-stage-details > summary .fr-stage-chevron { order: 1; margin-left: auto; }
.fr-page .fr-stage-details > summary .fr-stage-desc { order: 2; flex-basis: 100%; }
.fr-page .fr-stage-details > summary:hover .fr-stage-name { color: var(--fr-teal); }
.fr-page .fr-stage-details > summary:focus-visible { outline: 2px solid var(--fr-teal); outline-offset: 2px; }
.fr-page .fr-stage-details[open] > summary .fr-stage-chevron { transform: rotate(180deg); }
.fr-page .fr-stage-num { font-size: .78rem; font-weight: 700; color: var(--fr-teal); }
.fr-page .fr-stage-name { font-weight: 700; color: var(--fr-navy); }
.fr-page .fr-stage-desc { font-size: .9rem; color: var(--fr-gray-600); line-height: 1.6; }

/* ── Toggles: removed at v6.1 ──
   The solution type and funder logic toggles are gone from every page.
   The radios, the toggle bar, the pill labels, the :checked highlight
   rules and the data-fr-type and data-fr-funder exclusion rules are all
   deleted, along with the three data-fr-funder attributes that were
   added to criteria at v6.0.

   Why. Conditioning is now carried by one mechanism, the italic context
   note on the criterion, which is always visible. The toggles offered a
   second, partial mechanism that hid rows. It could never express a tier
   change, which is what most notes are, because CSS cannot move a node
   between the Must Have and Should Have tables. On the Raise Size page
   the two solution type row sets are labelled in the badge instead, so
   both are readable at once.

   If a filter is ever wanted again, it belongs in script that can move
   or retier a criterion, not in sibling selectors. ── */

/* ── Criteria blocks ── */
.fr-page .fr-criteria-section { margin: 1.2rem 0 1.5rem; }
.fr-page .fr-criteria-block { margin-bottom: 2rem; }
.fr-page .fr-criteria-block-header { border-left: 4px solid var(--fr-gray-200); padding-left: 1rem; margin-bottom: 1rem; }
.fr-page .fr-must-block-header   { border-left-color: var(--fr-warm); }
.fr-page .fr-should-block-header { border-left-color: var(--fr-teal); }
.fr-page .fr-criteria-block-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.fr-page .fr-must-label   { color: var(--fr-warm); }
.fr-page .fr-should-label { color: var(--fr-teal); }
.fr-page .fr-criteria-block-desc { font-size: .875rem; color: var(--fr-gray-600); line-height: 1.6; }

.fr-page .fr-criteria-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fr-page .fr-criteria-table th {
  text-align: left; vertical-align: bottom; width: 50%;
  padding: .5rem 1.6rem .5rem 0; border-bottom: 1.5px solid var(--fr-gray-200);
}
.fr-page .fr-th-inner {
  display: flex; align-items: center; gap: .45rem;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.fr-page .fr-th-project-must .fr-th-inner,
.fr-page .fr-th-team-must    .fr-th-inner { color: var(--fr-warm); }
.fr-page .fr-th-project-should .fr-th-inner { color: var(--fr-blue); }
.fr-page .fr-th-team-should    .fr-th-inner { color: var(--fr-teal); }
.fr-page .fr-criteria-table td { vertical-align: top; width: 50%; padding: 1rem 1.6rem 0 0; }

.fr-page .fr-criteria-list { list-style: none; margin: 0; }
.fr-page .fr-criteria-list > li { line-height: 1.6; margin-bottom: .6rem; color: var(--fr-text); }
.fr-page .fr-criteria-list > li:not(.fr-crit) { padding-left: 1rem; position: relative; }
.fr-page .fr-criteria-list > li:not(.fr-crit)::before { content: "\2022"; position: absolute; left: 0; color: var(--fr-teal); }
.fr-page .fr-must-col > li:not(.fr-crit)::before { color: var(--fr-warm); }

.fr-page .fr-ctx-note {
  display: block; margin-top: .25rem;
  font-size: .82rem; font-style: italic; color: var(--fr-warm);
}

/* ── Criterion blocks: pitch and diligence ── */
.fr-page .fr-criteria-list li.fr-crit {
  display: block; padding-left: 0;
  margin-bottom: 1.1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--fr-gray-200);
}
.fr-page .fr-criteria-list li.fr-crit:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.fr-page .fr-crit-name { display: block; font-weight: 700; color: var(--fr-navy); line-height: 1.35; }
.fr-page .fr-crit-std {
  display: block; margin-top: .4rem; font-size: .875rem; line-height: 1.6;
  padding-left: 4.6rem; text-indent: -4.6rem;
}
.fr-page .fr-std-label {
  display: inline-block; width: 4.4rem; text-indent: 0;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.fr-page .fr-crit-pitch { color: var(--fr-text); }
.fr-page .fr-crit-pitch .fr-std-label { color: var(--fr-warm); }
.fr-page .fr-crit-dil { color: var(--fr-gray-600); }
.fr-page .fr-crit-dil .fr-std-label { color: var(--fr-gray-400); }

/* ── v6.0: point-of-sale standard ──
   Carries the standard that replaces the criterion once the
   product may be sold. Set apart by a dashed rule so it reads
   as a condition on the two standards above it, not a third
   standard applying at the same time. Inherits .fr-crit-std,
   so the mobile and print rules below already cover it. ── */
.fr-page .fr-crit-sold {
  color: var(--fr-gray-600); margin-top: .5rem; padding-top: .45rem;
  border-top: 1px dashed var(--fr-gray-200);
}
.fr-page .fr-crit-sold .fr-std-label { color: var(--fr-teal); }

.fr-page .fr-crit-should > details > summary {
  list-style: none; cursor: pointer; display: block; position: relative; padding-right: 1.8rem;
}
.fr-page .fr-crit-should > details > summary::after {
  content: "\203A"; position: absolute; right: 0; top: 0;
  width: 20px; height: 20px; border: 1.5px solid var(--fr-teal); border-radius: 50%;
  color: var(--fr-teal); font-size: 11px; line-height: 17px; text-align: center;
  transform: rotate(90deg); transition: transform .25s ease;
}
.fr-page .fr-crit-should > details[open] > summary::after { transform: rotate(-90deg); }
.fr-page .fr-crit-should > details > summary:hover .fr-crit-name { color: var(--fr-teal); }
.fr-page .fr-crit-should > details > summary:focus-visible { outline: 2px solid var(--fr-teal); outline-offset: 2px; border-radius: 3px; }
.fr-page .fr-criteria-list li.fr-crit-should { margin-bottom: .65rem; padding-bottom: .6rem; }

/* ── Failure mode ── */
.fr-page .fr-failure-section { margin: 1.5rem 0; }
.fr-page .fr-failure-box {
  background: var(--fr-light-warm); border-left: 4px solid var(--fr-warm);
  padding: 1.4rem 1.6rem; border-radius: 8px;
}
.fr-page .fr-failure-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fr-warm); margin-bottom: .6rem;
}
.fr-page .fr-failure-box p { font-size: .95rem; line-height: 1.65; color: #2d3748; }

/* ── Raise size ── */
.fr-page .fr-raise-ref-section { margin: 1.5rem 0; }
.fr-page .fr-raise-ref-box {
  background: var(--fr-gray-100); border: 1px solid var(--fr-gray-200);
  border-radius: 10px; padding: 1.2rem;
}
.fr-page .fr-raise-ref-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.fr-page .fr-raise-ref-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fr-teal);
}
.fr-page .fr-raise-ref-link { font-size: .82rem; font-weight: 700; color: var(--fr-teal); text-decoration: none; white-space: nowrap; }
.fr-page .fr-raise-ref-link:hover { opacity: .7; }
.fr-page .fr-raise-ref-note { margin-top: .8rem; font-size: .78rem; font-style: italic; color: var(--fr-gray-600); }
.fr-page .fr-raise-body { line-height: 1.75; }

.fr-page .fr-subtable { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.fr-page .fr-subtable th {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fr-navy);
  padding: .6rem .8rem; background: var(--fr-gray-100); border-bottom: 1px solid var(--fr-gray-200);
}
.fr-page .fr-subtable td { padding: .6rem .8rem; border-bottom: 1px solid var(--fr-gray-200); font-size: .875rem; vertical-align: middle; }
.fr-page .fr-subtable tr:last-child td { border-bottom: none; }
.fr-page .fr-row-mech td { background: var(--fr-gray-100); }
.fr-page .fr-row-nd td { background: #fff; }
.fr-page .fr-row-d  td { background: var(--fr-gray-100); }
.fr-page .fr-should-project-col > li:not(.fr-crit)::before { color: var(--fr-blue); }
.fr-page .fr-should-team-col > li:not(.fr-crit)::before { color: var(--fr-teal); }

.fr-page .fr-badge {
  display: inline-block; padding: .18rem .7rem; border-radius: 20px;
  font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.fr-page .fr-badge-nd { background: var(--fr-light-teal); color: var(--fr-teal); }
.fr-page .fr-badge-d  { background: var(--fr-light-blue); color: var(--fr-blue); }
.fr-page .fr-us, .fr-page .fr-geo-us { color: var(--fr-navy); font-weight: 600; }
.fr-page .fr-eu, .fr-page .fr-geo-eu { color: var(--fr-teal); font-weight: 600; }
.fr-page .fr-dim { color: var(--fr-gray-400); font-size: .82em; font-weight: 400; }
.fr-page .fr-geo { font-size: .875rem; }
.fr-page .fr-mech-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fr-gray-600); }
/* The geography label and the text that follows it are two adjacent
   spans with no separator, so they ran together as USSBIR Phase II.
   The gap restores the space. */
.fr-page .fr-mech-item {
  font-size: .875rem; line-height: 1.6; color: var(--fr-gray-600);
  display: flex; gap: .5rem; align-items: baseline;
}

/* ── Sign-in invite ── */
.fr-page .fr-signin-invite { border: 1px dashed var(--fr-gray-200); border-radius: 10px; background: var(--fr-gray-100); margin: 1.2rem 0; }
.fr-page .fr-signin-invite-trigger { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; }
.fr-page .fr-signin-invite-icon { flex-shrink: 0; opacity: .7; }
.fr-page .fr-signin-invite-text { flex: 1; font-weight: 700; color: var(--fr-navy); line-height: 1.4; font-size: .95rem; }
.fr-page .fr-signin-panel { padding: 0 1.2rem 1.2rem; }
.fr-page .fr-signin-panel-label { font-size: .875rem; color: var(--fr-gray-600); margin-bottom: .7rem; }
.fr-page .fr-signin-btn {
  display: inline-block; background: var(--fr-teal); color: #fff;
  padding: .45rem 1.2rem; border-radius: 4px; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.fr-page .fr-signin-btn:hover { opacity: .85; }

/* ── Figures ── */
.fr-page .fr-figure { margin: 1.2rem 0 1.5rem; }
.fr-page .fr-figure img {
  display: block; width: 100%; height: auto; max-width: 1060px;
  border: 1px solid var(--fr-gray-200); border-radius: 10px; background: #fff;
}
.fr-page .fr-figure figcaption { margin-top: .6rem; font-size: .82rem; font-style: italic; color: var(--fr-gray-600); }
.fr-page .fr-loop-list { margin: .8rem 0 1rem 1.5rem; }
.fr-page .fr-loop-list li { line-height: 1.6; margin-bottom: .5rem; }
.fr-page .fr-loop-list li strong { color: var(--fr-navy); }

/* ── Section navigation, top and bottom ── */
.fr-page .fr-top-nav { margin: 0 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--fr-gray-200); }
.fr-page .fr-bottom-nav { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--fr-gray-200); }
.fr-page .fr-bottom-nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fr-page .fr-bottom-nav-link {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--fr-teal); text-decoration: none; padding: .15rem .1rem;
}
.fr-page .fr-bottom-nav-link:hover { opacity: .7; }
.fr-page .fr-bottom-nav-link.fr-active,
.fr-page .fr-active { color: var(--fr-navy); font-weight: 700; }
.fr-page .fr-bottom-nav-sep { color: var(--fr-gray-400); font-size: .82rem; }


/* ── HIC classes used in this markup ──
   The overview hero and its bottom nav use the HIC class names.
   The HIC stylesheet scopes those under .hic-page, so they get no
   styling inside .fr-page. These rules mirror the HIC values so
   the two render identically. ── */

.fr-page .part-header {
  background: var(--fr-gray-100); border-top: 4px solid var(--fr-blue);
  padding: 2.2rem 0 2rem; margin: 3rem 0 1.2rem; position: relative;
}
.fr-page .part-header.container-wide { padding: 2.2rem 2rem 2rem; margin: 3rem auto 1.2rem; }
.fr-page .part-label {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--fr-blue); margin-bottom: .6rem;
}

/* the meta pills sit inside the shared hero on the level pages */
.fr-page .part-header .fr-page-meta { margin-top: 1rem; }
.fr-page .part-header .fr-page-header-icon {
  width: 48px; height: 48px; object-fit: contain; object-position: top right;
  float: right; margin: 0 0 .5rem 1rem; opacity: .9;
}
.fr-page .part-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--fr-navy);
  font-weight: 700; line-height: 1.2; margin-bottom: 1rem;
}
.fr-page .part-intro {
  font-size: 1.1rem; color: #3e4450; font-weight: 400;
  font-style: italic; max-width: 680px;
}

.fr-page .bottom-nav { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--fr-gray-200); }
.fr-page .bottom-nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fr-page .bottom-nav-link {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--fr-teal); text-decoration: none; padding: .15rem .1rem;
}
.fr-page .bottom-nav-link:hover { opacity: .7; }
.fr-page .bottom-nav-link.active,
.fr-page .active { color: var(--fr-navy); font-weight: 700; }
.fr-page .bottom-nav-sep { color: var(--fr-gray-400); font-size: .82rem; }

/* ── Responsive ── */
@media (max-width: 760px) {
  .fr-page .fr-criteria-table,
  .fr-page .fr-criteria-table thead,
  .fr-page .fr-criteria-table tbody,
  .fr-page .fr-criteria-table tr,
  .fr-page .fr-criteria-table th,
  .fr-page .fr-criteria-table td { display: block; width: 100%; }
  .fr-page .fr-criteria-table td { padding: .8rem 0 1.2rem; }
  .fr-page .fr-crit-std { padding-left: 0; text-indent: 0; }
  .fr-page .fr-std-label { display: block; width: auto; margin-bottom: .1rem; }
  .fr-page .fr-stages-flex { grid-template-columns: 1fr 1fr; }
  .fr-page .fr-page-header { padding: 1.6rem 1.2rem 1.4rem; }
  .fr-page .fr-raise-ref-header { flex-direction: column; align-items: flex-start; gap: .3rem; }

  /* v6.1: the five-column raise size table is the only element that
     overflowed the viewport on a phone. It scrolls sideways inside its
     own box instead of pushing the page wider. */
  .fr-page .fr-subtable { display: block; overflow-x: auto; }
}
@media (max-width: 460px) {
  .fr-page .fr-stages-flex { grid-template-columns: 1fr; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-ov-section-chevron,
  .fr-page .fr-crit-should > details > summary::after,
  .fr-page .fr-ov-ctrl-btn,
  .fr-page .fr-expand-all,
  .fr-page .fr-stage-card,
  .fr-page nav a,
  .fr-page a { transition: none; }
}

/* ── Print ── */
@media print {
  .fr-page .fr-ov-section > .fr-ov-section-body { display: block; }
  .fr-page .fr-crit-should > details > .fr-crit-std { display: block; }
  .fr-page .fr-ov-controls,
  .fr-page .fr-expand-all,
  .fr-page .fr-signin-invite,
  .fr-page .fr-ov-section-chevron,
  .fr-page .fr-crit-should > details > summary::after { display: none; }
  .fr-page .fr-stage-card,
  .fr-page .fr-dimension-card,
  .fr-page .fr-solution-card { break-inside: avoid; }
}

/* ------------------------------------------------------------
   NOTE ON SMOOTH SCROLLING
   Not set here. scroll-behavior only takes effect on the
   scrolling element, so it cannot be scoped to .fr-page. If the
   HIC stylesheet or the theme already sets it globally, these
   pages inherit it. If you want it and do not have it:

     html { scroll-behavior: smooth; }

   Add that once, site-wide, rather than per section.
   ------------------------------------------------------------ */