/* ================================================================
   UPSWING POKER DESIGN SYSTEM v2.1
   Modern, scalable design system for poker education
   ================================================================ */

/* MINIMAL RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
a{color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root{
  /* Primary Red */
  --color-primary-50:#FFF1F0;--color-primary-100:#FFE0DE;--color-primary-200:#FFC1BC;
  --color-primary-300:#FF8F87;--color-primary-400:#FF5C52;--color-primary-500:#FF2C1F;
  --color-primary-600:#E01A0E;--color-primary-700:#B81209;--color-primary-800:#8C0E07;--color-primary-900:#6B0B05;

  /* Secondary Gold */
  --color-secondary-50:#FFF9E6;--color-secondary-100:#FFF0BF;--color-secondary-200:#FFE080;
  --color-secondary-300:#FFD040;--color-secondary-400:#FFC200;--color-secondary-500:#FFB800;
  --color-secondary-600:#E0A200;--color-secondary-700:#B88400;--color-secondary-800:#8C6500;--color-secondary-900:#604500;

  /* Accent CTA Green */
  --color-accent-50:#EDFDF4;--color-accent-100:#D0F9E3;--color-accent-200:#A3F2CA;
  --color-accent-300:#5FE6A5;--color-accent-400:#33C687;--color-accent-500:#00A651;
  --color-accent-600:#008B46;--color-accent-700:#006F38;--color-accent-800:#005A2E;--color-accent-900:#004422;

  /* Neutrals */
  --color-neutral-0:#FFFFFF;--color-neutral-50:#F8F9FA;--color-neutral-100:#F1F2F4;
  --color-neutral-200:#E4E6E9;--color-neutral-300:#CDD1D6;--color-neutral-400:#9DA3AB;
  --color-neutral-500:#6E7681;--color-neutral-600:#4D545E;--color-neutral-700:#343A42;
  --color-neutral-800:#22272E;--color-neutral-900:#14171B;--color-neutral-950:#0C0D0F;

  /* Semantic */
  --color-success-50:#EDFDF4;--color-success-500:#16A34A;--color-success-700:#15803D;
  --color-warn-50:#FFFBEB;--color-warn-500:#F59E0B;--color-warn-700:#B45309;
  --color-error-50:#FFF1F0;--color-error-500:#DC2626;--color-error-700:#B91C1C;
  --color-info-50:#EFF6FF;--color-info-500:#3B82F6;--color-info-700:#1D4ED8;

  /* Typography */
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;

  --text-xs:clamp(0.6875rem,0.65rem + 0.15vw,0.75rem);
  --text-sm:clamp(0.8125rem,0.78rem + 0.15vw,0.875rem);
  --text-base:clamp(0.9375rem,0.9rem + 0.18vw,1rem);
  --text-lg:clamp(1.0625rem,1rem + 0.25vw,1.125rem);
  --text-xl:clamp(1.1875rem,1.1rem + 0.4vw,1.3125rem);
  --text-2xl:clamp(1.4375rem,1.3rem + 0.6vw,1.6875rem);
  --text-3xl:clamp(1.75rem,1.5rem + 1vw,2.25rem);
  --text-4xl:clamp(2.125rem,1.75rem + 1.5vw,3rem);
  --text-5xl:clamp(2.625rem,2rem + 2.5vw,4rem);

  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;
  --leading-relaxed:1.65;--leading-loose:1.8;
  --tracking-tighter:-0.03em;--tracking-tight:-0.015em;--tracking-normal:0;
  --tracking-wide:0.025em;--tracking-wider:0.05em;--tracking-widest:0.1em;
  --weight-regular:400;--weight-medium:500;--weight-semi:600;--weight-bold:700;--weight-extra:800;
	  --text-ui:clamp(1rem,0.95rem + 0.2vw,1.0625rem);
  --text-ui-sm:clamp(0.9375rem,0.9rem + 0.15vw,1rem);
  --text-ui-xs:clamp(0.8125rem,0.78rem + 0.15vw,0.875rem);

  /* Spacing */
  --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;--space-16:4rem;--space-20:5rem;--space-24:6rem;

  /* Layout */
  --grid-max:1280px;--grid-narrow:720px;--grid-gutter:1.5rem;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.08),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.2);
  --shadow-red-glow:0 0 20px rgba(255,44,31,0.15),0 0 40px rgba(255,44,31,0.05);
  --shadow-green-glow:0 4px 14px rgba(0,166,81,0.25);

  /* BORDER RADIUS — sharp containers, softer interactive elements */
  --radius-none:0;
  --radius-xs:2px;      /* containers, boxes, alerts */
  --radius-sm:3px;      /* tags, cards */
  --radius-md:8px;      /* buttons, inputs, interactive */
  --radius-lg:10px;     /* large buttons */
  --radius-xl:3px;      /* card containers — kept sharp */
  --radius-2xl:3px;     /* promo blocks — kept sharp */
  --radius-full:9999px; /* pills, badges, chips */

  /* Transitions */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:120ms;--duration-base:200ms;--duration-slow:350ms;

  /* Semantic surfaces */
  --surface-primary:var(--color-neutral-0);--surface-secondary:var(--color-neutral-50);
  --surface-tertiary:var(--color-neutral-100);--surface-elevated:var(--color-neutral-0);
  --text-strong:var(--color-neutral-900);--text-default:var(--color-neutral-700);
  --text-subtle:var(--color-neutral-500);--text-muted:var(--color-neutral-400);
  --border-default:var(--color-neutral-200);--border-subtle:var(--color-neutral-100);
  --border-strong:var(--color-neutral-300);

  /* Suit colors */
  --suit-heart:#E5243F;
  --suit-diamond:#3B7DDD;
  --suit-club:#1B8A4E;
  --suit-spade:var(--color-neutral-800);
}

/* Dark Mode */
[data-theme="dark"]{
  background:var(--surface-primary);color:var(--text-default);
  --surface-primary:var(--color-neutral-950);--surface-secondary:var(--color-neutral-900);
  --surface-tertiary:var(--color-neutral-800);--surface-elevated:var(--color-neutral-800);
  --text-strong:var(--color-neutral-0);--text-default:var(--color-neutral-200);
  --text-subtle:var(--color-neutral-400);--text-muted:var(--color-neutral-600);
  --border-default:var(--color-neutral-700);--border-subtle:var(--color-neutral-800);
  --border-strong:var(--color-neutral-600);
  --suit-spade:var(--color-neutral-200);
}

/* ═══════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
   ═══════════════════════════════════════════════ */
body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-default);background:var(--surface-primary)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-strong);line-height:var(--leading-tight);font-weight:var(--weight-bold)}
h1{font-size:var(--text-5xl);letter-spacing:var(--tracking-tighter);font-weight:var(--weight-extra)}
h2{font-size:var(--text-4xl);letter-spacing:var(--tracking-tighter)}
h3{font-size:var(--text-3xl);letter-spacing:var(--tracking-tight)}
h4{font-size:var(--text-2xl);letter-spacing:var(--tracking-tight)}
h5{font-size:var(--text-xl);font-weight:var(--weight-semi)}
h6{font-size:var(--text-lg);font-weight:var(--weight-semi);text-transform:uppercase;letter-spacing:var(--tracking-wide)}

/* ═══════════════════════════════════════════════
   ARTICLE TYPOGRAPHY
   ═══════════════════════════════════════════════ */
.article-content{font-family:var(--font-body);font-size:var(--text-lg);line-height:var(--leading-loose);color:var(--text-default);max-width:var(--grid-narrow)}
.article-content h2{margin:var(--space-10) 0 var(--space-5)}
.article-content h3{margin:var(--space-8) 0 var(--space-4)}
.article-content h4{margin:var(--space-6) 0 var(--space-3);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-strong)}
.article-content h4{margin:var(--space-6) 0 var(--space-3)}
.article-content p{margin-bottom:var(--space-5)}
.article-content strong{font-weight:var(--weight-semi);color:var(--text-strong)}
.article-content a{color:var(--color-primary-500);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-out)}
.article-content a:hover{color:var(--color-primary-700);text-decoration-thickness:2px}
.article-content ul,.article-content ol{margin:0 0 var(--space-5) var(--space-6)}
.article-content ul{list-style:disc}.article-content ol{list-style:decimal}
.article-content li{margin-bottom:var(--space-2);line-height:var(--leading-relaxed)}
.article-content li::marker{color:var(--color-primary-500)}
.article-content blockquote{border-left:4px solid var(--color-primary-500);padding:var(--space-4) var(--space-6);margin:var(--space-6) 0;background:var(--surface-secondary);border-radius:0 var(--radius-xs) var(--radius-xs) 0;font-style:italic;color:var(--text-subtle)}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content code{font-family:var(--font-mono);font-size:0.9em;background:var(--surface-tertiary);padding:0.15em 0.4em;border-radius:var(--radius-xs);color:var(--color-primary-600)}
.article-content pre{background:var(--color-neutral-900);color:var(--color-neutral-100);padding:var(--space-5);border-radius:var(--radius-xs);overflow-x:auto;margin:var(--space-6) 0;font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.article-content pre code{background:none;padding:0;color:inherit}
.article-content hr{border:none;height:1px;background:var(--border-default);margin:var(--space-10) 0}
.article-content table{width:100%;margin:var(--space-6) 0;font-size:var(--text-base);line-height:var(--leading-normal)}
.article-content thead th{background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-display);font-weight:var(--weight-semi);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:var(--space-3) var(--space-4);text-align:left}
.article-content thead th:first-child{border-radius:var(--radius-xs) 0 0 0}
.article-content thead th:last-child{border-radius:0 var(--radius-xs) 0 0}
.article-content tbody td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-default)}
.article-content tbody tr:hover{background:var(--surface-secondary)}
.article-content img{border-radius:var(--radius-xs);height:auto}
.article-content figure{margin:var(--space-6) 0}
.article-content figcaption{font-size:var(--text-sm);color:var(--text-subtle);margin-top:var(--space-2);text-align:center;font-style:italic}

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */
.l-container{width:100%;max-width:var(--grid-max);margin:0 auto;padding:0 var(--grid-gutter)}
.l-container--narrow{max-width:var(--grid-narrow)}
.l-section{padding:var(--space-16) 0}
.l-grid{display:grid;gap:var(--grid-gutter)}
.l-grid--2{grid-template-columns:repeat(2,1fr)}
.l-grid--3{grid-template-columns:repeat(3,1fr)}
.l-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.l-grid--3,.l-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.l-grid--2,.l-grid--3,.l-grid--4{grid-template-columns:1fr}.l-container{padding:0 var(--space-4)}}

