/* ==========================================================================
   lattice.css — ONY BIOTECH INC
   Clinical grid system: 1px rules, monospace data, lab blue. No radii, no
   shadows, one cyan underline as the single decorative element.
   Every class is namespaced ob-.
   ========================================================================== */

:root {
  --ob-paper: #FFFFFF;
  --ob-ink: #0A1B2A;
  --ob-blue: #1D4ED8;
  --ob-cyan: #06B6D4;
  --ob-rule: #DDE3EA;
  --ob-grey: #5C6B7A;
  --ob-tint: #F6F8FA;
  --ob-gut: 24px;
  --ob-max: 1180px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ob-paper);
  color: var(--ob-ink);
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ob-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--ob-cyan); color: var(--ob-ink); }

:focus-visible { outline: 2px solid var(--ob-blue); outline-offset: 2px; }

/* --------------------------------------------------------------- structure */

.ob-frame {
  width: 100%;
  max-width: var(--ob-max);
  margin: 0 auto;
  padding: 0 var(--ob-gut);
}

.ob-band { border-top: 1px solid var(--ob-rule); padding: 56px 0; }
.ob-band--flush { border-top: 0; }
.ob-band--tint { background: var(--ob-tint); }
.ob-band--tight { padding: 34px 0; }

.ob-cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 32px;
}

.ob-c3 { grid-column: span 3; }
.ob-c4 { grid-column: span 4; }
.ob-c5 { grid-column: span 5; }
.ob-c6 { grid-column: span 6; }
.ob-c7 { grid-column: span 7; }
.ob-c8 { grid-column: span 8; }
.ob-c12 { grid-column: span 12; }

.ob-divide { border-left: 1px solid var(--ob-rule); padding-left: 32px; }
.ob-hr { border: 0; border-top: 1px solid var(--ob-rule); margin: 32px 0; }

/* ------------------------------------------------------------- typography */

.ob-mono,
.ob-idx,
.ob-kicker,
.ob-dl-k,
.ob-dl-v,
.ob-tbl,
.ob-label,
.ob-tag,
.ob-fig-cap,
.ob-buy-price,
.ob-order,
.ob-strip,
.ob-btn {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.ob-idx {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ob-blue);
  margin: 0 0 14px;
}

.ob-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ob-grey);
  margin: 0 0 10px;
}

.ob-h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 18px;
}

.ob-h2 {
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0 0 16px;
}

.ob-h3 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 8px;
}

.ob-uline {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--ob-cyan);
  margin: 0 0 22px;
}

.ob-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ob-ink);
  margin: 0 0 20px;
  max-width: 62ch;
}

.ob-p { margin: 0 0 16px; max-width: 74ch; }
.ob-p:last-child { margin-bottom: 0; }
.ob-quiet { color: var(--ob-grey); }
.ob-small { font-size: 13.5px; line-height: 1.6; }

.ob-list { list-style: none; margin: 0 0 16px; padding: 0; }
.ob-list li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 8px;
  max-width: 74ch;
}
.ob-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ob-cyan);
  font-family: "IBM Plex Mono", monospace;
}

.ob-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ob-blue);
  border: 1px solid var(--ob-blue);
  padding: 3px 8px;
}

/* -------------------------------------------------------------- data rows */

.ob-dl { margin: 0; border-top: 1px solid var(--ob-rule); }

.ob-dl-row {
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ob-rule);
}

.ob-dl-k {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ob-grey);
  margin: 0;
  padding-top: 2px;
}

.ob-dl-v { font-size: 13.5px; margin: 0; color: var(--ob-ink); }

/* ------------------------------------------------------- specification tbl */

.ob-tblwrap { width: 100%; overflow-x: auto; }

.ob-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.ob-tbl caption {
  caption-side: top;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ob-grey);
  padding: 0 0 10px;
}

.ob-tbl th {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ob-ink);
  border-bottom: 2px solid var(--ob-blue);
  padding: 8px 14px 8px 0;
  white-space: nowrap;
}

.ob-tbl td {
  border-bottom: 1px solid var(--ob-rule);
  padding: 9px 14px 9px 0;
  vertical-align: top;
}

.ob-tbl tr td:last-child,
.ob-tbl tr th:last-child { padding-right: 0; }

