/**
 * SimplyCodes PMLP Stylesheet — DS 2.0 Polymorphic Merchant Landing Page
 * Generated: 2026-06-22T23:06:55.317Z
 */

/* ============================================
   SC DESIGN SYSTEM TOKENS
   ============================================ */
:root {
  --font-sans: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', monospace;
  --features-sans: "ss02" 1, "liga" 0, "clig" 0;
  --features-mono: "ss03" 1, "ss05" 1;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-size-80: 0.694rem;
  --text-size-90: 0.833rem;
  --text-size-100: 1rem;
  --text-size-200: 1.2rem;
  --text-size-400: 1.728rem;
  --text-size-500: 2.074rem;
  --text-size-600: 2.488rem;
  --text-size-700: 2.986rem;
  --text-size-900: 4.000rem;
  --lh-16: 1rem;
  --lh-20: 1.25rem;
  --lh-24: 1.5rem;
  --lh-28: 1.75rem;
  --lh-32: 2rem;
  --lh-40: 2.5rem;
  --lh-48: 3rem;
  --lh-56: 3.5rem;
  --lh-72: 4.5rem;
  --brand-green: #03FF88;
  --axi-violet: #8B5CF6;
  --black-alpha-50: #00000080;
  --gray-0: #FFFFFF;
  --gray-25: #FDFCFC;
  --gray-50: #FAFAFA;
  --gray-75: #F7F7F8;
  --gray-100: #F4F4F5;
  --gray-150: #ECECED;
  --gray-200: #E4E4E7;
  --gray-250: #DBDBDE;
  --gray-300: #D4D4D8;
  --gray-350: #B9B9BF;
  --gray-400: #A1A1AA;
  --gray-450: #898992;
  --gray-500: #71717A;
  --gray-550: #61616B;
  --gray-600: #52525B;
  --gray-650: #484850;
  --gray-700: #3F3F46;
  --gray-750: #333338;
  --gray-800: #27272A;
  --gray-850: #1F1F22;
  --gray-900: #18181B;
  --gray-925: #101013;
  --gray-950: #09090B;
  --gray-975: #040405;
  --gray-1000: #000000;
  --green-25: #F7FFF9;
  --green-50: #F0FEF4;
  --green-75: #EEFBF1;
  --green-100: #EBF8EE;
  --green-200: #9DFFBA;
  --green-300: #03FF88;
  --green-400: #01F984;
  --green-500: #03E67A;
  --green-600: #02C869;
  --green-700: #039F53;
  --green-800: #026E37;
  --green-850: #01461C;
  --green-900: #013314;
  --green-925: #011C0B;
  --green-950: #001407;
  --green-975: #000702;
  --green-1000: #000201;
  --blue-25: #FBFDFE;
  --blue-50: #F6FAFF;
  --blue-75: #F2F8FE;
  --blue-100: #ECF5FF;
  --blue-200: #B0D6FE;
  --blue-300: #6EB6FF;
  --blue-400: #0394FC;
  --blue-500: #0175C9;
  --blue-600: #016FC0;
  --blue-700: #0261A7;
  --blue-800: #014980;
  --blue-850: #01325A;
  --blue-900: #012849;
  --blue-925: #011427;
  --blue-950: #01101F;
  --blue-975: #000D19;
  --blue-1000: #000308;
  --red-25: #FEFCFB;
  --red-50: #FFF8F7;
  --red-75: #FEF4F3;
  --red-100: #FFF0EF;
  --red-200: #FFC0BA;
  --red-300: #FF8A82;
  --red-400: #F64B4B;
  --red-500: #D01F2B;
  --red-600: #CA1526;
  --red-700: #B3001B;
  --red-800: #890112;
  --red-850: #5C0109;
  --red-900: #4A0107;
  --red-925: #270103;
  --red-950: #1F0102;
  --red-975: #190102;
  --red-1000: #080000;
  --amber-25: #FFFCF5;
  --amber-50: #FFFAEB;
  --amber-75: #FFF6E1;
  --amber-100: #FFF3D7;
  --amber-200: #FCBF26;
  --amber-300: #E1A417;
  --amber-400: #C58B0F;
  --amber-500: #AA7200;
  --amber-600: #946502;
  --amber-700: #7F5806;
  --amber-800: #6B4B08;
  --amber-850: #573F09;
  --amber-900: #453209;
  --amber-925: #332608;
  --amber-950: #231A07;
  --amber-975: #140F04;
  --amber-1000: #030201;
  --violet-25: #FCFCFE;
  --violet-50: #FAF9FE;
  --violet-75: #F7F6FF;
  --violet-100: #F4F2FF;
  --violet-200: #D7CFFF;
  --violet-300: #BCABFF;
  --violet-400: #A384FF;
  --violet-500: #8B5CF6;
  --violet-600: #8555EF;
  --violet-700: #7441DA;
  --violet-800: #5A17B7;
  --violet-850: #350189;
  --violet-900: #2A016E;
  --violet-925: #190145;
  --violet-950: #130134;
  --violet-975: #0D0124;
  --violet-1000: #04000C;
  --pink-25: #FEFBFF;
  --pink-50: #FDF8FF;
  --pink-75: #FDF3FF;
  --pink-100: #FAF0FD;
  --pink-200: #F2BBFF;
  --pink-300: #E780FF;
  --pink-400: #D244F0;
  --pink-500: #AF0ECC;
  --pink-600: #A902C6;
  --pink-700: #9302AC;
  --pink-800: #700184;
  --pink-850: #4E005C;
  --pink-900: #3F004A;
  --pink-925: #26002D;
  --pink-950: #1D0022;
  --pink-975: #150018;
  --pink-1000: #070009;
  --surface-base: var(--gray-1000);
  --surface-elevated: var(--gray-950);
  --surface-inset: var(--gray-975);
  --border-primary: var(--gray-750);
  --border-secondary: var(--gray-850);
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-400);
  --text-muted: var(--gray-500);
  --text-disabled: var(--gray-600);
  --action-primary: var(--brand-green);
  --text-on-action: var(--gray-1000);
  --surface-layer: var(--gray-925);
  --surface-control: var(--gray-800);
  --surface-overlay: var(--black-alpha-50);
  --surface-selected: var(--green-900);
  --border-focus: var(--gray-50);
  --border-selected: var(--green-700);
  --text-brand-primary: var(--green-300);
  --text-brand-secondary: var(--violet-300);
  --action-secondary: var(--gray-950);
  --action-hover: var(--gray-50);
  --action-pressed: var(--gray-200);
  --action-focus: var(--gray-50);
  --action-disabled: var(--gray-850);
  --radius-sm: 0.375em;
  --radius-md: 0.5em;
  --radius-lg: 0.625em;
  --radius-xl: 1em;
  --radius-2xl: 1.25em;
  --radius-full: 50%;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --tracking-tight-4: -0.04em;
  --tracking-tight-3: -0.03em;
  --tracking-tight-2: -0.02em;
  --tracking-tight-1: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.125em;
  --ease-industrial: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --duration-snap: 100ms;
  --duration-slide: 300ms;
  --duration-entrance: 600ms;
  --entrance-shift: 20px;
  --shadow-glow: 0 0 10px rgba(3, 255, 136, 0.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--font-sans); font-feature-settings: var(--features-sans); font-variant-ligatures: none; font-size: var(--text-size-100); line-height: var(--lh-24); color: var(--text-primary); background: var(--surface-base); overflow-x: clip; }
main { overflow-x: clip; }

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */
@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(var(--entrance-shift)); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up-in var(--duration-entrance) var(--ease-industrial) both; }
.fade-up-scroll { opacity: 0; transform: translateY(var(--entrance-shift)); }
.fade-up-scroll.visible { animation: fade-up-in var(--duration-entrance) var(--ease-industrial) both; }
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }
.delay-7 { animation-delay: 350ms; }
.delay-8 { animation-delay: 400ms; }
.delay-9 { animation-delay: 450ms; }
.delay-10 { animation-delay: 500ms; }
@media (prefers-reduced-motion: reduce) { .fade-up, .fade-up-scroll { animation: none; opacity: 1; transform: none; } }

/* ============================================
   TYPE SCALE UTILITIES
   ============================================ */
.text-display      { font-size: var(--text-size-900); line-height: var(--lh-72); letter-spacing: var(--tracking-tight-4); font-weight: var(--weight-medium); }
.text-title        { font-size: var(--text-size-700); line-height: var(--lh-56); letter-spacing: var(--tracking-tight-2); font-weight: var(--weight-medium); }
.text-subtitle     { font-size: var(--text-size-600); line-height: var(--lh-48); letter-spacing: var(--tracking-tight-2); font-weight: var(--weight-semibold); }
.text-heading      { font-size: var(--text-size-500); line-height: var(--lh-40); letter-spacing: var(--tracking-tight-1); font-weight: var(--weight-semibold); }
.text-subheading   { font-size: var(--text-size-400); line-height: var(--lh-32); letter-spacing: var(--tracking-normal); font-weight: var(--weight-semibold); }
.text-body-large   { font-size: var(--text-size-200); line-height: var(--lh-28); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-body         { font-size: var(--text-size-100); line-height: var(--lh-24); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-body-ui      { font-size: var(--text-size-100); line-height: var(--lh-20); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-body-medium  { font-size: var(--text-size-100); line-height: var(--lh-20); letter-spacing: var(--tracking-normal); font-weight: var(--weight-medium); }
.text-small        { font-size: var(--text-size-90);  line-height: var(--lh-20); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-small-ui     { font-size: var(--text-size-90);  line-height: var(--lh-16); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-small-medium { font-size: var(--text-size-90);  line-height: var(--lh-16); letter-spacing: var(--tracking-normal); font-weight: var(--weight-medium); }
.text-small-semi   { font-size: var(--text-size-90);  line-height: var(--lh-16); font-weight: var(--weight-semibold); }
.text-label        { font-size: var(--text-size-80);  line-height: var(--lh-16); letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); text-transform: uppercase; }
.text-mono         { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-mono-data    { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); font-weight: var(--weight-regular); text-transform: uppercase; }
.text-mono-label   { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); font-weight: var(--weight-medium); text-transform: uppercase; }
.text-mono-xs      { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); font-weight: var(--weight-regular); }
.text-code-small   { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-90); line-height: var(--lh-24); letter-spacing: var(--tracking-wide); font-weight: var(--weight-medium); }
.text-code-large   { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-500); line-height: var(--lh-40); letter-spacing: var(--tracking-wide); font-weight: var(--weight-medium); }
.text-stat-value   { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-ligatures: none; font-size: var(--text-size-400); line-height: var(--lh-32); letter-spacing: var(--tracking-normal); font-weight: var(--weight-medium); }