/* ═══════════════════════════════════════════════
   BUTTONS — keep softer radius (interactive elements)
   ═══════════════════════════════════════════════ */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-semi);font-size:var(--text-base);line-height:1;padding:var(--space-3) var(--space-6);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;transition:all var(--duration-base) var(--ease-out);min-height:44px;white-space:nowrap;position:relative;overflow:hidden}
.c-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}
.c-btn:disabled,.c-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.c-btn--primary{background:var(--color-accent-500);color:#fff;border-color:var(--color-accent-500)}
.c-btn--primary:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);transform:translateY(-1px);box-shadow:var(--shadow-green-glow)}
.c-btn--primary:active{transform:translateY(0)}
.c-btn--secondary{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}
.c-btn--secondary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);transform:translateY(-1px);box-shadow:var(--shadow-red-glow)}
.c-btn--tertiary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.c-btn--tertiary:hover{background:var(--surface-secondary);border-color:var(--text-default)}
.c-btn--ghost{background:transparent;color:var(--color-primary-500);border-color:transparent}
.c-btn--ghost:hover{background:var(--color-primary-50)}
.c-btn--dark{background:var(--color-neutral-900);color:var(--color-neutral-0);border-color:var(--color-neutral-900)}
.c-btn--dark:hover{background:var(--color-neutral-800);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.c-btn--sm{font-size:var(--text-sm);padding:var(--space-2) var(--space-4);min-height:36px}
.c-btn--lg{font-size:var(--text-xl);padding:var(--space-4) var(--space-8);min-height:52px;border-radius:var(--radius-lg);font-weight:var(--weight-bold)}
.c-btn--xl{font-size:var(--text-2xl);padding:var(--space-5) var(--space-10);min-height:60px;border-radius:var(--radius-lg);font-weight:var(--weight-bold)}
.c-btn--loading{pointer-events:none;color:transparent !important}
.c-btn--loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════
   FORMS — inputs keep radius-md (interactive)
   ═══════════════════════════════════════════════ */
.c-form-group{display:flex;flex-direction:column;gap:var(--space-2)}
.c-label{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong);letter-spacing:var(--tracking-wide)}
.c-label__required{color:var(--color-error-500);margin-left:2px}
.c-input,.c-textarea,.c-select{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-strong);background:var(--surface-primary);border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-height:44px;width:100%;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.c-input:hover,.c-textarea:hover,.c-select:hover{border-color:var(--border-strong)}
.c-input:focus,.c-textarea:focus,.c-select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px rgba(255,44,31,.1)}
.c-input::placeholder,.c-textarea::placeholder{color:var(--text-muted)}
.c-textarea{min-height:120px;resize:vertical}
.c-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7681' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.c-input--error{border-color:var(--color-error-500)}.c-input--error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.c-input--success{border-color:var(--color-success-500)}
.c-form-hint{font-size:var(--text-sm);color:var(--text-subtle)}
.c-form-error{font-size:var(--text-sm);color:var(--color-error-500);font-weight:var(--weight-medium)}
.c-check{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--text-base);color:var(--text-default);min-height:44px}
.c-check input[type="checkbox"],.c-check input[type="radio"]{width:20px;height:20px;accent-color:var(--color-primary-500);cursor:pointer;flex-shrink:0}
.c-toggle{display:flex;align-items:center;gap:var(--space-3);cursor:pointer}
.c-toggle__track{position:relative;width:44px;height:24px;background:var(--color-neutral-300);border-radius:var(--radius-full);transition:background var(--duration-base) var(--ease-out)}
.c-toggle__thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out)}
.c-toggle input:checked+.c-toggle__track{background:var(--color-accent-500)}
.c-toggle input:checked+.c-toggle__track .c-toggle__thumb{transform:translateX(20px)}
.c-toggle input{position:absolute;opacity:0;width:0;height:0}

/* ═══════════════════════════════════════════════
   BADGES / TAGS / CHIPS
   ═══════════════════════════════════════════════ */
.c-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-semi);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1.4}
.c-badge--red{background:var(--color-primary-50);color:var(--color-primary-700)}
.c-badge--green{background:var(--color-success-50);color:var(--color-success-700)}
.c-badge--gold{background:var(--color-secondary-50);color:var(--color-secondary-800)}
.c-badge--blue{background:var(--color-info-50);color:var(--color-info-700)}
.c-badge--neutral{background:var(--surface-tertiary);color:var(--text-subtle)}
.c-badge--solid-red{background:var(--color-primary-500);color:#fff}
.c-badge--solid-green{background:var(--color-accent-500);color:#fff}
.c-badge--solid-dark{background:var(--color-neutral-900);color:var(--color-neutral-0)}
.c-tag{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-medium);padding:var(--space-1) var(--space-3);border-radius:var(--radius-xs);border:1px solid var(--border-default);color:var(--text-default);background:var(--surface-primary)}
.c-chip{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1.5px solid var(--border-default);color:var(--text-default);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}
.c-chip:hover{border-color:var(--color-primary-500);color:var(--color-primary-500)}
.c-chip--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}

/* ═══════════════════════════════════════════════
   ALERTS — sharp radius
   ═══════════════════════════════════════════════ */
.c-alert{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-xs);border:1px solid;font-size:var(--text-base);line-height:var(--leading-normal)}
.c-alert__icon{flex-shrink:0;width:20px;height:20px;margin-top:2px}
.c-alert__content{flex:1}
.c-alert__title{font-family:var(--font-display);font-weight:var(--weight-semi);margin-bottom:var(--space-1)}
.c-alert--info{background:var(--color-info-50);border-color:rgba(59,130,246,.2);color:var(--color-info-700)}
.c-alert--success{background:var(--color-success-50);border-color:rgba(22,163,74,.2);color:var(--color-success-700)}
.c-alert--warn{background:var(--color-warn-50);border-color:rgba(245,158,11,.2);color:var(--color-warn-700)}
.c-alert--error{background:var(--color-error-50);border-color:rgba(220,38,38,.2);color:var(--color-error-700)}


/* ═══════════════════════════════════════════════
   ALERTS — 8px radius, filled icon chip, bold title
   ═══════════════════════════════════════════════ */
.c-alert{
  display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);
  border:1px solid var(--alert-line,var(--border-default));
  background:var(--alert-bg,var(--surface-secondary));
  color:var(--text-default);
  font-size:var(--text-ui);line-height:var(--leading-relaxed)
}
.c-alert__icon{
  grid-row:1 / span 2;align-self:start;
  flex-shrink:0;width:26px;height:26px;margin:1px 0 0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  background:var(--alert-accent,var(--color-neutral-500));
  color:#fff;font-family:var(--font-display);font-size:var(--text-ui-xs);
  font-weight:var(--weight-bold);line-height:1
}
.c-alert__content{grid-column:2;min-width:0}
.c-alert__title{
  font-family:var(--font-display);font-size:var(--text-ui);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);
  line-height:var(--leading-snug);color:var(--alert-accent,var(--text-strong));
  margin-bottom:var(--space-1)
}
.c-alert__content>p:last-child{margin-bottom:0}

.c-alert--info{--alert-bg:var(--color-info-50);--alert-line:rgba(59,130,246,.28);--alert-accent:var(--color-info-700)}
.c-alert--success{--alert-bg:var(--color-success-50);--alert-line:rgba(22,163,74,.28);--alert-accent:var(--color-success-700)}
.c-alert--warn{--alert-bg:var(--color-warn-50);--alert-line:rgba(245,158,11,.32);--alert-accent:var(--color-warn-700)}
.c-alert--error{--alert-bg:var(--color-error-50);--alert-line:rgba(220,38,38,.28);--alert-accent:var(--color-error-700)}

[data-theme="dark"] .c-alert{background:var(--surface-tertiary);border-color:var(--border-default);color:var(--text-default)}
[data-theme="dark"] .c-alert__title{color:var(--text-strong)}

/* ═══════════════════════════════════════════════
   ARTICLE CALLOUTS
   No left border. Hairline box, 8px radius, 3px inset
   top edge in the accent, filled icon chip, bold title.
   ═══════════════════════════════════════════════ */
.c-callout{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--space-3);row-gap:var(--space-2);
  padding:var(--space-5) var(--space-6);
  margin:var(--space-8) 0;
  border:1px solid var(--callout-line,var(--border-default));
  border-radius:var(--radius-md);
  background:var(--callout-bg,var(--surface-secondary));
  box-shadow:inset 0 3px 0 0 var(--callout-accent,var(--color-neutral-400));
  position:relative
}
.c-callout__icon{
  position:static;grid-column:1;grid-row:1;
  align-self:center;flex-shrink:0;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  background:var(--callout-chip,rgba(0,0,0,.05));
  font-size:15px;line-height:1
}
.c-callout__title{
  grid-column:2;grid-row:1;align-self:center;
  font-family:var(--font-display);font-size:var(--text-ui);
  font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);
  line-height:var(--leading-snug);margin:0;
  color:var(--callout-accent,var(--text-strong))
}
.c-callout__body{
  grid-column:2;grid-row:2;min-width:0;
  font-size:var(--text-ui);line-height:var(--leading-relaxed);
  color:var(--text-default)
}
.c-callout__body>*:last-child{margin-bottom:0}

