/* Campaign landing pages (fundraising, school design competition).
   Layout after a sell-and-keep-the-profit fundraising site: hero banner,
   solid entry tiles, three-step how it works, product boxes with potential
   profit and a running total. Flat and square in the Aura Sight palette:
   solid colour blocks, hairline rules, no gradients or shadows. */

.cp {
  --cream: #F2E8DA;
  --stone: #ECE7DB;
  --ink: #20252E;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- hero: a full-bleed cream band, text beside the box ---------- */
.cp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: 0 calc(-1 * var(--frame-pad));
  padding: clamp(28px, 5vh, 56px) var(--frame-pad);
  background: linear-gradient(180deg, #E4E9F2 0%, #DCE3F0 30%, #E8DCD6 65%, #F2E4D2 100%);
}
.cp-hero > * { min-width: 0; }
.cp-hero .product-crumbs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 26px; }
.cp-hero__title {
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -0.035em;
  color: var(--bone-0);
}
.cp-hero__title span { color: var(--corona); }
.cp-hero__kicker { margin: 18px 0 0; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; color: var(--corona-dim); }
.cp-hero__lede { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--bone-1); }
.cp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.cp-hero__media { position: relative; margin: 0; }
.cp-hero__media > img { border: 6px solid #fff; box-sizing: border-box; background: var(--cream); }
.cp-hero__media img { display: block; width: 100%; height: auto; }
.cp-hero__media--frame { padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); background: #fff; border: 1px solid var(--line-1); }
.cp-hero__media--frame img { mix-blend-mode: normal; }
.cp-hero__media--frame figcaption { margin-top: 18px; text-align: center; }

/* ---------- entry tiles: four solid blocks ---------- */
.cp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 calc(-1 * var(--frame-pad)); }
.cp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 26px var(--frame-pad) 26px clamp(20px, 2.4vw, 32px);
  transition: filter var(--dur-fast) var(--ease-out);
}
.cp-tile:first-child { padding-left: var(--frame-pad); }
.cp-tile:hover { filter: brightness(1.08); }
.cp-tile__label { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.cp-tile__text { font-size: 15px; line-height: 1.45; max-width: 26ch; }
.cp-tile__go { position: absolute; right: 24px; bottom: 20px; font-size: 22px; transition: transform var(--dur-fast) var(--ease-out); }
.cp-tile:hover .cp-tile__go { transform: translateX(4px); }
.cp-tile--ink { background: linear-gradient(135deg, #1B2029 0%, #2E3550 100%); color: #FBF7EF; }
.cp-tile--corona { background: linear-gradient(135deg, #8E4E36 0%, #C97B5A 100%); color: #FBF7EF; }
.cp-tile--cream { background: linear-gradient(135deg, #E6E0D2 0%, #F4E6D6 100%); color: var(--bone-0); }
.cp-tile--slate { background: linear-gradient(135deg, #38404B 0%, #56607A 100%); color: #FBF7EF; }

/* ---------- sections ---------- */
.cp-section { margin-top: clamp(64px, 10vh, 112px); }
.cp-h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bone-0);
  margin-bottom: 28px;
}
.cp-head { max-width: 62ch; margin-bottom: 28px; }
.cp-head .cp-h2 { margin-bottom: 10px; }
.cp-head p { margin: 0; }
.cp-note { margin: 24px 0 0; font-size: 16px; }
.cp-note a, .cp-fine a, .cp-kits a, .cp-faq__row p a, .cp-links a, .cp-terms a {
  color: var(--corona-dim);
  border-bottom: 1px solid currentColor;
}
.cp-note a:hover, .cp-kits a:hover, .cp-faq__row p a:hover, .cp-links a:hover { color: var(--corona-deep); }

/* how it works: three big numbered columns */
.cp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.cp-steps li { padding-top: 18px; border-top: 2px solid var(--bone-0); }
.cp-steps__num { display: block; font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--corona); }
.cp-steps h3 { margin: 14px 0 8px; font-size: 26px; font-weight: 500; letter-spacing: -0.015em; }
.cp-steps p { margin: 0; max-width: 34ch; }

/* boxes: four product tiles, big numbers only */
.cp-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cp-box { position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; border: 1px solid var(--line-2); background: var(--paper-bright); transition: border-color var(--dur-fast); }
.cp-box__img { display: block; max-width: none; width: calc(100% + 44px); height: 160px; margin: -24px -22px 20px; object-fit: contain; background: #F3E7D8; padding: 12px; box-sizing: border-box; }
.cp-box__name { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--bone-0); }
.cp-box__pairs { margin: 2px 0 0; font-size: 17px; color: var(--bone-1); }
.cp-box__pay, .cp-box__keep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; }
.cp-box__pay { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cp-box__keep { margin-top: 14px; padding: 14px 16px; background: linear-gradient(120deg, #F8E3D2 0%, #F1DCE6 45%, #DDE6F5 100%); }
.cp-box__pay span, .cp-box__keep span { flex-basis: 100%; font-size: 15px; font-weight: 500; color: var(--bone-1); }
.cp-box__pay strong { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--bone-0); font-variant-numeric: tabular-nums; }
.cp-box__pay small { font-size: 16px; color: var(--bone-1); }
.cp-box__keep span { color: var(--bone-0); }
.cp-box__keep strong { font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--corona-dim); font-variant-numeric: tabular-nums; }
.cp-boxes__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.cp-boxes__cta span { font-size: 15px; color: var(--bone-1); }
.cp-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); max-width: 90ch; }
.cp-kits { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.cp-kits h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.cp-kits p { margin: 0; max-width: 80ch; }

/* who fundraises */
.cp-who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cp-who__card { padding: 22px 22px 24px; background: var(--stone); border-top: 3px solid var(--corona); }
.cp-who__card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.cp-who__card p { margin: 0; font-size: 15px; }

/* what arrives */
.cp-arrives__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cp-arrives figure { margin: 0; }
.cp-arrives img { display: block; width: 100%; height: 340px; object-fit: contain; background: var(--cream); }
.cp-arrives figcaption { padding: 14px 0 0; font-size: 15px; max-width: 52ch; }
.cp-arrives figcaption strong { font-weight: 500; color: var(--bone-0); }
.cp-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line-2); }
.cp-checks li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--line-1); }
.cp-checks li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 10px; height: 10px; background: var(--corona); }

