/* ==========================================================================
   FRONTGRADE  ·  fg2 PRODUCT
   The commerce product template's own layer. Requires tokens.css and
   components.css to be loaded first. No rule in either file is redefined:
   every colour resolves to a token, and every new pairing carries the
   computed WCAG 2.1 ratio the token set publishes for it.

   TWO KINDS OF RULE LIVE HERE.
   1. The page's own layout, in the .fg-product namespace.
   2. Overrides for markup this template prints but does not own: the system
      breadcrumb, the file-attachments paragraph and its file rows, and the
      paragraph components. Those carry the previous design's stylesheets,
      which are written for a light page, so each override is scoped inside a
      .fg-product__* ancestor and nothing outside this page is touched.

   SURFACE PLAN. Bands alternate so every component sits one step off its
   band and the hairlines stay visible:
     hero            --surface-base     media frame on --surface-raised
     specifications  --surface-base     table body raised, labels panel
     overview        --surface-raised   reading copy, no component
     documentation   --surface-base     file rows on --surface-raised
     components      --surface-raised   paragraphs keep their own surfaces

   BREAKPOINTS. Mobile first, on the documented steps:
     390    single column floor
     768    denser table, wider gutters inside the file rows
     1024   the hero splits into copy and media columns
     1280   the desktop hero ratio and the wide reading measure
     1600   the ceiling, where the container has stopped growing
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT
   The article paints its own ground, so the page reads as the redesign even
   before the surrounding chrome does.
   -------------------------------------------------------------------------- */