.ob-tbl-num { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- figures */

.ob-fig { margin: 0; }

/* Photographs arrive in fixed native ratios (16:9, 1:1, 4:3) but the grid
   column they land in is not always that shape, so every figure declares the
   ratio it is being cropped to and covers it. Keeps the 1px rule intact and
   stops the page reflowing while the image loads. */
.ob-fig img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--ob-rule);
  background: var(--ob-tint);
}

.ob-fig--wide img { aspect-ratio: 16 / 9; }
.ob-fig--land img { aspect-ratio: 4 / 3; }
.ob-fig--square img { aspect-ratio: 1 / 1; }
.ob-fig--tall img { aspect-ratio: 3 / 4; }
.ob-fig--band img { aspect-ratio: 21 / 9; }

.ob-fig-cap {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-grey);
  padding-top: 8px;
  max-width: 68ch;
}
.ob-fig-n { color: var(--ob-blue); margin-right: 9px; }

.ob-fig + .ob-fig { margin-top: 24px; }

/* ----------------------------------------------------------------- panels */

.ob-panel { border: 1px solid var(--ob-rule); background: var(--ob-paper); }
.ob-panel-hd {
  border-bottom: 1px solid var(--ob-rule);
  padding: 10px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ob-grey);
}
.ob-panel-bd { padding: 18px; }

.ob-note {
  border: 1px solid var(--ob-rule);
  border-left: 2px solid var(--ob-cyan);
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ob-ink);
  background: var(--ob-paper);
}
.ob-note p { margin: 0 0 10px; max-width: none; }
.ob-note p:last-child { margin-bottom: 0; }

.ob-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ob-rule);
  border-left: 1px solid var(--ob-rule);
}
.ob-card {
  border-right: 1px solid var(--ob-rule);
  border-bottom: 1px solid var(--ob-rule);
  padding: 22px 20px;
}
.ob-card-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ob-blue);
  display: block;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------- question sets */

.ob-qa { border-top: 1px solid var(--ob-rule); }
.ob-qa-item { border-bottom: 1px solid var(--ob-rule); padding: 18px 0; }
.ob-qa-q {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
}
.ob-qa-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ob-blue);
  white-space: nowrap;
}
.ob-qa-a {
  margin: 0 0 0 72px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ob-grey);
  max-width: 82ch;
}
.ob-qa-a + .ob-qa-a { margin-top: 10px; }

/* ------------------------------------------------------------ step blocks */

.ob-steps {
  counter-reset: ob-step;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ob-rule);
}
.ob-steps li {
  counter-increment: ob-step;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--ob-rule);
  max-width: none;
}
.ob-steps li::before {
  content: "[ 0" counter(ob-step) " ]";
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ob-blue);
  position: static;
  padding-top: 3px;
}
.ob-steps span { color: var(--ob-grey); font-size: 14px; }
.ob-steps strong { font-weight: 600; color: var(--ob-ink); }

/* ------------------------------------------------------- document contents */

.ob-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2px 28px;
  border-top: 1px solid var(--ob-rule);
  padding-top: 14px;
  margin-top: 26px;
}
.ob-toc a {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  font-size: 13px;
  padding: 5px 0;
  color: var(--ob-ink);
  border-bottom: 1px solid var(--ob-rule);
}
.ob-toc a:hover { color: var(--ob-blue); text-decoration: none; }
.ob-toc-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ob-blue);
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------- buttons */

.ob-btn {
  display: inline-block;
  border: 1px solid var(--ob-ink);
  background: var(--ob-ink);
  color: var(--ob-paper);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s linear, border-color 0.12s linear;
}
.ob-btn:hover { background: var(--ob-blue); border-color: var(--ob-blue); text-decoration: none; color: var(--ob-paper); }
.ob-btn:disabled { opacity: 0.55; cursor: progress; }

.ob-btn--ghost { background: var(--ob-paper); color: var(--ob-ink); border-color: var(--ob-rule); }
.ob-btn--ghost:hover { background: var(--ob-paper); color: var(--ob-blue); border-color: var(--ob-blue); }

.ob-btn--wide { display: block; width: 100%; }

/* -------------------------------------------------------------- top strip */