/* terms and prizes: a ledger */
.cp-terms__list { margin: 0; border-top: 2px solid var(--bone-0); }
.cp-terms__list > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line-1); }
.cp-terms__list dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--corona-dim);
  padding-top: 4px;
}
.cp-terms__list dd { margin: 0; max-width: 70ch; color: var(--bone-0); }

/* school: the eight safety rules */
.cp-rules__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cp-rules__grid figure { margin: 0; }
.cp-rules__grid img { display: block; width: 100%; height: 180px; object-fit: contain; background: #EAE5D9; padding: 12px; box-sizing: border-box; }
.cp-rules__grid figcaption { display: flex; gap: 10px; padding: 12px 0 0; font-size: 15px; line-height: 1.4; color: var(--bone-0); }
.cp-rules__grid figcaption span { font-family: var(--font-mono); font-size: 12px; color: var(--corona-dim); padding-top: 2px; }

/* school: planned dates */
.cp-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.cp-dates li { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 2px solid var(--corona); }
.cp-dates li:last-child { border-top-color: var(--bone-0); }
.cp-dates strong { font-size: 18px; font-weight: 500; color: var(--bone-0); }
.cp-dates span { font-size: 15px; color: var(--text-muted); }

/* questions: ruled folds */
.cp-faq__list { border-top: 2px solid var(--bone-0); max-width: 900px; }
.cp-faq__row { border-bottom: 1px solid var(--line-1); }
.cp-faq__row summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; cursor: pointer; list-style: none; }
.cp-faq__row summary::-webkit-details-marker { display: none; }
.cp-faq__row summary h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--bone-0); }
.cp-faq__row summary:hover h3 { color: var(--corona-dim); }
.cp-faq__row summary:focus-visible { outline: 1px solid var(--corona); outline-offset: 4px; }
.cp-faq__icon { position: relative; flex: none; width: 16px; height: 16px; }
.cp-faq__icon::before, .cp-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--bone-0); }
.cp-faq__icon::after { transform: rotate(90deg); }
.cp-faq__row[open] .cp-faq__icon::after { display: none; }
.cp-faq__row p { margin: -4px 0 20px; max-width: 70ch; }

