@charset "UTF-8";
/**
 * Class API for tables produced by the Table Builder tool
 * (`src/components/tools/TableBuilder`).
 *
 * The generated markup lives in CMS content, so it can't use Tailwind — the JIT
 * compiler only scans source files and would purge every class here. Colors
 * arrive as `data-color` tokens that set six custom properties; the `custom`
 * token gets the same properties from an inline `style` attribute instead.
 *
 * Keep the palette below in sync with `TableBuilder/lib/palette.ts`.
 */
/* Desaturated gold: marks the row-label corner without competing with a column color. */
/* The surface a heading takes when no color is picked. Body cells stay white. */
/* The corner flag, from the handoff. */
/* Separates cells where a white gap would cut a continuous color in half. */
/* Heavy rules use the site ink token so they match body copy, not the hairline grey. */
/*
 * Sharp Sans ships one file per weight, so weight alone can't reach the real
 * faces — a browser would synthesise a fake instead. Bold switches family,
 * and the matching weight is kept so the right face is still picked when the
 * variable is missing (e.g. the McLane theme remaps these).
 *
 * Only bold is defined: a global `*` rule already puts the whole site on the
 * semibold face, so a semibold mixin here would be a no-op and would leave row
 * labels looking identical to the cells beside them.
 */
.bsw-table {
  --bsw-table-bg: transparent;
  --bsw-table-fg: #364248;
  --bsw-table-sub-bg: transparent;
  --bsw-table-sub-fg: #364248;
  --bsw-table-tint-a: #ffffff;
  --bsw-table-tint-b: #ffffff;
  container: bsw-table/inline-size;
  margin: 1.5rem 0;
  color: #364248;
  /*
   * A heading with no color still needs a surface, or a keyed column's heading
   * reads as part of the page rather than part of the table.
   *
   * The body rests on white, so an unstriped neutral column is still visibly
   * uncolored. Only its stripe takes the grey — the inverse of every other
   * token, which rests on its tint and lightens for the stripe.
   */
}
.bsw-table [data-color=none] {
  --bsw-table-bg: #f8f8f8;
  --bsw-table-sub-bg: #f8f8f8;
  --bsw-table-tint-b: #f8f8f8;
}
.bsw-table {
  /* Opaque, unlike `transparent`: it covers a colored page section. */
}
.bsw-table [data-color=white] {
  --bsw-table-bg: #ffffff;
  --bsw-table-sub-bg: #ffffff;
  --bsw-table-tint-a: #ffffff;
  --bsw-table-tint-b: #ffffff;
}
.bsw-table {
  /* Every surface unpainted, so whatever the page sits behind it shows through. */
}
.bsw-table [data-color=transparent] {
  --bsw-table-bg: transparent;
  --bsw-table-sub-bg: transparent;
  --bsw-table-tint-a: transparent;
  --bsw-table-tint-b: transparent;
}
.bsw-table [data-color=gold] {
  --bsw-table-bg: #efa724;
  --bsw-table-fg: #364248;
  --bsw-table-sub-bg: #f7be55;
  --bsw-table-sub-fg: #364248;
  --bsw-table-tint-a: #fee9bc;
  --bsw-table-tint-b: #fff8e6;
}
.bsw-table [data-color=green] {
  --bsw-table-bg: #26794c;
  --bsw-table-fg: #ffffff;
  --bsw-table-sub-bg: #2a8353;
  --bsw-table-sub-fg: #ffffff;
  --bsw-table-tint-a: #c2e0dc;
  --bsw-table-tint-b: #ddf5f2;
}
.bsw-table [data-color=blue] {
  --bsw-table-bg: #1f6fb2;
  --bsw-table-fg: #ffffff;
  --bsw-table-sub-bg: #2578bc;
  --bsw-table-sub-fg: #ffffff;
  --bsw-table-tint-a: #e5f5fb;
  --bsw-table-tint-b: #f5feff;
}
.bsw-table [data-color=purple] {
  --bsw-table-bg: #6b4292;
  --bsw-table-fg: #ffffff;
  --bsw-table-sub-bg: #7e52a8;
  --bsw-table-sub-fg: #ffffff;
  --bsw-table-tint-a: #dacde0;
  --bsw-table-tint-b: #fbf4ff;
}
.bsw-table [data-color=red] {
  --bsw-table-bg: #b3243b;
  --bsw-table-fg: #ffffff;
  --bsw-table-sub-bg: #c62c45;
  --bsw-table-sub-fg: #ffffff;
  --bsw-table-tint-a: #ef98a9;
  --bsw-table-tint-b: #f9e8eb;
}

.bsw-table__scroll {
  border-radius: 8px;
  overflow-x: auto;
}
.bsw-table__scroll:focus-visible {
  outline: 2px solid var(--color-primary-a1, #006181);
  outline-offset: 2px;
}

.bsw-table__table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.35;
}

/*
 * A `<col>` width is only a hint under the default auto layout — content can
 * still push a column wider. Fixed makes the percentages binding, which is the
 * point of setting them. Scoped to the flag so markup generated before column
 * widths existed carries no `<colgroup>` and keeps sizing itself.
 */
.bsw-table[data-col-widths=fixed] .bsw-table__table {
  table-layout: fixed;
}

/*
 * Fixed layout won't grow a cell for a word that can't fit, so a long unbroken
 * value would otherwise spill across the column border rather than wrap.
 */
.bsw-table[data-col-widths=fixed] th,
.bsw-table[data-col-widths=fixed] td {
  overflow-wrap: break-word;
}

.bsw-table__caption {
  margin-bottom: 0.75rem;
  caption-side: top;
  text-align: left;
}

.bsw-table__title {
  display: block;
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
  font-size: 1.25rem;
}