/* Legacy hook. The icon is a grid item now, so the old padding offset
   would double-indent. Kept as a no-op so existing markup does not break. */
.c-callout--has-icon{padding-left:var(--space-6)}

.c-callout--tip{--callout-bg:var(--color-accent-50);--callout-line:rgba(0,166,81,.22);--callout-accent:var(--color-accent-700);--callout-chip:rgba(0,166,81,.12)}
.c-callout--mistake{--callout-bg:var(--color-error-50);--callout-line:rgba(220,38,38,.2);--callout-accent:var(--color-error-700);--callout-chip:rgba(220,38,38,.12)}
.c-callout--solver{--callout-bg:var(--color-info-50);--callout-line:rgba(59,130,246,.2);--callout-accent:var(--color-info-700);--callout-chip:rgba(59,130,246,.12)}
.c-callout--key{--callout-bg:var(--color-secondary-50);--callout-line:rgba(255,184,0,.32);--callout-accent:var(--color-secondary-800);--callout-chip:rgba(255,184,0,.2)}

[data-theme="dark"] .c-callout{background:var(--surface-tertiary);border-color:var(--border-default)}
[data-theme="dark"] .c-callout__title{color:var(--text-strong)}
[data-theme="dark"] .c-callout__body{color:var(--text-default)}

@media(max-width:640px){
  .c-callout{padding:var(--space-4) var(--space-4);column-gap:var(--space-2)}
}

/* ═══════════════════════════════════════════════
   29) COMPONENT SIZING & THEME HARDENING
   The live theme sets font-size, padding, line-height, and
   hover backgrounds on bare `button` and table selectors, which
   outrank single-class component rules. Doubled class selectors
   (.c-btn.c-btn) raise specificity to 0,2,0 with no !important.
   This block must load AFTER the Beaver Builder block above.
   ═══════════════════════════════════════════════ */

/* ---- Buttons: reclaim size, padding, and label rendering ---- */
.c-btn.c-btn{
  font-family:var(--font-display);font-size:var(--text-ui);
  font-weight:var(--weight-semi);line-height:1;
  letter-spacing:normal;text-transform:none;text-decoration:none;
  padding:var(--space-3) var(--space-6);
  min-height:44px;height:auto;
  border-width:2px;border-radius:var(--radius-md);
  box-shadow:none;text-shadow:none
}
.c-btn--sm.c-btn--sm{font-size:var(--text-ui-sm);padding:var(--space-2) var(--space-4);min-height:36px}
.c-btn--lg.c-btn--lg{font-size:var(--text-xl);padding:var(--space-4) var(--space-8);min-height:52px;border-radius:var(--radius-lg);font-weight:var(--weight-bold)}
.c-btn--xl.c-btn--xl{font-size:var(--text-2xl);padding:var(--space-5) var(--space-10);min-height:60px;border-radius:var(--radius-lg);font-weight:var(--weight-bold)}

/* Variant colors, hardened against theme button color rules */
.c-btn--primary.c-btn--primary{background:var(--color-accent-500);color:#fff;border-color:var(--color-accent-500)}
.c-btn--primary.c-btn--primary:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.c-btn--secondary.c-btn--secondary{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}
.c-btn--secondary.c-btn--secondary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}
.c-btn--tertiary.c-btn--tertiary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.c-btn--tertiary.c-btn--tertiary:hover{background:var(--surface-secondary);color:var(--text-strong);border-color:var(--text-default)}
.c-btn--ghost.c-btn--ghost{background:transparent;color:var(--color-primary-500);border-color:transparent}
.c-btn--ghost.c-btn--ghost:hover{background:var(--color-primary-50);color:var(--color-primary-600)}
.c-btn--dark.c-btn--dark{background:var(--color-neutral-900);color:var(--color-neutral-0);border-color:var(--color-neutral-900)}
.c-btn--dark.c-btn--dark:hover{background:var(--color-neutral-800);color:var(--color-neutral-0)}
.c-btn--loading.c-btn--loading{color:transparent}

/* Gutenberg buttons follow the same sizing */
.wp-block-button__link{font-size:var(--text-ui);line-height:1;min-height:44px}

/* ---- Accordion: the FAQ fix ---- */
.c-accordion{margin:var(--space-6) 0 var(--space-10)}
.c-accordion__item{border-bottom:1px solid var(--border-default)}
.c-accordion__item:first-child{border-top:1px solid var(--border-default)}

.c-accordion .c-accordion__trigger,
.c-accordion .c-accordion__trigger:link,
.c-accordion .c-accordion__trigger:visited{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);width:100%;
  padding:var(--space-5) 0;
  background:none;border:none;border-radius:0;box-shadow:none;text-shadow:none;
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:var(--weight-bold);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);text-transform:none;
  color:var(--text-strong);text-align:left;text-decoration:none;
  min-height:56px;cursor:pointer
}
/* Kills the theme's filled button hover that was painting the row red */
.c-accordion .c-accordion__trigger:hover,
.c-accordion .c-accordion__trigger:focus,
.c-accordion .c-accordion__trigger:active,
.c-accordion .c-accordion__item--open>.c-accordion__trigger{
  background:none;box-shadow:none;border:none;text-decoration:none;
  color:var(--color-primary-600)
}
.c-accordion .c-accordion__trigger:focus-visible{
  outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-xs)
}
.c-accordion .c-accordion__icon{
  flex-shrink:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:24px;font-weight:var(--weight-regular);
  line-height:1;color:var(--text-muted);
  transition:transform var(--duration-base) var(--ease-out),color var(--duration-fast) var(--ease-out)
}
.c-accordion .c-accordion__trigger:hover .c-accordion__icon{color:var(--color-primary-500)}

/* Answer body: full prose size, and real air beneath it */
.c-accordion .c-accordion__content{
  padding:0 0 var(--space-6);
  font-size:var(--text-lg);line-height:var(--leading-relaxed);
  color:var(--text-default)
}
.c-accordion .c-accordion__content>*:last-child{margin-bottom:0}
/* A question wrapped in a heading for outline/schema reasons stays visually
   a trigger, not a heading. */
.c-accordion h2:has(>.c-accordion__trigger),
.c-accordion h3:has(>.c-accordion__trigger),
.c-accordion h4:has(>.c-accordion__trigger){
  margin:0;font-size:inherit;letter-spacing:normal;line-height:inherit
}

/* ---- Tabs ---- */
.c-tabs{border-bottom:2px solid var(--border-default);gap:var(--space-2)}
.c-tabs .c-tabs__tab,
.c-tabs .c-tabs__tab:link{
  font-family:var(--font-display);font-size:var(--text-ui);
  font-weight:var(--weight-semi);line-height:1;letter-spacing:normal;
  text-transform:none;text-decoration:none;
  padding:var(--space-3) var(--space-4);min-height:48px;
  background:none;border:none;border-bottom:2px solid transparent;
  border-radius:0;box-shadow:none;color:var(--text-subtle);cursor:pointer
}
.c-tabs .c-tabs__tab:hover,
.c-tabs .c-tabs__tab:focus{background:none;box-shadow:none;color:var(--text-strong)}
.c-tabs .c-tabs__tab--active{color:var(--color-primary-500);border-bottom-color:var(--color-primary-500)}

/* ---- Chips ---- */
.c-chip.c-chip{
  font-family:var(--font-body);font-size:var(--text-ui-sm);
  font-weight:var(--weight-medium);line-height:1;text-transform:none;
  padding:var(--space-2) var(--space-4);min-height:40px;
  background:var(--surface-primary);color:var(--text-default);
  border:1.5px solid var(--border-default);border-radius:var(--radius-full);
  box-shadow:none
}
.c-chip.c-chip:hover{background:var(--surface-secondary);border-color:var(--color-primary-500);color:var(--color-primary-500)}
.c-chip--active.c-chip--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}

/* ---- Breadcrumbs ---- */
.c-breadcrumbs{font-size:var(--text-ui-sm);gap:var(--space-2) var(--space-3);flex-wrap:wrap}
.c-breadcrumbs a{font-size:inherit}

/* ---- Pagination ---- */
.c-pagination{gap:var(--space-2)}
.c-pagination .c-pagination__item{
  font-family:var(--font-display);font-size:var(--text-ui-sm);
  font-weight:var(--weight-medium);line-height:1;text-decoration:none;
  min-width:44px;height:44px;width:auto;padding:0 var(--space-3);
  background:none;border:1.5px solid transparent;border-radius:var(--radius-md);
  box-shadow:none;color:var(--text-subtle)
}
.c-pagination .c-pagination__item:hover{background:var(--surface-secondary);border-color:var(--border-strong);color:var(--text-strong)}
.c-pagination .c-pagination__item--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}

/* ---- Tables: cells at near-body size, in all three contexts ---- */
.c-table.c-table,
.entry-content table,
.article-content table{font-size:var(--text-ui);line-height:var(--leading-normal)}

.c-table.c-table thead th,
.entry-content thead th,
.article-content thead th{
  font-family:var(--font-display);font-size:var(--text-ui-xs);
  font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);line-height:var(--leading-snug);
  padding:var(--space-4) var(--space-4);vertical-align:bottom
}
.c-table.c-table tbody td,
.c-table.c-table tbody th,
.entry-content tbody td,
.entry-content tbody th,
.article-content tbody td,
.article-content tbody th{
  font-size:var(--text-ui);line-height:var(--leading-normal);
  padding:var(--space-4) var(--space-4);vertical-align:middle
}
/* The Beaver block forces 18px on p/li, which breaks cell rhythm */
.c-table p,.c-table li,
.entry-content table p,.entry-content table li,
.article-content table p,.article-content table li{
  font-size:inherit;line-height:inherit;margin:0
}
.entry-content table,.article-content table{width:100%}
@media(max-width:640px){
  .c-table.c-table thead th,
  .c-table.c-table tbody td,
  .entry-content tbody td,
  .entry-content thead th{padding:var(--space-3) var(--space-3)}
}