.ob-strip {
  border-bottom: 1px solid var(--ob-rule);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ob-grey);
  background: var(--ob-paper);
}
.ob-strip-in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 7px 0;
  align-items: center;
}
.ob-strip a { color: var(--ob-grey); }
.ob-strip a:hover { color: var(--ob-blue); }
.ob-strip-dot { color: var(--ob-rule); }

/* ---------------------------------------------------------------- masthead */

.ob-mast { border-bottom: 1px solid var(--ob-rule); background: var(--ob-paper); }
.ob-mast-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  padding: 18px 0;
}

.ob-mark { display: block; color: var(--ob-ink); }
.ob-mark:hover { text-decoration: none; }
.ob-mark-id {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ob-mark-sub {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ob-grey);
  margin-top: 3px;
}

.ob-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  align-items: center;
}
.ob-nav a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-ink);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.ob-nav a:hover { color: var(--ob-blue); text-decoration: none; border-bottom-color: var(--ob-cyan); }
.ob-nav a[aria-current="page"] { color: var(--ob-blue); border-bottom-color: var(--ob-cyan); }

/* -------------------------------------------------------------------- hero */

.ob-hero { border-bottom: 1px solid var(--ob-rule); padding: 60px 0 56px; position: relative; }
.ob-hero-in {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 34px;
  align-items: start;
}
.ob-hero-copy { grid-column: span 7; }
.ob-hero-side { grid-column: span 5; }
.ob-hero-svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ob-rule);
  border-bottom: 0;
}
.ob-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ob-hero-plate { margin-top: 38px; }

/* Continues the frame the grid motif opens, so the motif and the facts below
   it read as one plate. */
.ob-hero-facts {
  border: 1px solid var(--ob-rule);
  border-top: 0;
  padding: 16px 18px;
}
.ob-hero-facts .ob-dl { border-top: 0; }
.ob-hero-facts .ob-dl-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------------- forms */

.ob-form { max-width: 640px; }
.ob-form--full { max-width: none; }

.ob-field { margin: 0 0 16px; }

.ob-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ob-grey);
  margin-bottom: 6px;
}
.ob-label-opt { text-transform: none; letter-spacing: 0; color: var(--ob-rule); }

.ob-input,
.ob-select,
.ob-textarea {
  width: 100%;
  border: 1px solid var(--ob-rule);
  background: var(--ob-paper);
  color: var(--ob-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 0;
  appearance: none;
}
.ob-input:focus,
.ob-select:focus,
.ob-textarea:focus { outline: 0; border-color: var(--ob-blue); }
.ob-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ob-select { background-image: none; }

.ob-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.ob-trio {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0 20px;
}

.ob-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin: 18px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ob-ink);
}
.ob-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  border: 1px solid var(--ob-ink);
  accent-color: var(--ob-blue);
  border-radius: 0;
}

.ob-status {
  display: none;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid var(--ob-rule);
  border-left: 2px solid var(--ob-grey);
  font-size: 13px;
  line-height: 1.55;
}
.ob-status.is-on { display: block; }
.ob-status--ok { border-left-color: var(--ob-cyan); }
.ob-status--bad { border-left-color: var(--ob-blue); }

/* --------------------------------------------------------------- purchase */

.ob-buys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.ob-buy {
  border: 1px solid var(--ob-rule);
  display: flex;
  flex-direction: column;
  background: var(--ob-paper);
}
.ob-buy--pick { border-color: var(--ob-blue); }

.ob-buy-hd {
  border-bottom: 1px solid var(--ob-rule);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 46px;
}
.ob-buy--pick .ob-buy-hd { border-bottom-color: var(--ob-blue); }

.ob-buy-tier {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.ob-buy-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ob-blue);
  color: var(--ob-paper);
  padding: 3px 8px;
}
.ob-buy-bd { padding: 18px; flex: 1 1 auto; }
.ob-buy-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ob-grey);
  margin: 0 0 14px;
}
.ob-buy-price {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.ob-buy-unit {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ob-grey);
  margin: 6px 0 0;
}
.ob-buy-perks {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--ob-rule);
  font-size: 13px;
}
.ob-buy-perks li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  padding: 4px 0;
}
.ob-buy-perks li::before {
  content: "+";
  font-family: "IBM Plex Mono", monospace;
  color: var(--ob-cyan);
}
.ob-buy-ft { padding: 0 18px 18px; }

/* --------------------------------------------------------------- checkout */