.bsw-table__description {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

.bsw-table thead th {
  vertical-align: middle;
  /* Same rule as the body: the gap belongs to the colored cell. */
  border-right: 0;
  padding: 0.75rem 1rem;
  /* The weight comes from <strong> in the markup so a heading can mix the two. */
  font-weight: 400;
  /*
   * A global site rule forces `strong` to the bold face with `!important`, so
   * sub-headings can't be stepped down to semibold the way the handoff does —
   * their smaller size and darker background carry that distinction instead.
   * Declared anyway so the markup still reads correctly pasted elsewhere.
   */
}
.bsw-table thead th strong {
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
}
.bsw-table thead th:last-child {
  border-right: 0;
}
.bsw-table thead th[data-level=group] {
  background: var(--bsw-table-bg);
  color: var(--bsw-table-fg);
}
.bsw-table thead th[data-level=sub] {
  background: var(--bsw-table-sub-bg);
  color: var(--bsw-table-sub-fg);
  font-size: 0.8125rem;
}

/* Headings carry the same white gap their columns do. */
.bsw-table thead th:not([data-color=none]):has(+ th:not([data-color=none])) {
  border-right: 2px solid #ffffff;
}

/*
 * The corner flag, on any heading the author marks.
 *
 * Drawn in CSS rather than shipped as an SVG: the generated markup is pasted
 * into a CMS field, so an `<img>` would need an asset to travel with it and an
 * inline `<svg>` would have to survive the sanitizer. A border triangle needs
 * neither and takes its color from the stylesheet with everything else.
 *
 * A zero-size box with a solid top border and a transparent left border paints
 * the top border as a triangle running from the top-left of the box to its
 * top-right and down to the bottom-right — the shape the handoff traces, once
 * pinned to the corner.
 *
 * Decorative, so no text alternative: it repeats a grouping the heading and
 * its scope already carry.
 */
.bsw-table thead th[data-corner] {
  position: relative;
}
.bsw-table thead th[data-corner]::after {
  position: absolute;
  top: 0;
  right: 0;
  border-top: 2rem solid #ffc342;
  border-left: 2rem solid transparent;
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
}

/*
 * `tiered-columns`: the second heading row reads as the first row of the table
 * rather than a solid band, so the tiers sit with the data they describe. It
 * takes the column tint, keeps the body ink, and a rule closes the header off —
 * without it nothing separates heading from data.
 *
 * A border rather than a shadow: a border stops where the white gap begins, so
 * the rule is broken by the gaps like the rest of the table. A shadow spans the
 * whole border box and would run straight through them. At 1px the corner
 * mitre is a single pixel, which is what made the earlier 3px version look cut
 * off at 45°.
 *
 * It is a fixed ink rather than `--bsw-table-bg`, which is `transparent` on an
 * uncolored column and left the row-label corner with an invisible rule.
 */
.bsw-table[data-variant=tiered-columns] thead th[data-level=sub] {
  border-bottom: 1px solid var(--color-primary-a2, #364248);
  background: var(--bsw-table-tint-a);
  color: #364248;
  /* The row-label corner is called out instead of tinted with its column. */
}
.bsw-table[data-variant=tiered-columns] thead th[data-level=sub][data-align=left]:first-child {
  background: #fdf6e3;
}
.bsw-table[data-variant=tiered-columns] thead th[data-level=sub] a {
  color: inherit;
}

/*
 * `graduated-rows`: one color climbing from a faint tint on the heading to the
 * full color on the last row.
 *
 * Every step is computed per table — the size of a step depends on how many
 * rows there are — so the colors arrive as inline `--bsw-table-*` properties
 * and the existing `data-shade="solid"` rule paints them. Nothing to declare
 * here but the alignment the cells beside the labels need.
 */
.bsw-table[data-variant=graduated-rows] tbody td {
  /* These hold lists: centered, a short list floats away from the label naming it. */
  vertical-align: top;
}

/*
 * `noted-columns`: the first heading row annotates the columns rather than
 * grouping them, so it sits above the colored band instead of joining it.
 *
 * White rather than the neutral heading grey — it reads as a note pinned above
 * the table, not as a second, taller heading. Most of the row is empty, so the
 * outline is drawn only on the cells that actually say something; bordering the
 * blanks would draw a row of empty boxes.
 */
/*
 * The `[data-color]` in the selector is there for weight, not matching: the
 * generic grey rule for uncolored cells comes later in the file and would
 * otherwise draw a line between every empty note.
 */
.bsw-table[data-variant=noted-columns] thead th[data-level=group][data-color] {
  border-right: 0;
  background: #ffffff;
  padding-bottom: 0.5rem;
  font-weight: 400;
  font-size: 0.8125rem;
  text-align: left;
  /* A note is a heading, so it takes the neutral surface the others do. */
}
.bsw-table[data-variant=noted-columns] thead th[data-level=group][data-color]:not(:empty) {
  border: 1px solid var(--color-secondary-a4, #dddddd);
  background: var(--bsw-table-bg);
}

.bsw-table tbody th,
.bsw-table tbody td {
  vertical-align: middle;
  /*
   * No sideways gap by default. A transparent border would still take up 2px,
   * which pushes the neighbouring color away and reads as a seam.
   */
  border-right: 0;
  /*
   * The row gap keeps its width whether or not it shows, so every cell in a row
   * ends at the same height.
   */
  border-bottom: 2px solid transparent;
  padding: 0.875rem 1rem;
}
.bsw-table tbody th:last-child,
.bsw-table tbody td:last-child {
  border-right: 0;
}
.bsw-table tbody th[data-shade=a],
.bsw-table tbody td[data-shade=a] {
  background: var(--bsw-table-tint-a);
}
.bsw-table tbody th[data-shade=b],
.bsw-table tbody td[data-shade=b] {
  background: var(--bsw-table-tint-b);
}
.bsw-table tbody th,
.bsw-table tbody td {
  /* A row-colored leading cell takes the full color, not a tint. */
}
.bsw-table tbody th[data-shade=solid],
.bsw-table tbody td[data-shade=solid] {
  background: var(--bsw-table-bg);
  color: var(--bsw-table-fg);
}

/*
 * Colored cells are separated by a white gap rather than a rule: against a
 * tint, grey reads as a third color while white reads as space.
 *
 * Sideways only. A gap between rows cuts each column into a stack of blocks,
 * which fights the striping that is already separating them — the color is
 * meant to read as one band down the table.
 *
 * `:has()` rather than `:not(:last-child)` because a separator only belongs
 * between two columns of the *same* kind. Where a color meets a neutral column
 * the change of surface is the edge, and drawing a line on top of it reads as a
 * seam.
 */
.bsw-table tbody th:not([data-color=none]):has(+ :not([data-color=none])),
.bsw-table tbody td:not([data-color=none]):has(+ :not([data-color=none])) {
  border-right: 2px solid #ffffff;
}

/*
 * A neutral column has no tint of its own, so nothing separates it from the
 * next neutral column or from the row below. A grey hairline does both jobs the
 * color does elsewhere.
 */
.bsw-table thead th[data-color=none]:has(+ th[data-color=none]),
.bsw-table tbody th[data-color=none]:has(+ [data-color=none]),
.bsw-table tbody td[data-color=none]:has(+ [data-color=none]) {
  border-right: 1px solid var(--color-secondary-a4, #dddddd);
}

.bsw-table tbody th[data-color=none],
.bsw-table tbody td[data-color=none] {
  border-bottom: 1px solid var(--color-secondary-a4, #dddddd);
}

/*
 * The neutral columns are boxed in, which is what stops them reading as empty
 * page beside the colored ones. Top and left here; the bottom comes from the
 * table's own rule below, and the right edge stays open where the color starts.
 */
.bsw-table tbody tr:first-child th[data-color=none],
.bsw-table tbody tr:first-child td[data-color=none] {
  border-top: 1px solid var(--color-secondary-a4, #dddddd);
}

.bsw-table tbody th[data-color=none]:first-child,
.bsw-table tbody td[data-color=none]:first-child {
  border-left: 1px solid var(--color-secondary-a4, #dddddd);
}

/*
 * A table holding a neutral column is closed off in the same hairline that
 * column is drawn with, so the outline does not stop mid-air at the last row.
 *
 * The bottom only. The sides and top belong to whatever sits in them, and a
 * full frame around a mostly-colored table reads as a box drawn around the
 * table rather than part of it. A table with no neutral column gets nothing:
 * its own color already bounds it.
 */
.bsw-table__table:has([data-color=none]) {
  border-bottom: 1px solid var(--color-secondary-a4, #dddddd);
}

/* The table's rule draws this edge already; a second line doubles its weight. */
.bsw-table__table:has([data-color=none]) tbody tr:last-child th[data-color=none],
.bsw-table__table:has([data-color=none]) tbody tr:last-child td[data-color=none] {
  border-bottom: 0;
}

/*
 * `graduated-rows` rules its cells instead of gapping them.
 *
 * A white gap works where each column is its own block of color. Here the whole
 * table is one hue at varying strength, so a gap cuts the ramp into pieces and
 * loses the thing the template exists to show. A hairline separates without
 * interrupting.
 *
 * The rules sit on **group** edges, not column edges: the three columns under
 * one heading are one field split for layout, and ruling between them would
 * claim they are three. `data-group-end` marks the last body cell of each
 * group, which the header already states with `colspan`.
 *
 * The heading takes the same rule as the cells below it, so a group reads as
 * one column from its title down.
 */
.bsw-table[data-variant=graduated-rows] tbody th:not([data-color=none]),
.bsw-table[data-variant=graduated-rows] tbody td:not([data-color=none]) {
  border-right: 0;
}
.bsw-table[data-variant=graduated-rows] {
  /*
   * The `thead` selector is no more specific than the base white-gap rule it
   * replaces, so it wins on order alone — adding a `:not()` to it here would
   * out-specify the rule below and silently drop the heading's rule.
   */
}
.bsw-table[data-variant=graduated-rows] thead th:not(:last-child),
.bsw-table[data-variant=graduated-rows] tbody th[data-group-end]:not(:last-child),
.bsw-table[data-variant=graduated-rows] tbody td[data-group-end]:not(:last-child) {
  border-right: 1px solid var(--color-secondary-a4, #dddddd);
}
.bsw-table[data-variant=graduated-rows] tbody th,
.bsw-table[data-variant=graduated-rows] tbody td,
.bsw-table[data-variant=graduated-rows] tbody th:not([data-color=none]),
.bsw-table[data-variant=graduated-rows] tbody td:not([data-color=none]) {
  border-bottom: 1px solid var(--color-secondary-a4, #dddddd);
}
.bsw-table[data-variant=graduated-rows] {
  /*
   * The one boundary the hairlines miss. Every other pair of ramp steps is
   * separated by a row rule, but the heading is step 0 and the first row's
   * label is step 1, and nothing sits between them — so the two palest steps
   * blur into a single block.
   *
   * White rather than the hairline grey because this line falls inside the
   * colored column, where grey reads as a third color and white reads as
   * space. The data columns change tint at the same boundary and separate
   * themselves, so they don't take it.
   *
   * Hung off the first row's ramp cells rather than the headings above them:
   * `data-shade="solid"` already marks exactly the cells that need it, however
   * many keyed columns the author asked for. Keying off the heading would mean
   * counting columns in CSS.
   */
}
.bsw-table[data-variant=graduated-rows] tbody tr:first-child [data-shade=solid] {
  border-top: 2px solid #ffffff;
}
.bsw-table[data-variant=graduated-rows] {
  /* The table's own edge closes the last row; a second line reads as a gap. */
}
.bsw-table[data-variant=graduated-rows] tbody tr:last-child th,
.bsw-table[data-variant=graduated-rows] tbody tr:last-child td {
  border-bottom: 0;
}
.bsw-table[data-variant=graduated-rows] {
  /*
   * A long list flows into however many columns its cell is wide enough for.
   *
   * Width-driven rather than a fixed count: the wide examples cell gets three
   * and a narrow cost cell gets one, without the author splitting their data
   * across table columns to get the look. Keeping it one cell is also what
   * lets a trailing note run the full width underneath — the columns live on
   * the list, so the note beside it is unaffected.
   */
}
.bsw-table[data-variant=graduated-rows] .bsw-table__list {
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  -moz-column-width: 8rem;
  column-width: 8rem;
}
.bsw-table[data-variant=graduated-rows] .bsw-table__list li {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}

/* Inline **bold** an author wrote inside a cell. */
.bsw-table tbody strong {
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
}

/*
 * Links an author wrote as `[text](url)`. Underlined rather than color-only,
 * because a colored word inside a colored cell is not a reliable signal
 * (WCAG 2.1 §1.4.1).
 */
.bsw-table a {
  color: var(--color-primary-a1, #006181);
  text-decoration: underline;
}
.bsw-table a:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

/*
 * Row headings read as bold, the same as column headings and by the same
 * means: the weight comes from a real <strong> in the markup, so the copied
 * table says what it means and an author who marked only part of a label with
 * `**` gets that part bold and the rest plain. The browser default would bold
 * the whole cell and overrule them.
 */
.bsw-table tbody th {
  font-weight: 400;
}

/*
 * Horizontal alignment, chosen per column role by the template: row labels read
 * as text so they align left, while figures line up for comparison when they're
 * centered. Emitted as `data-align` on every cell rather than inferred from the
 * column index, so the rule survives an author reordering their CSV.
 */
.bsw-table [data-align=left] {
  text-align: left;
}

.bsw-table [data-align=center] {
  text-align: center;
}

/* Cells holding prose or lists read better left-aligned whatever the template says. */
.bsw-table tbody td:has(.bsw-table__list) {
  text-align: left;
}

/*
 * Vertically merged cells.
 *
 * The first cell of a run carries `rowspan`; the rows it swallows still emit
 * their own copy of the value, marked `data-merge="repeat"`. `display: none`
 * takes those copies out of the table grid entirely, so the span lines up on
 * desktop — and the stacked rules below put them back once each row becomes a
 * card, which is the only way a card can keep a value the span took away.
 */
.bsw-table tbody [data-merge=repeat] {
  display: none;
}

/*
 * Horizontally merged cells.
 *
 * The anchor carries the `colspan`; the columns it swallows still emit their
 * own copy of the value, marked `data-col-repeat`. `display: none` drops those
 * copies from the grid so the span lines up on desktop, and the stacked rules
 * below put them back so every card keeps its own value.
 */
.bsw-table tbody [data-col-repeat] {
  display: none;
}

/* Top, not middle: a label spanning a tall band should sit beside the first row
   it covers rather than floating halfway down the group. */
.bsw-table tbody [data-merge=start] {
  vertical-align: top;
}

/*
 * Cells merged across a row.
 *
 * A cell covering several columns belongs to all of them, so it takes the color
 * of none: tinted with its leftmost column it would read as that column's
 * answer with the others merely borrowing it. White says it spans them.
 *
 * Centered for the same reason — the value answers for the whole span, so
 * pinning it to the left edge points it at the first column. The vertical
 * centering also overrules the `data-merge="start"` rule above, for a cell that
 * is merged both ways at once.
 *
 * `[colspan]` rather than a new attribute: the renderer only ever emits it on a
 * real span, so the span is already saying so in the markup.
 *
 * Desktop only in effect — the stacked rules below out-specify this, which is
 * right, because a card has no span for the color to be neutral about.
 */
.bsw-table tbody th[colspan],
.bsw-table tbody td[colspan] {
  vertical-align: middle;
  background: #ffffff;
  text-align: center;
}

/*
 * Vertical alignment.
 *
 * A flag on the table sets every body cell; a flag on a row out-specifies it, so
 * one row can pin its content to the top while the rest stay centered.
 */
.bsw-table[data-valign=top] tbody th,
.bsw-table[data-valign=top] tbody td {
  vertical-align: top;
}

.bsw-table[data-valign=middle] tbody th,
.bsw-table[data-valign=middle] tbody td {
  vertical-align: middle;
}

.bsw-table tbody tr[data-valign=top] th,
.bsw-table tbody tr[data-valign=top] td {
  vertical-align: top;
}

.bsw-table tbody tr[data-valign=middle] th,
.bsw-table tbody tr[data-valign=middle] td {
  vertical-align: middle;
}

/*
 * Monikers.
 *
 * Authoring aid injected by the Table Builder preview: numbers down the rows so
 * a row can be matched to its color picker, letters across sub-columns so a
 * column can be matched to its corner-flag checkbox. Both repeat their labels
 * often enough that the pickers would otherwise be indistinguishable.
 *
 * Scoped to `.bsw-table-preview`, which only the tool renders — a published
 * table has no such ancestor, so these rules can never apply to real content.
 *
 * Taken out of flow and pinned to the cell corner: the preview has to show the
 * real layout, and a badge sitting in the text would re-wrap the very cells the
 * author is judging.
 */
.bsw-table-preview .bsw-table thead th,
.bsw-table-preview .bsw-table tbody th,
.bsw-table-preview .bsw-table tbody td {
  position: relative;
}

.bsw-table-preview .bsw-table__moniker,
.bsw-table-preview .bsw-table__column-moniker {
  display: inline-flex;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  justify-content: center;
  align-items: center;
  opacity: 0.75;
  border: 1px solid currentcolor;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  font-weight: 600;
  font-size: 0.7em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The flag owns that corner, so the letter steps aside rather than under it. */
.bsw-table-preview .bsw-table th[data-corner] .bsw-table__column-moniker {
  right: 2rem;
}

/*
 * Skeleton.
 *
 * The picked template drawn at full size with nothing in it, so the preview
 * pane is never an empty box before any data is pasted. Same markup and same
 * attributes as a real table — only the content is replaced — so the shape on
 * screen is the template's own behavior rather than a second drawing of it that
 * could drift.
 *
 * Also scoped to `.bsw-table-preview`: nothing published ever carries it.
 */
.bsw-table-preview .bsw-table[data-skeleton] {
  --bsw-table-skeleton-bar: currentcolor;
}

.bsw-table-preview .bsw-table__skeleton {
  display: block;
  opacity: 0.25;
  border-radius: 999px;
  background: var(--bsw-table-skeleton-bar);
  width: 100%;
  height: 0.7em;
}

/*
 * A bar on a neutral cell has no color of its own to borrow, so it takes the
 * ink at a weight that still reads as a placeholder rather than as text.
 */
.bsw-table-preview .bsw-table[data-skeleton] [data-color=none] .bsw-table__skeleton {
  opacity: 0.15;
}

/* The label column sets the rhythm, so its bars stay a little shorter. */
.bsw-table-preview .bsw-table[data-skeleton] tbody th .bsw-table__skeleton {
  width: 70%;
}

/*
 * When the table is narrower than the breakpoint each row becomes a card: the
 * header is hidden and every cell announces its own column via `data-label`,
 * which is the only pattern that survives grouped headers without horizontal
 * scrolling.
 */
/*
 * `blocks` mode: cells hold prose and lists rather than single values, so the
 * label/value split would be nonsense. Cells go full width and drop the label.
 */
/*
 * `scroll` mode: too many columns to card sensibly, so keep the grid and let it
 * scroll sideways. This is the one variant that opts out of stacking entirely.
 */
/*
 * `column` orientation (`data-orient='column'`): swap the desktop table for the
 * compact, column-major cards block the generator emitted beside it. Only the
 * toggle is scoped to the breakpoint; the card visuals below are plain rules,
 * since the block is `display: none` until this fires.
 */
/*
 * Column-cards visuals. Neutral by design — the block carries labels and values
 * only, no per-cell color — so the pasted markup stays small. Hidden until the
 * container query above swaps it in.
 */
.bsw-table__cards {
  display: none;
}

.bsw-table__card {
  margin-bottom: 1rem;
  border: 1px solid #d7dde1;
  border-radius: 8px;
  overflow: hidden;
}
.bsw-table__card:last-child {
  margin-bottom: 0;
}

.bsw-table__card-title {
  margin: 0;
  /* Set by the card's own data-color, so it wears the group's tint. */
  background: var(--bsw-table-bg);
  padding: 0.75rem 1rem;
  color: var(--bsw-table-fg);
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.3;
}

.bsw-table__card-section + .bsw-table__card-section {
  border-top: 1px solid #d7dde1;
}

.bsw-table__card-subtitle {
  margin: 0;
  padding: 0.625rem 1rem 0;
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
  opacity: 0.7;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bsw-table__card-pairs,
.bsw-table__card-values {
  margin: 0;
  padding: 0;
  text-align: left;
}

.bsw-table__card-values {
  list-style: none;
}

/*
 * The row label sits above its value as a quiet kicker; the value leads. Rows
 * zebra-stripe in the card's own tints (a dt and its dd share a band, so they
 * take the same nth tint), the darker step first to follow the colored title.
 */
.bsw-table__card-pairs dt {
  opacity: 0.7;
  padding: 0.5rem 1rem 0;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.bsw-table__card-pairs dd {
  margin: 0;
  padding: 0 1rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.bsw-table__card-pairs dt:nth-of-type(odd),
.bsw-table__card-pairs dd:nth-of-type(odd) {
  background: var(--bsw-table-tint-a);
}

.bsw-table__card-pairs dt:nth-of-type(even),
.bsw-table__card-pairs dd:nth-of-type(even) {
  background: var(--bsw-table-tint-b);
}

.bsw-table__card-values li {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.bsw-table__card-values li:nth-child(odd) {
  background: var(--bsw-table-tint-a);
}
.bsw-table__card-values li:nth-child(even) {
  background: var(--bsw-table-tint-b);
}

/*
 * Stacking keys off the table's own width, not the viewport, so a table placed
 * in a narrow column stacks on desktop too — and the builder's device preview
 * can trigger it by resizing the wrapper.
 */
@container bsw-table (max-width: 767px) {
  .bsw-table__table,
  .bsw-table tbody,
  .bsw-table tbody tr,
  .bsw-table tbody th,
  .bsw-table tbody td {
    display: block;
    width: 100%;
  }
  /* Restore the copies the rowspan hid, so every card carries its own value. */
  .bsw-table tbody th[data-merge=repeat],
  .bsw-table tbody td[data-merge=repeat] {
    display: flex;
  }
  /* Same for the columns a colspan swallowed: each becomes its own card cell. */
  .bsw-table tbody th[data-col-repeat],
  .bsw-table tbody td[data-col-repeat] {
    display: flex;
  }
  /*
   * Once a row is a card, per-column band shading would tint cells inside the
   * same card differently. The row's own shade wins instead; each cell still
   * resolves its column's tint, so the card stays one step of the stripe.
   */
  .bsw-table tbody tr[data-shade=a] td:not([data-shade=solid]) {
    background: var(--bsw-table-tint-a);
  }
  .bsw-table tbody tr[data-shade=b] td:not([data-shade=solid]) {
    background: var(--bsw-table-tint-b);
  }
  /* A table-caption inside a block table shrink-to-fits, so force it wide. */
  .bsw-table__caption {
    display: block;
    width: 100%;
  }
  .bsw-table thead {
    position: absolute;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
  .bsw-table tbody tr {
    margin-bottom: 1rem;
    border: 1px solid #d7dde1;
    border-right: 0;
    border-radius: 8px;
    overflow: hidden;
  }
  .bsw-table tbody th,
  .bsw-table tbody td {
    border-right: 0;
    text-align: left;
  }
  /* Colored desktop column gaps become unnecessary once each row is a card. */
  .bsw-table tbody th:not([data-color=none]),
  .bsw-table tbody td:not([data-color=none]) {
    border-right: 0;
  }
  /* Separate stacked column cells without adding a trailing bottom rule. */
  .bsw-table tbody tr > :not(:last-child) {
    border-bottom: 2px solid #ffffff;
  }
  .bsw-table tbody th[scope=row] {
    background: var(--bsw-table-bg);
    color: var(--bsw-table-fg);
  }
  /*
   * The row-label cell is the card's title: its group/sub label reads as a small
   * kicker (both lines quiet) over the value beneath it.
   */
  .bsw-table tbody th[scope=row][data-align] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-block: 0.875rem;
    font-size: 1rem;
    line-height: 1.35;
    text-align: left;
  }
  .bsw-table tbody th[scope=row][data-align]::before {
    content: attr(data-label);
    white-space: pre-line;
    font-weight: var(--font-weight-bold, 700);
    font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
    opacity: 0.7;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /*
   * A data cell shows its column label on the left and the value on the right.
   * The sub-column is the prominent line — it's what actually names the value —
   * so it stays a readable size rather than a tiny kicker.
   */
  .bsw-table tbody td[data-align] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-block: 0.75rem;
    text-align: right;
  }
  .bsw-table tbody td[data-align]::before {
    flex: 1 1 45%;
    content: attr(data-label);
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: left;
  }
  /*
   * When the column sits under a group, the group name rides above the
   * sub-column as a small kicker, so the two-row header still reads on a card.
   */
  .bsw-table tbody td[data-align][data-group] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    row-gap: 0;
    align-items: start;
  }
  .bsw-table tbody td[data-align][data-group]::before {
    grid-row: 1;
    grid-column: 1;
    content: attr(data-group);
    font-weight: var(--font-weight-bold, 700);
    font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
    flex: none;
    opacity: 0.7;
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .bsw-table tbody td[data-align][data-group]::after {
    grid-row: 2;
    grid-column: 1;
    content: attr(data-label);
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: left;
  }
  .bsw-table[data-mobile=blocks] tbody td {
    display: block;
    text-align: left;
  }
  .bsw-table[data-mobile=blocks] tbody td::before {
    content: none;
  }
  /* The row-label cell becomes the card header instead. */
  .bsw-table[data-mobile=blocks] tbody th[scope=row] {
    font-size: 1rem;
  }
  .bsw-table[data-mobile=scroll] .bsw-table__table,
  .bsw-table[data-mobile=scroll] tbody,
  .bsw-table[data-mobile=scroll] tbody tr,
  .bsw-table[data-mobile=scroll] tbody th,
  .bsw-table[data-mobile=scroll] tbody td {
    display: revert;
    width: auto;
  }
  .bsw-table[data-mobile=scroll] {
    /* This mode keeps the real grid, so the spans stand and the copies stay out. */
  }
  .bsw-table[data-mobile=scroll] tbody [data-merge=repeat],
  .bsw-table[data-mobile=scroll] tbody [data-col-repeat] {
    display: none;
  }
  .bsw-table[data-mobile=scroll] thead {
    position: static;
    -webkit-clip-path: none;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
  }
  .bsw-table[data-mobile=scroll] tbody tr {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
  }
  .bsw-table[data-mobile=scroll] tbody th,
  .bsw-table[data-mobile=scroll] tbody td {
    border-right: 1px solid #d7dde1;
    text-align: center;
  }
  .bsw-table[data-mobile=scroll] tbody th::before,
  .bsw-table[data-mobile=scroll] tbody td::before {
    content: none;
  }
  .bsw-table[data-mobile=scroll] .bsw-table__table {
    min-width: 820px;
  }
  .bsw-table[data-orient=column] .bsw-table__scroll {
    display: none;
  }
  .bsw-table[data-orient=column] .bsw-table__cards {
    display: block;
  }
}
/* Viewport fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .bsw-table__table,
    .bsw-table tbody,
    .bsw-table tbody tr,
    .bsw-table tbody th,
    .bsw-table tbody td {
      display: block;
      width: 100%;
    }
    /* Restore the copies the rowspan hid, so every card carries its own value. */
    .bsw-table tbody th[data-merge=repeat],
    .bsw-table tbody td[data-merge=repeat] {
      display: flex;
    }
    /* Same for the columns a colspan swallowed: each becomes its own card cell. */
    .bsw-table tbody th[data-col-repeat],
    .bsw-table tbody td[data-col-repeat] {
      display: flex;
    }
    /*
     * Once a row is a card, per-column band shading would tint cells inside the
     * same card differently. The row's own shade wins instead; each cell still
     * resolves its column's tint, so the card stays one step of the stripe.
     */
    .bsw-table tbody tr[data-shade=a] td:not([data-shade=solid]) {
      background: var(--bsw-table-tint-a);
    }
    .bsw-table tbody tr[data-shade=b] td:not([data-shade=solid]) {
      background: var(--bsw-table-tint-b);
    }
    /* A table-caption inside a block table shrink-to-fits, so force it wide. */
    .bsw-table__caption {
      display: block;
      width: 100%;
    }
    .bsw-table thead {
      position: absolute;
      -webkit-clip-path: inset(50%);
      clip-path: inset(50%);
      width: 1px;
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
    }
    .bsw-table tbody tr {
      margin-bottom: 1rem;
      border: 1px solid #d7dde1;
      border-right: 0;
      border-radius: 8px;
      overflow: hidden;
    }
    .bsw-table tbody th,
    .bsw-table tbody td {
      border-right: 0;
      text-align: left;
    }
    /* Colored desktop column gaps become unnecessary once each row is a card. */
    .bsw-table tbody th:not([data-color=none]),
    .bsw-table tbody td:not([data-color=none]) {
      border-right: 0;
    }
    /* Separate stacked column cells without adding a trailing bottom rule. */
    .bsw-table tbody tr > :not(:last-child) {
      border-bottom: 2px solid #ffffff;
    }
    .bsw-table tbody th[scope=row] {
      background: var(--bsw-table-bg);
      color: var(--bsw-table-fg);
    }
    /*
     * The row-label cell is the card's title: its group/sub label reads as a small
     * kicker (both lines quiet) over the value beneath it.
     */
    .bsw-table tbody th[scope=row][data-align] {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
      padding-block: 0.875rem;
      font-size: 1rem;
      line-height: 1.35;
      text-align: left;
    }
    .bsw-table tbody th[scope=row][data-align]::before {
      content: attr(data-label);
      white-space: pre-line;
      font-weight: var(--font-weight-bold, 700);
      font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
      opacity: 0.7;
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    /*
     * A data cell shows its column label on the left and the value on the right.
     * The sub-column is the prominent line — it's what actually names the value —
     * so it stays a readable size rather than a tiny kicker.
     */
    .bsw-table tbody td[data-align] {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      padding-block: 0.75rem;
      text-align: right;
    }
    .bsw-table tbody td[data-align]::before {
      flex: 1 1 45%;
      content: attr(data-label);
      font-size: 0.9375rem;
      line-height: 1.3;
      text-align: left;
    }
    /*
     * When the column sits under a group, the group name rides above the
     * sub-column as a small kicker, so the two-row header still reads on a card.
     */
    .bsw-table tbody td[data-align][data-group] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      -moz-column-gap: 1rem;
      column-gap: 1rem;
      row-gap: 0;
      align-items: start;
    }
    .bsw-table tbody td[data-align][data-group]::before {
      grid-row: 1;
      grid-column: 1;
      content: attr(data-group);
      font-weight: var(--font-weight-bold, 700);
      font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
      flex: none;
      opacity: 0.7;
      font-size: 0.6875rem;
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .bsw-table tbody td[data-align][data-group]::after {
      grid-row: 2;
      grid-column: 1;
      content: attr(data-label);
      font-size: 0.9375rem;
      line-height: 1.3;
      text-align: left;
    }
    .bsw-table[data-mobile=blocks] tbody td {
      display: block;
      text-align: left;
    }
    .bsw-table[data-mobile=blocks] tbody td::before {
      content: none;
    }
    /* The row-label cell becomes the card header instead. */
    .bsw-table[data-mobile=blocks] tbody th[scope=row] {
      font-size: 1rem;
    }
    .bsw-table[data-mobile=scroll] .bsw-table__table,
    .bsw-table[data-mobile=scroll] tbody,
    .bsw-table[data-mobile=scroll] tbody tr,
    .bsw-table[data-mobile=scroll] tbody th,
    .bsw-table[data-mobile=scroll] tbody td {
      display: revert;
      width: auto;
    }
    .bsw-table[data-mobile=scroll] {
      /* This mode keeps the real grid, so the spans stand and the copies stay out. */
    }
    .bsw-table[data-mobile=scroll] tbody [data-merge=repeat],
    .bsw-table[data-mobile=scroll] tbody [data-col-repeat] {
      display: none;
    }
    .bsw-table[data-mobile=scroll] thead {
      position: static;
      -webkit-clip-path: none;
      clip-path: none;
      width: auto;
      height: auto;
      overflow: visible;
      white-space: normal;
    }
    .bsw-table[data-mobile=scroll] tbody tr {
      margin-bottom: 0;
      border: 0;
      border-radius: 0;
    }
    .bsw-table[data-mobile=scroll] tbody th,
    .bsw-table[data-mobile=scroll] tbody td {
      border-right: 1px solid #d7dde1;
      text-align: center;
    }
    .bsw-table[data-mobile=scroll] tbody th::before,
    .bsw-table[data-mobile=scroll] tbody td::before {
      content: none;
    }
    .bsw-table[data-mobile=scroll] .bsw-table__table {
      min-width: 820px;
    }
    .bsw-table[data-orient=column] .bsw-table__scroll {
      display: none;
    }
    .bsw-table[data-orient=column] .bsw-table__cards {
      display: block;
    }
  }
}
/* Bullet lists authored with "- " inside a CSV cell. */
.bsw-table__list {
  margin: 0;
  padding-left: 1.1em;
  /* Explicit: the site reset strips markers, and these are pasted into it. */
  list-style: disc outside;
}
.bsw-table__list li + li {
  margin-top: 0.25rem;
}

/*
 * A caveat written under a list — "X and Y are unavailable here".
 *
 * Smaller than the list it qualifies so it reads as an aside rather than a
 * sixth bullet. It keeps the cell's own ink rather than the handoff's grey:
 * this is content, and grey-on-tint would fail contrast on the deeper steps of
 * a ramp. Size and spacing carry the demotion instead.
 */
.bsw-table__note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/*
 * Two-line headings: "Tier 1" over "BSW Premier".
 *
 * The break comes from the second line being a block, not from the <strong> —
 * every heading carries one of those now, and bolding part of a single-line
 * heading must not push the rest onto its own line.
 */
.bsw-table thead th span {
  display: block;
  opacity: 0.9;
  font-weight: 400;
  font-size: 0.75rem;
}

/*
 * Styles needed for a per-table basis and from overrides done on pages.
 *
 */
@charset "UTF-8";
.table-title {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.bsw-table__title {
  color: var(--color-secondary-a1);
  font-family: var(--font-sharp-sans-semibold), "Sharp Sans", sans-serif;
}

@container bsw-table (max-width: 767px) {
  .bsw-table__title {
    font-size: 1rem;
  }
  .bsw-table tbody th:not([data-color=none]):has(+ :not([data-color=none])),
  .bsw-table tbody td:not([data-color=none]):has(+ :not([data-color=none])) {
    border-right: none;
  }
}
@media screen and (max-width: 847px) {
  .bsw-table__card-pairs dt {
    opacity: 1;
  }
}
.benefits .rich-text.table-header h2 {
  padding-block: 1rem !important;
}

.preview-only {
  display: none;
}

@media screen and (max-width: 847px) {
  .bsw-table__card-pairs dt {
    opacity: 1 !important;
  }
}
.benefits .chip {
  flex: 1;
  position: relative;
  padding-left: 20px;
}

.benefits .rich-text p.chip {
  font-size: 14px !important;
}

@media screen and (max-width: 679px) {
  .benefits .flex:has(.chip) {
    flex-direction: column;
  }
}
@media screen and (min-width: 1200px) {
  .benefits .flex:has(.chip) {
    justify-content: space-between;
  }
}
.benefits .chip strong {
  color: var(--color-secondary-a1);
}

.benefits .chip:before {
  width: 0;
  height: 0;
  border-top: 12px solid var(--color-primary-b2);
  border-left: 12px solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 5px;
}

.presentation-layer {
  display: none;
}

#b002a .bsw-table thead th span {
  font-size: initial;
  font-family: var(--font-sharp-sans-bold);
}

/* Merged cells keep their column tint instead of the global white colspan fill. */
#b003 .bsw-table tbody td[colspan][data-shade=a] {
  background: var(--bsw-table-tint-a);
}

#b003 .bsw-table tbody td[colspan][data-shade=b] {
  background: var(--bsw-table-tint-b);
}

#b003 .bsw-table tbody th[colspan], #b003 .bsw-table tbody td[colspan] {
  background: revert-rule !important;
}

#b004 bsw-table thead th[data-corner]::after {
  position: absolute;
  top: 0;
  right: 0;
  border-top: 2rem solid #fff;
  border-left: 2rem solid transparent;
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
}

#b004 .bsw-table thead th[data-corner]::before {
  position: absolute;
  top: 0;
  right: 0;
  border-right: 2rem solid transparent;
  border-bottom: 2rem solid;
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
}

#b004 .bsw-table thead th[data-color=purple]::before {
  border-bottom-color: #d38ad6;
}

#b004 .bsw-table thead th[data-color=blue]::before {
  border-bottom-color: #8a9ad6;
}

#b004 .bsw-table thead th[data-color=green]::before {
  border-bottom-color: #8ad697;
}

#b004 .bsw-table thead th[data-color=gold]::before {
  border-bottom-color: #f4db4d;
}

#b004 .bsw-table thead th[data-color=red]::before {
  border-bottom-color: #f44d90;
}

#b004 .table-icon {
  width: 100%;
}

#b004 .table-icon img {
  width: 100px;
}

#b004 th[scope=col]:has(.table-icon) {
  font-size: 1.2rem;
}

#b004 .bsw-table[data-valign=top] tbody th,
.bsw-table[data-valign=top] tbody td {
  vertical-align: top; 
}

@media (min-width: 831px) {
  #b004 .bsw-table[data-valign=top] tbody th,
  .bsw-table[data-valign=top] tbody td {
    width: 20%;
  }
}

#b004 .bsw-table tbody td {
  border-bottom: 3px solid #ffffff !important;
}

#b004 .bsw-table thead th[data-corner]::after {
  border-top-color: #fff;
}