.fg-product {
  background: var(--surface-base);
  color: var(--text-muted);            /* 5.57:1 on --surface-base */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* --------------------------------------------------------------------------
   2. THE PAGE HEADER

   THE HEADER IS page-header.css's, NOT THIS FILE'S. What used to live in this
   section drew a header of this page's own: the system breadcrumb restyled to
   a 12px uppercase strip, a two column hero grid, and a headline resolving to
   the --fs-h1 primitive. The sitewide contract states one anatomy for every
   page header, so the band is now the shared .fg-pagehead component and this
   section holds only what is particular to a product: the intro, which fills
   the contract's lede slot, and the picture, which has a band of its own
   below the header because the contract's ground is drawn and never
   photographed.
   -------------------------------------------------------------------------- */

/* The product title carries tabular numerals so a part number in the heading
   sets on the same rhythm as the same part number in the table below it, and
   breaks anywhere because a part number has no spaces to break at. */
.fg-product__phead .fg-h1 {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The intro fills the lede slot. It is a rich-text field, so it arrives as
   one or more block elements rather than a bare string; the wrapper carries
   the lede setting and the children are flattened onto it. */
.fg-product__dek > :first-child { margin-top: 0; }
.fg-product__dek > :last-child { margin-bottom: 0; }
/* The previous design sets body p to 20px Inter in #121212, which is a value
   this ground cannot show. Inside the dek the paragraph takes the lede
   setting from its own wrapper instead. */
.fg-product__dek p,
.fg-product__dek li,
.fg-product__dek span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.fg-product__dek p { margin: 0; }
.fg-product__dek p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   3. THE PRODUCT IMAGE

   Its own band directly under the header. A hairline frame one step up the
   ladder from the band, with the image at its natural ratio: product
   photography is not croppable, so the frame takes the picture's shape rather
   than forcing a crop on it. The frame is held to the reading measure so a
   small part photograph is not blown across a 1216px column.
   -------------------------------------------------------------------------- */

.fg-product__imageband { padding-block: var(--section-y); }

.fg-product__media { min-width: 0; max-width: var(--measure-prose); }
.fg-product__media-frame {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-product__media-frame img {
  width: 100%;
  height: auto;
  margin-inline: auto;
}
/* Field and media wrappers between the frame and the image carry the
   previous design's spacing; the frame owns the spacing here. */
.fg-product__media-frame figure,
.fg-product__media-frame > div,
.fg-product__media-frame > div > div { margin: 0; }

/* --------------------------------------------------------------------------
   4. SPECIFICATIONS TABLE
   One row per parameter: the label column is the parameter name, the value
   column is the value. Surfaces and ratios, all published token pairs:
     label cell   --surface-panel  + --text-primary 14.55:1  AAA
     value cell   --surface-raised + --text-display 17.08:1  AAA
     value link   --surface-raised + --accent        4.98:1  AA
   Row hover lays the kit's white/0.04 over both cell surfaces. Composited,
   the comp measures raised as #181b29 and panel as #1c2231, which give
   --text-display 15.66:1 and --text-primary 13.17:1, both AAA.
   The hairline rules are decoration rather than a control boundary, so the
   3:1 non-text rule does not apply to them; the label column additionally
   carries a --border-hairline-strong edge to separate it structurally.
   -------------------------------------------------------------------------- */

.fg-product__table-region {
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.fg-product__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  text-align: left;
}

/* The previous design gives every td a #e8e8e8 border on all four sides and
   stripes even rows in #f7f7f7, both of which read as light bands here. The
   border is cleared before the hairline is drawn, and both cell types carry
   an explicit surface so no stripe can show through underneath them. */
.fg-product__table th,
.fg-product__table td {
  padding: var(--space-4);
  border: 0;
  border-top: var(--border-hairline-w) solid var(--border-hairline);
  vertical-align: top;
  text-align: left;
}
.fg-product__table tbody tr:first-child th,
.fg-product__table tbody tr:first-child td { border-top: 0; }

/* Label column. Panel fill plus a hairline-strong right edge. */
.fg-product__table tbody th {
  width: 45%;
  background: var(--surface-panel);
  border-right: var(--border-hairline-w) solid var(--border-hairline-strong);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.fg-product__table tbody td { background: var(--surface-raised); }

.fg-product__table-value {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--text-display);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The SMD part number arrives as a link inside the value cell. */
.fg-product__table-value a,
.fg-product__table-value a:link,
.fg-product__table-value a:visited {
  color: var(--accent);                /* 4.98:1 on --surface-raised */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--t-color);
}
.fg-product__table-value a:hover { color: var(--text-display); }

.fg-product__table tbody tr { transition: background-color var(--dur-quick) var(--ease-standard); }
.fg-product__table tbody tr:hover th,
.fg-product__table tbody tr:hover td {
  background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
}

/* --------------------------------------------------------------------------
   5. OVERVIEW
   The product summary is editor-authored rich text, so the whole element set
   is styled rather than a wrapper alone. components.css zeroes the margin on
   every block element and strips list markers globally, which is right for
   designed pages and wrong for authored copy, so both come back here.
     --text-muted   on --surface-raised   5.31:1  AA   body copy
     --text-primary on --surface-raised  15.47:1  AAA  bold runs
     --text-display on --surface-raised  17.08:1  AAA  sub-headings
     --accent       on --surface-raised   4.98:1  AA   links
   -------------------------------------------------------------------------- */

.fg-product__prose > :first-child { margin-top: 0; }
.fg-product__prose > :last-child { margin-bottom: 0; }

/* body p and body blockquote carry the previous design's face, size and near
   black colour. Inside authored copy the paragraph and the list item take the
   reading setting from the wrapper instead. */
.fg-product__prose p,
.fg-product__prose li {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.fg-product__prose p,
.fg-product__prose ul,
.fg-product__prose ol,
.fg-product__prose table,
.fg-product__prose figure,
.fg-product__prose blockquote { margin: 0 0 var(--space-5); }

.fg-product__prose h2,
.fg-product__prose h3,
.fg-product__prose h4 {
  margin: var(--space-8) 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--text-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-h3);
}
.fg-product__prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.fg-product__prose h3 { font-size: var(--fs-h4); line-height: var(--lh-tight); }
.fg-product__prose h4 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
}

.fg-product__prose ul,
.fg-product__prose ol { padding-left: 1.35em; }
.fg-product__prose ul { list-style: disc; }
.fg-product__prose ol { list-style: decimal; }
.fg-product__prose li { margin-bottom: var(--space-2); }
.fg-product__prose li::marker { color: var(--accent); }

.fg-product__prose strong,
.fg-product__prose b { color: var(--text-primary); font-weight: var(--fw-semibold); }

.fg-product__prose a,
.fg-product__prose a:link,
.fg-product__prose a:visited {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--t-color);
}
.fg-product__prose a:hover { color: var(--text-display); }

.fg-product__prose img { height: auto; }

.fg-product__prose blockquote {
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--border-accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--text-primary);
}

