:root {
  --labs-navy: #1b1f3b;
  --labs-pink: #ff3d81;
  --labs-teal: #00b6c6;
  --labs-yellow: #ffc84d;
  --labs-purple: #b388ff;
  --labs-cream: #fff8ee;
  --labs-paper: #fffdf8;
  --labs-rule: #ded8d2;
  --labs-muted: #5d6879;
}

body.page-labs {
  background: var(--labs-cream);
}

.labs-pack {
  color: var(--labs-navy);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3.5rem) 5rem;
}

.labs-pack > * {
  margin-inline: auto;
  max-width: 84.875rem;
}

.labs-pack-cover {
  background: var(--labs-navy);
  border-radius: 1.75rem;
  padding: clamp(.85rem, 2vw, 1.5rem);
}

.labs-cover-inner {
  background: var(--labs-cream);
  border-radius: 1.15rem;
  min-height: min(42rem, 78vh);
  padding: clamp(2rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}

.labs-cover-inner::before,
.labs-cover-inner::after {
  content: "";
  position: absolute;
  width: 6rem;
  height: 6rem;
  background-image: radial-gradient(circle, var(--labs-pink) 0 10%, transparent 11%), radial-gradient(circle, var(--labs-teal) 0 8%, transparent 9%);
  background-position: 0 0, 2.5rem 2.5rem;
  opacity: .75;
}

.labs-cover-inner::before { top: 1rem; right: 1rem; }
.labs-cover-inner::after { bottom: 1rem; left: 1rem; transform: rotate(180deg); }
.labs-brand, .labs-cover-kicker, .labs-kicker { color: var(--labs-teal); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.labs-brand { font-size: .9rem; margin: 0 0 4rem; }
.labs-cover-kicker { margin: 0 0 .75rem; }
.labs-cover-inner h1 { font-family: Rubik, "Arial Black", sans-serif; font-size: clamp(5rem, 12vw, 10rem); font-weight: 900; line-height: .75; margin: 0; text-transform: uppercase; }
.labs-cover-inner h2 { color: var(--labs-purple); font-family: Rubik, "Arial Black", sans-serif; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 900; line-height: .95; margin: 1rem 0 1.5rem; text-transform: uppercase; }
.labs-cover-summary { color: var(--labs-navy); font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 600; max-width: 42rem; }
.labs-cover-chips { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2.5rem 0 1.25rem; }
.labs-cover-chips span { border-radius: .65rem; color: var(--labs-navy); font-weight: 800; min-width: 5.2rem; padding: .65rem 1rem; text-align: center; }
.labs-cover-chips span:nth-child(1) { background: #ffd5e4; }
.labs-cover-chips span:nth-child(2) { background: #d7f7f7; }
.labs-cover-chips span:nth-child(3) { background: #fff0b9; }
.labs-cover-chips span:nth-child(4) { background: #e8ddff; }
.labs-cover-chips span:nth-child(5) { background: #ffd5e4; }
.labs-cover-chips span:nth-child(6) { background: #fff0b9; }
.labs-cover-note { color: var(--labs-pink); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.labs-cover-inner .ss-button-pair { margin-top: 2rem; }

.labs-safety {
  background: #fff0b9;
  border-left: .4rem solid var(--labs-yellow);
  margin-block: 1.25rem 4rem;
  padding: 1rem 1.25rem;
}

.labs-pack-section {
  background: var(--labs-paper);
  border: 1px solid var(--labs-rule);
  border-radius: 1.4rem;
  box-shadow: 0 .6rem 2rem rgba(27,31,59,.05);
  margin-block: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.35rem, 4vw, 3.5rem);
}

.labs-pack-section > header { border-bottom: 1px solid var(--labs-rule); margin-bottom: 2rem; padding-bottom: 1.5rem; position: relative; }
.labs-page-number { color: var(--labs-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; position: absolute; right: 0; top: .15rem; }
.labs-kicker { font-size: .78rem; margin: 0 0 .5rem; padding-right: 5rem; }
.labs-pack-section :is(h1, h2), .labs-game-section h2 { font-family: Rubik, "Arial Black", sans-serif; font-size: clamp(2rem, 5vw, 4.25rem); font-weight: 900; letter-spacing: -.035em; line-height: .95; margin: 0 0 .8rem; max-width: 55rem; text-transform: uppercase; }
.labs-deck { color: var(--labs-navy); font-size: 1.05rem; margin: 0; max-width: 55rem; }

.labs-panel-map, .labs-pregnancy-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.labs-pregnancy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.labs-panel-card, .labs-pregnancy-card { border: 1px solid var(--labs-rule); border-radius: 1rem; min-height: 13rem; padding: 1.25rem; }
.labs-panel-card h3, .labs-pregnancy-card h3 { font-family: Rubik, "Arial Black", sans-serif; font-size: 1.3rem; font-weight: 800; margin: 0 0 1rem; text-transform: uppercase; }
.labs-panel-card strong, .labs-pregnancy-card strong { display: block; font-size: .68rem; letter-spacing: .09em; margin-top: .7rem; text-transform: uppercase; }
.labs-panel-card p, .labs-pregnancy-card p { font-size: .92rem; margin: .25rem 0 0; }
.labs-card-pink { background: #fff0f6; } .labs-card-pink h3, .labs-card-pink strong { color: var(--labs-pink); }
.labs-card-teal { background: #e8fbfb; } .labs-card-teal h3, .labs-card-teal strong { color: #008d99; }
.labs-card-yellow { background: #fff8d9; } .labs-card-yellow h3, .labs-card-yellow strong { color: #936900; }
.labs-card-purple { background: #f2edff; } .labs-card-purple h3, .labs-card-purple strong { color: #7048c5; }

.labs-table-scroll { margin: 0 -0.25rem; overflow-x: auto; padding: .25rem; }
.labs-table { border-collapse: separate; border-spacing: .35rem; min-width: 56rem; width: 100%; }
.labs-table th, .labs-table td { border: 1px solid var(--labs-rule); padding: .75rem; text-align: left; vertical-align: top; }
.labs-table thead th { background: var(--labs-navy); border-color: var(--labs-navy); color: #fff; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.labs-table tbody th { background: #f2edff; color: var(--labs-navy); min-width: 8rem; }
.labs-table tbody td { background: #fff; color: var(--labs-navy); font-size: .88rem; line-height: 1.45; }
.labs-tone-pink .labs-table tbody th { background: #fff0f6; }
.labs-tone-teal .labs-table tbody th { background: #e8fbfb; }
.labs-tone-yellow .labs-table tbody th { background: #fff8d9; }

.labs-callout { border: 1px solid var(--labs-rule); border-radius: 1rem; margin-top: 1.5rem; padding: 1.15rem 1.3rem; }
.labs-callout strong { display: block; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
.labs-callout p { font-weight: 650; margin: .45rem 0 0; }
.labs-callout-navy { background: var(--labs-navy); color: #fff; }
.labs-callout-navy strong { color: var(--labs-yellow); }
.labs-callout-teal { background: #e8fbfb; } .labs-callout-teal strong { color: #008d99; }
.labs-callout-pink { background: #fff0f6; } .labs-callout-pink strong { color: var(--labs-pink); }
.labs-callout-yellow { background: #fff8d9; } .labs-callout-yellow strong { color: #936900; }
.labs-callout-purple { background: #f2edff; } .labs-callout-purple strong { color: #7048c5; }

.labs-source-list { display: grid; gap: .75rem; }
.labs-source-list article { background: #fff; border: 1px solid var(--labs-rule); border-radius: .8rem; padding: 1rem 1.15rem; }
.labs-source-list h3 { font-size: 1rem; margin: 0 0 .3rem; }
.labs-source-list h3 a { color: var(--labs-purple); }
.labs-source-list p { margin: 0; }
.labs-download-row { margin: 2rem 0 0; text-align: center; }

.labs-game-section {
  background: var(--labs-navy);
  border-radius: 1.5rem;
  color: #fff;
  margin-top: 4rem;
  padding: clamp(1.5rem, 5vw, 4rem);
}
.labs-game-section > p { max-width: 52rem; }
.labs-game-section .labs-kicker { color: var(--labs-yellow); }

@media (max-width: 900px) {
  .labs-panel-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labs-cover-inner { min-height: 0; }
}

@media (max-width: 640px) {
  .labs-pack { padding-inline: .75rem; }
  .labs-pack-cover { border-radius: 1rem; padding: .55rem; }
  .labs-cover-inner { border-radius: .7rem; padding: 2.5rem 1.25rem; }
  .labs-brand { margin-bottom: 2.5rem; }
  .labs-cover-inner h1 { font-size: clamp(4rem, 25vw, 6.5rem); }
  .labs-cover-inner .ss-button-pair { align-items: stretch; flex-direction: column; }
  .labs-cover-inner .ss-button { text-align: center; }
  .labs-safety { margin-bottom: 2rem; }
  .labs-panel-map, .labs-pregnancy-grid { grid-template-columns: 1fr; }
  .labs-panel-card, .labs-pregnancy-card { min-height: 0; }
  .labs-pack-section { border-radius: 1rem; padding: 1.25rem .9rem; }
  .labs-pack-section > header { padding-inline: .25rem; }
  .labs-pack-section :is(h1, h2), .labs-game-section h2 { font-size: 2.1rem; }
  .labs-page-number { position: static; display: block; margin-bottom: .5rem; }
  .labs-kicker { padding-right: 0; }
}