/* ============================================================================
   oopbuycoupon.com — stylesheet
   ----------------------------------------------------------------------------
   Two things are borrowed from oopbuy.com and nothing else is:

     1. the palette and geometry — primary #ff186b, page #f3f3f3, card #fff,
        line #e8eaec, text #1a1a1a / #666 / #8d867f, 3px base radius, the
        Helvetica Neue stack, and the [data-theme] switch. Every value below
        was read out of the live stylesheet, not eyeballed.
     2. the iView component feel — 1px lines, quiet surfaces, a header that
        sits still.

   What is NOT borrowed is the type scale. oopbuy.com runs a vw-based scale
   whose body text lands at 10.5px on a 1440px screen, which is a catalogue
   convention: it fits more rows above the fold. This site is read, not
   scanned — a finds guide is paragraphs of reasoning and a checklist you
   print — so the scale is set in px at a readable size and the components
   keep oopbuy's proportions around it.

   Type scale (base 16px, mobile steps down through clamp):
     11.5rem-scale   token        desktop   use
     ---------------------------------------------------------------
     --oc-fs-xs      13px         meta, counts, badges, crumb
     --oc-fs-sm      14px         table cells, secondary UI, footer
     --oc-fs-base    16px         body, prose, nav
     --oc-fs-md      17px         lede / page intro
     --oc-fs-lg      19px         h3
     --oc-fs-xl      20px         card headings
     --oc-fs-2xl     23px         h2
     --oc-fs-3xl     30px         h1 (page head)
     --oc-fs-4xl     38px         h1 (home hero)
   ========================================================================== */

/* --------------------------------------------------------------- tokens ---- */

:root {
  color-scheme: light;

  /* brand */
  --oc-primary: #ff186b;
  --oc-primary-hover: #ff4689;
  --oc-primary-active: #e01560;
  --oc-primary-soft: #ffe6eb;
  --oc-primary-soft-2: #ffd1e1;
  --oc-primary-tint: #ffadd2;
  --oc-primary-ring: rgba(255, 24, 107, 0.2);

  /* surfaces */
  --oc-page: #f3f3f3;
  --oc-page-alt: #f8f8f9;
  --oc-card: #fff;
  --oc-card-alt: #fafafa;
  --oc-inset: #f7f7f7;
  --oc-hover: #f5f5f5;

  /* lines */
  --oc-line: #e8eaec;
  --oc-line-strong: #dcdee2;
  --oc-line-soft: #e4e4e7;

  /* text */
  --oc-text: #1a1a1a;
  --oc-text-2: #666;
  --oc-text-3: #8d867f;

  /* semantics */
  --oc-success: #51b481;
  --oc-danger: #f03f3f;
  --oc-warning: #edaf41;
  --oc-slate: #515a6e;
  --oc-success-soft: #eaf7f0;
  --oc-danger-soft: #fdeeee;
  --oc-warning-soft: #fdf4e3;
  --oc-slate-soft: #eff1f4;

  /* coupon decoration */
  --oc-gold: #b87c32;
  --oc-gold-deep: #a5570d;
  --oc-gold-soft: #fff5da;
  --oc-gold-soft-2: #fffaef;
  --oc-gold-line: #f0dfb8;

  /* geometry */
  --oc-radius-sm: 2px;
  --oc-radius: 3px;
  --oc-radius-lg: 6px;
  --oc-radius-pill: 75px;

  /* type */
  --oc-font: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
  --oc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --oc-fs-xs: 13px;
  --oc-fs-sm: 14px;
  --oc-fs-base: 16px;
  --oc-fs-md: 17px;
  --oc-fs-lg: 19px;
  --oc-fs-xl: 20px;
  --oc-fs-2xl: 23px;
  --oc-fs-3xl: 30px;
  --oc-fs-4xl: 38px;
  --oc-lh-body: 1.65;
  --oc-lh-prose: 1.72;
  --oc-lh-head: 1.24;

  /* rhythm */
  --oc-sp-1: 4px;
  --oc-sp-2: 8px;
  --oc-sp-3: 12px;
  --oc-sp-4: 16px;
  --oc-sp-5: 20px;
  --oc-sp-6: 24px;
  --oc-sp-7: 32px;
  --oc-sp-8: 44px;

  /* layout */
  --oc-max: 1200px;
  --oc-prose: 72ch;
  --oc-gutter: 20px;
  --oc-header-h: 62px;

  --oc-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --oc-shadow-2: 0 2px 10px rgba(0, 0, 0, 0.08);
  --oc-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --oc-page: #1e1714;
  --oc-page-alt: #221a16;
  --oc-card: #262019;
  --oc-card-alt: #2b241c;
  --oc-inset: #211a15;
  --oc-hover: #322a21;
  --oc-line: #3a3129;
  --oc-line-strong: #4a3f34;
  --oc-line-soft: #3a3129;
  --oc-text: #e7e5e4;
  --oc-text-2: #b9b2aa;
  --oc-text-3: #8d867f;
  --oc-invert: #1e1714;
  --oc-primary-soft: #3a1f2b;
  --oc-primary-soft-2: #4a2434;
  --oc-success-soft: #1e2f27;
  --oc-danger-soft: #33201f;
  --oc-warning-soft: #33291a;
  --oc-slate-soft: #26292f;
  --oc-gold-soft: #332b1c;
  --oc-gold-soft-2: #2b2418;
  --oc-gold-line: #4a3d28;
  --oc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --oc-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4);
  --oc-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- reset ---- */

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

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