/* An authored table stays inside its own scroll rather than widening the
   band. */
.fg-product__prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.fg-product__prose th,
.fg-product__prose td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline-w) solid var(--border-hairline);
  background: var(--surface-raised);
  text-align: left;
}
/* The even-row stripe the previous design paints behind an authored table is
   a near white; the cells carry their own surface so it never shows. */
.fg-product__prose th {
  background: var(--surface-panel);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   5A. AUTHORED COLOUR, NEUTRALISED
   The summary is editor-authored and most of it was pasted in from a word
   processor or a spreadsheet, so it arrives carrying the source document's
   own colours in style attributes. Measured on the field data: 118 of the
   189 products that have a summary carry at least one, and every value in
   the set is a near black written for a white page: rgb(18, 18, 18) 439
   times, rgb(0, 0, 0) 403, rgb(48, 48, 48) 10, windowtext 5, black 2. Not
   one of the 965 declarations is a brand colour or a deliberate choice. One
   product carries a white background on eleven elements as well.

   On this band's ground those values measure 1.00:1 and 1.13:1: text that is
   present in the markup, selectable, and read out by a screen reader, and
   invisible to the eye. The white-background product measures the opposite
   way, 1.21:1, because the band's own bold runs are light and land on the
   pasted white.

   WHY THE RULES ABOVE DO NOT ALREADY COVER IT. They hand the reading colour
   down with `inherit`, which is what defeats the previous design's
   stylesheet. It cannot defeat a style attribute. An inline declaration
   outranks every author selector however specific, and where the attribute
   sits on an ancestor, which is what the pasted column wrappers are,
   `inherit` actively carries the wrong value down to the child. `!important`
   is the only author-level weight that outranks a normal inline declaration,
   so it is the weight these rules carry, over one band on one template.

   THE TRADE. Inside this band an editor can no longer set a text or a
   background colour. That is the intended outcome rather than a side effect:
   the band's ground is a fixed token, so a colour authored against a white
   page is wrong here by construction, and the field data shows no case where
   one was meant. Colour that is meant to carry meaning belongs in the
   template, where its pairing can be measured.

   The pairings are the ones section 5 already publishes:
     --text-muted   on --surface-raised   5.31:1  AA   body copy and lists
     --text-primary on --surface-raised  15.47:1  AAA  bold runs, headings
     --text-display on --surface-raised  17.08:1  AAA  sub-headings
     --accent       on --surface-raised   4.98:1  AA   links
   -------------------------------------------------------------------------- */

.fg-product__prose,
.fg-product__prose p,
.fg-product__prose div,
.fg-product__prose span,
.fg-product__prose font,
.fg-product__prose ul,
.fg-product__prose ol,
.fg-product__prose li,
.fg-product__prose em,
.fg-product__prose i,
.fg-product__prose sub,
.fg-product__prose sup,
.fg-product__prose insert,
.fg-product__prose td { color: var(--text-muted) !important; }

.fg-product__prose strong,
.fg-product__prose b,
.fg-product__prose th,
.fg-product__prose h4,
.fg-product__prose h5,
.fg-product__prose h6 { color: var(--text-primary) !important; }

.fg-product__prose h2,
.fg-product__prose h3 { color: var(--text-display) !important; }

.fg-product__prose blockquote { color: var(--text-primary) !important; }

.fg-product__prose a,
.fg-product__prose a:link,
.fg-product__prose a:visited { color: var(--accent) !important; }
.fg-product__prose a:hover { color: var(--text-display) !important; }

/* The pasted white grounds. The two cell types are left out on purpose: the
   surfaces they carry are this stylesheet's own, set a few rules above. */
.fg-product__prose p,
.fg-product__prose div,
.fg-product__prose span,
.fg-product__prose font,
.fg-product__prose ul,
.fg-product__prose ol,
.fg-product__prose li,
.fg-product__prose strong,
.fg-product__prose b,
.fg-product__prose em,
.fg-product__prose i,
.fg-product__prose a,
.fg-product__prose h2,
.fg-product__prose h3,
.fg-product__prose h4,
.fg-product__prose h5,
.fg-product__prose h6 { background-color: transparent !important; }

/* --------------------------------------------------------------------------
   6. DOCUMENTATION
   The file-attachments paragraph prints a twelve-column grid, page-sized
   margins and a border, all sized for the previous design's full-bleed
   sections. Inside this band it is a plain block and the rows carry the
   look; the container below supplies the width.
   File rows follow the kit's row-link pattern:
     row on --surface-raised inside a --surface-base band
     --text-primary on --surface-raised  15.47:1  AAA  the file label
     --stroke-quiet on --surface-raised   4.30:1        the glyph, 3:1 rule
   Hover lays the accent tint over the row, where the token set measures
   --accent at 4.79:1 on --surface-raised, so the orange label holds AA.
   -------------------------------------------------------------------------- */

.fg-product__docs .component-file-attachments,
.fg-product__docs .component-file-attachments:not(.sidebar) {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.fg-product__docs .component-file-attachments__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--text-display);          /* 17.90:1 on --surface-base */
}

