:root {
  color-scheme: light dark;
  --bg: #f5f7f6;
  --surface: #ffffff;
  --elevated: #eef2f1;
  --text: #17201f;
  --muted: #586563;
  --subtle: #6f7d7a;
  --border: #d4dcda;
  --accent: #b34424;
  --accent-ink: #ffffff;
  --success: #236b4a;
  --warning: #8a5a00;
  --gutter: clamp(20px, 4vw, 64px);
  font-family: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111917;
    --surface: #18221f;
    --elevated: #22302b;
    --text: #f3f7f5;
    --muted: #b5c2bd;
    --subtle: #9aa9a3;
    --border: #40514a;
    --accent: #e07a57;
    --success: #78c79e;
    --warning: #d9a441;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); }
:target { scroll-margin-top: 88px; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button, a { min-height: 44px; touch-action: manipulation; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); }
.skip-link:focus { top: 16px; }
.shell { min-height: 100vh; }
.topbar { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.topbar-inner, main, footer { width: 100%; margin: 0 auto; padding-inline: var(--gutter); }
.topbar-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .03em; }
.brand small { display: block; color: var(--muted); font: 500 11px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
nav a { display: inline-flex; align-items: center; padding: 8px 10px; color: var(--muted); text-decoration: none; border-radius: 8px; }
nav a:hover, nav a[aria-current="page"] { color: var(--text); background: var(--elevated); }
main { padding-top: 48px; padding-bottom: 72px; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font: 600 12px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { max-width: 860px; font-size: clamp(2.4rem, 6vw, 5.8rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); letter-spacing: -.035em; }
h3 { font-size: 1.15rem; }
p, li { max-width: 72ch; }
.lede { margin: 20px 0 0; max-width: 720px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.draft-banner { margin: 24px 0 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border)); border-left: 5px solid var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.draft-banner strong { color: var(--warning); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 48px; align-items: end; }
.hero-facts { display: grid; gap: 12px; margin: 0; padding: 20px; border-top: 3px solid var(--accent); background: var(--surface); }
.hero-facts div { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.hero-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-facts dt { color: var(--muted); }
.hero-facts dd { margin: 0; text-align: right; font-weight: 700; }
.section { padding-top: 76px; }
.section-header { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.section-header p { margin: 0; color: var(--muted); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { padding: 24px; border: 1px solid var(--border); background: var(--surface); }
.card p { color: var(--muted); }
.card .number { display: block; margin-bottom: 26px; color: var(--accent); font: 600 13px/1 "IBM Plex Mono", ui-monospace, monospace; }
/*
 * security.html's three cards carry the page's only subsection heading and
 * used <h3> with no <h2> above it -- an H1->H3 skip a screen reader's heading
 * navigation would notice, while every other page's `.card h3` sits under a
 * `.section-header h2` and is fine as `h3`. Promoted those three headings to
 * `<h2>` in the markup; without this rule they would inherit the page-level
 * `h2 { font-size: clamp(1.7rem, 3vw, 2.8rem) }` -- or, on this page, the
 * even later `.legal h2 { margin-top: 42px; font-size: 1.55rem }` below,
 * which a same-specificity `.card h2` loses to on source order alone -- and
 * both blow up the 3-column grid and shove the heading 42px down inside a
 * card that had no such gap as `h3`. Two classes deep beats `.legal h2` on
 * specificity rather than depending on staying below it in the file, and
 * both properties are pinned back to what the base `h1, h2, h3 { margin: 0 }`
 * rule already gave `h3`.
 */
.grid-3 .card h2 { margin-top: 0; font-size: 1.15rem; letter-spacing: normal; }
.rule-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.rule-list li { padding: 13px 16px; border-left: 3px solid var(--accent); background: var(--elevated); }
.step-list { display: grid; gap: 14px; margin: 0; padding-left: 1.5rem; }
.step-list li { padding: 16px 18px; border-left: 3px solid var(--accent); background: var(--surface); }
.step-list strong { color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 8px; font-weight: 700; text-decoration: none; }
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.secondary { color: var(--accent); background: transparent; }
.status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font: 600 11px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .03em; }
.status.ready { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.status.review { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); }
.status.todo { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--surface); }
table { width: 100%; min-width: 700px; border-collapse: collapse; }
caption { padding: 16px; text-align: left; font-weight: 700; }
th, td { padding: 15px 16px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .85rem; font-weight: 600; }
td code, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
/* A `<code>` token is one unbreakable word to the layout engine, and this page
   carries several that are longer than a phone. `npm run
   comeshop-ai-watch:billing:catalogue:discover` is forty-eight characters,
   which measured about 379px -- and the responsive gate reported the page
   overflowing by exactly 59px at 320px and 19px at 360px, both of which are
   379 minus the viewport. Nothing at 390px and above. The 700px table in the
   element list was a red herring: it sits inside `.table-wrap`, which already
   scrolls.

   Found 2026-09-11 by running `check-responsive-layout.mjs`, which is
   deliberately outside every chain because Playwright is not a dependency
   here, and had therefore never been run against this page. */
code { overflow-wrap: anywhere; }
.callout { padding: 20px; border: 1px solid var(--border); background: var(--elevated); }
.callout strong { color: var(--accent); }
.legal h1 { font-size: clamp(2rem, 4vw, 4rem); }
.legal h2 { margin-top: 42px; font-size: 1.55rem; }
.legal h3 { margin-top: 26px; }
.legal .meta { color: var(--muted); font: 500 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; }
.todo { color: var(--warning); font-weight: 700; }
footer { padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
footer nav { justify-content: flex-start; margin-bottom: 16px; }
@media (max-width: 900px) {
  .hero-grid, .grid-3 { grid-template-columns: 1fr; }
  .section-header { display: block; }
  .section-header p { margin-top: 12px; }
}
@media (max-width: 640px) {
  .topbar-inner { align-items: flex-start; flex-direction: column; padding-top: 16px; padding-bottom: 16px; gap: 12px; }
  nav { justify-content: flex-start; }
  main { padding-top: 32px; }
  h1 { font-size: clamp(2.3rem, 13vw, 4rem); }
  .section { padding-top: 52px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (forced-colors: active) { .button, nav a, input, textarea, summary { border: 1px solid ButtonText; } .button.primary { background: Highlight; color: HighlightText; } }

/* The language picker and the notice that the Chinese page is the authority.
   Both are appended by app.js / hidden in the markup, so they carry no weight
   until a reader is actually on a translated page. */
.language-choice {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
}
.language-choice select {
  font: inherit;
  padding: 0.2rem 0.4rem;
  max-width: 12rem;
}
.translation-notice {
  margin-top: 0.75rem;
  font-size: 0.85em;
  opacity: 0.85;
  text-align: center;
}