#b005 thead tr th:first-child {
  background-color: transparent !important;
}

#b005 td[data-color=blue]:nth-of-type(2) {
  background-color: #f5feff;
}

#b005 td[data-color=purple]:nth-of-type(2) {
  background-color: #fbf4ff;
}

#b005 td[data-color=green]:nth-of-type(2) {
  background-color: #ddf5f2;
}

/* Mobile first: tier → available with → network. Desktop puts all three in one row. */
#b005 .tiers {
  container: tiers/inline-size;
  margin: 1.5rem 0;
}

#b005 .tiers__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#b005 .tier {
  --tier-bg: #f3f3f4;
  --tier-rule: #d3d3db;
  display: grid;
  grid-template-areas: "level" "plans" "network";
  gap: 1.5rem;
  margin: 0;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 6px solid var(--tier-rule);
  border-bottom: 1px solid #6f7377;
  background: var(--tier-bg);
  color: #5a5f63;
}

#b005 .tier + .tier {
  margin-top: 0.5rem;
}

#b005 .tier[data-tier="1"] {
  --tier-bg: #e7f4f1;
  --tier-rule: #00a383;
}

#b005 .tier__level {
  grid-area: level;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "title title" "cost summary";
  align-items: center;
  gap: 0.5rem 0.75rem;
}

