/* Local Transcriber — styled per DESIGN.md ("Dell 1996" catalog-era language).
   Rules: black page frame, flat fills, 0 radius (seals only are round), hard 1px
   borders and hard bevels, no soft shadows, no gradients, no opacity, no hover states.
   System fonts only: Arial Black (display) · Helvetica (UI) · Times New Roman (body). */

:root {
  color-scheme: light;

  /* colors */
  --primary: #e91d2a;
  --on-primary: #ffffff;
  --canvas: #ffffff;
  --surface: #ffffff;
  --ink: #000000;
  --frame-ink: #000000;
  --yellow-sticker: #fcc20f;
  --purple-stripe: #6a26a4;
  --link: #0000ee;

  --tint-olive: #8e8a25;
  --tint-sage: #b3bd95;
  --tint-salmon: #d77a7a;
  --tint-peach: #e6915d;
  --tint-lime: #c0d4a7;
  --tint-sky: #9ab6c8;
  --tint-steel: #a5b8c0;
  --tint-periwinkle: #8c9ae0;

  /* type families */
  --f-display: "Arial Black", "Arial Bold", Gadget, Helvetica, Arial, system-ui, sans-serif;
  --f-sans: Helvetica, Arial, system-ui, sans-serif;
  --f-serif: "Times New Roman", Times, serif;
  --f-mono: "Courier New", Courier, monospace;

  /* spacing */
  --xxs: 2px; --xs: 4px; --s: 6px; --sm: 8px; --m: 10px; --md: 12px;
  --lg: 16px; --xl: 20px; --xxl: 24px;
  --section-sm: 32px; --section: 40px; --section-lg: 48px;

  /* elevation */
  --hairline: 1px solid var(--frame-ink);
  --bevel: 2px 2px 0 var(--frame-ink);
  --frame: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--frame-ink);
  color: var(--ink);
  font: 400 14px/1.4 var(--f-serif);
}
img, video, svg { display: block; max-width: 100%; }
svg { flex: none; }
b, strong { font-weight: 700; }
p { margin: 0 0 var(--sm); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; }
code, pre, kbd { font-family: var(--f-mono); font-size: 13px; }
mark { background: var(--yellow-sticker); color: var(--ink); }

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link); }
:focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }

/* ============ page-frame ============ */
.page-frame { background: var(--frame-ink); padding: var(--frame); min-height: 100vh; }
/* fluid column up to ~1900px, so 16:9 and ultrawide desktops use the width; past that it sits centered with white gutters inside the frame */
.page { background: var(--canvas); min-height: calc(100vh - 2 * var(--frame)); padding: 0 max(var(--lg), calc((100% - 1856px) / 2)) var(--lg); }

/* ============ top-banner ============ */
.top-banner {
  background: var(--frame-ink); color: var(--canvas);
  margin: 0 calc(-1 * var(--lg)) var(--lg);
  padding: var(--md) var(--lg);
  display: flex; align-items: center; gap: var(--lg);
}
.top-banner :focus-visible { outline-color: var(--canvas); }
.logo { display: flex; align-items: center; gap: var(--sm); color: var(--canvas); text-decoration: none; font: 900 14px/1 var(--f-display); text-transform: uppercase; }
.logo:visited { color: var(--canvas); }
.logo img { width: 40px; height: 40px; }
.banner-copy { flex: 1; min-width: 0; }
.banner-head { font: 700 16px/1.2 var(--f-sans); text-transform: uppercase; margin: 0 0 var(--xs); }
.banner-sub { font: 400 12px/1.4 var(--f-serif); margin: 0; }
.banner-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sm); }

.buy-sticker {
  background: var(--yellow-sticker); color: var(--ink); border: var(--hairline);
  font: 700 12px/1 var(--f-sans); text-transform: uppercase; text-decoration: none;
  padding: var(--xs) var(--sm); white-space: nowrap;
  box-shadow: inset 1px 1px 0 var(--canvas), var(--bevel);
  outline: 1px solid var(--canvas); outline-offset: 0;
}
.buy-sticker:visited { color: var(--ink); }
.buy-sticker .stripe { background: var(--purple-stripe); color: var(--canvas); padding: 0 var(--xs); text-transform: lowercase; }