/* A sticky header eats the first 62px of any anchor jump. */
[id], :target { scroll-margin-top: calc(var(--oc-header-h) + 12px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--oc-font);
  font-size: var(--oc-fs-base);
  line-height: var(--oc-lh-body);
  color: var(--oc-text);
  background: var(--oc-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; }

/* Product images are laid out by aspect-ratio; keeping their intrinsic size
   unknown would make every card jump as it loads. */
img[width][height] { background: var(--oc-inset); }

a { color: var(--oc-primary); text-decoration: none; }
a:hover { color: var(--oc-primary-hover); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  margin: 0 0 var(--oc-sp-2);
  font-weight: 700;
  line-height: var(--oc-lh-head);
  color: var(--oc-text);
  text-wrap: balance;
}
h1 { font-size: var(--oc-fs-3xl); letter-spacing: -0.011em; }
h2 { font-size: var(--oc-fs-2xl); letter-spacing: -0.006em; }
h3 { font-size: var(--oc-fs-lg); }
h4 { font-size: var(--oc-fs-base); }

p {
  margin: 0 0 var(--oc-sp-3);
  text-wrap: pretty;
  max-width: var(--oc-prose);
}
ul, ol { margin: 0 0 var(--oc-sp-3); padding-left: 1.35em; }
li { margin-bottom: var(--oc-sp-1); line-height: var(--oc-lh-prose); }
li > ul, li > ol { margin-top: var(--oc-sp-1); }

hr { border: 0; border-top: 1px solid var(--oc-line); margin: var(--oc-sp-6) 0; }

code, kbd, samp { font-family: var(--oc-mono); font-size: 0.9em; }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--oc-primary);
  outline-offset: 2px;
  border-radius: var(--oc-radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--oc-primary); color: #fff;
  padding: 10px 16px; border-radius: var(--oc-radius);
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------- primitives -- */

.oc-wrap { width: 100%; max-width: var(--oc-max); margin: 0 auto; padding: 0 var(--oc-gutter); }
.oc-wrap-narrow { max-width: 880px; }
.oc-main { padding: var(--oc-sp-5) 0 var(--oc-sp-8); }
.oc-section { margin-bottom: var(--oc-sp-5); }
.oc-section:last-child { margin-bottom: 0; }
.oc-muted { color: var(--oc-text-2); }
.oc-dim { color: var(--oc-text-3); }
.oc-small { font-size: var(--oc-fs-sm); }
.oc-tiny { font-size: var(--oc-fs-xs); }
.oc-nowrap { white-space: nowrap; }
.oc-center { text-align: center; }
.oc-right { text-align: right; }
.oc-stack > * + * { margin-top: var(--oc-sp-3); }
.oc-row { display: flex; gap: var(--oc-sp-3); align-items: center; flex-wrap: wrap; }
.oc-row-between { display: flex; gap: var(--oc-sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.oc-grid { display: grid; gap: var(--oc-sp-4); }
.oc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .oc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .oc-grid-2, .oc-grid-3, .oc-grid-4 { grid-template-columns: 1fr; }
}

/* iView-flavoured card */
.oc-card {
  background: var(--oc-card);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius);
  box-shadow: var(--oc-shadow);
}
.oc-card-pad { padding: var(--oc-sp-5); }
.oc-card-head {
  padding: var(--oc-sp-4) var(--oc-sp-5);
  border-bottom: 1px solid var(--oc-line);
  display: flex; gap: var(--oc-sp-3); align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.oc-card-head h2, .oc-card-head h3 { margin: 0; }
.oc-card-body { padding: var(--oc-sp-5); }
.oc-card-foot {
  padding: var(--oc-sp-3) var(--oc-sp-5);
  border-top: 1px solid var(--oc-line);
  background: var(--oc-card-alt);
  border-radius: 0 0 var(--oc-radius) var(--oc-radius);
  font-size: var(--oc-fs-sm);
}

/* buttons — mirror .ivu-btn / .ivu-btn-primary */
.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--oc-sp-2);
  padding: 9px 18px; font-size: var(--oc-fs-sm); font-family: inherit;
  line-height: 1.45; min-height: 40px;
  border: 1px solid var(--oc-line-strong); border-radius: var(--oc-radius);
  background: var(--oc-card); color: var(--oc-text); cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.oc-btn:hover { background: var(--oc-hover); color: var(--oc-text); text-decoration: none; }