#b005 .tier__network {
  grid-area: network;
}

#b005 .tier__plans {
  grid-area: plans;
}

#b005 .tier__title,
#b005 .tier__network-title,
#b005 .tier__plans-title {
  margin: 0 0 0.75rem;
  color: #3f4448;
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
}

#b005 .tier__title {
  grid-area: title;
  margin: 0;
}

#b005 .tier__summary {
  grid-area: summary;
  margin: 0;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
}

#b005 .tier__cost {
  grid-area: cost;
  display: flex;
  gap: 0.25rem;
  margin: 0;
}

#b005 .tier__coin {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #00957a;
  color: #fff;
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
}

#b005 .tier__network p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

#b005 .tier__plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#b005 .tier__plan-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--plan);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.7;
}

#b005 .tier__plan-list li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  border-top: 0.6rem solid var(--plan);
  border-left: 0.6rem solid transparent;
}

#b005 [data-plan=epo] {
  --plan: #00957a;
}

#b005 [data-plan=ppo] {
  --plan: #1f87d0;
}

#b005 [data-plan=hdhp] {
  --plan: #8a5ab5;
}

/* Desktop: tier | network | available with */
@container tiers (min-width: 720px) {
  #b005 .tier {
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.75fr) -webkit-max-content;
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.75fr) max-content;
    grid-template-areas: "level network plans";
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    padding: 1.5rem 2rem 4rem;
  }
  #b005 .tier__level {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "summary" "cost";
    align-items: start;
    align-content: start;
  }
  #b005 .tier__title {
    margin-bottom: 0.25rem;
  }
}
#b007 .bsw-table[data-variant=tiered-columns] thead th[data-level=sub] {
  background: var(--bsw-table-tint-b);
}