.phone-callout {
  background: var(--frame-ink); color: var(--primary);
  font: 700 16px/1.2 var(--f-sans); text-transform: uppercase; text-decoration: none;
  padding: var(--xs) var(--sm); white-space: nowrap;
}
.phone-callout:visited { color: var(--primary); }

/* ============ home: left rail + right column ============ */
/* the rail runs beside every section and stays in view while scrolling */
.home { display: grid; grid-template-columns: clamp(220px, 24%, 300px) minmax(0, 1fr); gap: var(--lg) var(--xxl); align-items: start; }
.rail { position: sticky; top: var(--lg); z-index: 20; }
@media (max-height: 640px) and (min-width: 1025px) { .rail { position: static; } }
/* the right column is a size container: its parts adapt to the room they get, not to the viewport */
.col { container: col / inline-size; }

.icon-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hairline); border-left: var(--hairline); }
.icon-grid a, .icon-label-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--xs);
  background: var(--canvas); color: var(--ink); text-decoration: none; text-align: center;
  font: 700 12px/1 var(--f-sans); text-transform: uppercase;
  padding: var(--sm);
}
.icon-grid a { border-right: var(--hairline); border-bottom: var(--hairline); min-height: 64px; }
.icon-grid a[aria-current="true"] { background: var(--yellow-sticker); }
.icon-grid a:visited, .icon-label-nav a:visited { color: var(--ink); }

.cta-block-red {
  background: var(--primary); color: var(--on-primary); border: var(--hairline);
  font: 400 14px/1.4 var(--f-serif);
  padding: var(--lg); margin-top: var(--lg);
}
.cta-block-red p { margin-bottom: var(--md); }
.cta-block-red .btn { margin-top: var(--xs); }

/* ============ section eyebrow blocks ============ */
.eyebrow {
  color: var(--ink); font: 900 clamp(26px, 1.6vw + 18px, 52px)/1 var(--f-display); text-transform: uppercase;
  padding: var(--xxl) var(--lg); overflow-wrap: anywhere;
}
.eyebrow-olive { background: var(--tint-olive); }
.eyebrow-salmon { background: var(--tint-salmon); }

/* ============ intro ============ */
.intro { padding: var(--lg) 0; }
.intro h1 { font: 900 clamp(22px, 1vw + 17px, 34px)/1.05 var(--f-display); margin-bottom: var(--md); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sm); margin: var(--md) 0; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--xs) var(--lg); font-size: 12px; }
.checks li::before { content: "■ "; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s);
  font: 700 12px/1 var(--f-sans); text-transform: uppercase; text-decoration: none;
  padding: var(--s) var(--lg); border: var(--hairline); border-radius: 0; cursor: pointer;
  background: var(--canvas); color: var(--ink);
}
.btn-primary, .btn-primary:visited { background: var(--frame-ink); color: var(--on-primary); }
.btn-secondary, .btn-secondary:visited, a.btn:not(.btn-primary):visited { background: var(--canvas); color: var(--ink); }
.btn-lg { padding: var(--m) var(--xl); }
.btn-sm { padding: var(--xs) var(--m); }
.btn[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
.btn .sub { font: 400 12px/1 var(--f-serif); text-transform: none; margin-left: var(--xs); }
.cta-block-red .btn-primary { outline: 1px solid var(--canvas); }
button { font: inherit; color: inherit; }

/* ============ product photo ============ */
.product-photo { position: relative; margin: 0 0 var(--lg); }
.reel-box { position: relative; border: var(--hairline); box-shadow: var(--bevel); background: var(--frame-ink); }
.reel-box video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); outline: 1px solid var(--canvas); }
.reel-box.playing .reel-play { display: none; }
.product-photo figcaption { font-size: 12px; margin-top: var(--sm); }