.fg-product__docs .component-file-attachments__text {
  margin: 0 0 var(--space-6);
  max-width: var(--measure-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);            /* 5.57:1 on --surface-base */
}

.fg-product__docs .file-attachments,
.fg-product__docs .file-attachments:not(.sidebar) {
  display: block;
  width: 100%;
  margin: 0;
}

/* The previous stylesheet lays the list out as two columns flowing by column
   inside a twelve-column parent. The rows here run one to a line, full width,
   so the selector matches the depth that rule reaches to. */
.fg-product__docs .file-attachments .file-attachments__container,
.fg-product__docs .file-attachments:not(.sidebar) .file-attachments__container {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fg-product__docs .file-attachments__container > li { margin: 0; min-width: 0; }

.fg-product__docs .file-attachments a,
.fg-product__docs .file-attachments a:link,
.fg-product__docs .file-attachments a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--t-color);
}

.fg-product__docs .file-attachments a:hover,
.fg-product__docs .file-attachments a:focus-visible {
  color: var(--accent);                /* 4.79:1 over the tint on raised */
  border-color: var(--border-accent);
  background-color: var(--surface-raised);
  background-image: linear-gradient(var(--accent-tint), var(--accent-tint));
}

/* The two glyphs are stroke drawings that carry a hard-coded black stroke and
   a fill="none" presentation attribute. components.css sets svg { fill:
   currentColor }, which would win over that attribute and flood them, so the
   fill is restated and the stroke follows the row's own colour. */
.fg-product__docs .file-attachments a svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--stroke-quiet);
  fill: none;
  transition: color var(--dur-quick) var(--ease-standard), transform var(--dur-quick) var(--ease-out-expo);
}
.fg-product__docs .file-attachments a svg path { fill: none; stroke: currentColor; }
.fg-product__docs .file-attachments a:hover svg,
.fg-product__docs .file-attachments a:focus-visible svg { color: var(--accent); transform: translateX(3px); }

/* A gated file replaces its row with an embedded webform. The form keeps the
   previous design's own layout; only the values that would be invisible on a
   dark ground are re-pointed at tokens. */
.fg-product__docs .file-attachments__form-embed {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
  color: var(--text-muted);
}
.fg-product__docs .file-attachments__form-embed label { color: var(--text-primary); }

