/* Press kit sections (1.63.0, M531): Fact sheet, Words to copy, Logos to download, Colours and type, Spotlight, Band with a list.
   In the site's tokens, so they follow the look, light and dark. */
.kit-head { max-width: 640px; margin: 0 0 28px; text-align: left; }
.kit-head .cms-lede { margin-top: 8px; }
.kit-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--blue) 11%, var(--card)); color: var(--blue); }
.kit-ic svg { width: 18px; height: 18px; }

/* Fact sheet: one card, rows of a label and its value. */
.kit-facts { display: grid; margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.kit-facts--c2 { grid-template-columns: 1fr 1fr; }
.kit-fact { display: grid; grid-template-columns: 40px 172px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--border); }
.kit-fact--plain { grid-template-columns: 172px minmax(0, 1fr); }
.kit-facts--c2 .kit-fact:nth-child(-n+2), .kit-facts--c1 .kit-fact:first-child { border-top: 0; }
.kit-facts--c2 .kit-fact:nth-child(odd) { border-right: 1px solid var(--border); }
.kit-fact dt { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kit-fact dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.kit-fact .kit-ic { grid-row: auto; }

/* Words to copy. */
.kit-copies { display: grid; gap: 18px; }
.kit-copies--two { grid-template-columns: 1fr 1.4fr; }
.kit-copy { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.kit-copy__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kit-copy__h b { font-size: 15px; color: var(--ink); }
.kit-copy__h small { color: var(--muted); font-size: 13px; }
.kit-copy p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.kit-copy__btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--ink); font: 600 13px var(--font-body, inherit); cursor: pointer; }
.kit-copy__btn:hover { border-color: var(--blue); color: var(--blue); }
.kit-copy__btn.is-done { color: #15803D; border-color: color-mix(in oklab, #16A34A 45%, var(--border)); }

/* Logos to download. */
.kit-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.kit-split .kit-head { margin: 0; }
.kit-split__btn { gap: 8px; }
.kit-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kit-logo { margin: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--card); }
.kit-logo__art { height: 150px; display: grid; place-items: center; padding: 22px; }
.kit-logo__art img { max-width: 100%; max-height: 72px; }
.kit-logo__art--white { background: #fff; }
.kit-logo__art--dark { background: color-mix(in oklab, var(--blue) 14%, #070d1f); }
.kit-logo__art--accent { background: var(--blue); }
.kit-logo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.kit-logo figcaption b { font-size: 14px; font-weight: 600; color: var(--ink); }
.kit-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; background: color-mix(in oklab, var(--blue) 10%, var(--card)); color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: none; }
.kit-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.kit-rule { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.kit-rule > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.kit-rule--do > span { background: #16A34A; }
.kit-rule--dont > span { background: #DC2626; }
.kit-rule b { display: block; margin-bottom: 2px; }

/* Colours and type. */
.kit-brand { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.kit-brand--solo { grid-template-columns: 1fr; }
.kit-sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kit-sw > div { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--card); }
.kit-sw i { display: block; height: 92px; }
.kit-sw p { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.kit-sw p b { display: block; font-size: 14px; color: var(--ink); }
.kit-sw p code { display: block; font: 12.5px ui-monospace, monospace; color: var(--muted); }
.kit-type { border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 18px 20px; display: grid; gap: 14px; align-content: start; }
.kit-type > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.kit-type > div:last-child { border: 0; padding: 0; }
.kit-type > div > span { font-size: 40px; line-height: 1; color: var(--ink); }
.kit-type small { color: var(--muted); font-size: 13px; text-align: right; }
.kit-type small b { display: block; color: var(--ink); font-size: 14.5px; }

/* Spotlight. */
.kit-spot { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 28px; }
.kit-spot__photo { width: 150px; height: 150px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: var(--band); color: #fff; font: 700 44px var(--font-display, inherit); }
.kit-spot__photo img { width: 100%; height: 100%; object-fit: cover; }
.kit-spot blockquote { margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--ink); }
.kit-spot__who { margin: 0; color: var(--muted); font-size: 14.5px; }
.kit-spot__who b { display: block; color: var(--ink); font-size: 16px; }
.kit-spot .cms-btns { margin-top: 16px; }

/* Band with a list: words and buttons, a box of lines beside them. */
.kit-band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.kit-band--big .kit-band__h { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin: 10px 0 14px; }
.kit-band .cms-lede { max-width: 540px; }
.kit-band .cms-btns { margin-top: 22px; }
.kit-band__box { border-radius: 20px; padding: 22px; background: color-mix(in oklab, currentColor 8%, transparent); border: 1px solid color-mix(in oklab, currentColor 20%, transparent); }
.kit-band__bh { display: block; margin-bottom: 10px; font-size: 15px; }
.kit-band__box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.kit-band__box li { display: flex; gap: 12px; align-items: center; padding: 6px 0; font-size: 15px; }
.kit-band__li--ic > span:first-child { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, currentColor 12%, transparent); }
.kit-band__t small { display: block; font-size: 12.5px; opacity: .72; }
/* On a plain section the box is a card like the rest of the page, its icons in the accent. */
.cms-sec:not(.cms-sec--band) .kit-band__box { background: var(--card); border-color: var(--border); color: var(--ink); }
.cms-sec:not(.cms-sec--band) .kit-band__li--ic > span:first-child { background: color-mix(in oklab, var(--blue) 11%, var(--card)); color: var(--blue); }
.cms-sec:not(.cms-sec--band) .kit-band__t small { color: var(--muted); opacity: 1; }
.cms-sec:has(> .kit-deep), .cms-sec:has(.kit-deep) { background: color-mix(in oklab, var(--blue) 14%, #070d1f); color: #fff; --muted: rgba(255, 255, 255, .78); --ink: #fff; }

@media (max-width: 900px) {
    .kit-facts--c2, .kit-copies--two, .kit-brand, .kit-band, .kit-rules { grid-template-columns: 1fr; }
    .kit-fact, .kit-fact--plain { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 16px 18px; }
    .kit-fact--plain { grid-template-columns: 1fr; }
    .kit-fact .kit-ic { grid-row: 1 / span 2; }
    .kit-facts--c2 .kit-fact:nth-child(odd) { border-right: 0; }
    .kit-facts--c2 .kit-fact:nth-child(2) { border-top: 1px solid var(--border); }
    .kit-logos { grid-template-columns: 1fr 1fr; }
    .kit-logo figcaption { flex-direction: column; align-items: flex-start; }
    .kit-logo__art { height: 120px; }
    .kit-sw { grid-template-columns: repeat(3, 1fr); }
    .kit-spot { grid-template-columns: 1fr; }
    .kit-band { gap: 28px; }
}