#b007 .hard-border-bottom {
  position: relative;
}

#b007 .hard-border-bottom:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #364248;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* The spanning cell is the only one carrying anything, so it alone gets a surface. */
#b009 .bsw-table thead tr[data-row=note] > *:not(:empty) {
  border: 1px solid var(--color-secondary-a4, #dddddd);
  background: #f8f8f8;
  padding: 0.5rem 1rem;
}

#b009 thead > tr:is(:first-child) th:first-child {
  background: transparent !important;
}

#b009 thead > tr:is(:nth-child(2)) th:first-child {
  background: transparent !important;
}

#b010 .bsw-table tbody th[colspan][data-shade=a],
#b010 .bsw-table tbody td[colspan][data-shade=a] {
  background: var(--bsw-table-tint-a);
  text-align: left;
}

#b010 .bsw-table tbody th[colspan][data-shade=b],
#b010 .bsw-table tbody td[colspan][data-shade=b] {
  background: var(--bsw-table-tint-b);
  text-align: left;
}

@media screen and (max-width: 847px) {
  #b010 .bsw-table__card-pairs dt {
    opacity: 1;
  }
}
#b011a .bsw-table {
  container: bsw-preview/inline-size;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#b011a .bsw-table .bsw-table__scroll {
  display: block;
  width: 100%;
  overflow: hidden;
}