/* ============ stickers ============ */
.new-burst {
  position: absolute; z-index: 2;
  background: var(--yellow-sticker); color: var(--ink);
  font: 700 12px/1 var(--f-sans); text-transform: uppercase;
  padding: var(--xs) var(--sm); border: var(--hairline);
  box-shadow: inset 1px 1px 0 var(--canvas), var(--bevel);
  transform: rotate(15deg);
}
.product-photo .new-burst { top: -10px; right: -8px; }
.ribbon .new-burst { top: -8px; right: 28%; }

.cert-seal {
  position: absolute; left: -12px; bottom: 22px; z-index: 2;
  width: 64px; height: 64px; border-radius: 9999px;
  background: var(--primary); color: var(--canvas);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 11px/1.05 var(--f-sans);
  box-shadow: inset 0 0 0 4px var(--primary), inset 0 0 0 5px var(--canvas), var(--bevel);
}

/* ============ sections ============ */
.section { padding-top: var(--section); scroll-margin-top: var(--md); }
.section-lede { margin: var(--lg) 0 var(--section-sm); }
.section-lede b { font-family: var(--f-sans); text-transform: uppercase; font-size: 14px; display: block; margin-bottom: var(--xs); }

/* ============ ribbon cards ============ */
.ribbons { display: grid; gap: var(--lg); }
.ribbons-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: var(--lg); }
/* features: two cards per row once each can be 460px+, otherwise one; never three (10 cards would leave an orphan) */
#features .ribbons { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(460px, calc((100% - var(--lg)) / 2))), 1fr)); gap: var(--xxl) var(--lg); }
#features .ribbon { display: flex; flex-direction: column; }
#features .ribbon-body { flex: 1; }
/* each card is its own size container, so its notch stacks when the card (not the screen) gets narrow */
.ribbon { position: relative; border: var(--hairline); container-type: inline-size; }
.ribbon-title {
  background: var(--canvas); color: var(--ink); border-bottom: var(--hairline);
  font: 700 14px/1.2 var(--f-sans); text-transform: uppercase;
  padding: var(--s) var(--md);
}
.ribbon-body {
  display: flex; align-items: center; gap: var(--lg);
  color: var(--ink); font: 400 14px/1.4 var(--f-serif);
  padding: var(--md) var(--lg);
}
.ribbon-body > p { flex: 1; margin: 0; }
.tint-sage .ribbon-body { background: var(--tint-sage); }
.tint-salmon .ribbon-body { background: var(--tint-salmon); }
.tint-peach .ribbon-body { background: var(--tint-peach); }
.tint-lime .ribbon-body { background: var(--tint-lime); }
.tint-sky .ribbon-body { background: var(--tint-sky); }
.tint-steel .ribbon-body { background: var(--tint-steel); }
.tint-periwinkle .ribbon-body { background: var(--tint-periwinkle); }

/* photo notch: right ~25%, hanging above and below the body bar */
.notch {
  flex: 0 0 25%; min-width: max-content; max-width: 55%;
  margin: calc(-1 * var(--xl)) 0;
  background: var(--canvas); border: var(--hairline); box-shadow: var(--bevel);
  padding: var(--s) var(--sm);
  font: 400 11px/1.35 var(--f-serif);
}
.notch pre { margin: 0; font-size: 11px; line-height: 1.35; white-space: pre; overflow: hidden; }
.notch small { display: block; font-size: 11px; }
.text-input {
  display: block; background: var(--canvas); color: var(--ink); border: var(--hairline);
  font: 400 14px/1.4 var(--f-serif); padding: var(--xs) var(--s); margin-bottom: var(--xs);
}