/* ============ SC FOOTER ============ */
.page-section-divider { height: 1px; background: var(--border-secondary); }
.sc-footer-wrap { margin-top: 0; }
.sc-footer { background: #000; color: #fff; padding: 1.5rem; }
.sc-footer__inner { max-width: 1348px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) {
  .sc-footer__inner { flex-direction: row; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  .sc-footer__inner { gap: 3rem; }
}
.sc-footer__section { border-top: 1px solid #374151; padding: 0.25rem 0; min-width: 0; }
@media (min-width: 768px) { .sc-footer__section { border-top: none; padding: 0; } }
.sc-footer__section summary { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: #fff; padding: 0.5rem 0; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
.sc-footer__section summary::after { content: '\25BE'; font-size: 0.7rem; transition: transform 0.15s ease; flex-shrink: 0; margin-left: 0.5rem; }
@media (min-width: 768px) {
  .sc-footer__section summary { cursor: default; }
  .sc-footer__section summary::after { display: none; }
}
.sc-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; overflow: hidden; max-height: 0; transition: max-height 0.2s ease, padding 0.2s ease; }
.sc-footer__section[open] .sc-footer__links { max-height: 500px; padding-top: 0.25rem; padding-bottom: 0.5rem; }
@media (min-width: 768px) { .sc-footer__links { max-height: none; padding-top: 0.75rem; } }
.sc-footer__links a { color: #d1d5db; font-size: 0.875rem; text-decoration: none; }
.sc-footer__links a:hover { text-decoration: underline; }
.sc-footer__social-col { display: flex; flex-direction: column; gap: 1.5rem; flex-shrink: 0; }
.sc-footer__social-icons { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.sc-footer__social-icons a { color: #fff; display: flex; align-items: center; text-decoration: none; transition: opacity 0.2s; }
.sc-footer__social-icons a:hover { opacity: 0.7; }
.sc-footer__social-icons svg { width: 20px; height: 20px; flex-shrink: 0; }
.sc-footer__store-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
@media (min-width: 768px) { .sc-footer__store-badges { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }
.sc-footer__store-badges img { height: 30px; width: auto; border-radius: 6px; display: block; }
.sc-footer__legal { max-width: 1348px; margin: 1.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid #374151; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: flex-start; }
.sc-footer__legal-copy { color: #9ca3af; font-size: 0.75rem; max-width: 480px; line-height: 1.5; margin: 0; }
.sc-footer__legal-copy a { color: #fff; text-decoration: underline; }
.sc-footer__legal-links { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; font-size: 0.75rem; color: #9ca3af; }
.sc-footer__legal-links a { color: #9ca3af; font-size: 0.75rem; text-decoration: none; }
.sc-footer__legal-links a:hover { text-decoration: underline; }
.sc-footer__legal-links .sep { margin: 0 0.625rem; }

/* ============ PAGE GRID ============ */
/* Ensure nav is sticky with correct z-index above page content */
.pmlp-page { --nav-height: 64px; padding-top: 0; }
@media (min-width: 1280px) { .pmlp-page { --nav-height: 72px; } }
.pmlp-page nav { position: sticky; top: 0; z-index: 100; background: rgba(0,0,0,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-900, #1c1c1c); }
.page-grid { max-width: 1100px; margin: 0 auto; padding: var(--space-12) var(--space-6) 80px; display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); align-items: start; }
@media (max-width: 860px) { .page-grid { grid-template-columns: 1fr; padding-top: var(--space-4); padding-left: var(--space-4); padding-right: var(--space-4); } .page-grid > * { min-width: 0; } }
.pmlp-sidebar { position: sticky; top: calc(var(--nav-height, 3.5rem) + var(--space-4)); align-self: start; }
/* Mobile: drop the rail entirely — it stacks mid-page (after the main column, before the
   Knowledge Zone) and its cards (Today's Best Code, Top Question, Quick Facts) duplicate
   content already on the page. */
@media (max-width: 860px) { .pmlp-sidebar { display: none; } }

/* ============ BREADCRUMB ============ */
.pmlp-breadcrumb { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-6) 0; }
/* The breadcrumb is a <nav> (per S-13 + the breadcrumb a11y pattern), so the shared bare-`nav`
   sticky rule (sc.css `nav{sticky}` + `.pmlp-page nav`) pins it to top:0 and paints it over the
   header. Force it into normal flow. !important: the sitewide bare-`nav` rule is otherwise hard
   to out-cascade reliably (and the dev inlines a stale copy, masking specificity-only fixes). */
.pmlp-page .pmlp-breadcrumb { position: static !important; z-index: auto !important; top: auto !important; }
@media (max-width: 860px) { .pmlp-breadcrumb { display: none; } }
/* Drop the shared affiliate-disclosure divider line on PMLP only. The border-bottom is an
   inline style on the shared component (renders pre-CSS), so !important is required to override
   it; MLP keeps its divider. */
.pmlp-page aside[aria-label="Affiliate disclosure"] { border-bottom: none !important; }
.pmlp-breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
.pmlp-breadcrumb__item { font-size: var(--text-size-80); line-height: var(--lh-16); color: var(--text-muted, #71717a); }
.pmlp-breadcrumb__link { color: var(--text-muted, #71717a); text-decoration: none; }
.pmlp-breadcrumb__link:hover { color: var(--text-secondary, #d4d4d8); }
.pmlp-breadcrumb__link:focus-visible { outline: 2px solid var(--brand-green, #03ff88); outline-offset: 2px; border-radius: 2px; }
.pmlp-breadcrumb__item--current { color: var(--text-secondary); }
.pmlp-breadcrumb__sep { color: var(--border-primary); font-size: var(--text-size-80); }

/* ============ INTRO PARAGRAPH ============ */
.pmlp-intro { font-size: var(--text-size-90); line-height: var(--lh-24); color: var(--text-secondary); margin-bottom: var(--space-4); }

/* ============ MERCHANT HEADER ============ */
.mh { padding: var(--space-6); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); margin-bottom: var(--space-6); min-width: 0; overflow: hidden; }
.mh__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.mh__icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-size-100); color: #000; flex-shrink: 0; }
img.mh__icon { object-fit: contain; background: #fff; display: block; padding: 4px; border-radius: var(--radius-md); box-sizing: border-box; }
.mh__name { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); color: var(--text-tertiary); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.mh h1 { font-size: clamp(1.2rem, 3vw, 1.5rem); line-height: 1.25; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight-2); margin-bottom: var(--space-2); overflow-wrap: break-word; }
.mh__verified { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); color: var(--text-secondary); }
/* v1.1 .trust: single wrapped DM-Mono trust line; numerics green, never a stacked block. */
.trust { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 11px; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: 12px; line-height: 1.4; color: var(--text-secondary, #d4d4d8); }
.trust b { color: var(--brand-green, #03ff88); font-weight: var(--weight-semibold); }
.ob { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.ob + .ob { margin-top: var(--space-2); }
.ob--stats { background: var(--surface-inset); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: var(--space-3); width: fit-content; }
.ob__i { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); display: flex; align-items: flex-start; gap: 4px; }
.ob__i--hl { color: var(--green-300); font-weight: var(--weight-medium); }
.ob__i--warn { color: var(--gray-300); }
.ob__i--red { color: var(--red-400); font-weight: var(--weight-medium); }
.ob__dot { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--gray-600); flex-shrink: 0; }
.ob__icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: -4px; }
.ob__pulse { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--green-300); animation: pulse-glow 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@media (max-width: 560px) { .ob { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .ob__dot { display: none; } }
@keyframes pulse-glow { 0%,100% { opacity:1; box-shadow: 0 0 4px rgba(3,255,136,0.4); } 50% { opacity:0.5; } }

/* ============================================
   CODE CARD - FULL BEM (Authoritative)
   ============================================ */
.code-card { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); overflow: hidden; transition: border-color var(--duration-snap) var(--ease-industrial); min-width: 0; }
.code-card:hover { border-color: var(--border-primary); }
/* v1.1: hero treatment on the first/top code card - green glow border */
.code-card--hero { border-color: rgba(3,255,136,0.45); box-shadow: 0 0 0 1px rgba(3,255,136,0.14); }
.code-card--hero:hover { border-color: rgba(3,255,136,0.6); }
.code-card + .code-card { margin-top: var(--space-3); }
.code-card__headline { padding: var(--space-4) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.code-card__badge-row { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.code-card__badge { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: 9.5px; line-height: var(--lh-16); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-semibold); padding: 3px 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.code-card__badge--top-pick { background: var(--green-900); color: var(--green-300); border: 1px solid var(--green-800); }
.code-card__badge--verified { background: var(--green-950); color: var(--green-600); border: 1px solid rgba(3,255,136,0.1); }
.code-card__badge--community { background: var(--gray-900); color: var(--gray-400); border: 1px solid var(--gray-800); }
.code-card__badge-dot { width: 5px; height: 5px; border-radius: var(--radius-full); }
.code-card__badge--top-pick .code-card__badge-dot { background: var(--green-300); }
.code-card__badge--verified .code-card__badge-dot { background: var(--green-600); }
.code-card__badge--community .code-card__badge-dot { background: var(--gray-500); }
.code-card__discount { grid-column: 1; font-size: var(--text-size-200); line-height: var(--lh-28); font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); color: var(--text-primary); margin-bottom: var(--space-1); }
/* v1.1: full-width primary CTA - bold, 48px tall, green glow on hover */
.code-card__cta { grid-column: 1 / -1; grid-row: auto; order: 1; width: 100%; min-height: 48px; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 20px; background: var(--action-primary); color: var(--text-on-action); border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-100); line-height: var(--lh-20); font-weight: var(--weight-bold); cursor: pointer; white-space: nowrap; margin-left: 0; margin-top: var(--space-3); transition: background-color var(--duration-snap) var(--ease-industrial), box-shadow var(--duration-snap) var(--ease-industrial), border-color var(--duration-snap) var(--ease-industrial); }
.code-card__cta:hover { background: #28ffa0; box-shadow: 0 0 22px rgba(3,255,136,0.35); }
.code-card__cta:active { background: #00F280; }
.code-card__cta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--green-600); }
.code-card__cta--ghost { background: rgba(3,255,136,0.05); color: var(--green-300); border: 1px solid var(--green-800); }
.code-card__cta--ghost:hover { background: rgba(3,255,136,0.1); border-color: var(--green-600); }
.code-card__cta--ghost:active { background: rgba(3,255,136,0.18); }
.code-card__cta--ghost:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--green-600); }
.code-card__cta--muted { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid var(--gray-700); }
.code-card__cta--muted:hover { background: rgba(255,255,255,0.1); border-color: var(--gray-600); color: var(--text-primary); }
.code-card__cta--muted:active { background: rgba(255,255,255,0.04); }
.code-card__cta--muted:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--gray-400); }
/* "Didn't work" verdict from the workstation HITL strikes the code through + dims the card. */
.code-card--struck { opacity: 0.6; }
.code-card--struck .code-card__discount { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-muted, #71717a); }
.code-card__context { grid-column: 1; display: flex; flex-direction: column; gap: 2px; }
.code-card__restrictions { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.code-card__restrictions--warning { color: var(--gray-300); }
.code-card__meta { padding: 0 var(--space-6) var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.code-card__meta-item { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.code-card__meta-sep { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--gray-700); }
.confidence-dots { display: inline-flex; gap: 2px; margin-right: 2px; }
.confidence-dot { width: 6px; height: 6px; border-radius: var(--radius-full); }
.confidence-dot--green { background: var(--green-600); }
.confidence-dot--amber { background: var(--amber-400); }
.confidence-dot--empty { background: var(--gray-800); }

/* Expand Trigger */
.code-card__expand { padding: 0 var(--space-6) var(--space-4); }
.code-card__expand-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: none; font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); cursor: pointer; padding: 0; transition: color var(--duration-snap) var(--ease-industrial); }
.code-card__expand-btn:hover { color: var(--text-secondary); }
.code-card__expand-btn i { font-size: 14px; transition: transform var(--duration-slide) var(--ease-industrial); }
.code-card__expand-btn.is-expanded i { transform: rotate(180deg); }

/* Community Activity */
.code-card__activity { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); font-style: italic; padding: 0 var(--space-6) var(--space-4); }

/* Verification Ledger */
.code-card__ledger { border-top: 1px solid var(--border-secondary); background: var(--surface-inset); padding: var(--space-4) var(--space-6); display: none; }
.code-card__ledger.is-visible { display: block; }
.code-card__ledger-title { font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.ledger-entry { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-secondary); }
.code-card__ledger-title + .ledger-entry { border-top: none; padding-top: 0; }
.ledger-entry__avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--gray-800); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--text-size-80); color: var(--text-tertiary); }
.ledger-entry__avatar--bot { background: var(--green-950); color: var(--green-600); }
.ledger-entry__content { flex: 1; min-width: 0; }
.ledger-entry__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }
.ledger-entry__user { font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); color: var(--text-secondary); }
.ledger-entry__time { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); }
.ledger-entry__result { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.ledger-entry__result--pass { color: var(--green-600); }
.ledger-entry__result--fail { color: var(--red-400); }
.ledger-entry__screenshot { margin-top: var(--space-2); width: 120px; height: 68px; border-radius: var(--radius-sm); background: var(--gray-900); border: 1px solid var(--border-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--text-size-80); color: var(--text-tertiary); }

/* TIP-TYPE LEDGER ENTRIES */
.ledger-entry--tip { background: rgba(3,255,136,0.015); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-2) 0; border: 1px solid rgba(3,255,136,0.04); }
.ledger-entry--tip .ledger-entry__avatar { background: rgba(3,255,136,0.06); color: var(--green-600); border: 1px solid rgba(3,255,136,0.1); }
.ledger-entry__tip-badge { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--green-600); background: rgba(3,255,136,0.06); border: 1px solid rgba(3,255,136,0.1); padding: 1px 6px; border-radius: var(--radius-sm); margin-left: var(--space-2); }
.ledger-entry__tip-text { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); font-style: italic; }
.ledger-entry__tip-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ledger-entry__tip-tag { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); background: var(--gray-900); border: 1px solid var(--gray-800); padding: 1px 6px; border-radius: 10px; }
.code-card__ledger-footer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-secondary); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.code-card__ledger-stat { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); }

/* Ledger show-more */
.ledger-hidden { display: none; }
.ledger-show-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); background: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: 6px 12px; font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); cursor: pointer; transition: color var(--duration-snap), border-color var(--duration-snap); }
.ledger-show-more:hover { color: var(--text-secondary); border-color: var(--border-primary); }

/* ============ SECTION TITLE ============ */
.st { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin: var(--space-8) 0 var(--space-4); }

/* ============ ALT CARDS ============ */
.ag { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-8); }
.ac { padding: var(--space-4) var(--space-5); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--surface-elevated); cursor: pointer; transition: all var(--duration-snap); }
.ac:hover { border-color: var(--border-primary); background: var(--gray-925); }
@media (max-width: 480px) { .ag { grid-template-columns: 1fr; } }
.ac__icon { font-size: 18px; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.ac__h { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 2px; }
.ac__s { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.ac__c { font-family: var(--font-sans); font-feature-settings: var(--features-sans); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--green-300); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-1); }
.ac__c--blue { color: var(--blue-400); }
.ac__c--violet { color: var(--axi-violet); }

