/* =====================================================================
   CPS Tester — "Event Horizon Lab" stylesheet (cps-horizon.css)
   Order: Tokens → Base → Layout → Components → Pages → Utilities → Media
   Every colour, font, radius, shadow and spacing value lives in :root.
   ===================================================================== */

/* ===================== 0. FONTS (self-hosted, OFL licensed) ===================== */
@font-face { font-family: "Sora"; src: url("../fonts/sora-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* ===================== 1. TOKENS ===================== */
:root {
  /* Brand colours (sampled from the logo) */
  --cps-navy: #080c3c;          /* deep space navy — dark panels, footer */
  --cps-navy-2: #11165a;        /* lighter navy — panel gradients */
  --cps-violet: #6a1fd0;        /* primary — buttons, links (7.7:1 on white) */
  --cps-violet-dark: #4b13a0;   /* primary hover */
  --cps-violet-glow: #b46cff;   /* ring glow on dark panels (decorative) */
  --cps-violet-soft: #efe6ff;   /* tinted chips / badges */
  --cps-cyan: #22e1ff;          /* accent — cursor colour, highlights on dark */
  --cps-cyan-ink: #0a6a82;      /* cyan readable on light (6.2:1) */
  --cps-cyan-soft: #e6f9fd;     /* cyan tinted background */

  /* Text */
  --cps-ink: #14173f;           /* body text (17:1 on white) */
  --cps-muted: #4a4f74;         /* secondary text (7.9:1 on white) */
  --cps-on-dark: #e8eaff;       /* text on navy (15.6:1) */
  --cps-on-dark-muted: #b8bdf0; /* muted text on navy (10:1) */

  /* Surfaces & lines */
  --cps-bg: #ffffff;            /* page background */
  --cps-bg-alt: #f4f5fe;        /* alternate section background */
  --cps-bg-tint: #f7f3ff;       /* violet-tinted section background */
  --cps-line: #d9dcf2;          /* borders, dividers */
  --cps-line-strong: #8d92bf;   /* UI borders needing 3:1 */

  /* Status */
  --cps-success: #1d7a3e;       /* success text */
  --cps-success-bg: #e9f7ee;
  --cps-warning: #8a4b00;       /* warning text */
  --cps-warning-bg: #fff6e8;
  --cps-note-bg: #eef1ff;

  /* Typography */
  --cps-font-head: "Sora", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --cps-font-body: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --cps-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  --cps-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --cps-fs-h1: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --cps-fs-h2: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
  --cps-fs-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --cps-fs-small: 0.9rem;

  /* Shape & depth */
  --cps-radius-sm: 8px;         /* chips, inputs */
  --cps-radius: 14px;           /* cards */
  --cps-radius-lg: 24px;        /* panels, hero console */
  --cps-radius-pill: 999px;     /* buttons, badges */
  --cps-shadow-sm: 0 1px 2px rgba(8, 12, 60, .06), 0 2px 8px rgba(8, 12, 60, .05);
  --cps-shadow: 0 2px 6px rgba(8, 12, 60, .06), 0 12px 32px rgba(8, 12, 60, .08);
  --cps-shadow-lg: 0 24px 60px rgba(8, 12, 60, .22);
  --cps-glow: 0 0 0 4px rgba(34, 225, 255, .35);

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --cps-section-pad: clamp(56px, 8vw, 112px);

  /* Layout */
  --cps-container: 1200px;      /* max content width */
  --cps-gutter: clamp(20px, 4vw, 32px);
  --cps-header-h: 72px;         /* used for scroll-margin */
}

/* ===================== 2. BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cps-header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--cps-font-body);
  font-size: var(--cps-fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--cps-ink);
  background: var(--cps-bg);
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--cps-font-head);
  color: var(--cps-ink);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 var(--s4);
  overflow-wrap: break-word;
}
h1 { font-size: var(--cps-fs-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--cps-fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--cps-fs-h3); font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
a { color: var(--cps-violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cps-violet-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--cps-violet); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cps-cyan); color: var(--cps-navy); }
strong { font-weight: 700; }
code, kbd, .cps-mono { font-family: var(--cps-font-mono); font-size: .9em; }
code {
  background: var(--cps-bg-alt);
  border: 1px solid var(--cps-line);
  border-radius: 6px;
  padding: .1em .4em;
}
kbd {
  display: inline-block;
  padding: .1em .5em;
  border: 1px solid var(--cps-line-strong);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
}
hr { border: 0; border-top: 1px solid var(--cps-line); margin: var(--s7) 0; }
[id] { scroll-margin-top: calc(var(--cps-header-h) + 16px); }

/* ===================== 3. LAYOUT ===================== */
.container { width: 100%; max-width: var(--cps-container); margin: 0 auto; padding: 0 var(--cps-gutter); }
.section { padding: var(--cps-section-pad) 0; position: relative; }
.section-alt { background: var(--cps-bg-alt); }
/* Subtle orbit-dot pattern (≤ 6% opacity) */
.section-dots {
  background-color: var(--cps-bg-alt);
  background-image: radial-gradient(rgba(106, 31, 208, .06) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.section-tint { background: var(--cps-bg-tint); }
.section-head { max-width: 760px; margin-bottom: var(--s7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--cps-muted); font-size: 1.08rem; margin-bottom: 0; }
.prose { max-width: 68ch; }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-2 { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.grid-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; }

/* Eyebrow label with speed streaks (signature detail #1) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cps-font-mono);
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cps-violet);
  margin-bottom: var(--s3);
}
.eyebrow::before {
  content: ""; width: 34px; height: 10px; flex: none;
  background:
    linear-gradient(90deg, transparent, var(--cps-violet)) 0 0 / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--cps-violet)) 8px 4px / 26px 2px no-repeat,
    linear-gradient(90deg, transparent, var(--cps-cyan-ink)) 14px 8px / 20px 2px no-repeat;
}
.section-head.center .eyebrow { justify-content: center; }

/* Orbit-ring divider (signature detail #2) */
.orbit-divider { height: 34px; position: relative; overflow: hidden; }
.orbit-divider::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--cps-navy); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cps-violet), 0 0 14px 6px rgba(180, 108, 255, .45);
}
.orbit-divider::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cps-line-strong) 30%, transparent 47%, transparent 53%, var(--cps-line-strong) 70%, transparent);
}

/* ===================== 4. COMPONENTS ===================== */