/* ============ privacy data table ============ */
.data-table, .matrix { width: 100%; border-collapse: collapse; border: var(--hairline); background: var(--surface); }
.data-table th, .data-table td, .matrix th, .matrix td {
  border-bottom: var(--hairline); padding: var(--s) var(--md); text-align: left; vertical-align: top;
  font: 400 12px/1.4 var(--f-serif);
}
.data-table thead th, .matrix thead th { font: 700 11px/1.35 var(--f-serif); text-transform: uppercase; }
.data-table tbody th { font: 700 12px/1.2 var(--f-sans); text-transform: uppercase; }
.data-table .st { font: 700 12px/1.2 var(--f-sans); text-transform: uppercase; white-space: nowrap; }

.zeros { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--hairline); border-top: 0; }
.zeros div { padding: var(--md); text-align: center; font-size: 12px; background: var(--tint-periwinkle); }
.zeros div + div { border-left: var(--hairline); }
.zeros b { display: block; font: 900 36px/1 var(--f-display); }

/* ============ download ============ */
.dl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md); margin-bottom: var(--lg); }
.rel-chip { display: flex; align-items: center; gap: var(--s); font-size: 12px; }
.rel-chip b { font: 700 12px/1 var(--f-sans); }
.rel-chip .dot { width: 10px; height: 10px; background: var(--frame-ink); border: var(--hairline); }
.rel-chip .dot.pending { background: var(--yellow-sticker); }

.os-tabs { display: flex; }
.os-tab {
  display: inline-flex; align-items: center; gap: var(--s);
  background: var(--canvas); color: var(--ink); border: var(--hairline); border-radius: 0;
  font: 700 12px/1 var(--f-sans); text-transform: uppercase; padding: var(--s) var(--lg); cursor: pointer;
}
.os-tab + .os-tab { border-left: 0; }
.os-tab[aria-selected="true"] { background: var(--frame-ink); color: var(--on-primary); }
.os-tab .you { background: var(--yellow-sticker); color: var(--ink); border: var(--hairline); font-size: 10px; padding: 1px var(--xs); }

.dl-note { display: flex; gap: var(--sm); align-items: flex-start; background: var(--yellow-sticker); border: var(--hairline); padding: var(--sm) var(--md); font-size: 12px; margin: 0 0 var(--lg); }
.dl-note[hidden] { display: none; }
.dl-counter { margin-top: var(--section-sm); }
.dl-counter[hidden] { display: none; }
.dl-count { font: 900 40px/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dl-main { display: grid; grid-template-columns: 1fr 1fr; border: var(--hairline); }
.primary-dl { padding: var(--lg); border-right: var(--hairline); }
.os-name { display: flex; align-items: center; gap: var(--md); margin-bottom: var(--md); }
.os-name svg { width: 32px; height: 32px; }
.os-name h3 { font: 900 24px/1.05 var(--f-display); }
.req { font-size: 12px; margin: 0; }
.fname { font: 400 11px/1.35 var(--f-mono); margin: var(--s) 0 var(--md); overflow-wrap: anywhere; }
.install-steps { margin: 0; padding-left: var(--xl); font-size: 14px; }
.install-steps li { margin-bottom: var(--sm); }
.code { display: flex; align-items: center; gap: var(--sm); background: var(--canvas); border: var(--hairline); padding: var(--xs) var(--xs) var(--xs) var(--s); font: 400 12px/1.4 var(--f-mono); margin-top: var(--xs); overflow-wrap: anywhere; }
.code .copy { margin-left: auto; }
.copy { display: inline-flex; align-items: center; justify-content: center; background: var(--canvas); color: var(--ink); border: var(--hairline); padding: 3px; cursor: pointer; vertical-align: middle; }
.copy.done { background: var(--frame-ink); color: var(--on-primary); }

.bin-table { padding: var(--md) var(--lg); background: var(--tint-steel); }
.bin-table h4 { display: flex; justify-content: space-between; font: 700 12px/1.2 var(--f-sans); text-transform: uppercase; border-bottom: var(--hairline); padding-bottom: var(--s); margin-bottom: var(--xs); }
.bin { display: flex; align-items: center; gap: var(--sm); padding: var(--s) 0; border-bottom: var(--hairline); }
.bin > div { flex: 1; min-width: 0; }
.bin .nm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xs) var(--s); font-size: 14px; }
.bin .nm strong { font: 700 12px/1.2 var(--f-sans); text-transform: uppercase; }
.bin .ext, .bin .arch { font: 400 11px/1 var(--f-mono); }
.bin .meta { display: flex; flex-wrap: wrap; gap: 0 var(--sm); font: 400 11px/1.35 var(--f-serif); overflow-wrap: anywhere; }
.rec, .latest { background: var(--yellow-sticker); color: var(--ink); border: var(--hairline); font: 700 10px/1 var(--f-sans); text-transform: uppercase; padding: 2px var(--xs); }
.pre { background: var(--canvas); color: var(--ink); border: var(--hairline); font: 700 10px/1 var(--f-sans); text-transform: uppercase; padding: 2px var(--xs); }