/* THE FIELDS, AND WHY THE SELECTOR CARRIES THE BLOCK ID.

   These rules existed and did not apply. The previous design styles the same
   fields as

     #block-frontgrade-content .webform-submission-form .js-form-type-textfield input

   which is one id, two classes and an element; the class-only rule here was
   one weight short of it and lost, so every text, email and telephone field
   on a product page rendered #ffffff with #121212 text in the middle of a
   dark band. The block id is the same one the interior pattern uses for the
   same reason on the same markup, and adding it here puts this rule one class
   above the one it answers rather than relying on load order.

     --surface-panel + --text-primary   14.55:1  AAA   the value
     --surface-panel + --text-secondary  5.11:1  AA    the placeholder
   -------------------------------------------------------------------------- */
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="text"],
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="email"],
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="tel"],
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="url"],
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="number"],
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="search"],
#block-frontgrade-content .fg-product .file-attachments__form-embed select,
#block-frontgrade-content .fg-product .file-attachments__form-embed textarea {
  background-color: var(--surface-panel);
  background-image: none;
  border: var(--border-hairline-w) solid var(--border-ui);
  border-radius: var(--fg-control-radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

#block-frontgrade-content .fg-product .file-attachments__form-embed :where(input, select, textarea)::placeholder {
  color: var(--text-secondary);        /* 5.11:1 on --surface-panel */
  opacity: 1;
}

/* THE SELECT NEEDS ONE MORE CLASS THAN THE TEXT FIELDS DO. The previous
   design wraps every select in .custom-select-wrap and paints the control
   through

     #block-frontgrade-content .webform-submission-form .custom-select-wrap .custom-select

   which sets background-color: initial at one id and three classes, the same
   weight as the rule above, and wins the tie on load order because the legacy
   stylesheet is served after this one. The result is a transparent select
   sitting beside filled text fields in the same form. Naming the wrapper and
   the control's own class puts this one class above it. */
#block-frontgrade-content .fg-product .file-attachments__form-embed .custom-select-wrap select.custom-select {
  background-color: var(--surface-panel);
  color: var(--text-primary);          /* 14.55:1 on --surface-panel */
}

/* The select's own list is painted by the platform, so the option rows are
   named as well as the closed control; a dark control whose open list is
   white text on white is worse than a light control. */
#block-frontgrade-content .fg-product .file-attachments__form-embed select option {
  background-color: var(--surface-panel);
  color: var(--text-primary);
}

/* THE FOCUS RING ON THESE CONTROLS, AND WHY THIS RULE IS NOT THE THING
   CONTRACT SECTION 3 FORBIDS.

   Section 3 says a converted component removes its own :focus-visible rule
   and lets the global ring apply. This file did exactly that, and section 9
   below records it. This rule is a different case: it is not a second ring,
   it is the contract's one ring restored where a legacy stylesheet has taken
   it away. Every value below is the same token the global rule uses.

   WHAT TAKES IT AWAY. The previous design's component.css carries

     #block-frontgrade-content .webform-submission-form .js-form-type-textfield input:focus, ...
       { outline-color: #e35530 }

   at one id, two classes and an element. The global ring is declared inside
   :where(), which resolves to zero specificity by design, so the legacy rule
   outranks it and the field draws an ORANGE ring while every other control on
   the page draws the white one. That is the audit's "two ring colours in
   production, white on 282 stops and orange on 16", and this is where 16 of
   them are. The rule this file used to carry could not fix it either: at two
   classes it lost to the same legacy rule, so removing it changed nothing
   about this ring.

   THE ELEMENTS ARE NAMED, NOT WRAPPED IN :where(). :where() resolves to zero
   specificity, which is the whole reason the global rule loses here, so using
   it in the answer would lose in the same way. The wrapper class is named as
   well, which puts this rule one class above the legacy one rather than in a
   tie decided by load order.

   :focus IS COVERED AS WELL AS :focus-visible, because the legacy rule paints
   on :focus. Overriding only the visible state would leave the orange ring on
   a mouse click, which is where it is drawn today.

     --focus-ring-inner on --surface-panel  17.54:1
   -------------------------------------------------------------------------- */