/* ============ SIDEBAR ============ */
.side-card { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); overflow: hidden; margin-bottom: var(--space-4); }
.side-card__h { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-secondary); }
.side-card__t { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); }
.side-card__b { padding: var(--space-4) var(--space-5); }
.si { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-secondary); }
.si:last-child { border-bottom: none; }
.si__t { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); flex: 1; min-width: 0; }
.si__v { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-20); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); text-align: right; flex-shrink: 0; max-width: 58%; white-space: pre-line; }
.si--action:hover .si__v { color: var(--text-primary); }
.si__v--cta { display: flex; align-items: center; gap: var(--space-1); color: var(--green-300); }
/* Reviews mockup Option B: customer-rating row in the rail (subtle gold tint, stars + score + count). */
.si--rating { background: rgba(245,197,24,0.025); }
.si__v--rating { display: inline-flex; align-items: center; gap: 5px; max-width: none; color: var(--text-primary, #fff); }
.si__v--rating b { font-weight: var(--weight-bold, 700); }
.si__rating-count { color: var(--text-muted, #71717a); }
.ext-cta { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-secondary, #333338); border-radius: var(--radius-xl); background: var(--surface-elevated, #09090b); margin-bottom: var(--space-4); }
@media (max-width: 860px) { .ext-cta { display: none; } }
.ext-cta__body { flex: 1; min-width: 0; }
.ext-cta__h { font-size: var(--text-size-100); font-weight: var(--weight-bold); color: var(--text-primary, #fff); margin-bottom: var(--space-1); }
.ext-cta__s { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary, #a1a1aa); }
.ext-cta__link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; color: #03ff88; font-size: var(--text-size-90); font-weight: var(--weight-semibold); white-space: nowrap; }
.ext-cta__link:hover { color: #28ffa0; }
.ext-cta__link:focus-visible { outline: 2px solid #03ff88; outline-offset: 2px; border-radius: 3px; }

/* ============================================
   RIGHT-RAIL CARDS (v1.1 .rc / .rh / .fr / .minicta)
   DS 2.0 tokens - card #101013 → surface-layer; border #232328 → border-secondary;
   dim text → text-secondary; faint → text-muted. Brand green stays hex.
   ============================================ */
.rc { background: var(--surface-layer, #101013); border: 1px solid var(--border-secondary, #333338); border-radius: 13px; padding: var(--space-4, 1rem); margin-bottom: var(--space-3, 0.75rem); }
.rc--hero { border-color: rgba(3, 255, 136, 0.4); }
.rc__h { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80, 0.694rem); letter-spacing: var(--tracking-wide, 0.1em); text-transform: uppercase; color: var(--text-muted, #71717a); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.rc__h i { width: 5px; height: 5px; border-radius: var(--radius-full, 50%); background: #03ff88; flex-shrink: 0; }
.rc__headline { font-size: var(--text-size-100, 1rem); font-weight: var(--weight-bold); color: var(--text-primary, #fff); }
.rc__sub { font-size: var(--text-size-80, 0.694rem); color: var(--text-muted, #71717a); margin-top: 3px; }
.rc__faq { font-size: var(--text-size-90, 0.833rem); line-height: var(--lh-20); color: var(--text-secondary, #d4d4d8); }
.rc__faq > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2, 0.5rem); color: var(--text-secondary, #d4d4d8); font-weight: var(--weight-medium); }
.rc__faq > summary::-webkit-details-marker { display: none; }
.rc__faq > summary::after { content: '+'; color: #03ff88; font-family: var(--font-mono); flex-shrink: 0; line-height: 1; }
.rc__faq[open] > summary::after { content: '\2212'; }
.rc__faq > summary:focus-visible { outline: 2px solid #03ff88; outline-offset: 2px; border-radius: 3px; }
.rc__faq-q-inner { flex: 1; min-width: 0; }
.rc__faq-snippet { display: block; margin-top: 4px; color: var(--text-tertiary, #a1a1aa); font-weight: var(--weight-regular, 400); }
.rc__faq[open] .rc__faq-snippet { display: none; }
.rc__faq-a { color: var(--text-tertiary, #a1a1aa); margin-top: 7px; }
.fr { display: flex; gap: var(--space-2, 0.5rem); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border-secondary, #333338); font-size: var(--text-size-90, 0.833rem); }
.fr:last-of-type { border-bottom: none; }
.fr .who { color: var(--text-muted, #71717a); font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80, 0.694rem); white-space: nowrap; }
.fr .what { color: var(--text-secondary, #d4d4d8); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr .ok, .fr .no { margin-left: auto; }
.fr .ok { color: #03ff88; font-weight: var(--weight-bold); font-size: var(--text-size-80, 0.694rem); font-family: var(--font-mono); white-space: nowrap; }
.fr .no { color: var(--red-400, #f87171); font-weight: var(--weight-bold); font-size: var(--text-size-80, 0.694rem); font-family: var(--font-mono); white-space: nowrap; }
.minicta { display: flex; align-items: center; justify-content: center; width: 100%; background: #03ff88; color: #000; font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-size-90, 0.833rem); border: none; border-radius: 9px; min-height: 40px; margin-top: 9px; cursor: pointer; transition: background-color var(--duration-snap) var(--ease-industrial); }
.minicta:hover { background: #28ffa0; }
.minicta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--green-600); }
@media (max-width: 860px) { .rc--hero { display: none; } }

/* ============================================
   SINGLE-USE CODES PANEL
   ============================================ */
.su-panel { display: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); overflow: hidden; margin-bottom: var(--space-8); }
.su-panel.is-open { display: block; animation: su-slide-in var(--duration-slide) var(--ease-industrial); }
@keyframes su-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.su-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.su-panel__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.su-panel__title i { color: var(--axi-violet); font-size: 14px; }
.su-panel__close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 18px; padding: 4px; display: flex; align-items: center; transition: color var(--duration-snap); }
.su-panel__close:hover { color: var(--text-secondary); }
.su-panel__context { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); background: var(--surface-inset); }
.su-panel__context p { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); max-width: 520px; }
.su-panel__context p strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.su-panel__body { padding: var(--space-6); }
.su-panel__queue { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.su-panel__queue-pos { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--axi-violet); font-weight: var(--weight-medium); }
.su-panel__queue-pips { display: flex; gap: 4px; }
.su-panel__pip { width: 20px; height: 4px; border-radius: 2px; background: var(--gray-800); transition: background var(--duration-snap); }
.su-panel__pip--active { background: var(--axi-violet); }
.su-panel__pip--used-pass { background: var(--green-600); }
.su-panel__pip--used-fail { background: var(--red-400); }
.su-panel__pip--skipped { background: var(--gray-600); }
.su-panel__code-card { border: 1px solid var(--border-primary); border-radius: var(--radius-lg); background: var(--surface-inset); padding: var(--space-5) var(--space-6); position: relative; }
.su-panel__code-card.is-revealing { animation: su-code-flash 400ms var(--ease-industrial); }
@keyframes su-code-flash { 0% { border-color: var(--border-primary); } 30% { border-color: var(--axi-violet); box-shadow: 0 0 12px rgba(139,92,246,0.2); } 100% { border-color: var(--border-primary); box-shadow: none; } }
.su-panel__code-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.su-panel__code-string { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-400); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-wide); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Didn't work" SU code: fade + strike (mirrors the regular code grid's .ct tr.is-tried). */
.su-panel__code-string--struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-muted, #71717a); }
.su-panel__copy-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; background: var(--action-primary); color: var(--text-on-action); border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; transition: box-shadow var(--duration-snap); flex-shrink: 0; }
.su-panel__copy-btn:hover { box-shadow: var(--shadow-glow); }
.su-panel__copy-btn.is-copied { background: var(--green-700); }
.su-panel__discount { font-size: var(--text-size-200); font-weight: var(--weight-regular); line-height: var(--lh-28); color: var(--text-primary); margin-bottom: var(--space-1); }
.su-panel__urgency { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-inset); border: 1px solid var(--border-secondary); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.su-panel__urgency i { color: var(--text-tertiary); font-size: 14px; flex-shrink: 0; }
.su-panel__urgency span { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.su-panel__code-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.su-panel__code-meta-item { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.su-panel__hitl { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-secondary); }
.su-panel__hitl-q { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-3); }
.su-panel__hitl-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.su-panel__hitl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 8px 20px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--duration-snap); border: 1px solid var(--border-primary); background: transparent; color: var(--text-secondary); }
.su-panel__hitl-btn:hover { background: rgba(255,255,255,0.04); }
.su-panel__hitl-btn--yes { border-color: var(--green-800); color: var(--green-300); }
.su-panel__hitl-btn--yes:hover { background: rgba(3,255,136,0.06); }
.su-panel__hitl-btn--no { border-color: var(--gray-700); }
.su-panel__hitl-btn--skip { border-color: transparent; color: var(--text-tertiary); font-size: var(--text-size-90); }
.su-panel__hitl-result { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-size-90); line-height: var(--lh-16); }
.su-panel__hitl-result.is-visible { display: flex; }
.su-panel__hitl-result--pass { background: rgba(3,255,136,0.04); border: 1px solid rgba(3,255,136,0.1); color: var(--green-300); }
.su-panel__hitl-result--fail { background: rgba(246,75,75,0.04); border: 1px solid rgba(246,75,75,0.1); color: var(--text-tertiary); }
.su-panel__hitl-result--skip { background: transparent; color: var(--text-tertiary); }
.su-panel__hitl-result i { font-size: 18px; flex-shrink: 0; }
.su-panel__hitl-result--pass i { color: var(--green-300); }
.su-panel__hitl-result--fail i { color: var(--red-400); }
.su-panel__skip-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; margin-top: var(--space-4); }
.su-panel__next { display: none; }
.su-panel__next.is-visible { display: inline-flex; }
.su-panel__next-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; background: rgba(139,92,246,0.08); color: var(--axi-violet); border: 1px solid rgba(139,92,246,0.2); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-snap); }
.su-panel__next-btn:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); }
.su-panel__unlock { display: none; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-secondary); }
.su-panel__unlock.is-visible { display: block; }
.su-panel__unlock-text { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.su-panel__unlock-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; background: transparent; color: var(--text-tertiary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-snap); }
.su-panel__unlock-btn:hover { color: var(--text-secondary); border-color: var(--border-primary); }
.su-panel__bulk { display: none; margin-top: var(--space-4); }
.su-panel__bulk.is-visible { display: block; }
.su-panel__bulk-title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.su-bulk-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); margin-bottom: var(--space-2); transition: border-color var(--duration-snap); }
.su-bulk-row:hover { border-color: var(--border-primary); }
.su-bulk-row__code { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); color: var(--text-primary); font-weight: var(--weight-medium); flex: 1; }
.su-bulk-row__meta { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); }
.su-bulk-row__copy { padding: 4px 10px; background: rgba(3,255,136,0.05); color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-snap); }
.su-bulk-row__copy:hover { background: rgba(3,255,136,0.1); }
.su-bulk-row--used { opacity: 0.5; }
.su-bulk-row--failed .su-bulk-row__code { text-decoration: line-through; text-decoration-thickness: 2px; }
.ac--su-active { border-color: var(--axi-violet); background: rgba(139,92,246,0.04); }
.ac--su-active .ac__c { color: var(--axi-violet); }
.ac--reseller-active { border-color: var(--green-600); background: rgba(3,255,136,0.03); }
.ac--reseller-active .ac__c { color: var(--green-300); }
.ac--criteria-active { border-color: var(--blue-400); background: rgba(3,148,252,0.04); }
.ac--criteria-active .ac__c { color: var(--blue-400); }
.ac--active { border-color: var(--green-600); background: rgba(3,255,136,0.03); }
.ac--active .ac__c { color: var(--green-300); }

/* ============================================
   SHARED: EXPANDABLE MODULE SHELL
   ============================================ */
.mod-panel { display: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); overflow: hidden; margin-bottom: var(--space-8); }
.mod-panel.is-open { display: block; animation: su-slide-in var(--duration-slide) var(--ease-industrial); }
.mod-panel__header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.mod-panel__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.mod-panel__title i { font-size: 14px; }
.mod-panel__title--green i { color: var(--green-300); }
.mod-panel__title--blue i { color: var(--blue-400); }
.mod-panel__title--amber i { color: var(--amber-500); }
.mod-panel__close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 18px; padding: 4px; display: flex; align-items: center; transition: color var(--duration-snap); }
.mod-panel__close:hover { color: var(--text-secondary); }
.mod-panel__body { padding: var(--space-4); }

/* ============================================
   RESELLER COMPARISON PANEL
   ============================================ */
.reseller-context { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); background: var(--surface-inset); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.reseller-context strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.reseller-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 600px) { .reseller-grid { grid-template-columns: 1fr; } }
.reseller-card { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--surface-inset); transition: all var(--duration-snap); position: relative; }
.reseller-card:hover { border-color: var(--border-primary); }
.reseller-card--best { border-color: var(--green-800); }
.reseller-card__best-tag { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--green-300); background: var(--green-950); border: 1px solid var(--green-800); padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap; margin-left: auto; }
.reseller-card__bridge { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: nowrap; }
.reseller-card__logo-img { width: 24px; height: 24px; border-radius: var(--radius-sm); object-fit: contain; display: block; }
.reseller-card__store-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--gray-800); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-size-90); color: var(--text-primary); flex-shrink: 0; }
.reseller-card__arrow { color: var(--text-tertiary); font-size: 12px; }
.reseller-card__store-name { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.reseller-card__discount { font-size: var(--text-size-200); font-weight: var(--weight-regular); line-height: var(--lh-28); color: var(--text-primary); margin-bottom: var(--space-1); }
.reseller-card__note { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.reseller-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.reseller-card__meta-item { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.reseller-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; background: var(--action-primary); color: var(--text-on-action); border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: box-shadow var(--duration-snap); width: 100%; justify-content: center; }
.reseller-card__cta:hover { box-shadow: var(--shadow-glow); }
.reseller-card__cta--ghost { background: rgba(3,255,136,0.05); color: var(--green-300); border: 1px solid var(--green-800); }
.reseller-card__cta--ghost:hover { background: rgba(3,255,136,0.1); box-shadow: 0 0 8px rgba(3,255,136,0.15); }
.reseller-hint { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-secondary); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-2); }
.reseller-hint i { font-size: 14px; color: var(--text-tertiary); }

/* ============================================
   CRITERIA ELIGIBILITY MODULE
   ============================================ */
.criteria-context { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); background: var(--surface-inset); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.criteria-context strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.criteria-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
@media (max-width: 600px) { .criteria-options { grid-template-columns: 1fr 1fr; } }
.criteria-opt { padding: var(--space-4); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--surface-inset); cursor: pointer; transition: all var(--duration-snap); text-align: center; }
.criteria-opt:hover { border-color: var(--border-primary); background: var(--gray-925); }
.criteria-opt.is-selected { border-color: var(--blue-400); background: rgba(3,148,252,0.04); }
.criteria-opt__icon { font-size: 24px; color: var(--text-tertiary); margin-bottom: var(--space-2); transition: color var(--duration-snap); }
.criteria-opt.is-selected .criteria-opt__icon { color: var(--blue-400); }
.criteria-opt__label { font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: 2px; }
.criteria-opt__discount { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--green-300); font-weight: var(--weight-regular); }
.criteria-detail { display: none; border: 1px solid var(--blue-850); border-radius: var(--radius-lg); background: var(--blue-975); overflow: hidden; }
.criteria-detail.is-visible { display: block; animation: su-slide-in var(--duration-slide) var(--ease-industrial); }
.criteria-detail__header { padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.criteria-detail__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: rgba(3,148,252,0.08); border: 1px solid rgba(3,148,252,0.15); display: flex; align-items: center; justify-content: center; color: var(--blue-400); font-size: 24px; flex-shrink: 0; }
.criteria-detail__info { flex: 1; }
.criteria-detail__title { font-size: var(--text-size-200); font-weight: var(--weight-regular); line-height: var(--lh-28); color: var(--text-primary); margin-bottom: 2px; }
.criteria-detail__sub { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.criteria-detail__steps { padding: 0 var(--space-6) var(--space-5); }
.criteria-step { display: flex; gap: var(--space-3); padding: var(--space-3) 0; }
.criteria-step__num { width: 24px; height: 24px; border-radius: var(--radius-full); background: rgba(3,148,252,0.1); border: 1px solid rgba(3,148,252,0.2); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-size-80); color: var(--blue-400); font-weight: var(--weight-medium); flex-shrink: 0; margin-top: 1px; }
.criteria-step__text { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); padding-top: var(--space-1); }
.criteria-step__text a { color: var(--blue-400); text-decoration: none; }
.criteria-step__text a:hover { text-decoration: underline; }
.criteria-detail__cta-row { padding: var(--space-4) var(--space-6); border-top: 1px solid rgba(3,148,252,0.1); display: flex; align-items: center; gap: var(--space-3); }
.criteria-detail__cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; background: var(--blue-400); color: var(--gray-1000); border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: opacity var(--duration-snap); }
.criteria-detail__cta:hover { opacity: 0.9; }
.criteria-detail__note { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); display: flex; align-items: flex-start; gap: var(--space-2); }
.criteria-detail__note i { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* ============================================
   EVENT ALERT MODULE
   ============================================ */
.event-context { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); background: var(--surface-inset); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.event-context strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.event-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-secondary); }
.event-item:last-child { border-bottom: none; }
.event-item__icon { width: 40px; height: 40px; border-radius: var(--radius-lg); background: rgba(3,148,252,0.06); border: 1px solid rgba(3,148,252,0.12); display: flex; align-items: center; justify-content: center; color: var(--blue-400); font-size: 20px; flex-shrink: 0; }
.event-item__content { flex: 1; min-width: 0; }
.event-item__name { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 2px; }
.event-item__window { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); margin-bottom: var(--space-1); }
.event-item__desc { font-size: var(--text-size-90); color: var(--text-tertiary); line-height: var(--lh-16); margin-bottom: var(--space-2); }
.event-item__history { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); font-style: italic; }
.event-item__action { flex-shrink: 0; align-self: center; }
@media (max-width: 860px) {
  .event-item { flex-wrap: wrap; }
  .event-item__content { flex-basis: calc(100% - 40px - var(--space-4)); }
  .event-item__action { align-self: flex-start; margin-left: calc(40px + var(--space-4)); }
}
.event-notify-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; background: rgba(3,148,252,0.06); color: var(--blue-400); border: 1px solid rgba(3,148,252,0.15); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-snap); white-space: nowrap; }
.event-notify-btn:hover { background: rgba(3,148,252,0.1); border-color: rgba(3,148,252,0.25); }
.event-notify-btn.is-subscribed { background: rgba(3,255,136,0.05); color: var(--green-300); border-color: rgba(3,255,136,0.15); cursor: default; }
.event-capture { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid rgba(3,148,252,0.12); border-radius: var(--radius-lg); background: rgba(3,148,252,0.03); display: none; }
.event-capture.is-visible { display: block; animation: su-slide-in var(--duration-slide) var(--ease-industrial); }
.event-capture__label { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); font-weight: var(--weight-medium); margin-bottom: var(--space-3); }
.event-capture__row { display: flex; gap: var(--space-2); }
.event-capture__input { flex: 1; padding: 8px 14px; background: var(--surface-inset); border: 1px solid var(--border-primary); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-primary); outline: none; transition: border-color var(--duration-snap); }
.event-capture__input::placeholder { color: var(--text-disabled); }
.event-capture__input:focus { border-color: var(--blue-400); }
.event-capture__submit { padding: 8px 16px; background: var(--blue-400); color: var(--gray-1000); border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; transition: opacity var(--duration-snap); }
.event-capture__submit:hover { opacity: 0.9; }
.event-capture__success { display: none; align-items: center; gap: var(--space-2); padding: var(--space-3); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--green-300); }
.event-capture__success.is-visible { display: flex; }
.event-capture__success i { font-size: 18px; }
.event-capture__note { margin-top: var(--space-2); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }

/* Non-customer deals panel */
.nc-deal-context { padding: var(--space-3) var(--space-6); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); border-bottom: 1px solid var(--border-secondary); background: var(--surface-inset); }
.nc-deals-list { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.ws .nc-deals-list { padding-left: var(--space-4); padding-right: var(--space-4); padding-bottom: var(--space-4); }
.nc-deal { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.nc-deals-list .nc-deal { align-items: center; }
.nc-deals-list .nc-deal:last-child { border-bottom: none; }
.nc-deal__icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--green-950); border: 1px solid var(--green-900); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green-300); font-size: 16px; }
.nc-deal__content { flex: 1; min-width: 0; }
.nc-deal__title { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--lh-24); }
.nc-deal__desc { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-top: 2px; }
.nc-deal__cta { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--green-300); font-size: 18px; transition: color var(--duration-snap); align-self: center; }
.nc-deal__cta:hover { color: var(--green-200); }

/* ============================================
   WORKSTATION OVERLAY
   ============================================ */
.ws-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; background: rgba(0,0,0,0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: none; overflow-y: auto; }
.ws-overlay.is-open { display: block; animation: ws-slide-up 400ms cubic-bezier(0.2,0,0,1); }
@keyframes ws-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ws-page { max-width: 680px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-12); }
.ws-header { position: sticky; top: 0; z-index: 10; background: var(--surface-base); display: flex; align-items: center; min-height: 32px; padding: 24px var(--space-6) var(--space-4); }

/* VARIANT TRANSITIONS */
.ws-variant { display: none; opacity: 0; }
.ws-variant.is-active { display: block; opacity: 1; animation: ws-variant-in var(--duration-slide) var(--ease-industrial); }
.ws-variant.is-active.is-exiting { animation: none; opacity: 0; transition: opacity var(--duration-snap); }
@keyframes ws-variant-in { from { opacity: 0; } to { opacity: 1; } }

/* VARIANT ACCENT COLORS */
.ws-variant--violet { --ws-accent: var(--axi-violet); --ws-accent-dim: rgba(139,92,246,0.08); --ws-accent-border: rgba(139,92,246,0.2); --ws-accent-bg: rgba(139,92,246,0.03); }
.ws-variant--blue { --ws-accent: var(--blue-400); --ws-accent-dim: rgba(3,148,252,0.08); --ws-accent-border: rgba(3,148,252,0.15); --ws-accent-bg: rgba(3,148,252,0.03); }
.ws-variant--violet .copy-btn, .ws-variant--blue .copy-btn { background: var(--ws-accent); }
.ws-variant--violet .copy-btn.is-copied, .ws-variant--blue .copy-btn.is-copied { background: var(--ws-accent-dim); color: var(--ws-accent); border-color: var(--ws-accent-border); }
.ws-variant--violet .active-code__string, .ws-variant--blue .active-code__string { color: var(--ws-accent); }
.ws-variant--violet .ct__copy, .ws-variant--blue .ct__copy { color: var(--ws-accent); border-color: var(--ws-accent-border); }
.ws-variant--violet .ct__copy:hover, .ws-variant--blue .ct__copy:hover { background: var(--ws-accent-dim); border-color: var(--ws-accent); }
.ws-variant--violet .ct__copy.is-active, .ws-variant--blue .ct__copy.is-active { background: var(--ws-accent-dim); color: var(--ws-accent); border-color: var(--ws-accent-border); }
.ws-variant--violet .ct tbody tr.is-active .ct__code, .ws-variant--blue .ct tbody tr.is-active .ct__code { color: var(--ws-accent); }
.ws-variant--violet .hitl__btn--yes, .ws-variant--blue .hitl__btn--yes { background: var(--ws-accent); }
.ws-variant--violet .hitl__btn--yes:hover, .ws-variant--blue .hitl__btn--yes:hover { opacity: 0.85; }
.ws-variant--violet .hitl--activating .hitl__inner, .ws-variant--violet .hitl--active .hitl__inner { border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.03); }
.ws-variant--blue .hitl--activating .hitl__inner, .ws-variant--blue .hitl--active .hitl__inner { border-color: rgba(3,148,252,0.2); background: rgba(3,148,252,0.03); }
.ws-variant--violet .su-badge, .ws-variant--violet .su-urgency { color: var(--ws-accent); }
/* Sticky bar inherits accent class from JS (activateVariant syncs ws-variant--* to ws-sticky) */
.ws-sticky.ws-variant--violet .ws-sticky__code, .ws-sticky.ws-variant--blue .ws-sticky__code { color: var(--ws-accent); }
.ws-sticky.ws-variant--violet .ws-sticky__copy, .ws-sticky.ws-variant--blue .ws-sticky__copy { color: var(--ws-accent); border-color: var(--ws-accent-border); }
.ws-sticky.ws-variant--violet .ws-sticky__copy:hover, .ws-sticky.ws-variant--blue .ws-sticky__copy:hover { background: var(--ws-accent-dim); border-color: var(--ws-accent); }
.ws-sticky.ws-variant--violet .ws-sticky__copy.is-active, .ws-sticky.ws-variant--blue .ws-sticky__copy.is-active { background: var(--ws-accent-dim); color: var(--ws-accent); border-color: var(--ws-accent-border); }
.ws-sticky.ws-variant--violet .ws-sticky__hitl-btn--yes, .ws-sticky.ws-variant--blue .ws-sticky__hitl-btn--yes { background: var(--ws-accent); }
/* Title-only sticky bar (criteria, events) */
.ws-sticky--title .ws-sticky__info { display: none; }
.ws-sticky__title { font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); color: var(--text-primary); flex: 1; }

/* WORKSTATION CARD */
.ws { position: relative; border: 1px solid var(--border-secondary); border-radius: var(--radius-2xl); background: var(--surface-elevated); overflow: hidden; }
.ws__heading { font-size: var(--text-size-200); font-weight: var(--weight-semibold); color: var(--text-primary); padding: var(--space-6) var(--space-6) var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.ws-overlay__close { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 20; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--gray-900); border: 1px solid var(--border-secondary); color: var(--text-tertiary); cursor: pointer; font-size: 16px; transition: all var(--duration-snap) var(--ease-industrial); }
.ws-overlay__close:hover { color: var(--text-primary); border-color: var(--border-primary); background: var(--gray-800); }