#b011a .bsw-table .bsw-table__cards {
  display: none;
}

/* A differently named container still disables every @container bsw-table rule */
#b011b .bsw-table {
  container: bsw-preview/inline-size;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#b011b .bsw-table .bsw-table__scroll {
  display: block;
  width: 100%;
  overflow: hidden;
}

#b011b .bsw-table .bsw-table__cards {
  display: none;
}

#b012 .bsw-table thead th:not([data-merge]) {
  border: 2px solid #fff !important;
}

#b012 .bsw-table tbody th:not([data-merge]):not([data-color=none]),
#b012 .bsw-table tbody td:not([data-merge]):not([data-color=none]) {
  border-color: #fff !important;
}

@container bsw-table (max-width: 767px) {
  #b012 .bsw-table tbody td[data-shade=b] {
    background: var(--bsw-table-tint-b) !important;
  }
}
@container bsw-table (max-width: 767px) {
  #b012 .bsw-table tbody tr[data-shade=b] td:not([data-shade=solid]) {
    background: var(--bsw-table-tint-b) !important;
  }
}
/*
   * Grouped card cells: the group name gets its own full-width line, and the
   * column label and value split the line beneath it evenly.
   */
@container bsw-table (max-width: 767px) {
  #b013.bsw-table tbody td[data-align]::before {
    flex: 0 0 50%;
    overflow-wrap: break-word;
  }
  #b013 .bsw-table tbody td[data-align][data-group] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 0.25rem;
  }
  #b013 .bsw-table tbody td[data-align][data-group]::before {
    grid-column: 1/-1;
    overflow-wrap: break-word;
  }
  #b013 .bsw-table tbody td[data-align][data-group]::after {
    grid-column: 1;
    overflow-wrap: break-word;
  }
  #b013 td:has(a) {
    grid-template-columns: repeat(1, 1fr) !important;
    text-align: left;
  }
}
#b013 td {
  text-wrap: pretty;
}