/* ---- Remaining icon buttons the theme also reaches ---- */
.c-modal .c-modal__close,
.site-header .site-header__toggle{
  background:none;border:none;box-shadow:none;border-radius:var(--radius-md);
  min-height:44px;min-width:44px;padding:0;line-height:1
}
.c-modal .c-modal__close:hover,
.site-header .site-header__toggle:hover{background:var(--surface-secondary);box-shadow:none}

/* ---- Small labels that also read too small at 18px body ---- */
.c-badge{font-size:var(--text-ui-xs);padding:var(--space-1) var(--space-3);line-height:1.5}
.c-tag{font-size:var(--text-ui-sm);padding:var(--space-1) var(--space-3)}
.c-tooltip__content{font-size:var(--text-ui-xs)}
.post-meta{font-size:var(--text-ui-xs)}
.c-card__meta{font-size:var(--text-ui-sm)}
.c-form-hint,.c-form-error{font-size:var(--text-ui-sm)}
.c-label{font-size:var(--text-ui-sm)}
.c-input,.c-textarea,.c-select{font-size:var(--text-ui);min-height:48px}
.c-subnav__link{font-size:var(--text-ui-sm);min-height:48px}

/* ═══════════════════════════════════════════════
   CARDS — sharp container radius
   ═══════════════════════════════════════════════ */
.c-card{background:var(--surface-primary);border:1px solid var(--border-default);border-radius:var(--radius-xs);overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.c-card:hover{box-shadow:var(--shadow-lg)}
.c-card--clickable{cursor:pointer}
.c-card--clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.c-card__media{aspect-ratio:16/9;overflow:hidden;background:var(--surface-tertiary)}
.c-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.c-card--clickable:hover .c-card__media img{transform:scale(1.03)}
.c-card__body{padding:var(--space-5)}
.c-card__eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-semi);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-primary-500);margin-bottom:var(--space-2)}
.c-card__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-strong);line-height:var(--leading-snug);margin-bottom:var(--space-2)}
.c-card__desc{font-size:var(--text-base);color:var(--text-subtle);line-height:var(--leading-relaxed);margin-bottom:var(--space-4)}
.c-card__footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-subtle)}
.c-card__meta{font-size:var(--text-sm);color:var(--text-muted)}

/* Card: Horizontal */
.c-card--horizontal{display:grid;grid-template-columns:240px 1fr}
.c-card--horizontal .c-card__media{aspect-ratio:auto;height:100%}
@media(max-width:640px){.c-card--horizontal{grid-template-columns:1fr}.c-card--horizontal .c-card__media{aspect-ratio:16/9}}

/* Card: Compact */
.c-card--compact .c-card__body{padding:var(--space-3) var(--space-4)}
.c-card--compact .c-card__title{font-size:var(--text-base)}

/* Card: Course */
.c-card--course .c-card__media{aspect-ratio:3/2;background:var(--color-neutral-900);position:relative}
.c-card--course .c-card__price{font-family:var(--font-display);font-weight:var(--weight-extra);font-size:var(--text-2xl);color:var(--text-strong)}
.c-card--course .c-card__instructor{font-size:var(--text-sm);color:var(--text-subtle)}

/* Card: Featured (no inner padding on media) */
.c-card--featured{border:2px solid var(--color-primary-500);position:relative}
.c-card--featured::after{content:"Featured";position:absolute;top:var(--space-3);right:var(--space-3);background:var(--color-primary-500);color:#fff;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wider);padding:2px 10px;border-radius:var(--radius-full)}

/* Card: Dark */
.c-card--dark{background:var(--color-neutral-900);border-color:var(--color-neutral-800);color:var(--color-neutral-200)}
.c-card--dark .c-card__title{color:#fff}
.c-card--dark .c-card__desc{color:var(--color-neutral-400)}
.c-card--dark .c-card__footer{border-color:var(--color-neutral-800)}

/* ═══════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════ */
.c-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-6);background:var(--surface-primary);border-bottom:1px solid var(--border-subtle)}
.c-nav__brand{font-family:var(--font-display);font-weight:var(--weight-extra);font-size:var(--text-xl);color:var(--text-strong);text-decoration:none}
.c-nav__links{display:flex;gap:var(--space-1)}
.c-nav__link{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-subtle);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-out)}
.c-nav__link:hover,.c-nav__link--active{color:var(--text-strong);background:var(--surface-secondary)}
.c-breadcrumbs{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-subtle)}
.c-breadcrumbs__sep{color:var(--text-muted)}
.c-breadcrumbs a{color:var(--text-subtle);text-decoration:none}
.c-breadcrumbs a:hover{color:var(--color-primary-500);text-decoration:underline}

/* ═══════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════ */
.c-tabs{display:flex;border-bottom:2px solid var(--border-subtle);gap:var(--space-1)}
.c-tabs__tab{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-subtle);padding:var(--space-3) var(--space-4);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--duration-fast) var(--ease-out)}
.c-tabs__tab:hover{color:var(--text-strong)}
.c-tabs__tab--active{color:var(--color-primary-500);border-bottom-color:var(--color-primary-500)}

/* ═══════════════════════════════════════════════
   MODAL — sharp
   ═══════════════════════════════════════════════ */
.c-modal{background:var(--surface-primary);border-radius:var(--radius-xs);box-shadow:var(--shadow-2xl);max-width:560px;width:100%;max-height:85vh;overflow-y:auto}
.c-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle)}
.c-modal__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-strong)}
.c-modal__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-subtle);cursor:pointer;border-radius:var(--radius-md);transition:background var(--duration-fast) var(--ease-out);font-size:20px}
.c-modal__close:hover{background:var(--surface-secondary);color:var(--text-strong)}
.c-modal__body{padding:var(--space-6)}
.c-modal__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-subtle)}

/* ═══════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════ */
.c-accordion__item{border-bottom:1px solid var(--border-default)}
.c-accordion__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-5) 0;background:none;border:none;font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semi);color:var(--text-strong);cursor:pointer;text-align:left}
.c-accordion__trigger:hover{color:var(--color-primary-500)}
.c-accordion__icon{transition:transform var(--duration-base) var(--ease-out);font-size:20px;color:var(--text-muted);flex-shrink:0}
.c-accordion__item--open .c-accordion__icon{transform:rotate(45deg)}
.c-accordion__content{padding:0 0 var(--space-5);color:var(--text-default);line-height:var(--leading-relaxed)}

/* ═══════════════════════════════════════════════
   TABLE — sharp
   ═══════════════════════════════════════════════ */
.c-table{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-xs);overflow:hidden;font-size:var(--text-base)}
.c-table thead th{background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-display);font-weight:var(--weight-semi);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:var(--space-3) var(--space-4);text-align:left}
.c-table tbody td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.c-table tbody tr:last-child td{border-bottom:none}
.c-table tbody tr:hover{background:var(--surface-secondary)}

/* ═══════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════ */
.c-pagination{display:flex;align-items:center;gap:var(--space-1)}
.c-pagination__item{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-subtle);background:none;border:1.5px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;transition:all var(--duration-fast) var(--ease-out)}
.c-pagination__item:hover{border-color:var(--border-strong);color:var(--text-strong)}
.c-pagination__item--active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}

/* ═══════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════ */
.c-tooltip{position:relative;display:inline-block}
.c-tooltip__content{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--color-neutral-900);color:var(--color-neutral-0);font-size:var(--text-xs);font-weight:var(--weight-medium);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);z-index:500}
.c-tooltip__content::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--color-neutral-900)}
.c-tooltip:hover .c-tooltip__content{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════════════════════════════════════════
   ARTICLE CALLOUTS — sharp
   ═══════════════════════════════════════════════ */
.c-callout{border-radius:var(--radius-xs);padding:var(--space-5) var(--space-6);margin:var(--space-8) 0;border-left:4px solid;position:relative}
.c-callout--has-icon{padding-left:calc(var(--space-6) + 28px)}
.c-callout__icon{position:absolute;top:var(--space-5);left:var(--space-6);font-size:20px}
.c-callout__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);margin-bottom:var(--space-2)}
.c-callout__body{font-size:var(--text-base);line-height:var(--leading-relaxed)}
.c-callout--tip{background:var(--color-accent-50);border-color:var(--color-accent-500)}
.c-callout--tip .c-callout__title{color:var(--color-accent-700)}
.c-callout--mistake{background:var(--color-error-50);border-color:var(--color-error-500)}
.c-callout--mistake .c-callout__title{color:var(--color-error-700)}
.c-callout--solver{background:var(--color-info-50);border-color:var(--color-info-500)}
.c-callout--solver .c-callout__title{color:var(--color-info-700)}
.c-callout--key{background:var(--color-secondary-50);border-color:var(--color-secondary-500)}
.c-callout--key .c-callout__title{color:var(--color-secondary-800)}

/* ═══════════════════════════════════════════════
   POKER SUIT SYSTEM — visual, colorful, unmistakable
   ═══════════════════════════════════════════════ */
.suit{font-weight:var(--weight-bold);display:inline-flex;align-items:center;gap:2px}
.suit-h{color:var(--suit-heart)}.suit-h::after{content:"♥"}
.suit-d{color:var(--suit-diamond)}.suit-d::after{content:"♦"}
.suit-c{color:var(--suit-club)}.suit-c::after{content:"♣"}
.suit-s{color:var(--suit-spade)}.suit-s::after{content:"♠"}