/* register */
.cp-register {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
  margin-left: calc(-1 * var(--frame-pad));
  margin-right: calc(-1 * var(--frame-pad));
  padding: clamp(32px, 6vh, 64px) var(--frame-pad);
  background: var(--stone);
  scroll-margin-top: 80px;
}
.cp-register > span[id]:empty { position: absolute; top: 0; left: 0; }
.cp-register__pitch p { margin: 0 0 18px; max-width: 44ch; font-size: 17px; }
.cp-register__form { padding: clamp(20px, 3vw, 32px); background: var(--paper-bright); border: 1px solid var(--line-2); }

.cp-links { margin: clamp(32px, 5vh, 48px) 0 clamp(48px, 8vh, 80px); max-width: 80ch; line-height: 1.7; color: var(--text-muted); }

/* ---------- holographic starburst sticker ----------
   After the price sticker on the glasses page: an oval starburst with a
   die-cut white edge over iridescent foil that shifts slowly. */
.cp-holo {
  --burst: polygon(50.00% 0.00%, 54.81% 7.27%, 61.13% 1.25%, 64.20% 9.41%, 71.69% 4.95%, 72.88% 13.59%, 81.17% 10.91%, 80.41% 19.59%, 89.09% 18.83%, 86.41% 27.12%, 95.05% 28.31%, 90.59% 35.80%, 98.75% 38.87%, 92.73% 45.19%, 100.00% 50.00%, 92.73% 54.81%, 98.75% 61.13%, 90.59% 64.20%, 95.05% 71.69%, 86.41% 72.88%, 89.09% 81.17%, 80.41% 80.41%, 81.17% 89.09%, 72.88% 86.41%, 71.69% 95.05%, 64.20% 90.59%, 61.13% 98.75%, 54.81% 92.73%, 50.00% 100.00%, 45.19% 92.73%, 38.87% 98.75%, 35.80% 90.59%, 28.31% 95.05%, 27.12% 86.41%, 18.83% 89.09%, 19.59% 80.41%, 10.91% 81.17%, 13.59% 72.88%, 4.95% 71.69%, 9.41% 64.20%, 1.25% 61.13%, 7.27% 54.81%, 0.00% 50.00%, 7.27% 45.19%, 1.25% 38.87%, 9.41% 35.80%, 4.95% 28.31%, 13.59% 27.12%, 10.91% 18.83%, 19.59% 19.59%, 18.83% 10.91%, 27.12% 13.59%, 28.31% 4.95%, 35.80% 9.41%, 38.87% 1.25%, 45.19% 7.27%);
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 5px;
  background: #fff;
  clip-path: var(--burst);
  filter: drop-shadow(0 6px 10px rgba(32, 37, 46, .25));
  transform: rotate(-10deg);
}
.cp-holo__foil {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  clip-path: var(--burst);
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 6px, rgba(255, 255, 255, .35) 6px 7px),
    radial-gradient(60% 50% at 30% 25%, rgba(255, 255, 255, .85), transparent 60%),
    conic-gradient(from 200deg, #FBC9D9, #F9E2A8, #BDF0D2, #B9D6FA, #D9C2FA, #FBC9D9);
  background-size: 100% 100%, 100% 100%, 220% 220%;
  background-position: 0 0, 0 0, 0% 0%;
  animation: cp-foil 7s ease-in-out infinite alternate;
}
@keyframes cp-foil {
  to { background-position: 0 0, 0 0, 100% 100%; filter: hue-rotate(40deg); }
}
.cp-holo__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}
.cp-holo__text small { font-size: .38em; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.cp-holo--hero { top: -10px; left: 2%; width: clamp(150px, 15vw, 200px); aspect-ratio: 1.15; font-size: clamp(30px, 3vw, 40px); }
.cp-holo--hero small:first-child { margin-bottom: 4px; }
.cp-holo--hero small:last-child { margin-top: 4px; }
.cp-hero__media--frame .cp-holo--hero { top: -64px; left: auto; right: -12px; width: clamp(130px, 12vw, 160px); font-size: clamp(26px, 2.4vw, 32px); }
.cp-holo--box { top: 8px; right: 8px; width: 104px; aspect-ratio: 1.12; font-size: 19px; transform: rotate(8deg); }
.cp-box:hover .cp-holo--box { transform: rotate(0deg) scale(1.06); transition: transform .3s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .cp-holo__foil { animation: none; } }

/* ---------- solid colour bands ----------
   Every section is a full-width band of one solid colour; items sit
   straight on the colour, with no cards or grid lines around them. */
.cp { isolation: isolate; }
.cp-hero, .cp-band { position: relative; }
.cp-hero { margin: 0; padding: clamp(36px, 6vh, 64px) 0; background: none; }
.cp-hero::before, .cp-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--band-bg, #F5E6D0);
}
.cp-hero > img, .cp-hero__media > img { border: 0; background: none; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.cp-band { margin-top: 0; padding: clamp(56px, 9vh, 104px) 0; }
.cp-band--ink { --band-bg: #20252E; }
.cp-band--corona { --band-bg: #9A563C; }
.cp-band--slate { --band-bg: #38404B; }
.cp-band--cream { --band-bg: #F2E8DA; }
.cp-band--stone { --band-bg: #ECE7DB; }
.cp-band--paper { --band-bg: var(--void-0); }
.cp-band--ink, .cp-band--corona, .cp-band--slate { color: rgba(251, 247, 239, .86); }
.cp-band--ink :is(.cp-h2, h3, strong, dd, .cp-steps__num),
.cp-band--corona :is(.cp-h2, h3, strong, dd, .cp-box__name),
.cp-band--slate :is(.cp-h2, h3, strong, dd) { color: #FBF7EF; }
.cp-band--ink a, .cp-band--corona a:not(.btn), .cp-band--slate a { color: #FFD9BF; }
.cp-tiles .cp-tile--ink { background: #2E3550; }
.cp-tiles .cp-tile--corona { background: #C97B5A; }
.cp-tiles .cp-tile--cream { background: #F4E6D6; }
.cp-tiles .cp-tile--slate { background: #56607A; }
.cp-tiles { position: relative; margin: 0; }
.cp-tiles::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #F2E8DA; }
.cp-tile, .cp-tile:first-child { padding-left: clamp(20px, 2.4vw, 32px); }

/* how it works on ink */
.cp-band--ink .cp-steps li { border-top-color: rgba(251, 247, 239, .5); }
.cp-band--ink .cp-steps__num { color: #F2B892; }

/* boxes on terracotta: the box behind each set of numbers */
.cp-band--corona .cp-boxes { gap: clamp(16px, 2.5vw, 36px); }
.cp-band--corona .cp-box { padding: 0; border: 0; background: none; }
.cp-band--corona .cp-box__img {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 190px;
  margin: 0 0 -24px;
  padding: 0;
  background: none;
  object-fit: contain;
}
.cp-band--corona .cp-box__pairs, .cp-band--corona .cp-box__pay span, .cp-band--corona .cp-box__pay small { color: rgba(251, 247, 239, .78); }
.cp-band--corona .cp-box__pay { border-top-color: rgba(251, 247, 239, .35); }
.cp-band--corona .cp-box__pay strong { color: #FBF7EF; }
.cp-band--corona .cp-box__keep { margin-top: 10px; padding: 0; background: none; }
.cp-band--corona .cp-box__keep span { color: rgba(251, 247, 239, .78); }
.cp-band--corona .cp-box__keep strong { color: #FFD9BF; font-size: 52px; }
.cp-band--corona .cp-holo--box { top: -6px; right: -6px; }
.cp-band--corona .cp-boxes__cta span, .cp-band--corona .cp-fine { color: rgba(251, 247, 239, .78); }
.cp-band--corona .cp-boxes__cta .btn { background: #FBF7EF; color: var(--corona-deep); }
.cp-band--corona .cp-boxes__cta .btn:hover { background: #fff; }
.cp-band--corona .cp-kits { border-top-color: rgba(251, 247, 239, .35); }
.cp-band--corona .cp-checks { border-top-color: rgba(251, 247, 239, .35); }
.cp-band--corona .cp-checks li { border-bottom-color: rgba(251, 247, 239, .2); color: #FBF7EF; }
.cp-band--corona .cp-checks li::before { background: #FBF7EF; }

/* who: plain columns on stone */
.cp-band--stone .cp-who__card { padding: 16px 0 0; background: none; border-top: 2px solid var(--corona); }

/* what arrives on slate */
.cp-band--slate .cp-arrives img { background: #F2E8DA; }
.cp-band--slate .cp-checks { border-top-color: rgba(251, 247, 239, .3); }
.cp-band--slate .cp-checks li { border-bottom-color: rgba(251, 247, 239, .18); }
.cp-band--slate .cp-checks li::before { background: #F2B892; }
.cp-band--slate .cp-terms__list { border-top-color: rgba(251, 247, 239, .6); }
.cp-band--slate .cp-terms__list > div { border-bottom-color: rgba(251, 247, 239, .18); }
.cp-band--slate .cp-terms__list dt { color: #F2B892; }

/* safety rules sit straight on cream */
.cp-band--cream .cp-rules__grid img { background: none; padding: 8px 0 0; }

/* register on terracotta */
.cp-band--corona.cp-register { margin: 0; padding: clamp(56px, 9vh, 104px) 0; background: none; }
.cp-band--corona .reply-note { color: #FFD9BF; }
.cp-band--corona .cp-register__form { border: 0; }
.cp-links { margin-top: clamp(40px, 6vh, 56px); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .cp-boxes, .cp-who__grid, .cp-rules__grid, .cp-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-tile, .cp-tile:first-child { padding-left: var(--frame-pad); }
}
@media (max-width: 860px) {
  .cp-hero, .cp-register { grid-template-columns: minmax(0, 1fr); }
  .cp-steps, .cp-arrives__grid, .cp-checks { grid-template-columns: minmax(0, 1fr); }
  .cp-terms__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 560px) {
  .cp-tiles, .cp-boxes, .cp-who__grid, .cp-dates { grid-template-columns: minmax(0, 1fr); }
  .cp-rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cp-rules__grid img { height: 120px; }
  .cp-tile { min-height: 0; }
  .cp-arrives img { height: 220px; }
  .cp-holo--hero, .cp-hero__media--frame .cp-holo--hero { top: -16px; left: auto; right: 0; width: 120px; font-size: 24px; }
}
/* safety illustrations are drawn on #E9E4D8: match the band so they sit on it */
.cp-band--cream.cp-rules { --band-bg: #E9E4D8; }

/* family kit cartons */
.cp-kitcartons__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cp-kitcartons__media { margin: 0; }
.cp-kitcartons__media img { display: block; width: 100%; height: auto; }
.cp-kitcartons__inkit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--bone-0); }
.cp-kitcartons__inkit li { display: flex; flex-direction: column; padding: 14px 0 0; }
.cp-kitcartons__inkit strong { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--bone-0); }
.cp-kitcartons__inkit span { font-size: 15px; color: var(--bone-1); }
.cp-kitcartons__cartons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cp-kitcartons .cp-box { padding-top: 26px; }
.cp-box__note { margin: 12px 0 0; font-size: 15px; color: var(--bone-1); }
.cp-kitcartons__facts { margin: 32px 0 0; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.cp-kitcartons__facts > div { padding: 16px 0; }
.cp-kitcartons__facts dt { font-size: 15px; font-weight: 600; color: var(--bone-0); margin-bottom: 4px; }
.cp-kitcartons__facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.cp-kitcartons .cp-head a { color: var(--corona-dim); border-bottom: 1px solid currentColor; }
@media (max-width: 960px) {
  .cp-kitcartons__grid, .cp-kitcartons__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cp-kitcartons__cartons { grid-template-columns: minmax(0, 1fr); }
}
.cp-kitcartons .cp-box { padding: 56px 0 0; border: 0; background: none; }
.cp-kitcartons .cp-holo--box { top: -8px; right: 0; }
.cp-kitcartons .cp-box__keep { background: none; padding: 0; margin-top: 10px; }
.cp-kitcartons .cp-box__keep strong { font-size: 52px; }
/* school: where the money goes */
.cp-money__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.cp-money__split > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--corona); }
.cp-money__split strong { font-size: clamp(56px, 7vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--corona-dim); }
.cp-money__split span { font-size: 17px; max-width: 34ch; color: var(--bone-0); }
@media (max-width: 560px) { .cp-money__split { grid-template-columns: minmax(0, 1fr); } }