.block { margin-top: var(--section-sm); }
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--md); background: var(--frame-ink); color: var(--canvas); padding: var(--md) var(--lg); }
.block-head h3 { font: 700 16px/1.2 var(--f-sans); text-transform: uppercase; }
.block-head p { font-size: 12px; margin: var(--xxs) 0 0; }
.filter { display: flex; }
.filter button { background: var(--canvas); color: var(--ink); border: 1px solid var(--canvas); border-radius: 0; font: 700 12px/1 var(--f-sans); text-transform: uppercase; padding: var(--xs) var(--m); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--yellow-sticker); }
.block-head :focus-visible { outline-color: var(--canvas); }

.release { border: var(--hairline); border-top: 0; overflow-x: auto; }
.release summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); padding: var(--s) var(--md); cursor: pointer; list-style: none; background: var(--canvas); }
.release summary::-webkit-details-marker { display: none; }
.release summary::before { content: "[+]"; font: 700 12px/1 var(--f-mono); }
.release[open] summary::before { content: "[−]"; }
.release summary .v { font: 700 14px/1.2 var(--f-sans); }
.release summary .date, .release summary .count { font-size: 12px; }
.release summary .count { margin-left: auto; }
.matrix { border: 0; border-top: var(--hairline); min-width: 560px; }
.matrix td.f { font-family: var(--f-mono); font-size: 11px; overflow-wrap: anywhere; }
.matrix td.a { text-align: right; }
.plat { display: inline-flex; align-items: center; gap: var(--xs); white-space: nowrap; }
.plat svg { width: 13px; height: 13px; }
.rel-notes { padding: var(--s) var(--md); font-size: 12px; border-top: var(--hairline); }

.terminals { display: grid; grid-template-columns: 1fr 1fr; border: var(--hairline); border-top: 0; }
.terminal { margin: 0; padding: var(--md); background: var(--canvas); font: 400 12px/1.4 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal + .terminal { border-left: var(--hairline); }
.terminal .c { font-style: italic; }

/* ============ FAQ ============ */
.faq { margin-top: var(--section-sm); border: var(--hairline); }
.faq details + details { border-top: var(--hairline); }
.faq summary { display: flex; gap: var(--sm); cursor: pointer; list-style: none; padding: var(--s) var(--md); font: 700 14px/1.2 var(--f-sans); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "[+]"; font-family: var(--f-mono); }
.faq details[open] summary::before { content: "[−]"; }
.faq details[open] summary { border-bottom: var(--hairline); }
.faq details p { margin: 0; padding: var(--md) var(--lg); background: var(--tint-lime); }

/* ============ footer-band ============ */
.footer-band { margin-top: var(--section); border-top: var(--hairline); padding: var(--lg); background: var(--canvas); font: 400 12px/1.4 var(--f-serif); text-align: center; }
.icon-label-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin-bottom: var(--lg); }
.icon-label-nav::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 20px; border-top: var(--hairline); }
.icon-label-nav a { position: relative; }
.icon-label-nav svg { background: var(--canvas); padding: 0 var(--xs); box-sizing: content-box; }
.footer-band .legal { font-size: 14px; }
.footer-band .small { font-size: 11px; line-height: 1.35; }