/* Poker card pip — the card-like inline display */
.pip{display:inline-flex;align-items:center;gap:1px;font-family:var(--font-display);font-weight:var(--weight-extra);font-size:inherit;padding:1px 5px;border-radius:3px;background:var(--surface-primary);border:1px solid var(--border-default);white-space:nowrap;line-height:1.3;vertical-align:baseline}
.pip--h{color:var(--suit-heart);border-color:rgba(229,36,63,.2);background:rgba(229,36,63,.04)}
.pip--d{color:var(--suit-diamond);border-color:rgba(59,125,221,.2);background:rgba(59,125,221,.04)}
.pip--c{color:var(--suit-club);border-color:rgba(27,138,78,.2);background:rgba(27,138,78,.04)}
.pip--s{color:var(--suit-spade);border-color:rgba(52,58,66,.2);background:rgba(52,58,66,.04)}

/* ═══════════════════════════════════════════════
   HAND HISTORY BLOCK — unique visual design
   ═══════════════════════════════════════════════ */
.c-hand{border-radius:var(--radius-xs);margin:var(--space-6) 0;overflow:hidden;border:1px solid var(--color-neutral-200);font-family:var(--font-body);font-size:var(--text-base)}

/* Hand header — dark bar */
.c-hand__header{background:var(--color-neutral-900);padding:var(--space-3) var(--space-5);display:flex;align-items:center;justify-content:space-between}
.c-hand__header-title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:#fff;text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.c-hand__header-badge{font-size:var(--text-xs);font-weight:var(--weight-semi);padding:2px 10px;border-radius:var(--radius-full);background:var(--color-primary-500);color:#fff;text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.c-hand__header-meta{font-size:var(--text-xs);color:var(--color-neutral-400);font-family:var(--font-mono)}

/* Hand hero card display */
.c-hand__hero{background:var(--surface-secondary);padding:var(--space-5);display:flex;align-items:center;gap:var(--space-5);border-bottom:1px solid var(--border-default)}
.c-hand__hero-label{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-subtle);min-width:70px}
.c-hand__cards{display:flex;gap:var(--space-2)}
.c-hand__card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:78px;border-radius:6px;background:#fff;border:2px solid var(--border-default);box-shadow:var(--shadow-sm);font-family:var(--font-display);font-weight:var(--weight-extra);position:relative}
.c-hand__card-rank{font-size:22px;line-height:1}
.c-hand__card-suit{font-size:18px;line-height:1;margin-top:-2px}
.c-hand__card--heart{border-color:rgba(229,36,63,.25);color:var(--suit-heart)}
.c-hand__card--diamond{border-color:rgba(59,125,221,.25);color:var(--suit-diamond)}
.c-hand__card--club{border-color:rgba(27,138,78,.25);color:var(--suit-club)}
.c-hand__card--spade{border-color:rgba(52,58,66,.25);color:var(--suit-spade)}
.c-hand__hero-stack{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-subtle);margin-left:auto}
.c-hand__hero-stack strong{color:var(--text-strong);font-weight:var(--weight-bold)}

/* Hand action lines */
.c-hand__body{padding:var(--space-4) var(--space-5)}
.c-hand__street{margin-bottom:var(--space-4)}
.c-hand__street:last-child{margin-bottom:0}
.c-hand__street-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.c-hand__street-name{font-family:var(--font-display);font-weight:var(--weight-extra);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-strong)}
.c-hand__street-pot{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);background:var(--surface-tertiary);padding:1px 8px;border-radius:var(--radius-full)}
.c-hand__board{display:flex;gap:var(--space-1);margin-bottom:var(--space-2)}
.c-hand__board-card{display:inline-flex;align-items:center;gap:1px;font-family:var(--font-display);font-weight:var(--weight-extra);font-size:var(--text-base);padding:3px 7px;border-radius:4px;background:#fff;border:1.5px solid var(--border-default);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.c-hand__board-card--h{color:var(--suit-heart);border-color:rgba(229,36,63,.2)}
.c-hand__board-card--d{color:var(--suit-diamond);border-color:rgba(59,125,221,.2)}
.c-hand__board-card--c{color:var(--suit-club);border-color:rgba(27,138,78,.2)}
.c-hand__board-card--s{color:var(--suit-spade);border-color:rgba(52,58,66,.2)}
.c-hand__action{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;font-size:var(--text-base);color:var(--text-default);line-height:var(--leading-normal)}
.c-hand__player{font-weight:var(--weight-semi);color:var(--text-strong)}
.c-hand__player--hero{color:var(--color-secondary-600);font-weight:var(--weight-bold)}
.c-hand__verb{color:var(--text-subtle)}
.c-hand__amount{font-family:var(--font-mono);font-weight:var(--weight-bold);color:var(--color-accent-600)}
.c-hand__divider{height:1px;background:var(--border-subtle);margin:var(--space-3) 0}

/* Hand result / question */
.c-hand__result{background:var(--color-secondary-50);border-top:2px solid var(--color-secondary-500);padding:var(--space-4) var(--space-5);font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--color-secondary-800);font-size:var(--text-lg);text-align:center}

/* ═══════════════════════════════════════════════
   ARTICLE PROMOS — sharp radius
   ═══════════════════════════════════════════════ */
.c-article-promo{border-radius:var(--radius-xs);padding:var(--space-8);margin:var(--space-10) 0;text-align:center;position:relative;overflow:hidden}
.c-article-promo--optin{background:linear-gradient(135deg,var(--color-neutral-900) 0%,#1a1b20 100%);border:1px solid var(--color-neutral-700);color:var(--color-neutral-100)}
.c-article-promo--optin::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary-500),var(--color-secondary-500))}
.c-article-promo__eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--color-primary-400);margin-bottom:var(--space-3)}
.c-article-promo__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-extra);margin-bottom:var(--space-3)}
.c-article-promo--optin .c-article-promo__title,.c-article-promo--partner .c-article-promo__title{color:var(--color-neutral-0)}
.c-article-promo__desc{font-size:var(--text-base);color:var(--color-neutral-400);margin-bottom:var(--space-6);max-width:480px;margin-left:auto;margin-right:auto}
.c-article-promo__form{display:flex;gap:var(--space-3);max-width:420px;margin:0 auto}
.c-article-promo__form .c-input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff;flex:1}
.c-article-promo__form .c-input::placeholder{color:var(--color-neutral-500)}
.c-article-promo__form .c-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px rgba(255,44,31,.15)}

/* Course promo — edge-to-edge image, same padding for text */
.c-article-promo--course{background:var(--surface-primary);border:1px solid var(--border-default);color:var(--text-strong);text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;align-items:stretch}
.c-article-promo--course .c-article-promo__visual{background:var(--color-neutral-900);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:280px}
.c-article-promo--course .c-article-promo__visual img{width:100%;height:100%;object-fit:cover}
.c-article-promo--course .c-article-promo__content{padding:var(--space-8)}
.c-article-promo__price{font-family:var(--font-display);font-weight:var(--weight-extra);font-size:var(--text-3xl);color:var(--text-strong);margin-bottom:var(--space-1)}
.c-article-promo__price-note{font-size:var(--text-sm);color:var(--text-subtle);margin-bottom:var(--space-4)}
.c-article-promo__features{list-style:none;margin:0 0 var(--space-5);padding:0}
.c-article-promo__features li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-default);padding:var(--space-1) 0}
.c-article-promo__features li::before{content:"✓";color:var(--color-accent-500);font-weight:var(--weight-bold)}

/* Partner ad */
.c-article-promo--partner{background:linear-gradient(135deg,#0f1114,#1a1d24);border:1px solid var(--color-secondary-700);color:#fff}
.c-article-promo--partner::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-secondary-500)}
.c-article-promo__sponsor-label{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-neutral-400);margin-bottom:var(--space-4);text-transform:uppercase;letter-spacing:var(--tracking-widest)}

/* Inline */
.c-article-promo--inline{background:var(--color-primary-50);border:1px solid rgba(255,44,31,.15);padding:var(--space-5) var(--space-6);display:flex;align-items:center;gap:var(--space-5);text-align:left;border-radius:var(--radius-xs)}
.c-article-promo--inline .c-article-promo__title{font-size:var(--text-lg);color:var(--text-strong);margin-bottom:var(--space-1)}
.c-article-promo--inline .c-article-promo__desc{font-size:var(--text-sm);color:var(--text-subtle);margin:0;max-width:none}

@media(max-width:768px){
  .c-article-promo--course{grid-template-columns:1fr}
  .c-article-promo__form{flex-direction:column}
  .c-article-promo--inline{flex-direction:column;text-align:center}
}

/* ═══════════════════════════════════════════════
   PRICING — sharp
   ═══════════════════════════════════════════════ */
.c-pricing{text-align:center;border:2px solid var(--border-default);border-radius:var(--radius-xs);padding:var(--space-8);background:var(--surface-primary);position:relative;transition:box-shadow var(--duration-base) var(--ease-out)}
.c-pricing:hover{box-shadow:var(--shadow-xl)}
.c-pricing--featured{border-color:var(--color-primary-500);box-shadow:var(--shadow-red-glow)}
.c-pricing--featured::before{content:"Most Popular";position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--color-primary-500);color:#fff;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wider);padding:var(--space-1) var(--space-4);border-radius:var(--radius-full)}
.c-pricing__name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-strong);margin-bottom:var(--space-2)}
.c-pricing__price{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-extra);color:var(--text-strong);line-height:1;margin-bottom:var(--space-1)}
.c-pricing__price span{font-size:var(--text-xl);font-weight:var(--weight-regular);color:var(--text-subtle)}
.c-pricing__desc{font-size:var(--text-sm);color:var(--text-subtle);margin-bottom:var(--space-6)}
.c-pricing__features{text-align:left;margin:0 0 var(--space-6);padding:0;list-style:none}
.c-pricing__features li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;font-size:var(--text-base);color:var(--text-default)}
.c-pricing__features li::before{content:"✓";color:var(--color-accent-500);font-weight:var(--weight-bold);flex-shrink:0}