.oc-btn-primary { background: var(--oc-primary); border-color: var(--oc-primary); color: #fff; font-weight: 600; }
.oc-btn-primary:hover { background: var(--oc-primary-hover); border-color: var(--oc-primary-hover); color: #fff; }
.oc-btn-primary:active { background: var(--oc-primary-active); border-color: var(--oc-primary-active); }
.oc-btn-ghost { background: transparent; border-color: var(--oc-primary); color: var(--oc-primary); }
.oc-btn-ghost:hover { background: var(--oc-primary-soft); color: var(--oc-primary); }
.oc-btn-sm { padding: 5px 12px; font-size: var(--oc-fs-xs); min-height: 32px; }
.oc-btn-lg { padding: 12px 26px; font-size: var(--oc-fs-base); min-height: 46px; }
.oc-btn-block { width: 100%; }
.oc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.oc-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* THE promo button: identical everywhere so it reads as the site's one CTA */
/* `a.oc-promo`, not `.oc-promo`, and no `!important`: the element selector
   beats the global `a { color: var(--oc-primary) }` on specificity, while a
   context rule such as `.oc-search-chips .oc-promo` can still recolour it. The
   earlier `color: #fff !important` silently won every contest of that kind and
   made the hero suggestion chips white text on a white chip. */
a.oc-promo {
  display: inline-flex; align-items: center; gap: var(--oc-sp-2);
  padding: 10px 18px; border-radius: var(--oc-radius);
  background: var(--oc-primary); color: #fff;
  font-weight: 600; font-size: var(--oc-fs-sm); line-height: 1.45;
  text-decoration: none; min-height: 40px;
  border: 1px solid var(--oc-primary);
  transition: background 0.15s, border-color 0.15s;
}
.oc-promo:hover {
  background: var(--oc-primary-hover);
  border-color: var(--oc-primary-hover);
  text-decoration: none;
}
.oc-promo .oc-promo-go { font-size: 0.85em; opacity: 0.85; }
.oc-promo-inline {
  display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600;
  color: var(--oc-primary); text-decoration: underline; text-underline-offset: 2px;
}
.oc-promo-note { font-size: var(--oc-fs-xs); color: var(--oc-text-3); }

/* badges / tags */
.oc-badge {
  display: inline-block; padding: 2px 8px;
  font-size: var(--oc-fs-xs); line-height: 1.6;
  border-radius: var(--oc-radius-sm);
  background: var(--oc-slate-soft); color: var(--oc-slate);
  border: 1px solid transparent; white-space: nowrap;
}
.oc-badge-primary { background: var(--oc-primary); color: #fff; }
.oc-badge-soft { background: var(--oc-primary-soft); color: var(--oc-primary-active); }
.oc-badge-success { background: var(--oc-success-soft); color: #2f7d59; }
.oc-badge-danger { background: var(--oc-danger-soft); color: #b32b2b; }
.oc-badge-warning { background: var(--oc-warning-soft); color: #9a6a12; }
.oc-badge-gold { background: var(--oc-gold-soft); color: var(--oc-gold-deep); border-color: var(--oc-gold-line); }
.oc-badge-outline { background: transparent; border-color: var(--oc-line-strong); color: var(--oc-text-2); }
html[data-theme="dark"] .oc-badge-success { color: #7fd6a8; }
html[data-theme="dark"] .oc-badge-danger { color: #ff8d8d; }
html[data-theme="dark"] .oc-badge-warning { color: #f0c46e; }

/* alerts */
.oc-alert {
  display: flex; gap: var(--oc-sp-3);
  padding: var(--oc-sp-4);
  border-radius: var(--oc-radius);
  border: 1px solid var(--oc-line);
  background: var(--oc-card-alt);
  font-size: var(--oc-fs-sm);
}
.oc-alert p { max-width: none; }
.oc-alert-icon { flex: 0 0 auto; font-weight: 700; color: var(--oc-primary); }
.oc-alert-info { background: var(--oc-primary-soft); border-color: var(--oc-primary-soft-2); }
.oc-alert-info .oc-alert-icon { color: var(--oc-primary-active); }
.oc-alert-warn { background: var(--oc-warning-soft); border-color: #f3ddb0; }
.oc-alert-warn .oc-alert-icon { color: #9a6a12; }
.oc-alert-success { background: var(--oc-success-soft); border-color: #cbe9da; }
.oc-alert-success .oc-alert-icon { color: #2f7d59; }
.oc-alert-danger { background: var(--oc-danger-soft); border-color: #f6c9c9; }
.oc-alert-danger .oc-alert-icon { color: #b32b2b; }
.oc-alert-gold { background: var(--oc-gold-soft-2); border-color: var(--oc-gold-line); }
.oc-alert-gold .oc-alert-icon { color: var(--oc-gold-deep); }

/* tables — iView .ivu-table feel: 1px lines, #f8f8f9 head.
   Three wide tables are the reason this is a scroll container and not a grid:
   a comparison table that wraps mid-cell stops being scannable. */
.oc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius);
  background: var(--oc-card);
}
.oc-table-wrap:focus-visible { outline-offset: -3px; }
table.oc-table { width: 100%; border-collapse: collapse; font-size: var(--oc-fs-sm); }
.oc-table caption {
  caption-side: top; text-align: left;
  padding: var(--oc-sp-3) var(--oc-sp-4);
  font-size: var(--oc-fs-sm); color: var(--oc-text-2);
}
.oc-table th, .oc-table td {
  padding: 10px var(--oc-sp-3);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--oc-line);
  line-height: 1.55;
}
.oc-table thead th {
  background: var(--oc-page-alt);
  font-weight: 600; color: var(--oc-text-2); white-space: nowrap;
  font-size: var(--oc-fs-xs);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.oc-table tbody tr:last-child td { border-bottom: 0; }
.oc-table tbody tr:hover { background: var(--oc-hover); }
.oc-table .oc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* inputs */
.oc-field { display: flex; flex-direction: column; gap: var(--oc-sp-1); }
.oc-label { font-size: var(--oc-fs-sm); font-weight: 600; color: var(--oc-text-2); }
.oc-input, .oc-select, select.oc-input, textarea.oc-input {
  width: 100%; padding: 10px var(--oc-sp-3);
  /* 16px is also the threshold below which iOS zooms the page on focus. */
  font-family: inherit; font-size: var(--oc-fs-base);
  border: 1px solid var(--oc-line-strong);
  border-radius: var(--oc-radius);
  background: var(--oc-card); color: var(--oc-text);
  min-height: 42px;
}
.oc-input:focus, .oc-select:focus {
  border-color: var(--oc-primary);
  box-shadow: 0 0 0 3px var(--oc-primary-ring);
  outline: 0;
}
.oc-help { font-size: var(--oc-fs-xs); color: var(--oc-text-3); }
.oc-check { display: flex; gap: var(--oc-sp-2); align-items: flex-start; font-size: var(--oc-fs-sm); }
.oc-check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--oc-primary); }

/* definition list for spec-like content */
.oc-dl {
  display: grid; grid-template-columns: minmax(130px, 210px) 1fr;
  gap: 2px var(--oc-sp-4);
  font-size: var(--oc-fs-sm);
}
.oc-dl dt { color: var(--oc-text-2); font-weight: 600; padding: 7px 0; border-top: 1px solid var(--oc-line); }
.oc-dl dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--oc-line); }
.oc-dl dt:first-of-type, .oc-dl dd:first-of-type { border-top: 0; }
@media (max-width: 620px) {
  .oc-dl { grid-template-columns: 1fr; }
  .oc-dl dt { border-top: 0; padding-bottom: 0; }
  .oc-dl dd { border-top: 0; }
}

/* steps */
.oc-steps { list-style: none; padding: 0; margin: 0; counter-reset: ocstep; }
.oc-steps > li {
  position: relative; padding-left: 44px; margin-bottom: var(--oc-sp-4);
  counter-increment: ocstep; font-size: var(--oc-fs-base);
}
.oc-steps > li::before {
  content: counter(ocstep, decimal-leading-zero);
  position: absolute; left: 0; top: 1px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--oc-primary-soft); color: var(--oc-primary-active);
  border-radius: var(--oc-radius);
  font-size: var(--oc-fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.oc-steps > li > strong { display: block; font-size: var(--oc-fs-md); margin-bottom: 2px; }

/* numbered methodology cards */
.oc-method { counter-reset: ocm; list-style: none; padding: 0; margin: 0; }
.oc-method > li {
  border: 1px solid var(--oc-line); border-radius: var(--oc-radius);
  margin-bottom: var(--oc-sp-2); background: var(--oc-card);
}
.oc-method > li > details > summary {
  cursor: pointer; padding: var(--oc-sp-3) var(--oc-sp-4);
  font-weight: 600; font-size: var(--oc-fs-base); list-style: none;
  display: flex; gap: var(--oc-sp-2); align-items: baseline;
}
.oc-method > li > details > summary::-webkit-details-marker { display: none; }
.oc-method > li > details > summary::before {
  counter-increment: ocm; content: "M" counter(ocm);
  font-size: var(--oc-fs-xs); color: var(--oc-primary);
  font-weight: 700; flex: 0 0 auto;
}
.oc-method > li > details > summary::after {
  content: "+"; margin-left: auto; color: var(--oc-text-3);
  font-weight: 400; font-size: var(--oc-fs-lg); line-height: 1;
}
.oc-method > li > details[open] > summary::after { content: "−"; }
.oc-method .oc-method-body {
  padding: 0 var(--oc-sp-4) var(--oc-sp-4) 44px;
  font-size: var(--oc-fs-sm); color: var(--oc-text-2);
}

/* timeline (update log) */
.oc-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--oc-line-strong); }
.oc-timeline > li { position: relative; padding: 0 0 var(--oc-sp-4) var(--oc-sp-4); font-size: var(--oc-fs-sm); }
.oc-timeline > li::before {
  content: ""; position: absolute; left: -6px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--oc-primary);
}
.oc-timeline time { display: block; font-weight: 700; color: var(--oc-text); font-size: var(--oc-fs-sm); }

/* comparison bars (tool pages) */
.oc-bar { height: 12px; background: var(--oc-inset); border-radius: var(--oc-radius); overflow: hidden; }
.oc-bar > span { display: block; height: 100%; background: var(--oc-primary); border-radius: var(--oc-radius); }
.oc-bar-alt > span { background: var(--oc-slate); }

/* product cards */
.oc-products {
  display: grid; gap: var(--oc-sp-3);
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
@media (max-width: 520px) { .oc-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oc-sp-2); } }
.oc-product {
  background: var(--oc-card); border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.oc-product:hover { border-color: var(--oc-primary-tint); box-shadow: var(--oc-shadow-2); }
.oc-product-img { aspect-ratio: 1 / 1; background: var(--oc-inset); display: block; position: relative; }
.oc-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-product-body {
  padding: var(--oc-sp-2) var(--oc-sp-3) var(--oc-sp-3);
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.oc-product-name {
  font-size: var(--oc-fs-sm); font-weight: 600; line-height: 1.4;
  color: var(--oc-text); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oc-product-meta {
  display: flex; gap: var(--oc-sp-2); align-items: baseline;
  flex-wrap: wrap; font-size: var(--oc-fs-xs);
}
.oc-price { font-weight: 700; color: var(--oc-primary); font-variant-numeric: tabular-nums; }
.oc-price-was { color: var(--oc-text-3); text-decoration: line-through; font-size: 0.92em; }
.oc-product-cta { margin-top: auto; padding-top: var(--oc-sp-1); }
.oc-product-cta .oc-promo {
  width: 100%; justify-content: center;
  padding: 6px 10px; font-size: var(--oc-fs-xs); min-height: 32px;
}

/* figure / screenshot-ish framed block, with a copy affordance */
.oc-frame {
  border: 1px solid var(--oc-line); border-radius: var(--oc-radius);
  background: var(--oc-card); padding: var(--oc-sp-4);
}
.oc-frame-dark {
  position: relative;
  background: #1f1f22; border-color: #33333a; color: #e8e8ea;
  overflow-x: auto;
}
.oc-frame-dark .oc-tiny, .oc-frame-dark .oc-muted { color: #b6b6bd; }
.oc-pre {
  margin: 0; font-family: var(--oc-mono);
  font-size: 14px; line-height: 1.7; white-space: pre;
}
@media (max-width: 700px) { .oc-pre { font-size: 13px; } }

/* the copy button is injected by app.js into .oc-frame-dark */
.oc-copy {
  position: absolute; top: var(--oc-sp-2); right: var(--oc-sp-2);
  padding: 4px 10px; font-size: var(--oc-fs-xs); font-family: inherit;
  background: rgba(255, 255, 255, 0.1); color: #e8e8ea;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--oc-radius);
  cursor: pointer; line-height: 1.5;
}
.oc-copy:hover { background: rgba(255, 255, 255, 0.2); }
.oc-copy[data-copied="1"] { background: var(--oc-success); border-color: var(--oc-success); color: #fff; }

/* two-column stance blocks */
.oc-stance { display: grid; gap: var(--oc-sp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .oc-stance { grid-template-columns: 1fr; } }
.oc-stance > div {
  border: 1px solid var(--oc-line); border-radius: var(--oc-radius);
  padding: var(--oc-sp-4); background: var(--oc-card);
}
.oc-stance > div > :last-child { margin-bottom: 0; }
.oc-stance .oc-stance-yes { border-left: 3px solid var(--oc-success); }
.oc-stance .oc-stance-no { border-left: 3px solid var(--oc-danger); }

/* link lists (hub-and-spoke) */
.oc-links { list-style: none; padding: 0; margin: 0; }
.oc-links li {
  padding: var(--oc-sp-2) 0; border-top: 1px solid var(--oc-line);
  font-size: var(--oc-fs-sm);
  display: flex; gap: var(--oc-sp-2); justify-content: space-between;
}
.oc-links li:first-child { border-top: 0; }
.oc-links .oc-links-go { color: var(--oc-text-3); white-space: nowrap; }

/* table of contents */
.oc-toc { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--oc-sp-5); font-size: var(--oc-fs-sm); }
@media (max-width: 620px) { .oc-toc { columns: 1; } }
.oc-toc li { break-inside: avoid; margin-bottom: 6px; }

/* verdict meter */
.oc-meter { display: grid; gap: var(--oc-sp-2); }
.oc-meter-row {
  display: grid; grid-template-columns: 150px 1fr 62px;
  gap: var(--oc-sp-2); align-items: center;
  font-size: var(--oc-fs-sm);
}
.oc-meter-row .oc-meter-val {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--oc-text-2);
}
@media (max-width: 520px) {
  .oc-meter-row { grid-template-columns: 1fr 56px; }
  .oc-meter-row .oc-bar { grid-column: 1 / -1; order: 3; }
}

/* FAQ */
.oc-faq { border-top: 1px solid var(--oc-line); }
.oc-faq details { border-bottom: 1px solid var(--oc-line); }
.oc-faq summary {
  cursor: pointer; padding: var(--oc-sp-3) 0;
  font-weight: 600; font-size: var(--oc-fs-base);
  list-style: none; display: flex; gap: var(--oc-sp-2);
}
.oc-faq summary::-webkit-details-marker { display: none; }
.oc-faq summary::after {
  content: "+"; margin-left: auto; color: var(--oc-text-3);
  font-weight: 400; font-size: var(--oc-fs-lg); line-height: 1;
}
.oc-faq details[open] summary::after { content: "−"; }
.oc-faq .oc-faq-body {
  padding: 0 0 var(--oc-sp-4);
  font-size: var(--oc-fs-base); color: var(--oc-text-2);
}
.oc-faq .oc-faq-body > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- chrome ----- */

.oc-topbar {
  background: var(--oc-card); border-bottom: 1px solid var(--oc-line);
  font-size: var(--oc-fs-xs); color: var(--oc-text-2);
}
.oc-topbar .oc-wrap {
  display: flex; gap: var(--oc-sp-3); align-items: center;
  justify-content: space-between; min-height: 36px;
  padding-top: 6px; padding-bottom: 6px;
}
.oc-topbar a { color: var(--oc-text-2); }
.oc-topbar a:hover { color: var(--oc-primary); }

.oc-header {
  background: var(--oc-card);
  border-bottom: 1px solid var(--oc-line);
  position: sticky; top: 0; z-index: 60;
  transition: box-shadow 0.2s;
}
/* app.js adds this once the page is scrolled, so the header only lifts off the
   page when there is something underneath it. */
.oc-header.is-stuck { box-shadow: var(--oc-shadow-2); }
.oc-header .oc-wrap {
  display: flex; gap: var(--oc-sp-4); align-items: center;
  min-height: var(--oc-header-h);
}
.oc-brand {
  display: flex; gap: var(--oc-sp-2); align-items: center;
  font-weight: 700; font-size: var(--oc-fs-md);
  color: var(--oc-text);
  flex: 0 1 auto; min-width: 0; order: 0;
}
/* The name truncates before anything else gives way, so a 320px header keeps
   the icon, the promo and the menu button without a horizontal scrollbar. */
.oc-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-brand:hover { color: var(--oc-text); text-decoration: none; }
/* The brand mark is the inlined ticket icon. The box only positions it: the
   artwork brings its own plate, so the element must not paint a second one. */
.oc-brand-mark {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: block; border-radius: var(--oc-radius); overflow: hidden;
}
.oc-brand-mark svg { display: block; width: 100%; height: 100%; }
@media (max-width: 860px) { .oc-brand-mark { width: 26px; height: 26px; } }

.oc-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: auto;
  background: none; border: 1px solid var(--oc-line-strong);
  border-radius: var(--oc-radius); cursor: pointer; color: var(--oc-text);
  font-size: var(--oc-fs-base); font-family: inherit;
}
.oc-nav-toggle:hover { background: var(--oc-hover); }

.oc-nav { display: flex; gap: 2px; align-items: center; flex: 1 1 auto; flex-wrap: wrap; order: 1; }
.oc-nav a, .oc-nav summary {
  display: inline-block; padding: 8px 11px;
  font-size: var(--oc-fs-sm); color: var(--oc-text-2);
  border-radius: var(--oc-radius); cursor: pointer; list-style: none;
  white-space: nowrap;
}
.oc-nav a:hover, .oc-nav summary:hover { background: var(--oc-hover); color: var(--oc-text); text-decoration: none; }
.oc-nav a[aria-current="page"] { color: var(--oc-primary); font-weight: 600; background: var(--oc-primary-soft); }
.oc-nav details { position: relative; }
.oc-nav details > summary::-webkit-details-marker { display: none; }
.oc-nav details[open] > summary { background: var(--oc-hover); color: var(--oc-text); }
.oc-nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px; z-index: 70;
  background: var(--oc-card); border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius); box-shadow: var(--oc-shadow-3);
  padding: 6px; display: grid; gap: 1px;
}
.oc-nav-menu a { display: block; padding: 8px 10px; font-size: var(--oc-fs-sm); white-space: normal; }
.oc-header-cta { flex: 0 0 auto; order: 2; }

/* One label, two lengths. Above 560px the long form fits; below it the button
   keeps its full text in the DOM but shows the short one. */
.oc-label-short { display: none; }
@media (max-width: 560px) {
  .oc-label-full { display: none; }
  .oc-label-short { display: inline; }
  /* One notch down buys the wordmark enough room to survive a 360px header
     without truncating. */
  .oc-brand { font-size: var(--oc-fs-base); }
  .oc-brand-mark { width: 24px; height: 24px; }
}

.oc-theme-btn {
  background: none; border: 1px solid var(--oc-line-strong);
  border-radius: var(--oc-radius); cursor: pointer;
  padding: 5px 10px; font-size: var(--oc-fs-xs);
  color: var(--oc-text-2); font-family: inherit;
  display: inline-flex; gap: 6px; align-items: center;
}
.oc-theme-btn:hover { background: var(--oc-hover); color: var(--oc-text); }

/* Mobile: the nine-item nav becomes a drawer. The button only exists below
   860px; above it the nav is a normal row. */
@media (max-width: 860px) {
  :root { --oc-gutter: 16px; --oc-header-h: 58px; }
  .oc-header .oc-wrap { flex-wrap: wrap; gap: 10px; }
  /* Phone row: brand | promo | ☰ — because `order` is brand 0, promo 1,
     menu 2, drawer 3. The promo takes the auto margin that used to sit on the
     menu button, so the pair stays flush right. */
  .oc-nav-toggle { display: inline-flex; order: 2; margin-left: 0; }
  .oc-header-cta { order: 1; margin-left: auto; }
  .oc-nav {
    display: none;
    order: 3; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--oc-sp-2) 0 var(--oc-sp-3);
    border-top: 1px solid var(--oc-line);
    margin-top: var(--oc-sp-2);
    max-height: calc(100vh - var(--oc-header-h) - 40px);
    overflow-y: auto;
  }
  .oc-nav.is-open { display: flex; }
  .oc-nav a, .oc-nav summary {
    padding: 12px 10px; font-size: var(--oc-fs-base);
    border-bottom: 1px solid var(--oc-line);
  }
  .oc-nav details > summary::after {
    content: "▾"; margin-left: auto; color: var(--oc-text-3);
  }
  .oc-nav details { position: static; }
  .oc-nav details > summary { display: flex; justify-content: space-between; align-items: center; }
  .oc-nav-menu {
    position: static; box-shadow: none; border: 0;
    background: var(--oc-page-alt); min-width: 0;
    padding: 0; gap: 0;
  }
  .oc-nav-menu a { padding: 10px 10px 10px 24px; border-bottom: 1px solid var(--oc-line); }
  .oc-header-cta .oc-promo { padding: 8px 12px; font-size: var(--oc-fs-xs); min-height: 38px; }
  .oc-topbar .oc-wrap { flex-wrap: wrap; gap: var(--oc-sp-1); }
  .oc-topbar .oc-wrap > span:first-child { display: none; }
}

/* breadcrumbs */
.oc-crumbs { font-size: var(--oc-fs-xs); color: var(--oc-text-3); padding: var(--oc-sp-3) 0 0; }
.oc-crumbs ol { list-style: none; display: flex; gap: var(--oc-sp-1); flex-wrap: wrap; margin: 0; padding: 0; }
.oc-crumbs li + li::before { content: "/"; margin-right: var(--oc-sp-1); color: var(--oc-line-strong); }
.oc-crumbs a { color: var(--oc-text-2); }

/* page head */
.oc-pagehead {
  background: var(--oc-card); border-bottom: 1px solid var(--oc-line);
  padding: var(--oc-sp-6) 0 var(--oc-sp-5);
}
.oc-pagehead h1 { font-size: var(--oc-fs-3xl); margin-bottom: var(--oc-sp-2); }
.oc-pagehead .oc-lede {
  font-size: var(--oc-fs-md); color: var(--oc-text-2);
  max-width: 68ch; margin: 0 0 var(--oc-sp-3); line-height: var(--oc-lh-prose);
}
.oc-pagehead-meta {
  display: flex; gap: var(--oc-sp-2); align-items: center;
  flex-wrap: wrap; font-size: var(--oc-fs-xs); color: var(--oc-text-3);
}

/* hero — used by exactly one page (home) */
/*
 * A 72px tile: a ticket outline with a pin at each long edge — the logo shape at
 * thumbnail size — repeated behind the hero copy. Inline SVG, no request, no LCP
 * candidate, no image for a visitor to wait on.
 *
 * The ink is #f4f6f9, not the #e8eaec the borders use. At border weight the tile
 * read as a grid of boxes competing with the headline; at 1.08:1 it is a change
 * in surface, not a pattern. If it ever needs to move again, move this one value
 * — the shape is deliberately the same shape.
 */
.oc-hero {
  background-color: var(--oc-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23f4f6f9' stroke-width='1'%3E%3Crect x='9.5' y='13.5' width='53' height='45' rx='5'/%3E%3C/g%3E%3Cg fill='%23f4f6f9'%3E%3Ccircle cx='9.5' cy='36' r='2'/%3E%3Ccircle cx='62.5' cy='36' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  background-repeat: repeat;
  border-bottom: 1px solid var(--oc-line);
  padding: var(--oc-sp-8) 0 var(--oc-sp-7);
}
/* Dark mode gets the same one-step-back treatment: #2e2a25 against #262019 is a
   surface shift, where #333 read as lines. */
html[data-theme="dark"] .oc-hero {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%232e2a25' stroke-width='1'%3E%3Crect x='9.5' y='13.5' width='53' height='45' rx='5'/%3E%3C/g%3E%3Cg fill='%232e2a25'%3E%3Ccircle cx='9.5' cy='36' r='2'/%3E%3Ccircle cx='62.5' cy='36' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---- hero with the search panel ---------------------------------------- */

.oc-hero-inner { display: grid; gap: var(--oc-sp-7); }
.oc-hero--search .oc-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
}

/* The panel sits on the hero's white, so it needs its own surface. */
.oc-search-panel {
  background: var(--oc-page-alt);
  border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius-lg);
  padding: var(--oc-sp-4);
}
.oc-search-label {
  display: block; margin-bottom: 8px;
  font-size: var(--oc-fs-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-text-3);
}
.oc-search-field { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-search-input {
  flex: 1 1 150px; min-width: 0; min-height: 46px; padding: 0 13px;
  font-family: inherit; font-size: var(--oc-fs-base);
  color: var(--oc-text); background: var(--oc-card);
  border: 1px solid #c9ced4; border-radius: var(--oc-radius);
  -webkit-appearance: none; appearance: none;
}
.oc-search-input::placeholder { color: var(--oc-text-3); }
.oc-search-input:focus {
  outline: none; border-color: var(--oc-primary);
  box-shadow: 0 0 0 3px var(--oc-primary-ring);
}
.oc-search-input[aria-invalid="true"] { border-color: var(--oc-danger); }
.oc-search-btn { flex: 0 0 auto; min-height: 46px; }

/* The closed state of the subscribe bar: a dashed frame reads as "not live
   yet" without looking broken. */
.oc-subscribe-closed {
  display: grid; gap: var(--oc-sp-3);
  margin-top: var(--oc-sp-4); padding: var(--oc-sp-4);
  background: var(--oc-inset);
  border: 1px dashed var(--oc-line-strong);
  border-radius: var(--oc-radius);
}
.oc-subscribe-closed p {
  margin: 0; font-size: var(--oc-fs-sm);
  color: var(--oc-text-2); line-height: var(--oc-lh-body);
}
.oc-subscribe-closed strong { color: var(--oc-text); }
.oc-subscribe-closed .oc-btn { justify-self: start; }
.oc-search-hint {
  margin: 10px 0 0; font-size: var(--oc-fs-xs);
  color: var(--oc-text-3); line-height: 1.5;
}
.oc-search-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* A white chip on a #f8f8f9 panel is defined by its border alone, so the
   border is the brand pink (#ff186b ≈ 3.6:1 against the panel) rather than
   --oc-line-strong (≈ 1.3:1, which reads as "no boundary at all"). Hover fills
   the chip with the soft pink; the label stays --oc-text because #ff186b text
   at 13px only reaches 3.75:1. */
.oc-search-chips .oc-promo {
  min-height: 0; padding: 5px 11px;
  font-size: var(--oc-fs-xs); font-weight: 600;
  color: var(--oc-text); background: var(--oc-card);
  border: 1px solid var(--oc-primary); border-radius: var(--oc-radius-pill);
}
.oc-search-chips .oc-promo:hover {
  color: var(--oc-text); background: var(--oc-primary-soft);
  border-color: var(--oc-primary);
  text-decoration: none;
}
.oc-search-chips .oc-promo-go { opacity: 0.55; }

@media (max-width: 980px) {
  .oc-hero--search .oc-hero-inner { grid-template-columns: minmax(0, 1fr); }
}

.oc-hero h1 { font-size: var(--oc-fs-4xl); max-width: 24ch; line-height: 1.16; }
.oc-hero .oc-lede {
  font-size: var(--oc-fs-md); color: var(--oc-text-2);
  max-width: 62ch; line-height: var(--oc-lh-prose);
}
@media (max-width: 760px) {
  :root { --oc-fs-3xl: 26px; --oc-fs-4xl: 30px; --oc-fs-2xl: 21px; }
  /* Same tile, fewer of them: a 72px grid under a 30px headline on a tall
     single-column hero is too dense to read as surface. */
  .oc-hero { padding: var(--oc-sp-7) 0 var(--oc-sp-6); background-size: 108px 108px; }
  .oc-hero h1 { max-width: none; }
}

/* stat strip */
.oc-stats {
  display: grid; gap: 1px; background: var(--oc-line);
  border: 1px solid var(--oc-line); border-radius: var(--oc-radius);
  overflow: hidden; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) { .oc-stats { grid-template-columns: repeat(2, 1fr); } }
.oc-stat { background: var(--oc-card); padding: var(--oc-sp-4) var(--oc-sp-4); }
.oc-stat b {
  display: block; font-size: 26px; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.oc-stat span { font-size: var(--oc-fs-xs); color: var(--oc-text-3); }
.oc-stat small { display: block; font-size: var(--oc-fs-xs); color: var(--oc-text-2); margin-top: 2px; }

/* category / brand tiles */
.oc-tiles { display: grid; gap: var(--oc-sp-3); grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }
.oc-tile {
  background: var(--oc-card); border: 1px solid var(--oc-line);
  border-radius: var(--oc-radius); padding: var(--oc-sp-4);
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.oc-tile:hover { border-color: var(--oc-primary); text-decoration: none; box-shadow: var(--oc-shadow-2); }
.oc-tile-name { font-weight: 600; font-size: var(--oc-fs-base); color: var(--oc-text); }
.oc-tile-count { font-size: var(--oc-fs-xs); color: var(--oc-text-3); font-variant-numeric: tabular-nums; }
.oc-tile-note { font-size: var(--oc-fs-xs); color: var(--oc-text-2); line-height: 1.55; }

/* promo ribbon — the reusable "one obvious CTA" band */
.oc-ribbon {
  background: var(--oc-primary-soft); border: 1px solid var(--oc-primary-soft-2);
  border-radius: var(--oc-radius); padding: var(--oc-sp-5);
}
.oc-ribbon h2, .oc-ribbon h3 { color: var(--oc-primary-active); }
.oc-ribbon-gold { background: var(--oc-gold-soft-2); border-color: var(--oc-gold-line); }
.oc-ribbon-gold h2, .oc-ribbon-gold h3 { color: var(--oc-gold-deep); }

/* footer */
.oc-footer {
  background: var(--oc-card); border-top: 1px solid var(--oc-line);
  margin-top: var(--oc-sp-8); padding: var(--oc-sp-7) 0 var(--oc-sp-5);
  font-size: var(--oc-fs-sm);
}
.oc-footer h3 {
  font-size: var(--oc-fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--oc-text-3);
  margin-bottom: var(--oc-sp-3);
}
.oc-footer ul { list-style: none; padding: 0; margin: 0; }
.oc-footer li { margin-bottom: 7px; line-height: 1.5; }
.oc-footer a { color: var(--oc-text-2); }
.oc-footer a:hover { color: var(--oc-primary); }
.oc-footer-cols { display: grid; gap: var(--oc-sp-6); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .oc-footer-cols { grid-template-columns: repeat(2, 1fr); } }
/* One promoted link in the footer of every page. It sits above the disclosure
   because it is the last call to action, not a footnote to one. */
.oc-footer-promo {
  margin-top: var(--oc-sp-5);
  padding: var(--oc-sp-4) 0;
  border-top: 1px solid var(--oc-line);
  border-bottom: 1px solid var(--oc-line);
  display: flex; gap: var(--oc-sp-3); align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  font-size: var(--oc-fs-xs); color: var(--oc-text-3);
}
.oc-footer-promo .oc-promo-inline { font-size: var(--oc-fs-sm); }

.oc-disclosure {
  border-top: 0; margin-top: 0;
  padding-top: var(--oc-sp-4); color: var(--oc-text-3);
  font-size: var(--oc-fs-xs); line-height: 1.7;
}
.oc-disclosure p { max-width: 100ch; margin-bottom: var(--oc-sp-2); }
.oc-footer-bottom {
  display: flex; gap: var(--oc-sp-3); justify-content: space-between;
  flex-wrap: wrap; color: var(--oc-text-3);
  font-size: var(--oc-fs-xs); padding-top: var(--oc-sp-3);
}
.oc-footer-bottom a { color: var(--oc-text-3); }

/* scroll-to-top — only appears after the first screenful, and only on pointer
   devices, where it is not competing with a thumb */
.oc-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 44px; height: 44px; display: none;
  align-items: center; justify-content: center;
  background: var(--oc-card); color: var(--oc-text);
  border: 1px solid var(--oc-line-strong); border-radius: 50%;
  box-shadow: var(--oc-shadow-2); cursor: pointer;
  font-size: var(--oc-fs-base); font-family: inherit;
}
.oc-top.is-visible { display: inline-flex; }
.oc-top:hover { background: var(--oc-primary); color: #fff; border-color: var(--oc-primary); }
@media (hover: none) { .oc-top { display: none !important; } }

/* print — the checklists are meant to be printed */
@media print {
  :root { --oc-fs-base: 11pt; --oc-fs-sm: 10.5pt; --oc-fs-xs: 9pt; }
  .oc-header, .oc-topbar, .oc-footer, .oc-promo, .oc-theme-btn,
  .oc-nav, .oc-nav-toggle, .oc-top, .oc-copy, .skip-link { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .oc-card, .oc-table-wrap { border-color: #999; box-shadow: none; }
  .oc-pagehead, .oc-hero { border-bottom: 1px solid #999; background-image: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .oc-faq details { break-inside: avoid; }
  .oc-faq summary::after { content: none; }
}
/* ---- topic line ---------------------------------------------------------- */

/* One sentence at the end of every main region: the query this page answers and
   the hub that answers it at length. Half navigation, half internal link, so it
   reads as a footer note rather than as a banner. */
/* A page-level topic inside a table cell. Deliberately quieter than a badge:
   these are labels on a row, not states of anything. */
.oc-tag {
  display: inline-block; margin: 0 4px 4px 0;
  padding: 1px 7px; border-radius: var(--oc-radius-pill);
  background: var(--oc-inset); border: 1px solid var(--oc-line-soft);
  color: var(--oc-text-2); font-size: var(--oc-fs-xs); white-space: nowrap;
}

.oc-topic {
  margin: var(--oc-sp-6) 0 0;
  padding-top: var(--oc-sp-3);
  border-top: 1px solid var(--oc-line);
}

.oc-topic p {
  margin: 0;
  color: var(--oc-text-3);
}

.oc-topic a {
  color: var(--oc-text-2);
  text-decoration: underline;
  text-decoration-color: var(--oc-primary-soft-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.oc-topic a:hover {
  color: var(--oc-primary);
  text-decoration-color: var(--oc-primary);
}

.oc-topic strong {
  color: var(--oc-text-2);
  font-weight: 600;
}