/* ---- Skip link ---- */
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--cps-navy); color: #fff; padding: 10px 16px; border-radius: var(--cps-radius-sm); }
.skip-link:focus { left: 8px; color: #fff; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--cps-line);
  transition: box-shadow .2s ease;
}
@supports (backdrop-filter: blur(8px)) { .site-header { backdrop-filter: blur(10px); background: rgba(255, 255, 255, .86); } }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(8, 12, 60, .1); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--cps-header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cps-ink); font-family: var(--cps-font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.brand:hover { color: var(--cps-ink); }
.brand img { width: 40px; height: 40px; }
.brand span b { color: var(--cps-violet); font-weight: 700; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--cps-line-strong); border-radius: var(--cps-radius-sm);
  background: #fff; color: var(--cps-ink); font: 600 .95rem var(--cps-font-body); cursor: pointer;
}
.nav-toggle-bars { width: 18px; height: 12px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after, .nav-toggle-bars span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars::before { top: 0; } .nav-toggle-bars span { top: 5px; } .nav-toggle-bars::after { bottom: 0; }
.site-nav { display: none; }
.site-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--cps-line); box-shadow: var(--cps-shadow); padding: var(--s3) var(--cps-gutter) var(--s5); }
.no-js .site-nav { display: block; position: static; box-shadow: none; padding: 0 0 var(--s3); width: 100%; }
.no-js .header-inner { flex-wrap: wrap; }
.no-js .nav-toggle { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-list li { margin: 0; }
.nav-list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--cps-radius-sm); color: var(--cps-ink); text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav-list a:hover { background: var(--cps-bg-alt); color: var(--cps-violet); }
.nav-list a[aria-current="page"] { color: var(--cps-violet); background: var(--cps-violet-soft); }
.nav-cta { margin-top: var(--s2); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 2px solid var(--cps-violet); border-radius: var(--cps-radius-pill);
  background: var(--cps-violet); color: #fff;
  font: 700 1rem var(--cps-font-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(106, 31, 208, .28);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--cps-violet-dark); border-color: var(--cps-violet-dark); color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(106, 31, 208, .34), var(--cps-glow); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1.08rem; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn-outline { background: transparent; color: var(--cps-violet); box-shadow: none; }
.btn-outline:hover { background: var(--cps-violet-soft); color: var(--cps-violet-dark); box-shadow: none; }
.btn-light { background: #fff; border-color: #fff; color: var(--cps-navy); box-shadow: none; }
.btn-light:hover { background: var(--cps-cyan); border-color: var(--cps-cyan); color: var(--cps-navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---- Chips / badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--cps-radius-pill);
  background: var(--cps-violet-soft); color: var(--cps-violet-dark);
  font-size: .88rem; font-weight: 700;
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cps-violet); box-shadow: 0 0 0 3px rgba(106, 31, 208, .2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: var(--s5) 0 0; }
.chips li { margin: 0; padding: 6px 12px; border: 1px solid var(--cps-line); border-radius: var(--cps-radius-sm); background: #fff; font-size: .88rem; font-weight: 600; color: var(--cps-muted); }
.chips li b { color: var(--cps-ink); }

/* ---- Cards ---- */
.card {
  background: #fff; border: 1px solid var(--cps-line); border-radius: var(--cps-radius);
  padding: clamp(22px, 3vw, 30px); box-shadow: var(--cps-shadow-sm);
  height: 100%; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--cps-muted); margin-bottom: 0; }
.card p + p { margin-top: .8em; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--cps-violet); }
.card-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: var(--s4);
  display: grid; place-items: center;
  background: var(--cps-navy); color: var(--cps-cyan);
  box-shadow: inset 0 0 0 2px rgba(180, 108, 255, .55);
}
.card-icon svg { width: 24px; height: 24px; }
.card-num { font-family: var(--cps-font-mono); font-weight: 700; color: var(--cps-violet); font-size: .85rem; letter-spacing: .08em; margin-bottom: var(--s2); }

/* Feature bento: first card spans two columns on wide screens */
.bento { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--cps-line); border-radius: var(--cps-radius); background: #fff; box-shadow: var(--cps-shadow-sm); -webkit-overflow-scrolling: touch; }
.table-hint { display: none; font-size: .85rem; color: var(--cps-muted); margin: var(--s2) 0 0; }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .97rem; }
caption { text-align: left; padding: 14px 16px; font-weight: 700; color: var(--cps-ink); border-bottom: 1px solid var(--cps-line); font-family: var(--cps-font-head); }
th, td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cps-line); }
thead th { background: var(--cps-navy); color: var(--cps-on-dark); font-family: var(--cps-font-head); font-weight: 600; font-size: .92rem; }
tbody tr:nth-child(even) { background: var(--cps-bg-alt); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag-yes { color: var(--cps-success); font-weight: 700; }
.tag-warn { color: var(--cps-warning); font-weight: 700; }

/* ---- Callouts ---- */
.callout { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 18px 20px; border-radius: var(--cps-radius); border: 1px solid; border-left-width: 5px; margin: var(--s5) 0; }
.callout svg { width: 24px; height: 24px; margin-top: 2px; }
.callout p:last-child { margin-bottom: 0; }
.callout-label { display: block; font-family: var(--cps-font-mono); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.callout-tip { background: var(--cps-success-bg); border-color: #9fd3b2; border-left-color: var(--cps-success); }
.callout-tip .callout-label, .callout-tip svg { color: var(--cps-success); }
.callout-note { background: var(--cps-note-bg); border-color: #c4c9f3; border-left-color: var(--cps-violet); }
.callout-note .callout-label, .callout-note svg { color: var(--cps-violet); }
.callout-warning { background: var(--cps-warning-bg); border-color: #f0cf9c; border-left-color: var(--cps-warning); }
.callout-warning .callout-label, .callout-warning svg { color: var(--cps-warning); }

/* ---- Code block with copy button ---- */
.code-block { position: relative; margin: var(--s5) 0; }
.code-block pre { margin: 0; padding: 18px 20px; padding-right: 88px; border-radius: var(--cps-radius); background: var(--cps-navy); color: var(--cps-on-dark); font-family: var(--cps-font-mono); font-size: .9rem; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; }
.copy-btn { position: absolute; top: 10px; right: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--cps-radius-sm); border: 1px solid rgba(232, 234, 255, .4); background: rgba(255, 255, 255, .08); color: var(--cps-on-dark); font: 600 .82rem var(--cps-font-body); cursor: pointer; }
.copy-btn:hover { background: var(--cps-cyan); color: var(--cps-navy); border-color: var(--cps-cyan); }

/* ---- Steps / timeline ---- */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: step; }
.timeline li { margin: 0; position: relative; padding: 28px 24px 24px; background: #fff; border: 1px solid var(--cps-line); border-radius: var(--cps-radius); box-shadow: var(--cps-shadow-sm); }
.timeline li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s4);
  border-radius: 50%; background: var(--cps-navy); color: var(--cps-cyan);
  font-family: var(--cps-font-mono); font-weight: 700;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--cps-violet-glow);
}
.timeline h3 { margin-bottom: var(--s2); }
.timeline p { color: var(--cps-muted); margin: 0; }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 var(--s6) 64px; margin: 0; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cps-violet); color: #fff; font-family: var(--cps-font-head); font-weight: 700; }
.steps > li::after { content: ""; position: absolute; left: 20px; top: 48px; bottom: 8px; width: 2px; background: linear-gradient(var(--cps-violet-glow), transparent); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: var(--s2); padding-top: 6px; }
.steps p { color: var(--cps-muted); }