/* ═══════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════ */
.c-cta-banner{background:var(--color-neutral-900);padding:var(--space-16) var(--space-6);text-align:center;position:relative;overflow:hidden}
.c-cta-banner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 50%,rgba(255,44,31,.08),transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(255,184,0,.06),transparent 50%);pointer-events:none}
.c-cta-banner__content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.c-cta-banner__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-extra);color:#fff;line-height:var(--leading-tight);margin-bottom:var(--space-4);letter-spacing:var(--tracking-tighter)}
.c-cta-banner__desc{font-size:var(--text-lg);color:var(--color-neutral-400);margin-bottom:var(--space-8);line-height:var(--leading-relaxed)}


/* ═══════════════════════════════════════════════
   24) SITE HEADER / FOOTER SCAFFOLDING
   Baseline chrome shared by every page & post.
   ═══════════════════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:400;background:var(--surface-primary);border-bottom:1px solid var(--border-subtle);backdrop-filter:saturate(1.2) blur(8px)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);max-width:var(--grid-max);margin:0 auto;padding:var(--space-3) var(--grid-gutter);min-height:64px}
.site-header__logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none}
.site-header__logo img,.site-header__logo svg{height:32px;width:auto;display:block}
.site-header .c-nav__links{margin-left:auto}
.site-header__cta{flex-shrink:0}

/* Mobile nav toggle (hamburger) */
.site-header__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text-strong);border-radius:var(--radius-md)}
.site-header__toggle:hover{background:var(--surface-secondary)}
@media(max-width:1024px){
  .site-header__toggle{display:flex}
  .site-header .c-nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--surface-primary);border-bottom:1px solid var(--border-default);box-shadow:var(--shadow-lg);padding:var(--space-4) var(--grid-gutter);gap:var(--space-1)}
  .site-header .c-nav__links.is-open{display:flex}
  .site-header .c-nav__link{padding:var(--space-3) var(--space-4);font-size:var(--text-base)}
}

.site-footer{background:var(--color-neutral-900);color:var(--color-neutral-400);margin-top:var(--space-24)}
.site-footer__inner{max-width:var(--grid-max);margin:0 auto;padding:var(--space-16) var(--grid-gutter) var(--space-10)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-10)}
.site-footer__heading{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-neutral-0);margin-bottom:var(--space-4)}
.site-footer a{color:var(--color-neutral-400);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.site-footer a:hover{color:var(--color-neutral-0)}
.site-footer__links{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm)}
.site-footer__legal{border-top:1px solid var(--color-neutral-800);margin-top:var(--space-10);padding-top:var(--space-6);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:var(--text-xs);color:var(--color-neutral-500)}
@media(max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-footer__grid{grid-template-columns:1fr}}

/* Page hero used by standard interior pages (not sales pages) */
.page-hero{background:var(--color-neutral-900);padding:var(--space-16) var(--grid-gutter);text-align:center}
.page-hero__eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--color-secondary-500);margin-bottom:var(--space-3)}
.page-hero__title{color:#fff;margin-bottom:var(--space-4)}
.page-hero__desc{font-size:var(--text-lg);color:var(--color-neutral-400);max-width:640px;margin:0 auto}

/* ═══════════════════════════════════════════════
   25) WORDPRESS COMPATIBILITY LAYER
   Maps WP core markup to design-system styling so
   every post/page inherits the system automatically.
   ═══════════════════════════════════════════════ */

/* Post content wrapper — mirror .article-content on WP's default class */
.entry-content{font-family:var(--font-body);font-size:var(--text-lg);line-height:var(--leading-loose);color:var(--text-default);max-width:var(--grid-narrow);margin-left:auto;margin-right:auto;padding:0 var(--grid-gutter)}
.entry-content>*{margin-bottom:var(--space-5)}
.entry-content h2{margin:var(--space-10) 0 var(--space-5)}
.entry-content h3{margin:var(--space-8) 0 var(--space-4)}
.entry-content h4{margin:var(--space-6) 0 var(--space-3);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-strong)}
.entry-content strong{font-weight:var(--weight-semi);color:var(--text-strong)}
.entry-content a:not(.c-btn){color:var(--color-primary-500);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-out)}
.entry-content a:not(.c-btn):hover{color:var(--color-primary-700);text-decoration-thickness:2px}
.entry-content ul,.entry-content ol{margin:0 0 var(--space-5) var(--space-6)}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:var(--space-2);line-height:var(--leading-relaxed)}
.entry-content li::marker{color:var(--color-primary-500)}
.entry-content blockquote,.wp-block-quote{border-left:4px solid var(--color-primary-500);padding:var(--space-4) var(--space-6);margin:var(--space-6) 0;background:var(--surface-secondary);border-radius:0 var(--radius-xs) var(--radius-xs) 0;font-style:italic;color:var(--text-subtle)}
.entry-content blockquote p:last-child,.wp-block-quote p:last-child{margin-bottom:0}
.wp-block-quote cite{display:block;margin-top:var(--space-3);font-style:normal;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong)}
.entry-content code{font-family:var(--font-mono);font-size:0.9em;background:var(--surface-tertiary);padding:0.15em 0.4em;border-radius:var(--radius-xs);color:var(--color-primary-600)}
.entry-content pre,.wp-block-code{background:var(--color-neutral-900);color:var(--color-neutral-100);padding:var(--space-5);border-radius:var(--radius-xs);overflow-x:auto;margin:var(--space-6) 0;font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.entry-content pre code,.wp-block-code code{background:none;padding:0;color:inherit}
.entry-content hr,.wp-block-separator{border:none;height:1px;background:var(--border-default);margin:var(--space-10) auto;max-width:100%}
.entry-content table{width:100%;margin:var(--space-6) 0;font-size:var(--text-base);line-height:var(--leading-normal)}
.entry-content thead th{background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-display);font-weight:var(--weight-semi);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:var(--space-3) var(--space-4);text-align:left}
.entry-content tbody td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-default)}
.entry-content tbody tr:hover{background:var(--surface-secondary)}
.wp-block-table{overflow-x:auto}
.wp-block-table table{border:1px solid var(--border-default)}

/* Images, figures, captions */
.entry-content img{border-radius:var(--radius-xs);height:auto}
.wp-block-image{margin:var(--space-6) 0}
.wp-caption,.wp-block-image figcaption,.entry-content figcaption{font-size:var(--text-sm);color:var(--text-subtle);margin-top:var(--space-2);text-align:center;font-style:italic}
.wp-caption{max-width:100%}
.wp-caption img{margin-bottom:0}
.alignleft{float:left;margin:var(--space-1) var(--space-6) var(--space-4) 0}
.alignright{float:right;margin:var(--space-1) 0 var(--space-4) var(--space-6)}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
@media(max-width:640px){.alignleft,.alignright{float:none;margin:var(--space-4) auto;display:block}}

/* Wide / full alignments — break out of the 720px article column */
.entry-content .alignwide{max-width:var(--grid-max);width:calc(100vw - 2*var(--grid-gutter));margin-left:50%;transform:translateX(-50%)}
.entry-content .alignfull{max-width:100vw;width:100vw;margin-left:50%;transform:translateX(-50%);border-radius:0}
@media(min-width:1320px){.entry-content .alignwide{width:var(--grid-max)}}

/* Embeds & video */
.wp-block-embed,.entry-content iframe{max-width:100%}
.wp-block-embed__wrapper{position:relative}
.wp-block-embed.is-type-video .wp-block-embed__wrapper{aspect-ratio:16/9}
.wp-block-embed.is-type-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-xs)}
.entry-content>iframe[src*="youtube"],.entry-content>iframe[src*="vimeo"]{aspect-ratio:16/9;width:100%;height:auto;border:0;border-radius:var(--radius-xs)}

/* Gutenberg buttons → system buttons */
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-semi);font-size:var(--text-base);line-height:1;padding:var(--space-3) var(--space-6);border:2px solid var(--color-accent-500);border-radius:var(--radius-md);cursor:pointer;text-decoration:none;transition:all var(--duration-base) var(--ease-out);min-height:44px;background:var(--color-accent-500);color:#fff}
.wp-block-button__link:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);transform:translateY(-1px);box-shadow:var(--shadow-green-glow);color:#fff}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.is-style-outline .wp-block-button__link:hover{background:var(--surface-secondary);border-color:var(--text-default);box-shadow:none}

/* Gutenberg columns / groups inherit spacing */
.wp-block-columns{gap:var(--grid-gutter)}
.wp-block-group.has-background{padding:var(--space-8);border-radius:var(--radius-xs)}

/* Comments, forms, misc WP */
.entry-content .gallery,.wp-block-gallery{margin:var(--space-6) 0}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sticky{/* WP sticky post marker — intentionally unstyled */}
.bypostauthor{/* WP author comment marker — intentionally unstyled */}

/* Archive / post list defaults */
.post-list{display:grid;gap:var(--grid-gutter)}
.post-list--2col{grid-template-columns:repeat(2,1fr)}
.post-list--3col{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.post-list--3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-list--2col,.post-list--3col{grid-template-columns:1fr}}

/* Post meta line (author / date / read time) */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.post-meta a{color:var(--text-subtle);text-decoration:none}
.post-meta a:hover{color:var(--color-primary-500)}

/* ═══════════════════════════════════════════════
   26) PAGE PRIMITIVES & DOCUMENTATION (v2.2)
   Building blocks for hand-built pages, so page
   builds need little or no custom CSS.
   ═══════════════════════════════════════════════ */

/* Section variants + anchor offset under the sticky header */
.l-section--sm{padding:var(--space-10) 0}
.l-section--lg{padding:var(--space-24) 0}
.l-section--alt{background:var(--surface-secondary)}
.l-section--rule{border-top:1px solid var(--border-default)}
.l-section[id]{scroll-margin-top:var(--space-16)}

