/* ==========================================================================
   CPS Tester — Base / Reset / Typography
   ========================================================================== */

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

/* The `hidden` attribute must always win over a component's own display
   rule (e.g. `.share-panel{display:flex}` toggled via el.hidden=true from
   JS) — otherwise equal-specificity class selectors silently defeat it. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--surface-canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}

/* Every icon comes from cps_tester_icon() as a bare <svg class="icon">
   with no width/height attribute, so without an explicit default it falls
   back to the browser's 300×150 replaced-element size wherever no other
   rule constrains it (eyebrows, card CTAs, category tiles, etc.) — this
   is the single fix for every "icon is huge" spot; specific contexts
   below layer their own size on top via higher specificity. */
.icon{width:20px;height:20px;flex-shrink:0;}
.eyebrow svg{width:16px;height:16px;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-heading);line-height:var(--lh-tight);font-weight:600;letter-spacing:-0.01em;}
p{margin:0;}

h1,.h1{font-size:var(--fs-4xl);}
h2,.h2{font-size:var(--fs-3xl);}
h3,.h3{font-size:var(--fs-xl);}
h4,.h4{font-size:var(--fs-lg);}

@media (min-width:768px){
  h1,.h1{font-size:var(--fs-5xl);}
  h2,.h2{font-size:var(--fs-4xl);}
}
@media (min-width:1280px){
  h1,.h1{font-size:var(--fs-6xl);}
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--space-5);
}
.container--wide{max-width:var(--container-wide);}
.container--narrow{max-width:820px;}

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

.skip-link{
  position:absolute;
  left:var(--space-3);
  top:-60px;
  background:var(--color-brand-600);
  color:#fff;
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-sm);
  z-index:1000;
  transition:top var(--duration-base) var(--ease-out);
}
.skip-link:focus{top:var(--space-3);}

:focus-visible{
  outline:2px solid var(--color-brand-400);
  outline-offset:2px;
  border-radius:4px;
}

::selection{background:var(--color-brand-500);color:#fff;}

/* prevent layout shift while webfonts load */
.fonts-loading body{font-family:system-ui,sans-serif;}

.section{padding-block:var(--space-16);}
@media (min-width:1024px){.section{padding-block:var(--space-24);}}
.section--tight{padding-block:var(--space-10);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-brand-300);
}

.text-muted{color:var(--text-muted);}
.text-secondary{color:var(--text-secondary);}
.text-center{text-align:center;}

.stack{display:flex;flex-direction:column;}
.cluster{display:flex;flex-wrap:wrap;align-items:center;}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.gap-6{gap:var(--space-6);}