/* ---- Problem → cause → fix ---- */
.fix-card { background: #fff; border: 1px solid var(--cps-line); border-radius: var(--cps-radius); padding: clamp(22px, 3vw, 28px); box-shadow: var(--cps-shadow-sm); }
.fix-card h3 { display: flex; gap: 10px; align-items: flex-start; }
.fix-card dl { margin: 0; display: grid; gap: var(--s3); }
.fix-card dt { font-family: var(--cps-font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-violet); }
.fix-card dd { margin: 0; color: var(--cps-muted); }

/* ---- FAQ accordion ---- */
.faq { display: grid; gap: var(--s3); max-width: 860px; }
.faq-item { background: #fff; border: 1px solid var(--cps-line); border-radius: var(--cps-radius); box-shadow: var(--cps-shadow-sm); }
.faq-item h3 { margin: 0; font-size: 1.08rem; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 56px; padding: 16px 20px; text-align: left;
  background: none; border: 0; border-radius: var(--cps-radius); cursor: pointer;
  font: 650 1.05rem/1.4 var(--cps-font-head); color: var(--cps-ink);
}
.faq-q:hover { color: var(--cps-violet); }
.faq-q .faq-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cps-violet); position: relative; }
.faq-q .faq-icon::before, .faq-q .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--cps-violet); transition: transform .2s ease; }
.faq-q .faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 20px 18px; color: var(--cps-muted); }
.faq-a p:last-child { margin-bottom: 0; }
.js .faq-a[hidden] { display: none; }

/* ---- Breadcrumb & page hero ---- */
.page-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px); background: var(--cps-bg-tint); border-bottom: 1px solid var(--cps-line); }
.page-hero::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%;
  border: 2px solid rgba(106, 31, 208, .12); box-shadow: 0 0 0 40px rgba(106, 31, 208, .03), 0 0 0 90px rgba(10, 106, 130, .03);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 22ch; }
.page-hero p.lead { color: var(--cps-muted); font-size: 1.12rem; max-width: 62ch; margin: 0; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; gap: 6px; font-size: .92rem; color: var(--cps-muted); }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--cps-line-strong); }
.breadcrumb a { color: var(--cps-muted); }
.breadcrumb [aria-current] { color: var(--cps-ink); font-weight: 600; }

/* ---- Guide cards ---- */
.guide-card { padding: 0; overflow: hidden; }
.guide-card img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--cps-line); }
.guide-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.guide-card .cat { align-self: flex-start; font-family: var(--cps-font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-cyan-ink); background: var(--cps-cyan-soft); padding: 4px 10px; border-radius: var(--cps-radius-pill); margin-bottom: var(--s3); }
.guide-card h3 { font-size: 1.15rem; }
.guide-card h3 a { color: var(--cps-ink); text-decoration: none; }
.guide-card h3 a:hover { color: var(--cps-violet); text-decoration: underline; }
.guide-card p { flex: 1; }
.read-more { margin-top: var(--s4); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Footer ---- */
.site-footer { background: var(--cps-navy); color: var(--cps-on-dark-muted); padding: var(--s8) 0 0; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cps-violet-glow), var(--cps-cyan), transparent); }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); padding-bottom: var(--s7); }
.footer-brand { grid-column: 1 / -1; max-width: 420px; }
.footer-brand .brand { color: #fff; margin-bottom: var(--s3); }
.footer-brand .brand span b { color: var(--cps-cyan); }
.footer-brand p { margin: 0; }
.site-footer h2 { font-size: .85rem; font-family: var(--cps-font-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: var(--s4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--cps-on-dark); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.site-footer a:hover { color: var(--cps-cyan); text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--cps-cyan); }
.footer-bottom { border-top: 1px solid rgba(184, 189, 240, .2); padding: var(--s5) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-size: .92rem; }
.footer-bottom p { margin: 0; }

/* ---- Back to top ---- */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--cps-violet-glow); background: var(--cps-navy); color: var(--cps-cyan); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cps-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 22px; height: 22px; }

/* ---- Forms ---- */
.form { display: grid; gap: var(--s4); }
.form-row { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--cps-line-strong); border-radius: var(--cps-radius-sm); background: #fff; color: var(--cps-ink); font: inherit; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cps-violet); box-shadow: 0 0 0 3px rgba(106, 31, 208, .2); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 14px 16px; border-radius: var(--cps-radius-sm); font-weight: 600; }
.form-status:empty { display: none; }
.form-status.ok { background: var(--cps-success-bg); color: var(--cps-success); border: 1px solid #9fd3b2; }
.form-status.err { background: var(--cps-warning-bg); color: var(--cps-warning); border: 1px solid #f0cf9c; }

/* ===================== 5. PAGES ===================== */

/* ---- Home hero ---- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); background: linear-gradient(180deg, var(--cps-bg-tint), #fff 75%); }
.hero::before {
  /* faint orbit rings behind hero text */
  content: ""; position: absolute; left: -260px; bottom: -320px; width: 640px; height: 640px; border-radius: 50%;
  border: 1px solid rgba(106, 31, 208, .1); box-shadow: 0 0 0 60px rgba(106, 31, 208, .025), 0 0 0 140px rgba(10, 106, 130, .02);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { margin: var(--s4) 0 var(--s4); }
.hero h1 .hl { color: var(--cps-violet); }
.hero .lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--cps-muted); max-width: 56ch; margin-bottom: var(--s5); }

/* ---- Tester console (signature hero visual) ---- */
.cps-console {
  background: radial-gradient(120% 90% at 50% 0%, var(--cps-navy-2), var(--cps-navy) 60%);
  border-radius: var(--cps-radius-lg); color: var(--cps-on-dark);
  padding: clamp(18px, 3vw, 28px); box-shadow: var(--cps-shadow-lg);
  border: 1px solid rgba(180, 108, 255, .35);
  position: relative;
}
.cps-console-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.cps-console-title { font-family: var(--cps-font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cps-on-dark-muted); margin: 0; display: flex; align-items: center; gap: 8px; }
.cps-console-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cps-cyan); box-shadow: 0 0 10px var(--cps-cyan); }
/* Keycap mode buttons (signature detail #3) */
.cps-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.cps-key {
  min-width: 46px; min-height: 44px; padding: 0 10px;
  border-radius: 10px; border: 1px solid rgba(184, 189, 240, .35); border-bottom: 4px solid rgba(184, 189, 240, .25);
  background: rgba(255, 255, 255, .06); color: var(--cps-on-dark);
  font: 700 .9rem var(--cps-font-mono); cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s;
}
.cps-key:hover { background: rgba(255, 255, 255, .12); }
.cps-key:active { transform: translateY(2px); border-bottom-width: 2px; }
.cps-key[aria-pressed="true"] { background: var(--cps-cyan); color: var(--cps-navy); border-color: var(--cps-cyan); border-bottom-color: #0aa9c2; }
.cps-key:focus-visible { outline-color: var(--cps-cyan); }
.cps-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--s4); }
.cps-hud div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(184, 189, 240, .2); border-radius: 12px; padding: 10px 12px; }
.cps-hud dt { font-family: var(--cps-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cps-on-dark-muted); }
.cps-hud dd { margin: 0; font-family: var(--cps-font-mono); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); color: #fff; font-variant-numeric: tabular-nums; line-height: 1.3; }
.cps-hud .is-cps dd { color: var(--cps-cyan); }
.cps-pad {
  position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 220px;
  border-radius: 18px; border: 1px dashed rgba(184, 189, 240, .35);
  background:
    radial-gradient(circle at 50% 50%, rgba(180, 108, 255, .18), transparent 55%),
    rgba(0, 0, 0, .18);
  display: grid; place-items: center; overflow: hidden;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  font: inherit; color: inherit; padding: 0;
}
.cps-pad:focus-visible { outline: 3px solid var(--cps-cyan); outline-offset: 3px; }
.cps-ring {
  width: clamp(110px, 32%, 170px); aspect-ratio: 1; border-radius: 50%;
  background: #000; border: 4px solid #fff;
  box-shadow: 0 0 0 6px rgba(180, 108, 255, .55), 0 0 40px 14px rgba(180, 108, 255, .55), 0 0 90px 30px rgba(106, 31, 208, .35);
  transition: transform .08s ease, box-shadow .2s ease;
  pointer-events: none;
}
.cps-pad.is-hit .cps-ring { transform: scale(.94); box-shadow: 0 0 0 6px rgba(34, 225, 255, .7), 0 0 46px 16px rgba(34, 225, 255, .45), 0 0 90px 30px rgba(106, 31, 208, .35); }
.cps-streaks { position: absolute; inset: 0; pointer-events: none; opacity: .75; }
.cps-pad-label { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-weight: 700; color: #fff; font-size: 1rem; pointer-events: none; padding: 0 12px; }
.cps-pad-label small { display: block; font-weight: 500; color: var(--cps-on-dark-muted); font-size: .85rem; }
.cps-ripple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--cps-cyan); pointer-events: none; opacity: 0; }
.cps-console-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.cps-console-foot p { margin: 0; font-size: .88rem; color: var(--cps-on-dark-muted); }
.cps-reset { min-height: 44px; padding: 0 16px; border-radius: var(--cps-radius-pill); border: 1px solid rgba(184, 189, 240, .45); background: transparent; color: var(--cps-on-dark); font: 700 .9rem var(--cps-font-body); cursor: pointer; }
.cps-reset:hover { background: rgba(255, 255, 255, .1); }
.cps-reset:focus-visible { outline-color: var(--cps-cyan); }
.cps-result { margin-top: var(--s4); padding: 16px 18px; border-radius: 14px; background: #fff; color: var(--cps-ink); }
.cps-result[hidden] { display: none; }
.cps-result h3 { margin: 0 0 4px; font-size: 1.15rem; }
.cps-result p { margin: 0; color: var(--cps-muted); font-size: .95rem; }
.cps-result .rank { color: var(--cps-violet); }
.cps-noscript { margin: var(--s4) 0 0; padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--cps-ink); font-size: .95rem; }
.cps-history { margin-top: var(--s4); }
.cps-history h3 { font-size: .8rem; font-family: var(--cps-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cps-on-dark-muted); margin-bottom: 8px; }
.cps-history ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cps-history li { margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-family: var(--cps-font-mono); font-size: .82rem; color: var(--cps-on-dark); }