/* Auto-fill grid for swatches, logos, small tiles */
.l-grid--auto{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}

/* Section header: eyebrow, title, intro */
.c-section-head{max-width:var(--grid-narrow);margin-bottom:var(--space-10)}
.c-section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.c-section-head__eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--color-primary-500);margin-bottom:var(--space-3)}
.c-section-head__title{margin-bottom:var(--space-4)}
.c-section-head__desc{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-subtle)}

/* Lead paragraph */
.c-lead{font-size:var(--text-xl);line-height:var(--leading-relaxed);color:var(--text-subtle);max-width:var(--grid-narrow)}

/* Panel: plain bordered container */
.c-panel{background:var(--surface-primary);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:var(--space-6)}
.c-panel--muted{background:var(--surface-secondary)}
@media(max-width:640px){.c-panel{padding:var(--space-4)}}

/* Subnav: horizontal jump links for long pages and hubs */
.c-subnav{background:var(--surface-secondary);border-bottom:1px solid var(--border-default)}
.c-subnav__list{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.c-subnav__link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-subtle);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.c-subnav__link:hover,.c-subnav__link--active{color:var(--color-primary-500)}

/* Horizontal scroll wrapper for wide tables */
.c-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Modal backdrop (JS toggles the hidden attribute); --inline for static demos */
.c-modal-backdrop{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:rgba(12,13,15,.72)}
.c-modal-backdrop--inline{position:relative;inset:auto;z-index:auto;padding:var(--space-10) var(--space-4);background:var(--color-neutral-900);border-radius:var(--radius-xs)}
@media(max-width:640px){.c-modal-backdrop--inline{padding:var(--space-6) 0}}

/* Documentation blocks: color swatches and type/token specimens.
   Swatch color comes from an inline custom property:
   <div class="c-swatch__color" style="--swatch:var(--color-primary-500)"></div> */
.c-swatch{background:var(--surface-primary);border:1px solid var(--border-default);border-radius:var(--radius-xs);overflow:hidden}
.c-swatch__color{height:var(--space-16);background:var(--swatch,var(--surface-tertiary));border-bottom:1px solid var(--border-subtle)}
.c-swatch__meta{padding:var(--space-3)}
.c-swatch__name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-strong)}
.c-swatch__token{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);overflow-wrap:anywhere}
.c-specimen{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}
.c-specimen:last-child{border-bottom:0}
.c-specimen__label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);letter-spacing:var(--tracking-wide)}
.c-specimen__sample{min-width:0;color:var(--text-strong);line-height:var(--leading-tight);overflow-wrap:anywhere}
.c-bar{height:var(--space-3);background:var(--color-neutral-800);border-radius:var(--radius-xs)}
[data-theme="dark"] .c-bar{background:var(--color-neutral-200)}
@media(max-width:640px){.c-specimen{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}}

/* ═══════════════════════════════════════════════
   27) UTILITIES
   Small, composable helpers. Use sparingly —
   prefer components over utility soup.
   ═══════════════════════════════════════════════ */
.u-text-center{text-align:center}
.u-text-left{text-align:left}
.u-text-right{text-align:right}
.u-text-strong{color:var(--text-strong) !important}
.u-text-subtle{color:var(--text-subtle) !important}
.u-text-muted{color:var(--text-muted) !important}
.u-font-display{font-family:var(--font-display) !important}
.u-font-mono{font-family:var(--font-mono) !important}
.u-uppercase{text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.u-eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--color-primary-500)}
.u-mt-0{margin-top:0}.u-mb-0{margin-bottom:0}
.u-mt-4{margin-top:var(--space-4)}.u-mb-4{margin-bottom:var(--space-4)}
.u-mt-8{margin-top:var(--space-8)}.u-mb-8{margin-bottom:var(--space-8)}
.u-mt-12{margin-top:var(--space-12)}.u-mb-12{margin-bottom:var(--space-12)}
.u-hidden{display:none !important}
.u-flex{display:flex;gap:var(--space-3);align-items:center}
.u-flex-wrap{flex-wrap:wrap}
.u-flex-between{justify-content:space-between}
.u-flex-center{justify-content:center}
.u-surface-dark{background:var(--color-neutral-900);color:var(--color-neutral-200)}
.u-surface-secondary{background:var(--surface-secondary)}
@media(max-width:640px){.u-hide-mobile{display:none !important}}
@media(min-width:641px){.u-hide-desktop{display:none !important}}

/* v2.2 utilities */
.u-font-body{font-family:var(--font-body) !important}
.u-italic{font-style:italic !important}
.u-fs-xs{font-size:var(--text-xs) !important}.u-fs-sm{font-size:var(--text-sm) !important}.u-fs-base{font-size:var(--text-base) !important}
.u-fs-lg{font-size:var(--text-lg) !important}.u-fs-xl{font-size:var(--text-xl) !important}.u-fs-2xl{font-size:var(--text-2xl) !important}
.u-fs-3xl{font-size:var(--text-3xl) !important}.u-fs-4xl{font-size:var(--text-4xl) !important}.u-fs-5xl{font-size:var(--text-5xl) !important;letter-spacing:var(--tracking-tighter) !important}
.u-fw-regular{font-weight:var(--weight-regular) !important}.u-fw-medium{font-weight:var(--weight-medium) !important}.u-fw-semi{font-weight:var(--weight-semi) !important}
.u-fw-bold{font-weight:var(--weight-bold) !important}.u-fw-extra{font-weight:var(--weight-extra) !important}
.u-mt-2{margin-top:var(--space-2)}.u-mb-2{margin-bottom:var(--space-2)}
.u-mt-6{margin-top:var(--space-6)}.u-mb-6{margin-bottom:var(--space-6)}
.u-mt-10{margin-top:var(--space-10)}.u-mb-10{margin-bottom:var(--space-10)}
.u-mt-16{margin-top:var(--space-16)}.u-mb-16{margin-bottom:var(--space-16)}
.u-stack>*+*{margin-top:var(--space-4)}
.u-stack--sm>*+*{margin-top:var(--space-2)}
.u-stack--lg>*+*{margin-top:var(--space-8)}
.u-measure{max-width:var(--grid-narrow)}
.u-min-w-0{min-width:0}
.u-radius-xs{border-radius:var(--radius-xs)}.u-radius-sm{border-radius:var(--radius-sm)}.u-radius-md{border-radius:var(--radius-md)}
.u-radius-lg{border-radius:var(--radius-lg)}.u-radius-full{border-radius:var(--radius-full)}
.u-shadow-xs{box-shadow:var(--shadow-xs)}.u-shadow-sm{box-shadow:var(--shadow-sm)}.u-shadow-md{box-shadow:var(--shadow-md)}
.u-shadow-lg{box-shadow:var(--shadow-lg)}.u-shadow-xl{box-shadow:var(--shadow-xl)}.u-shadow-2xl{box-shadow:var(--shadow-2xl)}


/* extra beaver builder */ 

.fl-builder-content p:not(.fl-module-html *),
.fl-builder-content ul li:not(.fl-module-html *),
.fl-builder-content ol li:not(.fl-module-html *),
.site-inner p:not(.fl-module-html *),
.site-inner ul li:not(.fl-module-html *),
.site-inner ol li:not(.fl-module-html *),
.entry-content p:not(.fl-module-html *),
.entry-content ul li:not(.fl-module-html *),
.entry-content ol li:not(.fl-module-html *),
.entry-pagination {
  font-size: 18px;
  font-weight: 400;
}

.fl-builder-content p:not(.fl-module-html *),
.site-inner p:not(.fl-module-html *),
.entry-content p:not(.fl-module-html *) {
  margin: 0 0 25px;
}


/* ═══════════════════════════════════════════════
   28) ACCESSIBILITY, PRINT, REDUCED MOTION
   ═══════════════════════════════════════════════ */

/* Skip link */
.skip-link{position:absolute;top:-48px;left:var(--space-4);z-index:600;background:var(--color-neutral-900);color:#fff;font-family:var(--font-display);font-weight:var(--weight-semi);padding:var(--space-3) var(--space-5);border-radius:0 0 var(--radius-md) var(--radius-md);text-decoration:none;transition:top var(--duration-base) var(--ease-out)}
.skip-link:focus{top:0}

/* Global focus visibility */
:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}
a:focus-visible,button:focus-visible{border-radius:var(--radius-xs)}

/* Selection */
::selection{background:var(--color-secondary-200);color:var(--color-neutral-900)}


/* ═══════════════════════════════════════════════
   BUTTON LINK OVERRIDE — BB / theme
   ═══════════════════════════════════════════════ */
.fl-builder-content a.c-btn,
.site-inner a.c-btn,
.entry-content a.c-btn,
.article-content a.c-btn{
  text-decoration:none;
}