#b013 thead > tr:is(:first-child) th:first-child {
  background: transparent !important;
}

#b013 thead > tr:is(:nth-child(2)) th:first-child {
  background: transparent !important;
}

@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    #b013 .bsw-table tbody td[data-align]::before {
      flex: 0 0 50%;
      overflow-wrap: break-word;
    }
    #b013 .bsw-table tbody td[data-align][data-group] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      row-gap: 0.25rem;
    }
    #b013 .bsw-table tbody td[data-align][data-group]::before {
      grid-column: 1/-1;
      overflow-wrap: break-word;
    }
    #b013 .bsw-table tbody td[data-align][data-group]::after {
      grid-column: 1;
      overflow-wrap: break-word;
    }
  }
}
#b015 .bsw-table tbody th:not([data-color=none]),
#b015 .bsw-table tbody td:not([data-color=none]) {
  border-color: #fff !important;
}

#b015 td {
  text-wrap: pretty;
}

/* Mobile cards: one card per attained-age band, per the design reference. */
#b018 .ci-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
  background: #364248;
  color: #ffffff;
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
}

#b018 .ci-card__head > * {
  padding: 0.75rem 1rem;
  text-align: center;
}

#b018 .ci-card__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2px;
  margin-top: 2px;
}

#b018 .ci-card__row > * {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25;
  text-align: center;
}

#b018 .ci-card__tier {
  background: #26794c;
  color: #ffffff;
  font-weight: var(--font-weight-bold, 700);
  font-family: var(--font-sharp-sans-bold), "Sharp Sans", sans-serif;
}

#b018 .ci-card__amount {
  background: #ddf5f2;
}

#b018 .ci-card__value {
  background: #c2e0dc;
}

#b018 .bsw-table [data-color=white] {
  --bsw-table-bg: #1b2a32;
  --bsw-table-sub-bg: #1b2a32;
  --bsw-table-tint-a: #1b2a32;
  --bsw-table-tint-b: #1b2a32;
  color: #ffffff;
}

.benefits .footnotes p:not([class]):not(.card *):not(.gallery-card-description *):not(.tabSwitcher *) {
  font-size: 14px !important;
  color: var(--color-secondary-a2);
}

.benefits .footnotes p.chip {
  font-size: 14px !important;
  color: var(--color-secondary-a2) !important;
}