/* ---- About split image / mini cards ---- */
.fit-card { border-left: 4px solid var(--cps-violet); }
.score-scale { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.score-scale li { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.score-scale .bar { height: 12px; border-radius: 99px; background: var(--cps-bg-alt); overflow: hidden; border: 1px solid var(--cps-line); }
.score-scale .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cps-violet), var(--cps-cyan-ink)); border-radius: 99px; }
.score-scale b { font-family: var(--cps-font-mono); font-size: .9rem; }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li { margin: 0; position: relative; padding-left: 34px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--cps-violet-soft); border: 2px solid var(--cps-violet); }
.checklist li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 5px; border-left: 2px solid var(--cps-violet); border-bottom: 2px solid var(--cps-violet); transform: rotate(-45deg); }

.mode-card .mode-time { font-family: var(--cps-font-mono); font-weight: 700; font-size: 2rem; color: var(--cps-violet); line-height: 1; margin-bottom: var(--s3); }
.mode-card .btn { margin-top: auto; align-self: flex-start; }
.mode-card p { margin-bottom: var(--s4); }

.independent-note { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s6); padding: 18px 20px; border-radius: var(--cps-radius); background: #fff; border: 1px dashed var(--cps-line-strong); color: var(--cps-muted); font-size: .97rem; }
.independent-note svg { width: 22px; height: 22px; flex: none; color: var(--cps-violet); margin-top: 3px; }
.independent-note p { margin: 0; }
.meta-line { font-size: .92rem; color: var(--cps-muted); margin-top: var(--s3); }