/* ============ toast ============ */
.toast {
  position: fixed; left: 50%; bottom: var(--xl); transform: translateX(-50%); z-index: 50;
  background: var(--surface); color: var(--ink); border: var(--hairline); box-shadow: var(--bevel);
  font: 400 12px/1.4 var(--f-serif); padding: var(--md) var(--lg);
  visibility: hidden;
}
.toast.on { visibility: visible; }

/* ============ responsive ============ */
/* component layouts follow the width of the right column */
@container col (min-width: 880px) {
  .hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--xxl); align-items: center; padding: var(--lg) 0; }
  .hero .intro { padding: 0; }
  .hero .product-photo { margin: 0; }
}
@container col (max-width: 700px) {
  .dl-main, .terminals { grid-template-columns: 1fr; }
  .primary-dl { border-right: 0; border-bottom: var(--hairline); }
  .terminal + .terminal { border-left: 0; border-top: var(--hairline); }
}
@container (max-width: 600px) {
  .ribbon-body { flex-direction: column; align-items: stretch; }
  .notch { order: -1; flex-basis: auto; min-width: 0; max-width: none; margin: 0; }
}

/* tablets and phones: the rail turns into a sticky, horizontally scrolling nav strip above the content */
@media (max-width: 1024px) {
  .home { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: sticky; top: 0;
    margin: 0 calc(-1 * var(--lg)) var(--sm);
    background: var(--canvas); border-bottom: var(--hairline);
  }
  .icon-grid {
    display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    border: 0; border-top: var(--hairline);
  }
  .icon-grid::-webkit-scrollbar { display: none; }
  .icon-grid a { flex: 1 0 auto; min-width: 84px; min-height: 56px; border-bottom: 0; padding: var(--s) var(--sm); font-size: 11px; white-space: nowrap; }
  .icon-grid a:last-child { border-right: 0; }
  .icon-grid svg { width: 20px; height: 20px; }
  .top-banner { margin-bottom: 0; }
  .cta-block-red { display: none; }
  .section { scroll-margin-top: 72px; }
}
@media (max-width: 768px) {
  :root { --frame: 4px; }
  .banner-head { font-size: 14px; }
  .ribbon .new-burst { right: var(--sm); }
  .btn, .os-tab, .filter button, .icon-label-nav a { min-height: 44px; }
}
@media (max-width: 600px) {
  .top-banner { flex-wrap: wrap; }
  .banner-copy { flex-basis: 100%; order: 2; }
  .banner-right { margin-left: auto; }
  .dl-top { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  :root { --frame: 2px; }
  .page { padding: 0 var(--m) var(--m); }
  .top-banner { margin: 0 calc(-1 * var(--m)) 0; }
  .rail { margin: 0 calc(-1 * var(--m)) var(--sm); }
  .banner-sub { display: none; }
  .eyebrow { padding: var(--lg) var(--md); }
  .os-tabs { width: 100%; }
  .os-tab { flex: 1; justify-content: center; padding: var(--s) var(--sm); }
  .zeros b { font-size: 26px; }
  .data-table th, .data-table td { padding: var(--s) var(--sm); }
  .cert-seal { left: -4px; width: 56px; height: 56px; font-size: 10px; }
  .cta-row .btn { flex: 1 1 100%; }
}

/* ============ fixes ============ */
.ribbons-3 .ribbon { display: flex; flex-direction: column; }
.ribbons-3 .ribbon-body { flex: 1; align-items: flex-start; }
.icon-label-nav a { background: transparent; }
.btn .sub { white-space: nowrap; }
.phone-callout #heroVer { text-transform: none; }
.reel-play { top: auto; bottom: var(--lg); transform: translateX(-50%); }
.product-photo figcaption { padding-left: 60px; }