.fl-builder-content a.c-btn--primary,
.site-inner a.c-btn--primary,
.entry-content a.c-btn--primary,
.article-content a.c-btn--primary{color:#fff}

.fl-builder-content a.c-btn--secondary,
.site-inner a.c-btn--secondary,
.entry-content a.c-btn--secondary,
.article-content a.c-btn--secondary{color:#fff}

.fl-builder-content a.c-btn--tertiary,
.site-inner a.c-btn--tertiary,
.entry-content a.c-btn--tertiary,
.article-content a.c-btn--tertiary{color:var(--text-strong)}

.fl-builder-content a.c-btn--ghost,
.site-inner a.c-btn--ghost,
.entry-content a.c-btn--ghost,
.article-content a.c-btn--ghost{color:var(--color-primary-500)}

.fl-builder-content a.c-btn--dark,
.site-inner a.c-btn--dark,
.entry-content a.c-btn--dark,
.article-content a.c-btn--dark{color:var(--color-neutral-0)}

/* ═══════════════════════════════════════════════
   29) COMPONENT SIZING & THEME HARDENING
   ═══════════════════════════════════════════════ */

/* ---- Buttons: reclaim size, padding, and label rendering ---- */
.c-btn.c-btn{
  font-family:var(--font-display);font-size:var(--text-ui);
  font-weight:var(--weight-semi);line-height:1;
  letter-spacing:normal;text-transform:none;text-decoration:none;
  padding:var(--space-3) var(--space-6);
  min-height:44px;height:auto;
  border-width:2px;border-radius:var(--radius-md);
  box-shadow:none;text-shadow:none
}
.c-btn--sm.c-btn--sm{font-size:var(--text-ui-sm);padding:var(--space-2) var(--space-4);min-height:36px}
.c-btn--lg.c-btn--lg{font-size:var(--text-xl);padding:var(--space-4) var(--space-8);min-height:52px;border-radius:var(--radius-lg);font-weight:var(--weight-bold)}
.c-btn--xl.c-btn--xl{font-size:var(--text-2xl);padding:var(--space-5) var(--space-10);min-height:60px;border-radius:var(--radius-lg);font-weight:var(--weight-bold)}

/* Variant colors, hardened against theme button color rules */
.c-btn--primary.c-btn--primary{background:var(--color-accent-500);color:#fff;border-color:var(--color-accent-500)}
.c-btn--primary.c-btn--primary:hover{background:var(--color-accent-600);border-color:var(--color-accent-600);color:#fff}
.c-btn--secondary.c-btn--secondary{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}
.c-btn--secondary.c-btn--secondary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}
.c-btn--tertiary.c-btn--tertiary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.c-btn--tertiary.c-btn--tertiary:hover{background:var(--surface-secondary);color:var(--text-strong);border-color:var(--text-default)}
.c-btn--ghost.c-btn--ghost{background:transparent;color:var(--color-primary-500);border-color:transparent}
.c-btn--ghost.c-btn--ghost:hover{background:var(--color-primary-50);color:var(--color-primary-600)}
.c-btn--dark.c-btn--dark{background:var(--color-neutral-900);color:var(--color-neutral-0);border-color:var(--color-neutral-900)}
.c-btn--dark.c-btn--dark:hover{background:var(--color-neutral-800);color:var(--color-neutral-0)}
.c-btn--loading.c-btn--loading{color:transparent}

/* Gutenberg buttons follow the same sizing */
.wp-block-button__link{font-size:var(--text-ui);line-height:1;min-height:44px}

/* ---- Accordion: the FAQ fix ---- */
.c-accordion{margin:var(--space-6) 0 var(--space-10)}
.c-accordion__item{border-bottom:1px solid var(--border-default)}
.c-accordion__item:first-child{border-top:1px solid var(--border-default)}

.c-accordion .c-accordion__trigger,
.c-accordion .c-accordion__trigger:link,
.c-accordion .c-accordion__trigger:visited{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);width:100%;
  padding:var(--space-5) 0;
  background:none;border:none;border-radius:0;box-shadow:none;text-shadow:none;
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:var(--weight-bold);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);text-transform:none;
  color:var(--text-strong);text-align:left;text-decoration:none;
  min-height:56px;cursor:pointer
}
/* Kills the theme's filled button hover that was painting the row red */
.c-accordion .c-accordion__trigger:hover,
.c-accordion .c-accordion__trigger:focus,
.c-accordion .c-accordion__trigger:active,
.c-accordion .c-accordion__item--open>.c-accordion__trigger{
  background:none;box-shadow:none;border:none;text-decoration:none;
  color:var(--color-primary-600)
}
.c-accordion .c-accordion__trigger:focus-visible{
  outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-xs)
}
.c-accordion .c-accordion__icon{
  flex-shrink:0;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:24px;font-weight:var(--weight-regular);
  line-height:1;color:var(--text-muted);
  transition:transform var(--duration-base) var(--ease-out),color var(--duration-fast) var(--ease-out)
}
.c-accordion .c-accordion__trigger:hover .c-accordion__icon{color:var(--color-primary-500)}

/* Answer body: full prose size, and real air beneath it */
.c-accordion .c-accordion__content{
  padding:0 0 var(--space-6);
  font-size:var(--text-lg);line-height:var(--leading-relaxed);
  color:var(--text-default)
}
.c-accordion .c-accordion__content>*:last-child{margin-bottom:0}
/* A question wrapped in a heading for outline/schema reasons stays visually
   a trigger, not a heading. */
.c-accordion h2:has(>.c-accordion__trigger),
.c-accordion h3:has(>.c-accordion__trigger),
.c-accordion h4:has(>.c-accordion__trigger){
  margin:0;font-size:inherit;letter-spacing:normal;line-height:inherit
}

/* ---- Tabs ---- */
.c-tabs{border-bottom:2px solid var(--border-default);gap:var(--space-2)}
.c-tabs .c-tabs__tab,
.c-tabs .c-tabs__tab:link{
  font-family:var(--font-display);font-size:var(--text-ui);
  font-weight:var(--weight-semi);line-height:1;letter-spacing:normal;
  text-transform:none;text-decoration:none;
  padding:var(--space-3) var(--space-4);min-height:48px;
  background:none;border:none;border-bottom:2px solid transparent;
  border-radius:0;box-shadow:none;color:var(--text-subtle);cursor:pointer
}
.c-tabs .c-tabs__tab:hover,
.c-tabs .c-tabs__tab:focus{background:none;box-shadow:none;color:var(--text-strong)}
.c-tabs .c-tabs__tab--active{color:var(--color-primary-500);border-bottom-color:var(--color-primary-500)}

/* ---- Chips ---- */
.c-chip.c-chip{
  font-family:var(--font-body);font-size:var(--text-ui-sm);
  font-weight:var(--weight-medium);line-height:1;text-transform:none;
  padding:var(--space-2) var(--space-4);min-height:40px;
  background:var(--surface-primary);color:var(--text-default);
  border:1.5px solid var(--border-default);border-radius:var(--radius-full);
  box-shadow:none
}
.c-chip.c-chip:hover{background:var(--surface-secondary);border-color:var(--color-primary-500);color:var(--color-primary-500)}
.c-chip--active.c-chip--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}

/* ---- Breadcrumbs ---- */
.c-breadcrumbs{font-size:var(--text-ui-sm);gap:var(--space-2) var(--space-3);flex-wrap:wrap}
.c-breadcrumbs a{font-size:inherit}

/* ---- Pagination ---- */
.c-pagination{gap:var(--space-2)}
.c-pagination .c-pagination__item{
  font-family:var(--font-display);font-size:var(--text-ui-sm);
  font-weight:var(--weight-medium);line-height:1;text-decoration:none;
  min-width:44px;height:44px;width:auto;padding:0 var(--space-3);
  background:none;border:1.5px solid transparent;border-radius:var(--radius-md);
  box-shadow:none;color:var(--text-subtle)
}
.c-pagination .c-pagination__item:hover{background:var(--surface-secondary);border-color:var(--border-strong);color:var(--text-strong)}
.c-pagination .c-pagination__item--active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}

/* ---- Tables: cells at near-body size, in all three contexts ---- */
.c-table.c-table,
.entry-content table,
.article-content table{font-size:var(--text-ui);line-height:var(--leading-normal)}

.c-table.c-table thead th,
.entry-content thead th,
.article-content thead th{
  font-family:var(--font-display);font-size:var(--text-ui-xs);
  font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);line-height:var(--leading-snug);
  padding:var(--space-4) var(--space-4);vertical-align:bottom
}
.c-table.c-table tbody td,
.c-table.c-table tbody th,
.entry-content tbody td,
.entry-content tbody th,
.article-content tbody td,
.article-content tbody th{
  font-size:var(--text-ui);line-height:var(--leading-normal);
  padding:var(--space-4) var(--space-4);vertical-align:middle
}
/* The Beaver block forces 18px on p/li, which breaks cell rhythm */
.c-table p,.c-table li,
.entry-content table p,.entry-content table li,
.article-content table p,.article-content table li{
  font-size:inherit;line-height:inherit;margin:0
}
.entry-content table,.article-content table{width:100%}
@media(max-width:640px){
  .c-table.c-table thead th,
  .c-table.c-table tbody td,
  .entry-content tbody td,
  .entry-content thead th{padding:var(--space-3) var(--space-3)}
}

/* ---- Remaining icon buttons the theme also reaches ---- */
.c-modal .c-modal__close,
.site-header .site-header__toggle{
  background:none;border:none;box-shadow:none;border-radius:var(--radius-md);
  min-height:44px;min-width:44px;padding:0;line-height:1
}
.c-modal .c-modal__close:hover,
.site-header .site-header__toggle:hover{background:var(--surface-secondary);box-shadow:none}

/* ---- Small labels that also read too small at 18px body ---- */
.c-badge{font-size:var(--text-ui-xs);padding:var(--space-1) var(--space-3);line-height:1.5}
.c-tag{font-size:var(--text-ui-sm);padding:var(--space-1) var(--space-3)}
.c-tooltip__content{font-size:var(--text-ui-xs)}
.post-meta{font-size:var(--text-ui-xs)}
.c-card__meta{font-size:var(--text-ui-sm)}
.c-form-hint,.c-form-error{font-size:var(--text-ui-sm)}
.c-label{font-size:var(--text-ui-sm)}
.c-input,.c-textarea,.c-select{font-size:var(--text-ui);min-height:48px}
.c-subnav__link{font-size:var(--text-ui-sm);min-height:48px}



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

/* Print */
@media print{
  .site-header,.site-footer,.c-cta-banner,.c-article-promo,.skip-link,.c-modal,.site-header__toggle{display:none !important}
  body{background:#fff;color:#000}
  .entry-content,.article-content{max-width:100%;font-size:12pt;line-height:1.5}
  a{color:#000;text-decoration:underline}
  .entry-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;color:#555}
}