/* ---- Guide article ---- */
.article-layout { display: grid; gap: var(--s7); grid-template-columns: 1fr; padding: clamp(32px, 5vw, 64px) 0 var(--cps-section-pad); }
.article { min-width: 0; }
.article > * { max-width: 72ch; }
.article .cover { width: 100%; max-width: 100%; border-radius: var(--cps-radius); border: 1px solid var(--cps-line); margin-bottom: var(--s6); }
.article h2 { margin-top: 2.4em; margin-bottom: .8em; }
.article h3 { margin-top: 1.8em; margin-bottom: .6em; }
.article .table-wrap, .article .callout, .article .code-block { max-width: 72ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--cps-muted); font-size: .95rem; margin-top: var(--s3); }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.toc { background: var(--cps-bg-alt); border: 1px solid var(--cps-line); border-radius: var(--cps-radius); padding: 20px 24px; margin-bottom: var(--s6); }
.toc h2 { font-size: .85rem; font-family: var(--cps-font-mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s3); color: var(--cps-violet); }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: .3em; }
.takeaways { background: var(--cps-navy); color: var(--cps-on-dark); border-radius: var(--cps-radius); padding: 24px 28px; margin-top: var(--s7); }
.takeaways h2 { color: #fff; margin-top: 0; font-size: 1.4rem; }
.takeaways ul { margin: 0; }
.takeaways li::marker { color: var(--cps-cyan); }
.sidebar { display: grid; gap: var(--s5); align-content: start; }
.side-card { background: #fff; border: 1px solid var(--cps-line); border-radius: var(--cps-radius); padding: 22px; box-shadow: var(--cps-shadow-sm); }
.side-card h2 { font-size: 1.1rem; margin-bottom: var(--s3); }
.side-card.dark { background: radial-gradient(120% 90% at 50% 0%, var(--cps-navy-2), var(--cps-navy) 60%); color: var(--cps-on-dark); border-color: rgba(180, 108, 255, .35); }
.side-card.dark h2 { color: #fff; }
.side-card.dark p { color: var(--cps-on-dark-muted); font-size: .95rem; }
.side-card.dark .btn { width: 100%; }
.side-card ul { list-style: none; margin: 0; padding: 0; }
.side-card li { margin: 0; border-top: 1px solid var(--cps-line); }
.side-card li:first-child { border-top: 0; }
.side-card li a { display: block; padding: 10px 0; font-weight: 600; text-decoration: none; }
.side-card li a:hover { text-decoration: underline; }
.side-logo { width: 56px; height: 56px; margin-bottom: var(--s3); }

/* ---- Legal pages ---- */
.legal { padding: clamp(32px, 5vw, 64px) 0 var(--cps-section-pad); }
.legal .prose h2 { margin-top: 2em; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }

/* ---- 404 ---- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: var(--s8) 0; }
.notfound .big { font-family: var(--cps-font-mono); font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 700; color: var(--cps-violet); line-height: 1; margin-bottom: var(--s3); }
.notfound .btn-row { justify-content: center; margin-top: var(--s5); }
.notfound p { max-width: 52ch; margin-left: auto; margin-right: auto; color: var(--cps-muted); }

/* ===================== 6. UTILITIES ===================== */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.mt-0 { margin-top: 0 !important; }
.mt-l { margin-top: var(--s7) !important; }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.muted { color: var(--cps-muted); }

/* ===================== 7. MEDIA QUERIES ===================== */
@media (max-width: 767px) {
  .table-hint { display: block; }
  .cps-hud dd { font-size: 1.25rem; }
}
@media (min-width: 768px) {
  .footer-brand { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav, .no-js .site-nav { display: block; position: static; width: auto; padding: 0; box-shadow: none; border: 0; background: none; }
  .no-js .header-inner { flex-wrap: nowrap; }
  .nav-list { flex-direction: row; align-items: center; gap: 2px; }
  .nav-list a { padding: 0 11px; font-size: .95rem; }
  .nav-cta { margin: 0 0 0 10px; }
  .split { grid-template-columns: 1.02fr 1fr; }
  .bento > :first-child { grid-column: span 2; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .sidebar { position: sticky; top: calc(var(--cps-header-h) + 24px); }
  .footer-brand { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@media (min-width: 1280px) {
  .nav-list a { padding: 0 14px; }
}

/* Motion — only when the user allows it */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .card:hover, .timeline li:hover { transform: translateY(-4px); box-shadow: var(--cps-shadow); }
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .cps-ripple { animation: cps-ripple .55s ease-out forwards; }
  @keyframes cps-ripple { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
  .cps-ring { animation: cps-pulse 3.2s ease-in-out infinite; }
  @keyframes cps-pulse { 50% { box-shadow: 0 0 0 6px rgba(180, 108, 255, .7), 0 0 50px 18px rgba(180, 108, 255, .6), 0 0 100px 34px rgba(106, 31, 208, .4); } }
}

/* Print */
@media print {
  .site-header, .site-footer, .to-top, .btn, .btn-row, .sidebar, .cps-console, .skip-link, .toc, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .section, .page-hero, .hero { padding: 16px 0; background: #fff !important; }
  a { color: #000; }
  .article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .takeaways { background: #fff; color: #000; border: 1px solid #000; }
  .takeaways h2 { color: #000; }
  thead th { background: #eee; color: #000; }
  .article-layout { display: block; }
}

/* ===================== 8. ADDITIONS (score bars, details) ===================== */
.score-scale .bar .lvl-1 { width: 14%; } .score-scale .bar .lvl-2 { width: 28%; }
.score-scale .bar .lvl-3 { width: 42%; } .score-scale .bar .lvl-4 { width: 56%; }
.score-scale .bar .lvl-5 { width: 70%; } .score-scale .bar .lvl-6 { width: 85%; }
.score-scale .bar .lvl-7 { width: 100%; }
details { border: 1px solid var(--cps-line); border-radius: var(--cps-radius); background: #fff; padding: 14px 18px; }
details summary { cursor: pointer; min-height: 28px; }
details[open] summary { margin-bottom: var(--s2); }
details p { margin: 0; }
/* Grid children may shrink below their content width (prevents mobile overflow) */
.split > *, .grid > *, .grid-2 > *, .bento > *, .footer-grid > * { min-width: 0; }
.read-more svg, .fix-card h3 svg, .independent-note svg { width: 18px; height: 18px; flex: none; }
.read-more { align-self: flex-start; }

/* ===================== 9. TOOL-FIRST HOMEPAGE ===================== */
/* Hero: the tool itself, full width */
.tool-hero { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); background: linear-gradient(180deg, var(--cps-bg-tint), #fff 85%); }
.tool-intro { text-align: center; max-width: 820px; margin: 0 auto var(--s6); }
.tool-intro h1 { margin-bottom: var(--s3); }
.tool-intro h1 .hl { color: var(--cps-violet); }
.tool-intro .lead { color: var(--cps-muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin: 0 auto; max-width: 60ch; }
.cps-tool { display: grid; gap: var(--s5); grid-template-columns: 1fr; max-width: 1040px; margin: 0 auto; }
.tool-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.cps-tool .cps-pad { aspect-ratio: 16 / 9; min-height: 260px; }
.cps-tool .cps-ring { width: clamp(120px, 26%, 190px); }
.tool-side { display: flex; flex-direction: column; gap: var(--s4); }
.tool-side .cps-hud { grid-template-columns: repeat(2, 1fr); margin: 0; }
.tool-side .cps-result, .tool-side .cps-history { margin: 0; }
.tool-side .cps-reset { margin-top: auto; width: 100%; }
.tool-facts { list-style: none; padding: 0; margin: var(--s5) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); color: var(--cps-muted); font-weight: 600; font-size: .95rem; }
.tool-facts li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tool-facts svg { width: 18px; height: 18px; color: var(--cps-success); }
.section-intro { max-width: 64ch; margin-bottom: var(--s6); }

/* About: prose + big figures separated by rules (no boxes) */
.about-split { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; }
.figure-strip { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--cps-ink); }
.figure-strip > div { padding: var(--s5) var(--s4) var(--s5) 0; border-bottom: 1px solid var(--cps-line); }
.figure-strip > div:nth-child(odd) { border-right: 1px solid var(--cps-line); }
.figure-strip > div:nth-child(even) { padding-left: var(--s5); }
.figure-strip dt { font-family: var(--cps-font-head); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); color: var(--cps-violet); line-height: 1.1; letter-spacing: -0.03em; }
.figure-strip dd { margin: 6px 0 0; color: var(--cps-muted); }

/* How to use: numbered track with a connecting line */
.track { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); position: relative; }
.track li { margin: 0; position: relative; padding-top: var(--s7); }
.track li::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--s6)); top: 22px; height: 2px; background: linear-gradient(90deg, var(--cps-violet), rgba(106, 31, 208, .15)); }
.track li:last-child::before { right: 0; }
.track-num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cps-navy); color: var(--cps-cyan); font-family: var(--cps-font-mono); font-weight: 700; box-shadow: 0 0 0 4px var(--cps-bg-tint), 0 0 0 6px var(--cps-violet-glow); }
.track h3 { margin-bottom: var(--s2); }
.track p { color: var(--cps-muted); margin: 0; }

/* Modes: table + rank scale side by side */
.modes-split { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: start; }
.modes-split table { min-width: 420px; }
.score-scale li { grid-template-columns: 110px 1fr 56px; }
.score-scale em { font-style: normal; font-family: var(--cps-font-mono); font-size: .88rem; color: var(--cps-muted); text-align: right; }

/* Techniques: alternating rows with rules, no cards */
.tech-rows { border-top: 2px solid var(--cps-ink); }
.tech-row { display: grid; gap: var(--s2) var(--s7); grid-template-columns: 1fr; padding: var(--s5) 0; border-bottom: 1px solid var(--cps-line-strong); }
.tech-name span { display: inline-block; font-family: var(--cps-font-mono); font-weight: 700; font-size: .85rem; color: var(--cps-cyan-ink); background: var(--cps-cyan-soft); padding: 2px 10px; border-radius: var(--cps-radius-pill); margin-bottom: 6px; }
.tech-name h3 { margin: 0; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.7rem); }
.tech-row p { margin: 0; color: var(--cps-muted); max-width: 64ch; }

/* Tips: two plain columns with icons */
.tips-cols { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: var(--s5); }
.tips-cols h3 { padding-bottom: var(--s3); border-bottom: 3px solid var(--cps-violet); display: inline-block; }
.icon-list { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s4); }
.icon-list li { margin: 0; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.icon-list svg { width: 24px; height: 24px; color: var(--cps-violet); margin-top: 3px; }

/* Troubleshooting: divided definition rows */
.fix-rows { margin: var(--s5) 0 0; }
.fix-rows > div { display: grid; grid-template-columns: 1fr; gap: 4px var(--s6); padding: var(--s4) 0; border-bottom: 1px dashed var(--cps-line-strong); }
.fix-rows > div:first-child { border-top: 1px dashed var(--cps-line-strong); }
.fix-rows dt { font-family: var(--cps-font-head); font-weight: 650; font-size: 1.08rem; }
.fix-rows dd { margin: 0; color: var(--cps-muted); }
.compat-line { max-width: 76ch; color: var(--cps-muted); margin: 0; }

/* FAQ: plain line accordion (no boxes) */
.faq-split { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: start; }
.faq-split .faq { gap: 0; max-width: none; border-top: 2px solid var(--cps-ink); }
.faq-split .faq-item { background: none; border: 0; border-bottom: 1px solid var(--cps-line-strong); border-radius: 0; box-shadow: none; }
.faq-split .faq-q { padding: 18px 0; border-radius: 0; }
.faq-split .faq-a { padding: 0 0 20px; }

@media (min-width: 900px) {
  .cps-tool { grid-template-columns: 1.6fr 1fr; }
  .about-split { grid-template-columns: 1.3fr 1fr; }
  .modes-split { grid-template-columns: 1.2fr 1fr; }
  .tech-row { grid-template-columns: 280px 1fr; align-items: baseline; }
  .fix-rows > div { grid-template-columns: 300px 1fr; }
  .faq-split { grid-template-columns: 1fr 2fr; }
  .faq-split > div:first-child { position: sticky; top: calc(var(--cps-header-h) + 24px); }
}
@media (max-width: 767px) {
  .track li::before { display: none; }
  .track li { padding-top: 0; padding-left: 64px; }
  .score-scale li { grid-template-columns: 96px 1fr 48px; }
}
.cps-tool > *, .about-split > *, .modes-split > *, .faq-split > *, .tips-cols > *, .tech-row > * { min-width: 0; }
.cps-modes { flex-wrap: wrap; }
@media (max-width: 599px) {
  .cps-tool .cps-pad { aspect-ratio: auto; height: 340px; }
  .cps-tool .cps-ring { width: 128px; margin-bottom: 48px; }
  .cps-modes { gap: 4px; }
  .cps-key { min-width: 44px; padding: 0 6px; font-size: .84rem; }
  .tool-bar .cps-console-title { width: 100%; }
}

.tips-cols { margin-top: var(--s4); }

/* ===================== 11. LIGHT TOOL CONSOLE (no dark sections) ===================== */
.cps-console {
  background: linear-gradient(180deg, #ffffff, var(--cps-bg-tint));
  color: var(--cps-ink);
  border: 1px solid var(--cps-line);
  box-shadow: 0 2px 6px rgba(8, 12, 60, .06), 0 24px 60px rgba(106, 31, 208, .14);
}
.cps-console-title { color: var(--cps-muted); }
.cps-console-title::before { background: var(--cps-violet); box-shadow: 0 0 8px rgba(106, 31, 208, .5); }
.cps-key {
  background: #fff; color: var(--cps-ink);
  border: 1px solid var(--cps-line-strong); border-bottom: 4px solid var(--cps-line-strong);
}
.cps-key:hover { background: var(--cps-violet-soft); }
.cps-key[aria-pressed="true"] { background: var(--cps-violet); color: #fff; border-color: var(--cps-violet); border-bottom-color: var(--cps-violet-dark); }
.cps-key:focus-visible, .cps-reset:focus-visible { outline-color: var(--cps-violet); }
.cps-hud div { background: #fff; border: 1px solid var(--cps-line); }
.cps-hud dt { color: var(--cps-muted); }
.cps-hud dd { color: var(--cps-ink); }
.cps-hud .is-cps dd { color: var(--cps-violet); }
.cps-pad {
  border: 1.5px dashed var(--cps-line-strong);
  background:
    radial-gradient(circle at 50% 46%, rgba(180, 108, 255, .22), transparent 52%),
    radial-gradient(circle at 50% 50%, #ffffff, var(--cps-bg-alt));
}
.cps-pad:focus-visible { outline-color: var(--cps-violet); }
.cps-pad-label { color: var(--cps-ink); }
.cps-pad-label small { color: var(--cps-muted); }
.cps-ring { box-shadow: 0 0 0 6px rgba(180, 108, 255, .5), 0 0 34px 10px rgba(180, 108, 255, .45), 0 0 70px 24px rgba(106, 31, 208, .18); }
.cps-pad.is-hit .cps-ring { box-shadow: 0 0 0 6px rgba(10, 106, 130, .55), 0 0 36px 12px rgba(34, 225, 255, .45), 0 0 70px 24px rgba(106, 31, 208, .18); }
.cps-ripple { border-color: var(--cps-violet); }
.cps-result { background: var(--cps-violet-soft); border: 1px solid #d6c2ff; }
.cps-history h3 { color: var(--cps-muted); }
.cps-history li { background: #fff; border: 1px solid var(--cps-line); color: var(--cps-ink); }
.cps-reset { border: 2px solid var(--cps-violet); color: var(--cps-violet); background: #fff; }
.cps-reset:hover { background: var(--cps-violet-soft); }
.cps-noscript { background: var(--cps-warning-bg); color: var(--cps-warning); }
.to-top { background: #fff; color: var(--cps-violet); border-color: var(--cps-violet); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes cps-pulse { 50% { box-shadow: 0 0 0 6px rgba(180, 108, 255, .65), 0 0 44px 14px rgba(180, 108, 255, .5), 0 0 80px 28px rgba(106, 31, 208, .22); } }
}

/* ===================== 12. FEATURES — BENTO GRID ===================== */
.feature-bento-sec { background: var(--cps-bg); }
.fb-head { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: end; margin-bottom: var(--s6); }
.fb-head h2 { margin: 0; }
.fb-head p { margin: 0; color: var(--cps-muted); max-width: 46ch; font-size: 1.05rem; }
.fb-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.fb {
  position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: clamp(22px, 2.6vw, 28px);
  border-radius: 22px; background: var(--cps-bg-alt);
  border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease;
}
.fb:hover { border-color: rgba(106, 31, 208, .3); }
.fb h3 { margin: 0; font-size: 1.12rem; }
.fb p { margin: 0; color: var(--cps-muted); font-size: .97rem; }
.fb-cyan { background: var(--cps-cyan-soft); }
.fb-violet { background: var(--cps-violet-soft); }
.fb-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--cps-violet); box-shadow: 0 4px 14px rgba(106, 31, 208, .15); margin-bottom: var(--s2); }
.fb-icon svg { width: 22px; height: 22px; }
.fb-tag { align-self: flex-start; font-family: var(--cps-font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--cps-violet); padding: 3px 10px; border-radius: 99px; }

/* Hero tile: text + live meter */
.fb-hero { background: linear-gradient(140deg, #f3ecff, #eaf7fc); gap: var(--s5); }
.fb-hero h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.fb-hero .fb-text { display: grid; gap: var(--s2); }
.fb-meter { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 10px 30px rgba(106, 31, 208, .14); margin-top: auto; }
.fb-meter-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--cps-font-mono); }
.fb-meter-top span { font-size: .78rem; letter-spacing: .14em; color: var(--cps-muted); }
.fb-meter-top b { font-size: 2rem; color: var(--cps-violet); }
.fb-bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin-top: 10px; }
.fb-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--cps-violet), #a879f0); }
.fb-bars i:last-child { background: linear-gradient(180deg, var(--cps-cyan-ink), var(--cps-cyan)); }
.fb-bars .h3 { height: 30%; } .fb-bars .h5 { height: 50%; } .fb-bars .h6 { height: 60%; } .fb-bars .h7 { height: 70%; }
.fb-bars .h8 { height: 80%; } .fb-bars .h9 { height: 90%; } .fb-bars .h10 { height: 100%; }
.fb-meter-foot { display: flex; justify-content: space-between; font-family: var(--cps-font-mono); font-size: .75rem; color: var(--cps-muted); margin-top: 6px; }

/* Mini visuals */
.fb-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s3); }
.fb-keys span { font-family: var(--cps-font-mono); font-weight: 700; font-size: .82rem; padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--cps-line-strong); border-bottom-width: 3px; }
.fb-keys .on { background: var(--cps-violet); color: #fff; border-color: var(--cps-violet-dark); }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s3); }
.fb-chips span { font-family: var(--cps-font-mono); font-size: .84rem; padding: 5px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--cps-line); }
.fb-chips .best { background: var(--cps-success-bg); color: var(--cps-success); border-color: #9fd3b2; font-weight: 700; }
.fb-kbd { display: flex; gap: 8px; margin-top: auto; padding-top: var(--s3); }
.fb-kbd kbd { font-size: .9rem; padding: 6px 14px; }
.fb-wide { background: linear-gradient(120deg, var(--cps-bg-alt), #fff); border-color: var(--cps-line); gap: var(--s4); }
.fb-wide .fb-text { display: grid; gap: var(--s2); }
.fb-rank { margin-top: auto; }
.fb-rank-bar { position: relative; height: 12px; border-radius: 99px; background: #e6e3f7; }
.fb-rank-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; border-radius: 99px; background: linear-gradient(90deg, var(--cps-violet), var(--cps-cyan-ink)); }
.fb-rank-bar b { position: absolute; left: 56%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 4px solid var(--cps-violet); box-shadow: 0 2px 8px rgba(106, 31, 208, .35); }
.fb-rank-labels { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--cps-font-mono); font-size: .76rem; color: var(--cps-muted); }
.fb-rank-labels .on { color: var(--cps-violet); font-weight: 700; }

@media (min-width: 640px) {
  .fb-grid { grid-template-columns: repeat(2, 1fr); }
  .fb-hero, .fb-wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .fb-head { grid-template-columns: 1fr auto; }
  .fb-grid { grid-template-columns: repeat(4, 1fr); }
  .fb-hero { grid-column: span 2; grid-row: span 2; }
  .fb-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s6); }
  .fb-wide .fb-rank { margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .fb:hover { transform: translateY(-3px); }
  .js .fb-bars i { transform-origin: bottom; transform: scaleY(.15); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  .js .fb-hero.is-in .fb-bars i { transform: none; }
  .js .fb-hero.is-in .fb-bars i:nth-child(2n) { transition-delay: .08s; }
  .js .fb-hero.is-in .fb-bars i:nth-child(3n) { transition-delay: .16s; }
}
.fb-tag { justify-self: start; }
@media (min-width: 1024px) {
  .fb-wide { display: flex; flex-direction: column; justify-content: space-between; }
  .fb-wide .fb-rank { margin-top: auto; }
}
.fb-rank-labels { font-size: .8rem; gap: 6px; }
@media (min-width: 1024px) { .fb-wide { align-items: stretch; } }

/* ===================== 13. CONTACT, GUIDES (light) ===================== */
.footer-home { display: inline !important; min-height: 0 !important; color: #fff !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; }
.footer-home:hover { color: var(--cps-cyan) !important; }
.contact-wrap { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.contact-wrap > * { min-width: 0; }
.mail-plain { font-family: var(--cps-font-mono); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); color: var(--cps-violet); padding: 14px 0; border-top: 2px solid var(--cps-ink); border-bottom: 1px solid var(--cps-line-strong); margin: var(--s3) 0 var(--s4); user-select: all; }
/* no dark blocks inside guides */
thead th { background: var(--cps-violet-soft); color: var(--cps-ink); }
.code-block pre { background: var(--cps-bg-alt); color: var(--cps-ink); border: 1px solid var(--cps-line); }
.copy-btn { background: #fff; color: var(--cps-violet); border-color: var(--cps-line-strong); }
.copy-btn:hover { background: var(--cps-violet); color: #fff; border-color: var(--cps-violet); }
.takeaways { background: linear-gradient(140deg, #f3ecff, #eaf7fc); color: var(--cps-ink); border: 1px solid #d6c2ff; }
.takeaways h2 { color: var(--cps-ink); }
.takeaways li::marker { color: var(--cps-violet); }
.side-tool { background: linear-gradient(160deg, #f3ecff, #fff); border-color: #d6c2ff; }
.side-tool p { color: var(--cps-muted); font-size: .95rem; }
.side-tool .btn { width: 100%; }
.related-list li a { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.related-list img { width: 84px; height: auto; border-radius: 8px; border: 1px solid var(--cps-line); }
.related-list span { font-size: .93rem; line-height: 1.4; }
/* Guides hub */
.guide-featured { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: center; margin-bottom: var(--s7); }
.guide-featured > * { min-width: 0; }
.guide-featured img, .guide-card img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--cps-line); transition: transform .3s ease; }
.guide-thumb { display: block; overflow: hidden; border-radius: 18px; }
.guide-thumb:hover img { transform: scale(1.03); }
.guide-featured h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); }
.guide-featured h2 a, .guide-card h2 a { color: var(--cps-ink); text-decoration: none; }
.guide-featured h2 a:hover, .guide-card h2 a:hover { color: var(--cps-violet); text-decoration: underline; }
.guide-featured p { color: var(--cps-muted); }
.guide-grid { display: grid; gap: var(--s7) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.guide-card { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.guide-card .guide-card-body { padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.guide-card h2 { font-size: 1.2rem; margin: 0; line-height: 1.3; }
.guide-card p { color: var(--cps-muted); margin: 0; font-size: .97rem; }
.guide-featured .cat, .guide-card .cat { align-self: flex-start; font-family: var(--cps-font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-violet); background: var(--cps-violet-soft); padding: 4px 10px; border-radius: 99px; }
.guide-featured .cat { display: inline-block; margin-bottom: var(--s3); }
.guide-meta { font-size: .88rem; color: var(--cps-muted); font-weight: 600; }
.guide-hero h1 { max-width: 26ch; }
@media (min-width: 900px) { .guide-featured { grid-template-columns: 1.2fr 1fr; } }
/* keep container side gutters on legal & article pages */
.legal { padding: clamp(32px, 5vw, 64px) var(--cps-gutter) var(--cps-section-pad); }
.article-layout { padding: clamp(32px, 5vw, 64px) var(--cps-gutter) var(--cps-section-pad); }

/* ===================== 14. TIGHTER SECTION SPACING + ABOUT PHOTO ===================== */
:root { --cps-section-pad: clamp(44px, 5.5vw, 76px); }
.section-head { margin-bottom: var(--s6); }
.section-intro { margin-bottom: var(--s5); }
.tool-hero { padding-bottom: clamp(32px, 4vw, 52px); }
.about-split { align-items: start; gap: var(--s6); }
.about-side { display: grid; gap: var(--s5); min-width: 0; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; border: 1px solid var(--cps-line); box-shadow: 0 16px 40px rgba(106, 31, 208, .12); background: var(--cps-bg-tint); }
.about-photo figcaption { margin-top: 8px; font-size: .82rem; color: var(--cps-muted); }
.about-photo figcaption a { color: var(--cps-muted); }
.figure-strip > div { padding-top: var(--s4); padding-bottom: var(--s4); }
:root { --cps-section-pad: clamp(36px, 4vw, 56px); }
/* two white sections in a row: no double gap */
#about + #features { padding-top: 8px; }
.tool-intro .lead { max-width: 74ch; }

/* ===================== 15. TECHNIQUES — SPEED CARDS ===================== */
.tq-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.tq-card {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--s3);
  background: #fff; border: 1px solid var(--cps-line); border-radius: 20px;
  padding: 26px 24px 22px; box-shadow: 0 8px 28px rgba(106, 31, 208, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tq-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--cps-violet), var(--cps-cyan-ink)); }
.tq-top { display: flex; align-items: center; gap: 10px; }
.tq-num { font-family: var(--cps-font-mono); font-size: .8rem; font-weight: 700; color: var(--cps-violet); background: var(--cps-violet-soft); border-radius: 8px; padding: 3px 8px; }
.tq-top h3 { margin: 0; font-size: 1.12rem; }
.tq-speed { display: flex; align-items: baseline; gap: 8px; }
.tq-speed b { font-family: var(--cps-font-head); font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--cps-violet); }
.tq-speed span { font-family: var(--cps-font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--cps-muted); }
.tq-meter { height: 8px; border-radius: 99px; background: var(--cps-bg-alt); border: 1px solid var(--cps-line); overflow: hidden; }
.tq-meter span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cps-violet), var(--cps-cyan-ink)); }
.tq-meter .w30 { width: 30%; } .tq-meter .w52 { width: 52%; } .tq-meter .w70 { width: 70%; } .tq-meter .w100 { width: 100%; }
.tq-card p { margin: 0; color: var(--cps-muted); font-size: .96rem; flex: 1; }
.tq-specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: var(--s3); border-top: 1px dashed var(--cps-line-strong); }
.tq-specs dt { font-family: var(--cps-font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-muted); }
.tq-specs dd { margin: 2px 0 0; font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.tq-dots { display: inline-flex; gap: 3px; }
.tq-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cps-line); }
.tq-dots i.on { background: var(--cps-violet); }

/* ===================== 16. TIPS — PANELS + EXPANDABLE FIXES ===================== */
.tp-panels { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.tp-panel { border-radius: 22px; padding: clamp(22px, 3vw, 30px); min-width: 0; }
.tp-score { background: linear-gradient(150deg, #f3ecff, #fbf9ff); border: 1px solid #e2d4ff; }
.tp-safe { background: linear-gradient(150deg, #e6f8fc, #f8fdfe); border: 1px solid #bfe9f3; }
.tp-panel h3 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s4); font-size: 1.2rem; }
.tp-panel h3 svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #fff; flex: none; }
.tp-score h3 svg { color: var(--cps-violet); }
.tp-safe h3 svg { color: var(--cps-cyan-ink); }
.tp-steps { list-style: none; counter-reset: tp; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.tp-steps li { counter-increment: tp; margin: 0; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; color: var(--cps-muted); }
.tp-steps li strong { color: var(--cps-ink); }
.tp-steps li::before { content: counter(tp); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-family: var(--cps-font-mono); font-weight: 700; font-size: .85rem; }
.tp-score .tp-steps li::before { color: var(--cps-violet); box-shadow: inset 0 0 0 2px rgba(106, 31, 208, .35); }
.tp-safe .tp-steps li::before { color: var(--cps-cyan-ink); box-shadow: inset 0 0 0 2px rgba(10, 106, 130, .35); }

.fx-wrap { margin-top: var(--s6); display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.fx-head h3 { margin: 0 0 4px; font-size: 1.3rem; }
.fx-head p { margin: 0; }
.fx-list { display: grid; gap: 10px; min-width: 0; }
.fx-item { background: #fff; border: 1px solid var(--cps-line); border-left: 4px solid var(--cps-warning); border-radius: 14px; padding: 0; }
.fx-item[open] { border-left-color: var(--cps-success); box-shadow: 0 6px 20px rgba(8, 12, 60, .06); }
.fx-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 18px; min-height: 52px; cursor: pointer; font-family: var(--cps-font-head); font-weight: 650; }
.fx-item summary::-webkit-details-marker { display: none; }
.fx-q { display: inline-flex; align-items: center; gap: 10px; }
.fx-q svg { width: 20px; height: 20px; color: var(--cps-warning); flex: none; }
.fx-item[open] .fx-q svg { color: var(--cps-success); }
.fx-arrow { width: 10px; height: 10px; border-right: 2px solid var(--cps-violet); border-bottom: 2px solid var(--cps-violet); transform: rotate(45deg); transition: transform .2s ease; flex: none; margin-right: 4px; }
.fx-item[open] .fx-arrow { transform: rotate(-135deg); }
.fx-item p { margin: 0; padding: 0 18px 16px 48px; color: var(--cps-muted); }
.fx-item p strong { color: var(--cps-success); }
.fx-item summary:focus-visible { outline: 3px solid var(--cps-violet); outline-offset: 2px; border-radius: 12px; }
@media (min-width: 900px) { .fx-wrap { grid-template-columns: 260px 1fr; align-items: start; } }
@media (prefers-reduced-motion: no-preference) { .tq-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(106, 31, 208, .14); } }

/* ===================== 17. TIPS LIST — ROBUST, RESPONSIVE ===================== */
/* No grid on list items: number sits in the left padding, text always flows normally */
.tp-steps li { display: block; position: relative; padding-left: 44px; min-height: 30px; line-height: 1.6; overflow-wrap: normal; word-break: normal; }
.tp-steps li > span { display: inline; }
.tp-steps li::before { position: absolute; left: 0; top: -1px; }
.tp-panels { grid-template-columns: 1fr; }
.tp-panel { min-width: 0; }
@media (min-width: 900px) { .tp-panels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) {
  .tp-panel { padding: 20px 18px; border-radius: 18px; }
  .tp-steps li { padding-left: 40px; font-size: .97rem; }
  .fx-item summary { padding: 12px 14px; }
  .fx-item p { padding: 0 14px 14px 14px; }
}
.track { overflow-x: clip; padding-top: 2px; }

/* Header CTA: keep white text on violet (nav link colour must not override) */
.nav-list a.btn, .nav-list a.btn:visited { color: #fff; background: var(--cps-violet); border-color: var(--cps-violet); }
.nav-list a.btn:hover, .nav-list a.btn:focus-visible { color: #fff; background: var(--cps-violet-dark); border-color: var(--cps-violet-dark); }
.nav-list a.btn svg { color: #fff; }