/* ACTIVE CODE */
.active-code { padding: var(--space-6); border-bottom: 1px solid var(--border-secondary); }
@keyframes active-code-flash { 0% { background: rgba(3,255,136,0.12); } 100% { background: transparent; } }
.active-code.flash { animation: active-code-flash 0.4s ease-out forwards; }
.active-code__label { font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.active-code__string-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.active-code__string { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-500); line-height: var(--lh-40); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--text-primary); }
.copy-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; background: var(--action-primary); color: var(--text-on-action); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--duration-slide); }
.copy-btn:hover { box-shadow: 0 0 10px rgba(3,255,136,0.3); }
.copy-btn.is-copied { background: var(--green-900); color: var(--green-300); border-color: var(--green-700); }
.copy-btn.is-copied:hover { background: var(--green-800); border-color: var(--green-600); }
.active-code__discount { font-size: var(--text-size-200); line-height: var(--lh-28); color: var(--text-primary); font-weight: var(--weight-regular); margin-bottom: var(--space-1); }
.active-code__restrictions { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.active-code__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.meta-item { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.meta-sep { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--gray-700); flex-shrink: 0; }

/* STEPS */
.steps-block { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.steps-box { background: var(--surface-inset); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.steps-box__title { font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.step__num { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--gray-800); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-size-80); line-height: var(--lh-16); color: var(--text-tertiary); font-weight: var(--weight-medium); flex-shrink: 0; }
.step__text { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); }
.step__link { color: var(--ws-accent, var(--green-300)); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.step__link:hover { text-decoration: underline; }
.step__sub { color: var(--text-tertiary); font-size: var(--text-size-90); line-height: var(--lh-16); }
/* Collapsible "How to Use" — native <details>, collapsed by default; summary IS the title. */
details.steps-box > summary.steps-box__title { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); margin-bottom: 0; }
details.steps-box > summary.steps-box__title::-webkit-details-marker { display: none; }
details.steps-box[open] > summary.steps-box__title { margin-bottom: var(--space-3); }
.steps-box__caret { margin-left: auto; font-size: 14px; transition: transform var(--duration-snap); }
details.steps-box[open] .steps-box__caret { transform: rotate(180deg); }
/* Merchant link promoted into the "Your Code" hero so it stays visible when How-to is collapsed. */
.active-code__merchant-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: var(--text-size-90); font-weight: var(--weight-semibold); color: var(--brand-green, #03ff88); }
.active-code__merchant-link:hover { color: var(--green-400); }
.active-code__merchant-link i { font-size: 14px; }

/* NO CODES FALLBACK */
.no-codes-wrap { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0; }
.no-codes-fallback { display: flex; flex-direction: column; gap: var(--space-3); }
.nc-section-label { font-size: var(--text-size-80); font-weight: var(--weight-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); }
/* SU community code cards */
.nc-su-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.nc-su-card { background: var(--surface-inset); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.nc-su-discount { font-size: var(--text-size-200); font-weight: var(--weight-bold); color: var(--axi-violet); line-height: 1.2; }
.nc-su-title { font-size: var(--text-size-90); color: var(--text-secondary); line-height: var(--lh-16); }
.nc-su-meta { font-size: var(--text-size-80); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.nc-su-copy { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25); color: var(--axi-violet); border-radius: var(--radius-md); font-size: var(--text-size-80); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-snap); }
.nc-su-copy:hover { background: rgba(139,92,246,0.2); }
/* Deal cards */
.nc-deal-list { display: flex; flex-direction: column; gap: var(--space-2); }
.nc-deal { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface-elevated); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); }
.nc-deal__logo { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; margin-top: 30px; }
.nc-deal__logo img { object-fit: contain; padding: 4px; display: block; width: 100%; height: 100%; }
.nc-deal__logo-placeholder { font-size: var(--text-size-90); font-weight: var(--weight-bold); color: var(--text-secondary); }
.nc-deal__body { flex: 1; min-width: 0; }
.nc-deal__title { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--lh-20); }
/* Amazon badge colour override (reuses code-card__badge structure) */
.nc-deal__badge--amazon { background: rgba(255,153,0,0.08); border: 1px solid rgba(255,153,0,0.2); color: #e08600; }
.nc-deal__desc { font-size: var(--text-size-90); color: var(--text-tertiary); line-height: var(--lh-16); margin-top: 2px; }
.nc-deal__meta { font-size: var(--text-size-80); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
/* code-card__cta used as <a> in nc-deal flex rows - reset grid props, add link reset */
.nc-deal .code-card__cta { align-self: flex-start; margin-top: 30px; margin-left: var(--space-2); text-decoration: none; grid-column: unset; grid-row: unset; order: 0; width: auto; min-height: 0; padding: 10px 20px; font-size: var(--text-size-90); font-weight: var(--weight-semibold); flex-shrink: 0; }
/* Alt cards label in no-codes context */
.no-codes-alt { display: flex; flex-direction: column; gap: var(--space-3); }
.no-codes-alt__label { font-size: var(--text-size-80); font-weight: var(--weight-semibold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* S-19 Empty #3 - Confident-No certificate (v1.1 .cert): green-tinted dark surface,
   green-accent border, the confident "no". */
.nc-cert { background: linear-gradient(rgba(3,255,136,0.05), rgba(3,255,136,0.05)), var(--surface-base, #000); border: 1px solid rgba(3,255,136,0.42); border-radius: 13px; padding: var(--space-4, 1rem); }
.nc-cert__badge { display: inline-block; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80, 0.694rem); letter-spacing: var(--tracking-wide, 0.09em); text-transform: uppercase; color: #03ff88; background: rgba(3,255,136,0.1); border-radius: 5px; padding: 3px 8px; margin-bottom: var(--space-2, 0.5rem); }
.nc-cert__question { font-size: 16px; font-weight: var(--weight-bold, 700); line-height: 1.35; color: var(--text-primary, #fff); margin-bottom: var(--space-2, 0.5rem); }
.nc-cert__statement { font-size: 14px; font-weight: var(--weight-regular, 400); line-height: 1.5; color: var(--text-secondary, #d4d4d8); }
/* Mobile: the Clean Verification cert and the deal hero collapse to a compact default so the
   top deal's CTA lands above the fold; a chevron (or tapping the card) expands the full detail.
   bot-check is dropped here too. At >=768px everything shows and the chevron is hidden. */
@media (max-width: 767px) {
  .trust__botcheck { display: none; }
  .nc-cert { padding: var(--space-2, 0.5rem); position: relative; cursor: pointer; }
  .nc-cert__badge { margin-bottom: 4px; }
  .nc-cert__question { margin-bottom: 4px; padding-right: 30px; }
  .nc-deals-title { margin-bottom: var(--space-2, 0.5rem); }
  .nc-hero { padding: var(--space-3, 0.75rem); position: relative; cursor: pointer; }
  .nc-hero__badges { padding-right: 30px; }
  .nc-hero__cta { margin-top: var(--space-2, 0.5rem); }
  /* Collapsed default: hide the expandable detail until .is-expanded. */
  .nc-cert:not(.is-expanded) .nc-cert__statement,
  .nc-hero:not(.is-expanded) .nc-hero__desc,
  .nc-hero:not(.is-expanded) .nc-hero__meta { display: none; }
  .nc-card__expand { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: none; color: var(--text-tertiary, #a1a1aa); cursor: pointer; font-size: 16px; transition: transform 0.15s; }
  .is-expanded .nc-card__expand { transform: rotate(180deg); }
}
@media (min-width: 768px) { .nc-card__expand { display: none; } }
/* No-code deals section: question header (mirrors the green kz-block pattern). */
.nc-deals-title { font-size: 1.125rem; font-weight: var(--weight-bold, 700); line-height: 1.3; color: var(--text-primary, #fff); margin-bottom: var(--space-4, 1rem); }

/* S-19 Empty #4 - deal hero (v1.1 BEST DEAL .card.hero): the promoted first deal. */
.nc-hero { background: var(--surface-layer, #101013); border: 1px solid rgba(3,255,136,0.45); box-shadow: 0 0 0 1px rgba(3,255,136,0.14); border-radius: var(--radius-xl); padding: var(--space-3, 0.75rem); display: flex; align-items: flex-start; gap: var(--space-3, 0.75rem); }
.nc-hero__logo { width: 40px; height: 40px; border-radius: var(--radius-md, 0.5rem); background: #fff; border: 1px solid #ffcc80; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nc-hero__logo img { width: 26px; height: 26px; object-fit: contain; }
.nc-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.nc-hero__badges { display: flex; gap: var(--space-2, 0.5rem); flex-wrap: wrap; margin-bottom: var(--space-2, 0.5rem); }
.nc-hero__badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80, 0.694rem); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide, 0.08em); text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: rgba(3,255,136,0.16); color: #03ff88; }
.nc-hero__badge--amazon { background: rgba(255,153,0,0.12); color: #e08600; }
.nc-hero__badge--verified { background: rgba(3,255,136,0.08); color: var(--green-300, #39d98a); }
.nc-hero__badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #03ff88; flex-shrink: 0; }
.nc-hero__title { font-size: var(--text-size-100, 1rem); font-weight: var(--weight-bold, 700); line-height: var(--lh-20); color: var(--text-primary, #fff); }
.nc-hero__desc { font-size: var(--text-size-90, 0.833rem); color: var(--text-secondary, #d4d4d8); line-height: var(--lh-16); margin-top: 2px; }
.nc-hero__meta { display: flex; align-items: flex-start; gap: 7px; font-size: var(--text-size-90, 0.833rem); color: var(--text-secondary, #d4d4d8); margin-top: var(--space-2, 0.5rem); }
.nc-hero__meta-dot { width: 6px; height: 6px; border-radius: 50%; background: #03ff88; flex-shrink: 0; margin-top: 5px; }
.nc-hero__cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: var(--space-2, 0.5rem); background: #03ff88; color: #000; font-weight: var(--weight-bold, 800); font-size: var(--text-size-100, 1rem); border-radius: var(--radius-md); text-decoration: none; transition: box-shadow var(--duration-snap) var(--ease-industrial); }
.nc-hero__cta:hover { box-shadow: 0 0 22px rgba(3,255,136,0.35); }
.nc-hero__cta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-base, #000), 0 0 0 4px #03ff88; }

/* HITL - CONTEXT-AWARE STATE MACHINE */
.hitl { position: relative; border-bottom: 1px solid var(--border-secondary); transition: all 500ms cubic-bezier(0.2, 0.0, 0.0, 1.0); }
.hitl__inner { transition: all 400ms cubic-bezier(0.2, 0.0, 0.0, 1.0); }
.hitl__question { transition: all 400ms cubic-bezier(0.2, 0.0, 0.0, 1.0); }
.hitl__community { display: none; }
.hitl__hint { display: none; }
.hitl--dormant { opacity: 0.35; padding: var(--space-5) var(--space-6); }
.hitl--dormant .hitl__inner { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: transparent; }
.hitl--dormant .hitl__question { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-bottom: 0; }
.hitl--dormant .hitl__buttons { display: none; }
.hitl--dormant .hitl__hint { display: block; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); color: var(--text-tertiary); letter-spacing: var(--tracking-normal); margin-top: 8px; }
.hitl--activating { padding: var(--space-5) var(--space-6); animation: hitl-arrive 600ms cubic-bezier(0.2, 0.0, 0.0, 1.0) forwards; }
.hitl--activating .hitl__inner { border: 1px solid var(--green-800); border-radius: var(--radius-xl); padding: var(--space-6); background: rgba(3, 255, 136, 0.03); animation: hitl-border-pulse 1.5s ease-in-out 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-6); }
.hitl--activating .hitl__question { font-size: var(--text-size-100); line-height: var(--lh-20); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: var(--space-1); grid-column: 1; }
.hitl--activating .hitl__community { display: block; font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); margin-bottom: 0; grid-column: 1; }
.hitl--activating .hitl__buttons { display: flex; gap: var(--space-3); grid-column: 2; grid-row: 1 / 3; }
.hitl--activating .hitl__hint { display: none; }
.hitl--active { padding: var(--space-5) var(--space-6); }
.hitl--active .hitl__inner { border: 1px solid var(--green-800); border-radius: var(--radius-xl); padding: var(--space-6); background: rgba(3, 255, 136, 0.03); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-6); }
.hitl--active .hitl__question { font-size: var(--text-size-100); line-height: var(--lh-20); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: var(--space-1); grid-column: 1; }
.hitl--active .hitl__community { display: block; font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); margin-bottom: 0; grid-column: 1; }
.hitl--active .hitl__buttons { display: flex; gap: var(--space-3); grid-column: 2; grid-row: 1 / 3; }
.hitl--active .hitl__hint { display: none; }
.hitl--nudge { padding: var(--space-5) var(--space-6); animation: hitl-arrive 500ms cubic-bezier(0.2, 0.0, 0.0, 1.0) forwards; }
.hitl--nudge .hitl__inner { border: 1px solid var(--border-primary); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); background: rgba(255, 255, 255, 0.02); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--space-6); }
.hitl--nudge .hitl__question { font-size: var(--text-size-100); line-height: var(--lh-20); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-1); grid-column: 1; }
.hitl--nudge .hitl__community { display: block; font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-bottom: 0; grid-column: 1; }
.hitl--nudge .hitl__buttons { display: flex; gap: var(--space-3); grid-column: 2; grid-row: 1 / 3; }
.hitl--nudge .hitl__hint { display: none; }
@media (max-width: 860px) { .hitl--activating .hitl__inner, .hitl--active .hitl__inner, .hitl--nudge .hitl__inner { grid-template-columns: 1fr; } .hitl--activating .hitl__buttons, .hitl--active .hitl__buttons, .hitl--nudge .hitl__buttons { grid-column: 1; grid-row: auto; margin-top: var(--space-4); } }
.hitl--success { padding: var(--space-5) var(--space-6); }
.hitl--success .hitl__inner { border: 1px solid var(--green-800); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); background: rgba(3, 255, 136, 0.04); }
.hitl--success .hitl__buttons { display: none; }
.hitl--success .hitl__question { display: none; }
.hitl--success .hitl__community { display: none; }
.hitl--success .hitl__hint { display: none; }
.hitl--fail { padding: var(--space-5) var(--space-6); }
.hitl--fail .hitl__inner { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); background: transparent; }
.hitl--fail .hitl__buttons { display: none; }
.hitl--fail .hitl__question { display: none; }
.hitl--fail .hitl__community { display: none; }
.hitl--fail .hitl__hint { display: none; }

/* HITL SHARED ELEMENTS */
.hitl__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 24px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; border: none; transition: all 100ms cubic-bezier(0.2, 0.0, 0.0, 1.0); }
.hitl__btn svg { width: 16px; height: 16px; }
.hitl__btn--yes { background: var(--green-600); color: var(--gray-1000); }
.hitl__btn--yes:hover { background: var(--green-300); box-shadow: 0 0 16px rgba(3, 255, 136, 0.25); }
.hitl__btn--no { background: var(--gray-800); color: var(--text-secondary); border: 1px solid var(--border-primary); }
.hitl__btn--no:hover { background: var(--gray-700); color: var(--text-primary); }
@media (max-width: 440px) { .hitl__btn { flex: 1; flex-direction: column; padding: 10px 16px; gap: var(--space-1); } }
.hitl__result { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; }
.hitl__result-icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hitl__result-icon--success { background: rgba(2, 200, 105, 0.15); color: var(--green-600); }
.hitl__result-icon--fail { background: rgba(246, 75, 75, 0.1); color: var(--red-400); }
.hitl__result-text { font-size: var(--text-size-90); color: var(--text-secondary); line-height: var(--lh-16); }
.hitl__result-text strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.hitl__try-next { display: inline-flex; align-items: center; gap: 4px; color: var(--green-300); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); text-decoration: none; margin-top: 8px; cursor: pointer; }
.hitl__try-next:hover { text-decoration: underline; }
@keyframes hitl-arrive { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hitl-border-pulse { 0% { border-color: var(--green-800); box-shadow: 0 0 0 0 rgba(3, 255, 136, 0); } 40% { border-color: var(--green-600); box-shadow: 0 0 20px rgba(3, 255, 136, 0.12); } 100% { border-color: var(--green-800); box-shadow: 0 0 0 0 rgba(3, 255, 136, 0); } }

/* TIP PROMPT (Post-HITL) */
.hitl__tip { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; padding-top: 0; border-top: 1px solid transparent; grid-column: 1 / -1; transition: max-height 500ms cubic-bezier(0.2, 0.0, 0.0, 1.0), opacity 400ms 100ms cubic-bezier(0.2, 0.0, 0.0, 1.0), margin-top 500ms cubic-bezier(0.2, 0.0, 0.0, 1.0), padding-top 500ms cubic-bezier(0.2, 0.0, 0.0, 1.0), border-color 400ms 100ms ease; }
.hitl__tip.is-visible { max-height: 350px; overflow: visible; opacity: 1; margin-top: var(--space-5); padding-top: var(--space-5); border-top-color: var(--border-secondary); }
.hitl__tip-label { font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.hitl__tip-label i { font-size: 14px; color: var(--green-600); }
.hitl__tip-row { display: flex; gap: var(--space-2); }
.hitl__tip-input { flex: 1; padding: 10px 14px; background: var(--surface-inset); border: 1px solid var(--border-primary); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); color: var(--text-primary); outline: none; transition: border-color var(--duration-snap); line-height: var(--lh-16); }
.hitl__tip-input::placeholder { color: var(--text-disabled); }
.hitl__tip-input:focus { border-color: var(--green-600); }
.hitl__tip-submit { padding: 10px 16px; background: rgba(3,255,136,0.08); color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; transition: all var(--duration-snap); white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); }
.hitl__tip-submit:hover { background: rgba(3,255,136,0.14); border-color: var(--green-600); }
.hitl__tip-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.hitl__tip-tag { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); background: var(--gray-900); border: 1px solid var(--gray-800); padding: 4px 10px; border-radius: var(--radius-2xl); cursor: pointer; transition: all var(--duration-snap); }
.hitl__tip-tag:hover { border-color: var(--border-primary); color: var(--text-secondary); }
.hitl__tip-tag.is-selected { border-color: var(--green-800); color: var(--green-300); background: var(--green-950); }
.hitl__tip-thanks { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(3,255,136,0.04); border: 1px solid rgba(3,255,136,0.1); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--green-300); }
.hitl__tip-thanks.is-visible { display: flex; }
.hitl__tip-thanks i { font-size: 16px; flex-shrink: 0; }
.hitl__tp-layer { display: none; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid rgba(0,182,122,0.35); border-radius: var(--radius-lg); background: rgba(0,182,122,0.05); animation: hitl-arrive 400ms cubic-bezier(0.2,0,0,1); }
.hitl__tp-layer.is-visible { display: flex; }
.hitl__tp-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: #00b67a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hitl__tp-icon svg { width: 20px; height: 20px; }
.hitl__tp-text { flex: 1; min-width: 0; }
.hitl__tp-title { font-size: var(--text-size-90); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: 2px; }
.hitl__tp-sub { font-size: var(--text-size-80); color: var(--text-tertiary); line-height: var(--lh-20); }
.hitl__tp-cta { flex-shrink: 0; background: #00b67a; color: #fff; padding: 8px 14px; border-radius: var(--radius-md); font-size: var(--text-size-90); font-weight: var(--weight-bold); white-space: nowrap; transition: filter var(--duration-snap); text-decoration: none; }
.hitl__tp-cta:hover { filter: brightness(1.1); }
.hitl__tp-dismiss { width: 100%; background: none; border: none; color: var(--text-quaternary); font-size: var(--text-size-80); cursor: pointer; padding: 2px 0 0; text-align: center; }
.hitl__tp-dismiss:hover { color: var(--text-tertiary); }
@media (max-width: 520px) { .hitl__tp-cta { width: 100%; text-align: center; } }

/* WORKSTATION CODE TABLE */
.table-section { padding: var(--space-6); border-bottom: 1px solid var(--border-secondary); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-section__title { font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; }
.ct { width: 100%; border-collapse: collapse; }
.ct th { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-medium); text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-secondary); }
.ct td { padding: var(--space-3); border-bottom: 1px solid var(--border-secondary); vertical-align: middle; }
.ct tbody tr { cursor: pointer; transition: background var(--duration-snap); }
.ct tbody tr:hover { background: rgba(255,255,255,0.02); }
.ct__discount { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); font-weight: var(--weight-medium); }
.ct__sub { font-size: var(--text-size-90); color: var(--text-tertiary); margin-top: 2px; }
.ct__conf { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ct__code { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); color: var(--text-secondary); letter-spacing: var(--tracking-wide); }
.ct__copy { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0; width: 52px; height: 28px; background: transparent; color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-sm); font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); white-space: nowrap; pointer-events: none; user-select: none; }
.ct tbody tr:hover .ct__copy { border-color: var(--green-600); }
.ct__copy.is-active { background: var(--green-900); color: var(--green-300); border-color: var(--green-700); }
/* Tried-and-failed: fade + strike the row so the shopper tracks which codes they've already tested (HITL "Didn't work" vote). */
.ct tbody tr.is-tried { opacity: 0.5; }
.ct tbody tr.is-tried .ct__discount, .ct tbody tr.is-tried .ct__code { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-muted, #71717a); }
.ct__copy::after { content: 'Copied!'; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--green-900); color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-sm); font-size: var(--text-size-80); padding: 2px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms, transform 150ms; }
.ct__copy.just-copied::after { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 496px) { .ct thead { display: none; } .ct, .ct tbody { display: block; } .ct tr { display: flex; flex-wrap: wrap; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-secondary); position: relative; } .ct tbody tr:last-child { border-bottom: none; } .ct td { padding: 0; border-bottom: none; } .ct td:nth-child(3) { width: 100%; order: 1; margin-bottom: var(--space-2); padding-right: 80px; } .ct td:first-child { width: 100%; order: 2; margin-bottom: var(--space-2); padding-right: 80px; } .ct td:nth-child(2) { order: 3; } .ct td:last-child { position: absolute; top: var(--space-3); right: 0; } }
/* SU table is 3-col (Discount | Code | Copy): nth-child(3) is the copy button, not the code column. Reset the 4-col rules so code (nth-child(2)) leads and copy doesn't go full-width. */
@media (max-width: 496px) { #ct-single-use td:nth-child(2) { width: 100%; order: 1; margin-bottom: var(--space-2); padding-right: 80px; } #ct-single-use td:nth-child(3) { width: auto; padding-right: 0; margin-bottom: 0; } }
.ct tbody tr.is-active { background: rgba(3,255,136,0.03); }
.ct tbody tr.is-active .ct__code { color: var(--green-300); }
.ct__store { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ct__store-icon { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--gray-800); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-size-80); color: var(--text-secondary); flex-shrink: 0; overflow: hidden; }
.ct__store-icon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; background: #fff; box-sizing: border-box; }
.ct__store-name { font-family: var(--font-sans); font-size: var(--text-size-90); color: var(--text-secondary); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-more { text-align: center; padding: var(--space-4) 0 0; }
.view-more__btn { font-family: var(--font-sans); font-feature-settings: var(--features-sans); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--green-300); font-weight: var(--weight-semibold); background: none; border: 1px solid var(--green-800); padding: 8px 20px; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.view-more__btn:hover { background: rgba(3,255,136,0.06); }

/* WORKSTATION ALT PATHS */
.alt-section { padding: var(--space-4) 0; }
.ws .alt-section { padding: var(--space-4) var(--space-6); }
.alt-section__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
/* Main-page + no-code "Where else can you save" — a real content heading (not the small uppercase
   label .alt-section__title, which stays for the in-workstation "More Ways to Save" sub-labels). */
.alt-section__heading { font-size: var(--text-size-400); font-weight: var(--weight-semibold); line-height: var(--lh-32); color: var(--text-primary, #fff); margin-bottom: var(--space-3); }
.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .alt-grid { grid-template-columns: 1fr; } }
.alt-card { padding: var(--space-4); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--surface-inset); cursor: pointer; transition: all var(--duration-snap); }
.alt-card:hover { border-color: var(--border-primary); background: var(--gray-925); }
.alt-card__headline { font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 2px; }
.alt-card__sub { font-size: var(--text-size-90); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.alt-card__cta { font-family: var(--font-sans); font-feature-settings: var(--features-sans); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--green-300); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-1); }
.alt-card__cta--blue { color: var(--blue-400); }
.alt-card__cta--violet { color: var(--axi-violet); }

/* v1.1 .alt: always-visible inline reseller rows (S-19 #8). One row per reseller,
   "Get Code →" opens the live reseller workspace (openWorkstation('reseller')). */
.alt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); background: var(--surface-layer, #101013); border: 1px solid var(--border-secondary, #333338); border-radius: 12px; padding: 13px 14px; margin-bottom: var(--space-2); cursor: pointer; transition: border-color var(--duration-snap); }
.alt:hover { border-color: var(--border-primary); }
.alt:focus-visible { outline: 2px solid var(--brand-green, #03ff88); outline-offset: 2px; }
.alt__lead { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.alt__logo { width: 28px; height: 28px; border-radius: var(--radius-md, 0.5rem); object-fit: contain; background: #fff; padding: 2px; flex-shrink: 0; }
.alt__logo--initial { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-base, #000); border: 1px solid var(--border-secondary, #333338); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); color: var(--brand-green, #03ff88); }
.alt__t { font-size: 13.5px; line-height: var(--lh-20); font-weight: var(--weight-bold); color: var(--text-primary); }
.alt__badge { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 11px; font-weight: var(--weight-medium); color: var(--brand-green, #03ff88); }
.alt__badge i { font-size: 12px; }
.alt__chip { font-family: var(--font-mono); font-size: 14px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide, 0.05em); color: var(--text-primary, #fff); white-space: nowrap; flex-shrink: 0; min-width: 64px; text-align: right; }
.alt__go { font-size: 12px; font-weight: var(--weight-bold); color: var(--brand-green, #03ff88); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; font-family: inherit; }
.alt__go i { font-size: 12px; }
.alt__go:hover { color: var(--green-400); }
.alt__go:focus-visible { outline: 2px solid #03ff88; outline-offset: 3px; border-radius: var(--radius-sm); }

/* IMAGE LIGHTBOX MODAL */
.pmlp-img-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; padding: var(--space-6); }
.pmlp-img-modal.is-open { display: flex; }
.pmlp-img-modal__img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-lg); object-fit: contain; box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
.pmlp-img-modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 36px; height: 36px; background: var(--gray-800); border: 1px solid var(--border-secondary); border-radius: var(--radius-full); color: var(--text-primary); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pmlp-img-modal__close:hover { background: var(--gray-700); }

/* WORKSTATION DIVIDER */
.ws-divider { border: none; border-top: 1px solid var(--border-secondary); margin: 0; }

/* BACK LINK */
.back-link { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-secondary); display: flex; align-items: center; justify-content: space-between; }
.back-link__text { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.back-link__text strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.back-link__a { font-family: var(--font-sans); font-feature-settings: var(--features-sans); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--green-300); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.back-link__a:hover { text-decoration: underline; }

/* ECO CTA */
.eco { padding: var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.eco__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--green-950); border: 1px solid var(--green-900); display: flex; align-items: center; justify-content: center; color: var(--green-300); font-size: 20px; flex-shrink: 0; }
.eco__content { flex: 1; }
.eco__headline { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-primary); font-weight: var(--weight-medium); }
.eco__sub { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.eco__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; background: transparent; color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.eco__btn:hover { background: rgba(3,255,136,0.08); }

/* RESELLER BRIDGE */
.bridge { padding: var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.bridge__logos { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.bridge__logo { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--gray-800); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-size-200); color: var(--text-primary); overflow: hidden; }
.bridge__logo-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; background: #fff; box-sizing: border-box; border-radius: inherit; }
.bridge__arrow { color: var(--text-tertiary); font-size: 18px; }
.bridge__logo--clickable { cursor: pointer; transition: opacity 0.15s; }
.bridge__logo--clickable:hover { opacity: 0.8; }
.bridge__logo--clickable:focus-visible { outline: 2px solid #03ff88; outline-offset: 2px; }

/* SINGLE-USE BADGES */
.su-badge { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(139,92,246,0.1); color: var(--axi-violet); border: 1px solid rgba(139,92,246,0.2); }
.su-badge--info { background: var(--surface-inset); color: var(--text-tertiary); border-color: var(--border-secondary); }
.su-ws-info { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-inset); border-radius: var(--radius-md); margin: var(--space-4) 0; font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.su-ws-info i { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.su-urgency { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border-secondary); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.su-urgency i { font-size: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.su-count { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(139,92,246,0.1); color: var(--axi-violet); border: 1px solid rgba(139,92,246,0.2); }

/* CRITERIA (workstation) */
.criteria-badge { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); padding: 3px 8px; border-radius: var(--radius-sm); background: rgba(3,148,252,0.08); color: var(--blue-400); border: 1px solid rgba(3,148,252,0.15); }
.criteria-hero { padding: var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.criteria-hero__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: rgba(3,148,252,0.06); border: 1px solid rgba(3,148,252,0.12); display: flex; align-items: center; justify-content: center; color: var(--blue-400); font-size: 28px; margin-bottom: var(--space-4); }
.criteria-hero__discount { font-size: var(--text-size-400); line-height: var(--lh-32); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-1); letter-spacing: var(--tracking-tight-1); }
.criteria-hero__desc { font-size: var(--text-size-100); line-height: var(--lh-24); color: var(--text-secondary); margin-bottom: var(--space-3); }
.criteria-hero__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.criteria-steps { padding: var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.criteria-steps__title { font-size: var(--text-size-200); font-weight: var(--weight-regular); line-height: var(--lh-28); color: var(--text-primary); margin-bottom: var(--space-5); }
.c-step { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-secondary); }
.c-step:last-child { border-bottom: none; }
.c-step__num { width: 28px; height: 28px; border-radius: var(--radius-full); background: rgba(3,148,252,0.08); border: 1px solid rgba(3,148,252,0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-size-90); color: var(--blue-400); font-weight: var(--weight-medium); flex-shrink: 0; margin-top: 2px; }
.c-step__content { flex: 1; }
.c-step__headline { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 4px; }
.c-step__desc { font-size: var(--text-size-90); color: var(--text-tertiary); line-height: var(--lh-16); }
.criteria-link-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; background: rgba(3,148,252,0.08); color: var(--blue-400); border: 1px solid rgba(3,148,252,0.2); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; margin-top: var(--space-4); }
.criteria-link-btn:hover { background: rgba(3,148,252,0.12); }
.criteria-exclusions { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-secondary); background: var(--surface-inset); }
.criteria-exclusions__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.criteria-exclusions__text { font-size: var(--text-size-90); color: var(--text-tertiary); line-height: var(--lh-16); }
.related-criteria { padding: var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.related-criteria__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
.rc-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--surface-inset); cursor: pointer; transition: all var(--duration-snap); margin-bottom: var(--space-3); }
.rc-card:last-child { margin-bottom: 0; }
.rc-card:hover { border-color: var(--border-primary); }
.rc-card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(3,148,252,0.06); border: 1px solid rgba(3,148,252,0.1); display: flex; align-items: center; justify-content: center; color: var(--blue-400); font-size: 20px; flex-shrink: 0; }
.rc-card__content { flex: 1; }
.rc-card__headline { font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); color: var(--text-primary); }
.rc-card__sub { font-size: var(--text-size-90); color: var(--text-tertiary); }
.rc-card__cta { font-family: var(--font-sans); font-feature-settings: var(--features-sans); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--green-300); flex-shrink: 0; }

/* ============================================
   RELATED MERCHANTS - "Stores like X" card grid (v1.1)
   DS 2.0 tokens; brand green stays hex. Markup: renderRelatedMerchants().
   ============================================ */
/* Reviews + Related: top-level sections aligned to the page content column (.page-grid is 1100px). */
.pmlp-reviews-section, .pmlp-related { max-width: 1100px; margin: var(--space-8, 2rem) auto var(--space-12, 3rem); padding: 0 var(--space-6, 1.5rem); }
@media (max-width: 860px) { .pmlp-reviews-section, .pmlp-related { padding-left: var(--space-4, 1rem); padding-right: var(--space-4, 1rem); } }
/* CWV (§O #3): skip layout/paint of below-fold sections until near the viewport.
   SEO-safe — content stays in the DOM and is crawlable; this is a paint optimization,
   not visibility:hidden. contain-intrinsic-size reserves space so the scrollbar doesn't
   jump; the `auto` keyword remembers each section's real height after its first render. */
.kz-section, .pmlp-reviews-section, .pmlp-related { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.pmlp-related__intro { font-size: var(--text-size-100, 1rem); line-height: var(--lh-24, 1.5rem); color: var(--text-tertiary, #a1a1aa); margin-bottom: var(--space-5, 1.5rem); max-width: 60ch; }
.pmlp-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3, 0.75rem); }
@media (max-width: 760px) { .pmlp-related__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pmlp-related__list { grid-template-columns: 1fr; } }
.pmlp-related__item { margin: 0; }
.pmlp-related__link { display: flex; align-items: center; gap: var(--space-3, 0.75rem); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); min-height: 56px; height: 100%; background: var(--surface-layer, #101013); border: 1px solid var(--border-secondary, #333338); border-radius: var(--radius-lg, 0.75rem); color: var(--text-primary, #fff); transition: border-color var(--duration-snap, 0.15s) var(--ease-industrial, ease); }
.pmlp-related__link:hover { border-color: #03ff88; }
.pmlp-related__link:focus-visible { outline: 2px solid #03ff88; outline-offset: 2px; }
.pmlp-related__logo { width: 28px; height: 28px; border-radius: var(--radius-md, 0.5rem); object-fit: contain; background: #fff; padding: 2px; flex-shrink: 0; }
.pmlp-related__initial { width: 28px; height: 28px; border-radius: var(--radius-md, 0.5rem); background: var(--surface-layer, #101013); border: 1px solid var(--border-secondary, #333338); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-size-90, 0.833rem); font-weight: var(--weight-bold); color: #03ff88; flex-shrink: 0; }
.pmlp-related__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmlp-related__name { font-size: var(--text-size-90, 0.833rem); font-weight: var(--weight-medium); color: var(--text-primary, #fff); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmlp-related__stat { font-family: var(--font-mono); font-size: var(--text-size-80, 0.694rem); letter-spacing: var(--tracking-wide, 0.1em); text-transform: uppercase; color: var(--brand-green, #03ff88); }
.pmlp-related__footer { margin-top: var(--space-5, 1.5rem); }
.pmlp-related__footer-label { font-family: var(--font-mono); font-size: var(--text-size-80, 0.694rem); letter-spacing: var(--tracking-wide, 0.1em); text-transform: uppercase; color: var(--text-muted, #71717a); margin-bottom: var(--space-3, 0.75rem); }
.cx-section { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-secondary); }
.cx-section__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.cx-tip { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-inset); border: 1px solid var(--border-secondary); margin-bottom: var(--space-3); }
.cx-tip:last-child { margin-bottom: 0; }
.cx-tip__icon { width: 28px; height: 28px; border-radius: var(--radius-md); background: rgba(3,255,136,0.05); border: 1px solid rgba(3,255,136,0.08); display: flex; align-items: center; justify-content: center; color: var(--green-600); font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.cx-tip__content { flex: 1; }
.cx-tip__headline { font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 2px; }
.cx-tip__desc { font-size: var(--text-size-90); color: var(--text-tertiary); line-height: var(--lh-16); }
.cx-insight { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: rgba(3,255,136,0.02); border: 1px solid rgba(3,255,136,0.06); margin-top: var(--space-4); }
.cx-insight__icon { color: var(--green-600); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.cx-insight__text { font-size: var(--text-size-90); color: var(--text-secondary); line-height: var(--lh-16); }
.cx-insight__text strong { color: var(--green-300); font-weight: var(--weight-medium); }
.cx-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.cx-brand { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); background: var(--gray-900); border: 1px solid var(--gray-800); padding: 2px 8px; border-radius: var(--radius-sm); }

/* ============================================
   KNOWLEDGE ZONE CSS
   ============================================ */
.kz-section { max-width: 1100px; margin: 0 auto; padding: var(--space-12) var(--space-6); }
/* Mobile: tighten the KZ section's vertical padding (was --space-12 = 48px) and drop the
   trailing block margin so the last block (e.g. FAQ) doesn't leave a large dead gap before
   the footer. */
@media (max-width: 860px) { .kz-section { padding: var(--space-6) var(--space-4); } .kz-section .kz-block:last-child { margin-bottom: 0; } }
.kz-header { display: flex; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-3); }
.kz-header__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border-secondary); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-size-200); overflow: hidden; flex-shrink: 0; }
.kz-header__icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.kz-header__text { flex: 1; }
.kz-header__title { font-size: var(--text-size-400); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); line-height: var(--lh-32); }
.kz-header__sub { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-top: 2px; }
.kz-block { border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); overflow: hidden; margin-bottom: var(--space-6); }
.kz-block__header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-secondary); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
@media (max-width: 560px) { .kz-block__header { flex-wrap: wrap; } .kz-block__title { width: 100%; } }
.kz-block__title { font-size: var(--text-size-400); font-weight: var(--weight-semibold); line-height: var(--lh-32); display: flex; align-items: flex-start; gap: var(--space-2); }
.kz-block__title-icon { color: var(--text-tertiary); font-size: 18px; margin-top: 5px; }
.kz-block__badge { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--green-950); color: var(--green-600); border: 1px solid rgba(3,255,136,0.1); }
.kz-block__body { padding: var(--space-5) var(--space-6); }
/* v1.1 .statline: savings-intelligence summary box; green DM-Mono numerics. */
.statline { background: var(--surface-layer, #101013); border: 1px solid var(--border-secondary, #333338); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: var(--lh-20); color: var(--text-secondary, #d4d4d8); margin-bottom: var(--space-4); }
.statline b { color: var(--brand-green, #03ff88); font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-weight: var(--weight-semibold); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
/* v1.1 .stc: compact stat cards - value 17px green DM-Mono, label 10.5px muted. */
.stat-card { padding: 11px; border: 1px solid var(--border-secondary, #333338); border-radius: 10px; background: var(--surface-layer, #101013); }
.stat-card__value { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: 17px; font-weight: var(--weight-semibold); color: var(--brand-green, #03ff88); line-height: 1.25; letter-spacing: var(--tracking-normal); }
.stat-card__label { font-size: 10.5px; color: var(--text-muted, #71717a); margin-top: 3px; line-height: var(--lh-16); }
.stat-card__trend { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: 10.5px; line-height: var(--lh-16); letter-spacing: var(--tracking-normal); margin-top: 3px; }
.stat-card__trend--up { color: var(--green-600); }
.stat-card__trend--down { color: var(--amber-500); }
.stat-card__trend--flat { color: var(--blue-400); }
.stat-card--link { cursor: pointer; transition: border-color 0.15s; }
.stat-card--link:hover { border-color: var(--green-600); }
.stat-card--link:focus-visible { outline: 2px solid #03ff88; outline-offset: 2px; border-radius: var(--radius-md); }
.kz-prose { font-size: var(--text-size-90); line-height: var(--lh-24); color: var(--text-tertiary); }
.kz-prose + .kz-prose { margin-top: var(--space-4); }
.kz-prose strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.kz-answer { font-size: var(--text-size-90); line-height: var(--lh-24); color: var(--text-tertiary); margin-bottom: var(--space-6); }
.bar-chart { margin-top: var(--space-5); }
.bar-chart__title { font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.bar-chart__scroll { overflow-x: auto; scrollbar-width: none; }
.bar-chart__scroll::-webkit-scrollbar { display: none; }
.bar-chart__bars { display: flex; justify-content: space-between; gap: var(--space-2); height: 270px; max-width: 52.5rem; margin-left: auto; margin-right: auto; }
.bar-col { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; }
.bar-col__value { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); margin-bottom: var(--space-1); height: 32px; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
.bar-col__track { flex: 1; width: 100%; background: var(--gray-900); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.bar-col__fill { width: 100%; height: var(--fill); border-radius: inherit; background: linear-gradient(0deg, var(--green-900), var(--green-400)) no-repeat; background-size: 100% calc(1 / var(--fill-frac, 1) * 100%); background-position: 0 100%; }
.bar-col__fill--best { background: linear-gradient(0deg, var(--green-800), var(--green-300)) no-repeat; background-size: 100% calc(1 / var(--fill-frac, 1) * 100%); background-position: 0 100%; }
.bar-chart__labels { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); max-width: 52.5rem; margin-left: auto; margin-right: auto; }
.bar-chart__label { flex: 0 0 40px; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); color: var(--text-tertiary); text-align: center; }
.faq-list { }
.kz-guide { position: relative; }
.kz-guide__content { max-height: 28rem; overflow: hidden; transition: max-height var(--duration-slide) var(--ease-industrial); }
.kz-guide__content.is-expanded { max-height: none; }
.kz-guide__content p, .kz-guide__content li { font-size: var(--text-size-90); line-height: var(--lh-24); color: var(--text-tertiary); }
.kz-guide__content h2, .kz-guide__content h3 { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-secondary); margin: var(--space-6) 0 var(--space-2); }
.kz-guide__content ul, .kz-guide__content ol { padding-left: var(--space-6); margin: var(--space-2) 0; }
.kz-guide__content strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.kz-guide__content p + p { margin-top: var(--space-3); }
.kz-guide__content li + li { margin-top: var(--space-1); }
.kz-guide__content a { color: var(--green-600); text-decoration: underline; text-underline-offset: 2px; }
.kz-guide__content a:hover { color: var(--green-400); }
.kz-guide__fade { position: absolute; bottom: 0; left: 0; right: 0; height: 5rem; background: linear-gradient(to bottom, transparent, var(--surface-elevated, #09090b)); pointer-events: none; }
.kz-guide__toggle { margin-top: var(--space-3); color: var(--green-600); font-size: var(--text-size-90); display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.kz-guide__toggle:hover { color: var(--green-400); }
.kz-guide__toggle:focus-visible { outline: 2px solid #03ff88; outline-offset: 2px; border-radius: 2px; }
/* v1.1 .faq: native <details>/<summary>. Each FAQ is a bordered box; the green +/-
   marker is a pure-CSS summary::after pseudo-element (no JS toggle). */
.faq-item { border: 1px solid var(--border-secondary, #333338); border-radius: var(--radius-lg); margin-bottom: var(--space-2); overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; cursor: pointer; font-size: 13.5px; font-weight: var(--weight-bold); color: var(--text-secondary); gap: var(--space-3); user-select: none; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--text-primary); }
.faq-q::after { content: '+'; color: var(--brand-green, #03ff88); font-weight: var(--weight-bold); font-size: 16px; flex-shrink: 0; line-height: 1; }
.faq-item[open] .faq-q::after { content: '\2013'; }
.faq-a { padding: 0 15px var(--space-4); font-size: var(--text-size-90); line-height: var(--lh-24); color: var(--text-tertiary); }
.faq-a strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.faq-a p + p { margin-top: var(--space-3); }
.faq-a ul, .faq-a ol { padding-left: var(--space-6); margin: var(--space-2) 0; }
.faq-a li + li { margin-top: var(--space-1); }
.faq-a a { color: var(--green-600); text-decoration: underline; text-underline-offset: 2px; }
.faq-a a:hover { color: var(--green-400); }
.faq-a h2, .faq-a h3, .faq-a h4 { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-secondary); margin: var(--space-4) 0 var(--space-2); }
.faq-a__table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.faq-a__table th { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--weight-medium); text-align: left; padding: 0 var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--border-secondary); }
.faq-a__table td { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--border-secondary); }
.faq-a__table tr:last-child td { border-bottom: none; }
.method-step { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-secondary); }
.method-step:last-of-type { border-bottom: none; }
.method-step__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.method-step__content { flex: 1; }
.method-step__title { font-size: var(--text-size-100); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: 4px; }
.method-step__desc { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.method-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding-top: var(--space-5); }
.method-stat { text-align: center; }
@media (max-width: 640px) { .method-stats { grid-template-columns: 1fr; } .method-stat { display: flex; align-items: baseline; gap: var(--space-3); text-align: left; } .method-stat__value { flex-shrink: 0; text-align: right; width: 100px; } }
.method-stat__value { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-200); font-weight: var(--weight-regular); color: var(--green-300); line-height: var(--lh-28); letter-spacing: var(--tracking-normal); }
.method-stat__label { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); margin-top: 2px; }
.json-preview { margin-top: var(--space-6); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--surface-elevated); overflow: hidden; }
.json-preview__header { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-secondary); display: flex; align-items: center; justify-content: space-between; }
.json-preview__title { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--blue-400); font-weight: var(--weight-medium); display: flex; align-items: center; gap: var(--space-2); }
.json-preview__note { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.json-preview__code { padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); line-height: var(--lh-16); letter-spacing: var(--tracking-wide); color: var(--text-tertiary); overflow-x: auto; white-space: pre; background: var(--surface-inset); }
.json-preview__code .k { color: var(--blue-400); }
.json-preview__code .s { color: var(--green-600); }
.json-preview__code .n { color: var(--amber-400); }
.json-preview__code .b { color: var(--axi-violet); }
.json-preview__code .c { color: var(--gray-600); font-style: italic; }
.json-preview__badge-row { display: flex; align-items: center; gap: var(--space-2); }
.json-preview__badge-mcp { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); padding: 2px 6px; border-radius: var(--radius-sm); background: rgba(139,92,246,0.08); color: var(--axi-violet); border: 1px solid rgba(139,92,246,0.15); }
.json-preview__mcp-signal { margin-top: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-secondary); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.json-preview__mcp-signal i { color: var(--axi-violet); font-size: 14px; }
.json-preview__mcp-signal a { color: var(--axi-violet); text-decoration: none; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); }
.json-preview__mcp-signal a:hover { text-decoration: underline; }
.kz-callout { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: rgba(3,255,136,0.03); border: 1px solid rgba(3,255,136,0.08); margin-top: var(--space-5); }
.kz-callout--amber { background: rgba(173,141,43,0.04); border-color: rgba(173,141,43,0.1); }
.kz-callout__icon { color: var(--green-600); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.kz-callout--amber .kz-callout__icon { color: var(--amber-400); }
.kz-callout__text { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.kz-callout__text strong { color: var(--text-secondary); }

/* ============ SECTION SEPARATOR ============ */
.section-separator { margin: 0 auto; padding: 0 var(--space-6); }
.section-separator__line { border: none; border-top: 1px solid var(--border-secondary); margin: 0; }

/* ============ FOOTER SEPARATOR ============ */
/* Top border on footer provides section divider above footer content */
footer { border-top: 1px solid var(--border-secondary); padding-top: var(--space-8); }

/* ============ FOOTER BADGE BORDER FIX ============ */
/* Scoped override: remove any border/outline on app store badge links */
.footer-store-badges .store-badge-link { border: none; outline: none; display: inline-block; line-height: 0; }
.footer-store-badges .store-badge-link img { border: 0; display: block; }
.footer-store-badges .store-badge-link:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }

/* ============ EXCL LIST ============ */
.excl-list { padding: var(--space-3) var(--space-5) var(--space-4); }
.excl-tag { display: inline-block; font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); line-height: var(--lh-16); letter-spacing: var(--tracking-normal); color: var(--text-tertiary); background: var(--gray-900); border: 1px solid var(--gray-800); padding: 2px 6px; border-radius: var(--radius-sm); margin: 2px; white-space: nowrap; }


/* ============ MOBILE PADDING REDUCTION (<=860px) ============ */
@media (max-width: 860px) {
  .mh, .code-card__headline, .active-code, .table-section, .bridge,
  .kz-block__header, .kz-block__body, .section-separator,
  .su-panel__header, .su-panel__context, .su-panel__body, .su-panel__code-card,
  .mod-panel__header, .reseller-context, .criteria-context,
  .criteria-detail__header, .criteria-detail__steps, .criteria-detail__cta-row, .criteria-detail__note,
  .event-context, .back-link, .criteria-hero, .criteria-steps, .criteria-exclusions, .related-criteria,
  .hitl--dormant, .hitl--success, .hitl--fail,
  .hitl--activating .hitl__inner, .hitl--active .hitl__inner, .hitl--nudge .hitl__inner,
  .hitl--success .hitl__inner, .hitl--fail .hitl__inner,
  .code-card__meta, .code-card__expand, .code-card__activity, .code-card__ledger {
    padding-left: var(--space-4); padding-right: var(--space-4);
  }
  .hitl__btn { padding-left: 16px; padding-right: 16px; }
  .eco { display: none; }
  .ws .alt-section { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ============ STICKY CODE BAR ============ */
.ws-sticky { position: sticky; top: 0; z-index: 20; background: var(--surface-base); border-bottom: 1px solid var(--border-secondary); padding: var(--space-3) var(--space-4); display: none; transition: transform var(--duration-slide) var(--ease-industrial), opacity var(--duration-slide); }
.ws-sticky.is-visible { display: block; }
.ws-sticky.is-visible ~ .ws-page .ws-overlay__close { display: none; }
.ws-sticky .ws-overlay__close { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); }
.ws-sticky.ws-sticky--hidden { display: none !important; }
.ws-sticky.is-hiding { transform: translateY(-100%); opacity: 0; }
.ws-sticky__inner { max-width: 680px; margin: 0 auto; display: flex; align-items: flex-start; gap: var(--space-3); }
.ws-sticky__info { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.ws-sticky__row { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 860px) { .ws-sticky__info { flex-direction: column; align-items: flex-start; gap: var(--space-1); } }
.ws-sticky__code { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-90); font-weight: var(--weight-medium); color: var(--green-300); letter-spacing: var(--tracking-wide); }
.ws-sticky__copy { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 28px; background: transparent; color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-sm); font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-size: var(--text-size-80); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); cursor: pointer; flex-shrink: 0; transition: all var(--duration-slide); }
.ws-sticky__copy::after { content: 'Copied!'; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-4px); background: var(--green-900); color: var(--green-300); border: 1px solid var(--green-800); border-radius: var(--radius-sm); font-size: var(--text-size-80); padding: 2px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms, transform 150ms; }
.ws-sticky__copy.just-copied::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.ws-sticky__copy:hover { background: rgba(3,255,136,0.08); border-color: var(--green-600); }
.ws-sticky__copy.is-active { background: var(--green-900); color: var(--green-300); border-color: var(--green-700); }
.ws-sticky__disc { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); }
.ws-sticky__rest { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-tertiary); }
.ws-sticky__hitl { display: none; border-top: 1px solid var(--border-secondary); margin-top: var(--space-3); padding-top: var(--space-3); }
.ws-sticky__hitl.is-visible { display: flex; align-items: center; gap: var(--space-3); max-width: 680px; margin: 0 auto; }
.ws-sticky__hitl-q { flex: 1; font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--text-secondary); white-space: nowrap; }
.ws-sticky__hitl-btns { display: flex; gap: var(--space-2); }
.ws-sticky__hitl-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-size-90); line-height: var(--lh-16); font-weight: var(--weight-semibold); cursor: pointer; border: none; transition: all var(--duration-snap); white-space: nowrap; }
.ws-sticky__hitl-btn--yes { background: var(--green-600); color: var(--gray-1000); }
.ws-sticky__hitl-btn--yes:hover { background: var(--green-300); }
.ws-sticky__hitl-btn--no { background: var(--gray-800); color: var(--text-secondary); border: 1px solid var(--border-primary); }
.ws-sticky__hitl-btn--no:hover { background: var(--gray-700); }
.ws-sticky__hitl-result { font-size: var(--text-size-90); line-height: var(--lh-16); color: var(--green-300); }

/* ---------------------------------------------------------------------------
   Mobile sticky grab-bar (A-8 / S-19 - v1.1 .sbar)
   Phone-only fixed bottom bar with a persistent Get-Code / Get-Deal action.
   Hidden on desktop (the rail/hero card cover it). DS 2.0 tokens for surfaces.
--------------------------------------------------------------------------- */
.sbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 25svh; box-sizing: border-box; align-items: center; gap: var(--space-3); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.92); background: color-mix(in srgb, var(--surface-base, #000) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(3, 255, 136, 0.3); transform: translateY(110%); transition: transform var(--duration-slide, 0.3s) var(--ease-industrial); }
.sbar.on { transform: none; }
.sbar__copy { flex: 1; min-width: 0; }
.sbar .l1 { font-size: 13.5px; font-weight: 800; color: var(--text-primary, #fff); }
.sbar .l2 { font-size: 10.5px; color: var(--text-muted, #71717a); font-family: var(--font-mono); font-feature-settings: var(--features-mono); margin-top: 2px; }
.sbar .go { background: var(--brand-green, #03ff88); color: #000; font-weight: 800; font-size: 14px; border-radius: 9px; padding: 12px 20px; white-space: nowrap; border: none; cursor: pointer; font-family: var(--font-sans); }
.sbar .go:focus-visible { outline: 2px solid var(--brand-green, #03ff88); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sbar { transition-duration: 0s; } }
@media (max-width: 900px) { .sbar { display: flex; } }

/* ============================================
   REVIEWS SECTION (.rev-*) - Sg-3 read-only
   PMLP-native, mockup-matched. DS 2.0 tokens with
   hex fallbacks; brand/gold/dim values stay literal
   per the mockup. No Tailwind utilities required.
   ============================================ */
.rev-stars { display: inline-flex; align-items: center; gap: 2px; }
.rev-star { flex-shrink: 0; }

/* Aggregate row: stars + large bold score + dim "(N ratings)". */
.rev-aggregate { display: flex; align-items: center; gap: var(--space-3, 0.75rem); flex-wrap: wrap; margin-bottom: var(--space-5, 1.5rem); }
.rev-aggregate__score { font-size: 1.5rem; font-weight: 800; color: var(--text-primary, #fff); }
.rev-aggregate__count { font-family: var(--font-mono); font-size: var(--text-size-80, 0.694rem); letter-spacing: var(--tracking-wide, 0.1em); color: #9a9aa6; text-transform: uppercase; }

/* State 1-4: honest count line (no hero average, no cards). */
.rev-thin { font-size: 13.5px; color: var(--text-secondary, #d4d4d8); margin: 0 0 var(--space-3, 0.75rem); }

/* Review cards (State 5+ with written content). Auto-fit grid; compact card =
   avatar initial + name + inline stars on a header row, then quoted body. */
.rev-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3, 0.75rem); }
.rev-card { background: #121214; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; padding: 13px 15px; }
.rev-card__header { display: flex; align-items: center; gap: var(--space-2, 0.5rem); margin-bottom: var(--space-2, 0.5rem); }
.rev-card__initial { width: 18px; height: 18px; border-radius: var(--radius-full, 50%); background: #3a3a40; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; color: var(--text-primary, #fff); text-transform: uppercase; flex-shrink: 0; }
.rev-card__name { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-card__body { font-size: 13.5px; line-height: var(--lh-16, 1.5); color: rgba(255, 255, 255, 0.78); margin: 0; }

/* State 5+: rating distribution bars. Thin 6px track, gold fill at 70% opacity. */
.rev-dist { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.rev-dist__row { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.rev-dist__label { font-family: var(--font-mono); font-size: var(--text-size-80, 0.694rem); color: #9a9aa6; width: 28px; flex-shrink: 0; }
.rev-dist__bar { position: relative; flex: 1; height: 6px; border-radius: var(--radius-full, 999px); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rev-dist__fill { display: block; height: 100%; background: rgba(245, 197, 24, 0.7); border-radius: inherit; }
.rev-dist__count { font-family: var(--font-mono); font-size: var(--text-size-80, 0.694rem); color: #9a9aa6; width: 40px; text-align: right; flex-shrink: 0; }

/* Rating-only strip: name + small inline stars, flex-wrap (also used as the
   State 1-4 inline star row, where the name is omitted). */
.rev-ratingline { display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem) var(--space-4, 1rem); margin-top: var(--space-4, 1rem); padding-top: var(--space-4, 1rem); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rev-ratingline__entry { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); font-size: 11.5px; color: #9a9aa6; }