#block-frontgrade-content .fg-product .file-attachments__form-embed .webform-submission-form input:focus,
#block-frontgrade-content .fg-product .file-attachments__form-embed .webform-submission-form select:focus,
#block-frontgrade-content .fg-product .file-attachments__form-embed .webform-submission-form textarea:focus,
#block-frontgrade-content .fg-product .file-attachments__form-embed .webform-submission-form input:focus-visible,
#block-frontgrade-content .fg-product .file-attachments__form-embed .webform-submission-form select:focus-visible,
#block-frontgrade-content .fg-product .file-attachments__form-embed .webform-submission-form textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-inner);
  outline-offset: var(--focus-ring-offset);
}

/* The checkbox and radio are drawn by the platform from the accent colour,
   which is the one control property that needs no size or border rule. */
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="checkbox"],
#block-frontgrade-content .fg-product .file-attachments__form-embed input[type="radio"] {
  accent-color: var(--accent);
}

/* The field description and the required marker sit on the same dark ground
   as the label and were left at the previous design's ink. */
#block-frontgrade-content .fg-product .file-attachments__form-embed :where(.form-item__description, .description) {
  color: var(--text-muted);            /* 5.31:1 on --surface-raised */
}

/* --------------------------------------------------------------------------
   7. PARAGRAPH COMPONENTS
   The components keep their own stylesheets, which is what lets a product
   built out of paragraphs go on rendering exactly as it did. The band gives
   them a surface and absorbs the outer margins the first and last component
   would otherwise add to the band's own padding.
   -------------------------------------------------------------------------- */

.fg-product__components > :first-child,
.fg-product__components > .fg-visually-hidden + * { margin-top: 0; }
.fg-product__components > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. CLOSING BAND
   The kit's CTA band, with the heading and the two links the previous
   version's call-to-action carried. The band paints its own surface.
   -------------------------------------------------------------------------- */

.fg-product__cta .fg-cta-band__copy { max-width: var(--measure-body); }
.fg-product__cta h2 { margin: 0; }

/* --------------------------------------------------------------------------
   9. FOCUS

   THERE IS NOTHING HERE, AND THAT IS THE RULE. Contract section 3: one ring,
   it already exists, it is bound globally in components.css on
   :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
   and a component that restates it is exactly how the site arrived at two
   ring colours and twenty nine focus-less stops. This file used to restate it
   at page specificity, together with a second forced-colors fallback beside
   the one components.css already carries.

   The restatement was a copy of the global values, so removing it changes no
   drawn ring; it removes a second place where the ring is defined. Where a
   non-standard element on this page must take a ring it adds the
   .fg-focus-ring class, which components.css already binds to the same
   declaration. The scrollable table region keeps its ring through the global
   rule's [tabindex] branch, which is what it matched before.
     --focus-ring-inner on --surface-base    19.55:1
     --focus-ring-inner on --surface-raised  18.65:1
     --focus-ring-inner on --surface-panel   17.54:1
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. BREAKPOINTS
   -------------------------------------------------------------------------- */

/* 768  ·  the table takes its desktop density and the label column stops
   taking half the row; file rows get their full padding. */
@media (min-width: 768px) {
  .fg-product__table th,
  .fg-product__table td { padding: var(--space-4) var(--space-5); }
  .fg-product__table tbody th { width: 32%; }

  .fg-product__docs .file-attachments a { padding: var(--space-4) var(--space-5); }
  .fg-product__docs .file-attachments__container { gap: var(--space-3); }
}

/* 1280  ·  the label column narrows again now that the row is wide enough
   for long values to sit on one line. */
@media (min-width: 1280px) {
  .fg-product__table tbody th { width: 27%; }
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   tokens.css already collapses every duration to 1ms under the query. The
   two movements on this page are transforms rather than durations, so they
   are stopped outright here.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fg-product__table tbody tr,
  .fg-product__docs .file-attachments a,
  .fg-product__docs .file-attachments a svg { transition: none; }

  .fg-product__docs .file-attachments a:hover svg,
  .fg-product__docs .file-attachments a:focus-visible svg { transform: none; }
}