.ob-order { font-size: 13.5px; }
.ob-order-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ob-rule);
}
.ob-order-line span:last-child { white-space: nowrap; }
.ob-order-sum {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 0;
  font-size: 18px;
  font-weight: 600;
  border-top: 2px solid var(--ob-blue);
  margin-top: 4px;
}

.ob-stage { display: none; }
.ob-stage.is-on { display: block; }

.ob-progress {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-grey);
  border: 1px solid var(--ob-rule);
  border-left: 2px solid var(--ob-cyan);
  padding: 14px 16px;
}

.ob-receipt { border: 1px solid var(--ob-blue); }
.ob-receipt-hd {
  background: var(--ob-blue);
  color: var(--ob-paper);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 18px;
}

/* ----------------------------------------------------------------- footer */

.ob-foot { border-top: 1px solid var(--ob-rule); margin-top: 0; }

.ob-foot-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 28px;
  padding: 44px 0 34px;
}
.ob-foot-brand { grid-column: span 4; }
.ob-foot-col { grid-column: span 2; }
.ob-foot-col--wide { grid-column: span 4; }

.ob-foot-h {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ob-grey);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ob-rule);
}
.ob-foot-links { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.ob-foot-links a { color: var(--ob-ink); }
.ob-foot-links a:hover { color: var(--ob-blue); }

.ob-addr {
  font-style: normal;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ob-ink);
}
.ob-addr strong { font-weight: 600; }

.ob-fine {
  border-top: 1px solid var(--ob-rule);
  padding: 22px 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ob-grey);
}
.ob-fine p { margin: 0 0 12px; max-width: none; }
.ob-fine p:last-child { margin-bottom: 0; }
.ob-fine strong { color: var(--ob-ink); font-weight: 600; }
.ob-fine a { color: var(--ob-grey); text-decoration: underline; }
.ob-fine a:hover { color: var(--ob-blue); }

.ob-foot-end {
  border-top: 1px solid var(--ob-rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 14px 0 30px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ob-grey);
}

/* ------------------------------------------------------------------- legal */

.ob-doc { max-width: 78ch; }
.ob-doc-sec { border-top: 1px solid var(--ob-rule); padding: 24px 0 0; margin: 0 0 24px; }
.ob-doc-sec h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.ob-doc-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ob-blue);
  letter-spacing: 0.08em;
}
.ob-doc-sec p { margin: 0 0 12px; }
.ob-doc-sec ul { margin: 0 0 12px; padding-left: 20px; }
.ob-doc-sec li { margin-bottom: 6px; }
.ob-doc-sec strong { font-weight: 600; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .ob-hero-copy,
  .ob-hero-side { grid-column: span 12; }
  .ob-c3, .ob-c4, .ob-c5 { grid-column: span 6; }
  .ob-c6, .ob-c7, .ob-c8 { grid-column: span 12; }
  .ob-foot-brand { grid-column: span 12; }
  .ob-foot-col { grid-column: span 4; }
  .ob-foot-col--wide { grid-column: span 12; }
  .ob-divide { border-left: 0; padding-left: 0; border-top: 1px solid var(--ob-rule); padding-top: 24px; }
  /* Once the columns stack, a square crop would otherwise fill the whole
     viewport; wide and 4:3 crops are fine at full width. */
  .ob-fig--square { max-width: 520px; }
  .ob-qa-q { grid-template-columns: 52px 1fr; }
  .ob-qa-a { margin-left: 0; }
}

@media (max-width: 680px) {
  body { font-size: 15.5px; }
  .ob-band { padding: 40px 0; }
  .ob-hero { padding: 40px 0; }
  .ob-c3, .ob-c4, .ob-c5 { grid-column: span 12; }
  .ob-foot-col { grid-column: span 6; }
  .ob-pair, .ob-trio { grid-template-columns: 1fr; }
  .ob-dl-row { grid-template-columns: 1fr; gap: 2px; }
  .ob-mast-in { align-items: flex-start; }
  .ob-nav { gap: 4px 18px; }
  .ob-buy-price { font-size: 28px; }
  .ob-fig--square { max-width: none; }
  .ob-steps li { grid-template-columns: 1fr; gap: 4px; }
  .ob-qa-q { grid-template-columns: 1fr; gap: 2px; }
}