/* Categories page palette follows the PlayRank shell: ink, white and clear electric blue. */
body[data-helper-page] main {
  --cat-ink: #101216;
  --cat-muted: #5d626a;
  --cat-blue: #16a9e8;
  --cat-pale: #f2f8fb;
  color: var(--cat-ink);
  background: #fff;
}
body[data-helper-page] > .hero-header { position: absolute; z-index: 20; inset: 0 0 auto; background-color: #fff; box-shadow: 0 1px 0 rgb(16 18 22 / 7%); }
body[data-helper-page] { padding-block-start: 167px !important; }
body[data-helper-page] main * { box-sizing: border-box; }
body[data-helper-page] main > section { position: relative; padding: clamp(76px, 9vw, 142px) 24px; }
body[data-helper-page] main > section:nth-child(even) { background: var(--cat-pale); }
body[data-helper-page] .category-shell { width: min(1260px, 100%); margin-inline: auto; }
body[data-helper-page] main > .category-overview { background: #fff; }
body[data-helper-page] main > .category-feature { background: #f2f8fb; }
body[data-helper-page] main > .category-device { background: #fff; }
body[data-helper-page] .category-section__inner { min-width: 0; }
body[data-helper-page] .category-section__heading--wide { max-width: 800px; }
body[data-helper-page] .category-kicker { margin: 0 0 18px; color: #087db5; font-size: 13px; font-weight: 800; letter-spacing: .15em; line-height: 1.3; text-transform: uppercase; }
body[data-helper-page] main h1,
body[data-helper-page] main h2,
body[data-helper-page] main h3 { color: var(--cat-ink); }
body[data-helper-page] main h1 { max-width: 760px; margin: 0; font-size: clamp(46px, 6.1vw, 82px); font-weight: 750; letter-spacing: -.055em; line-height: .99; }
body[data-helper-page] main h2 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); font-weight: 740; letter-spacing: -.045em; line-height: 1.04; }
body[data-helper-page] main h3 { margin: 0; font-size: 24px; font-weight: 720; letter-spacing: -.025em; line-height: 1.15; }
body[data-helper-page] main p { color: var(--cat-muted); }
body[data-helper-page] .category-hero { padding-top: 78px; background: #fff; }
body[data-helper-page] .category-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr); align-items: center; gap: clamp(38px, 7vw, 94px); }
body[data-helper-page] .category-hero__copy { position: relative; z-index: 1; }
body[data-helper-page] .category-lede { max-width: 600px; margin: 27px 0 32px; font-size: 19px; line-height: 1.65; }
body[data-helper-page] .category-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 22px; border: 0; border-radius: 999px; padding: 14px 23px; color: #fff; background-color: #087fba; font: 700 15px/1.2 Onest, Arial, sans-serif; text-decoration: none; box-shadow: 0 9px 22px rgb(8 127 186 / 18%); transition: transform .2s ease, background-color .2s ease; }
body[data-helper-page] .category-button:hover { transform: translateY(-2px); background-color: #056b9d; }
body[data-helper-page] .category-button:focus-visible, body[data-helper-page] main a:focus-visible, body[data-helper-page] main input:focus-visible { outline: 3px solid #f0b51b; outline-offset: 4px; }
body[data-helper-page] .category-hero__art { position: relative; margin: 0; padding: 12px 12px 36px; border-radius: 31px; background: #e7f6fc; transform: rotate(1.6deg); }
body[data-helper-page] .category-hero__art img { display: block; width: 100%; aspect-ratio: 1.16 / 1; border-radius: 23px; object-fit: cover; }
body[data-helper-page] .category-hero__art figcaption { position: absolute; right: 20px; bottom: 12px; left: 20px; color: #344653; font-size: 12px; font-weight: 600; }
body[data-helper-page] .category-hero__stamp { position: absolute; right: -28px; bottom: 38px; display: grid; width: 104px; height: 104px; place-content: center; border: 5px solid #fff; border-radius: 50%; color: #101216; background: #d7f044; font-size: 14px; font-weight: 900; letter-spacing: .06em; line-height: 1.2; text-align: center; transform: rotate(10deg); }
body[data-helper-page] .category-section__heading { max-width: 720px; margin: 0 auto 54px; text-align: center; }
body[data-helper-page] .category-section__heading > p:last-child { margin: 20px auto 0; max-width: 640px; font-size: 17px; line-height: 1.6; }
body[data-helper-page] .category-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body[data-helper-page] .genre-card { position: relative; min-height: 230px; padding: 28px; border-radius: 19px; background: #e5f5ff; }
body[data-helper-page] .genre-card--blue { background: #e5f5ff; }
body[data-helper-page] .genre-card--lime { background: #eef5c9; }
body[data-helper-page] .genre-card--peach { background: #ffe9db; }
body[data-helper-page] .genre-card--violet { background: #eee8ff; }
body[data-helper-page] .genre-card--mint { background: #dcf3e9; }
body[data-helper-page] .genre-card--sand { background: #f8edda; }
body[data-helper-page] .genre-card__number { display: block; margin-bottom: 28px; color: #4a7184; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
body[data-helper-page] .genre-card p { max-width: 310px; margin: 12px 0 25px; font-size: 15px; line-height: 1.55; }
body[data-helper-page] .genre-card__tag { display: inline-flex; border: 1px solid rgb(16 18 22 / 22%); border-radius: 30px; padding: 6px 11px; color: #23272c; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
body[data-helper-page] .category-note { margin: 22px 0 0; font-size: 13px; text-align: center; }
body[data-helper-page] .category-feature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(42px, 8vw, 112px); }
body[data-helper-page] .category-feature__media { padding: 13px; border-radius: 26px; background: #d8f2fc; }
body[data-helper-page] .category-feature__media img { display: block; width: 100%; aspect-ratio: 1.13 / .9; border-radius: 17px; object-fit: cover; }
body[data-helper-page] .category-feature__copy > p:not(.category-kicker) { margin: 22px 0; font-size: 17px; line-height: 1.65; }
body[data-helper-page] .category-checklist { display: grid; gap: 15px; margin: 27px 0 0; padding: 0; list-style: none; }
body[data-helper-page] .category-checklist li { position: relative; padding-left: 29px; color: #424851; font-size: 15px; line-height: 1.55; }
body[data-helper-page] .category-checklist li::before { position: absolute; top: 0; left: 0; color: #0785bf; content: "↗"; font-weight: 800; }
body[data-helper-page] .category-checklist strong { color: var(--cat-ink); }
body[data-helper-page] .category-time { background: #11151a !important; }
body[data-helper-page] .category-time h2, body[data-helper-page] .category-time h3 { color: #fff; }
body[data-helper-page] .category-time .category-kicker { color: #66d2ff; }
body[data-helper-page] .category-time .category-section__heading > p:last-child { color: #c4cbd1; }
body[data-helper-page] .time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body[data-helper-page] .time-card { position: relative; min-height: 260px; padding: 27px; border-radius: 17px; background: #f1f8fb; }
body[data-helper-page] .time-card--dark { color: #fff; background: #087fba; }
body[data-helper-page] .time-card--dark h3, body[data-helper-page] .time-card--dark p { color: #fff; }
body[data-helper-page] .time-card__time { display: block; margin-bottom: 35px; color: #087fba; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body[data-helper-page] .time-card--dark .time-card__time { color: #d6f3ff; }
body[data-helper-page] .time-card p { max-width: 300px; margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
body[data-helper-page] .time-card--dark p { color: #ecf9ff; }
body[data-helper-page] .time-card__line { position: absolute; right: 27px; bottom: 24px; left: 27px; height: 2px; background: rgb(8 127 186 / 30%); }
body[data-helper-page] .time-card--dark .time-card__line { background: rgb(255 255 255 / 56%); }
body[data-helper-page] .category-device__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: clamp(42px, 8vw, 108px); }
body[data-helper-page] .category-device__copy > p:not(.category-kicker) { margin: 22px 0 30px; font-size: 17px; line-height: 1.65; }
body[data-helper-page] .device-points { display: grid; gap: 15px; }
body[data-helper-page] .device-points p { display: grid; gap: 4px; margin: 0; padding: 0 0 14px; border-bottom: 1px solid #d6e0e5; font-size: 14px; line-height: 1.5; }
body[data-helper-page] .device-points strong { color: var(--cat-ink); font-size: 16px; }
body[data-helper-page] .category-device__art { margin: 0; padding: 12px; border-radius: 27px 27px 90px 27px; background: #e8e9ff; }
body[data-helper-page] .category-device__art img { display: block; width: 100%; aspect-ratio: 1.14 / .92; border-radius: 18px 18px 76px 18px; object-fit: cover; }
body[data-helper-page] .category-finder { background: #e9f8fe !important; }
body[data-helper-page] .category-finder__grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: 38px 80px; }
body[data-helper-page] .category-finder__intro p:last-child { max-width: 430px; margin: 20px 0 0; font-size: 16px; line-height: 1.6; }
body[data-helper-page] .category-search { padding: 26px; border: 1px solid #d6e8f0; border-radius: 18px; background: #fff; box-shadow: 0 12px 40px rgb(22 66 88 / 7%); }
body[data-helper-page] .category-search label { display: block; margin-bottom: 10px; color: #20252b; font-size: 14px; font-weight: 750; }
body[data-helper-page] .category-search__row { display: flex; gap: 10px; }
body[data-helper-page] .category-search input { min-width: 0; min-height: 54px; flex: 1; border: 1px solid #b9cbd4; border-radius: 10px; padding: 0 15px; color: #101216; background: #fff; font: 16px/1.4 Onest, Arial, sans-serif; }
body[data-helper-page] .category-search input::placeholder { color: #727d84; }
body[data-helper-page] .category-button--dark { flex: 0 0 auto; border-radius: 10px; background-color: #11151a; box-shadow: none; cursor: pointer; }
body[data-helper-page] .category-button--dark:hover { background-color: #29343b; }
body[data-helper-page] .category-search__help, body[data-helper-page] .category-search__result { margin: 11px 0 0; font-size: 12px; line-height: 1.45; }
body[data-helper-page] .category-search__error { min-height: 18px; margin: 7px 0 0; color: #a52126; font-size: 13px; font-weight: 650; }
body[data-helper-page] .category-search input[aria-invalid="true"] { border-color: #ae2930; background: #fff8f8; }
body[data-helper-page] .category-search__result { color: #17643d; font-weight: 650; }
body[data-helper-page] .category-finder__aside { display: flex; grid-column: 1 / -1; align-items: center; gap: 15px; border-top: 1px solid #c7e3ef; padding-top: 18px; }
body[data-helper-page] .category-finder__aside > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; color: #111; background: #d7f044; font-size: 21px; }
body[data-helper-page] .category-finder__aside p { margin: 0; font-size: 14px; line-height: 1.5; }
body[data-helper-page] .category-next { color: #fff; background: #0782bd !important; }
body[data-helper-page] .category-next__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
body[data-helper-page] .category-next h2 { max-width: 710px; color: #fff; }
body[data-helper-page] .category-next .category-kicker { color: #d0f3ff; }
body[data-helper-page] .category-next__copy > p:last-child { max-width: 650px; margin: 20px 0 0; color: #e5f8ff; font-size: 16px; line-height: 1.6; }
body[data-helper-page] .category-button--light { flex: 0 0 auto; color: #101216; background-color: #d7f044; box-shadow: none; }
body[data-helper-page] .category-button--light:hover { background-color: #e5fb72; }
body[data-helper-page] .genre-card[hidden] { display: none; }
body[data-helper-page].category-reveal-ready [data-product-contract="TZ_2"].reveal-pending { opacity: .01; transform: translateY(18px); }
body[data-helper-page] [data-product-contract="TZ_2"] { transition: opacity .52s ease, transform .52s cubic-bezier(.2,.75,.25,1); }
body[data-helper-page] [data-product-contract="TZ_2"].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  body[data-helper-page] [data-product-contract="TZ_2"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  body[data-helper-page] .category-button { transition: none; }
}
@media (max-width: 900px) {
  body[data-helper-page] main > section { padding: 82px 24px; }
  body[data-helper-page] .category-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(270px, .85fr); gap: 34px; }
  body[data-helper-page] .category-hero__stamp { right: -12px; bottom: 19px; width: 82px; height: 82px; font-size: 11px; }
  body[data-helper-page] .category-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-helper-page] .category-feature__grid, body[data-helper-page] .category-device__grid { gap: 36px; }
  body[data-helper-page] .category-finder__grid { gap: 34px; }
}
@media (max-width: 620px) {
  body[data-helper-page] { padding-block-start: 205px !important; }
  body[data-helper-page] > .hero-header { background-color: #fff; }
  body[data-helper-page] main > section { padding: 65px 20px; }
  body[data-helper-page] .category-hero { padding-top: 50px; }
  body[data-helper-page] .category-hero__grid, body[data-helper-page] .category-feature__grid, body[data-helper-page] .category-device__grid, body[data-helper-page] .category-finder__grid { grid-template-columns: minmax(0, 1fr); }
  body[data-helper-page] .category-hero__grid { gap: 38px; }
  body[data-helper-page] main h1 { font-size: clamp(43px, 12vw, 62px); }
  body[data-helper-page] main h2 { font-size: clamp(34px, 9vw, 46px); }
  body[data-helper-page] .category-lede { margin: 21px 0 25px; font-size: 17px; }
  body[data-helper-page] .category-hero__art { width: calc(100% - 12px); margin-inline: auto; }
  body[data-helper-page] .category-hero__art img { aspect-ratio: 1.14 / .86; }
  body[data-helper-page] .category-hero__stamp { right: -8px; bottom: 15px; }
  body[data-helper-page] .category-section__heading { margin-bottom: 35px; }
  body[data-helper-page] .category-section__heading > p:last-child { font-size: 15px; }
  body[data-helper-page] .category-card-grid, body[data-helper-page] .time-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-helper-page] .genre-card { min-height: 0; padding: 24px; }
  body[data-helper-page] .genre-card__number { margin-bottom: 20px; }
  body[data-helper-page] .genre-card p { margin-bottom: 18px; }
  body[data-helper-page] .category-feature__media { order: 2; }
  body[data-helper-page] .category-checklist { gap: 12px; }
  body[data-helper-page] .time-card { min-height: 220px; }
  body[data-helper-page] .category-device__art { margin-top: 3px; }
  body[data-helper-page] .category-finder__grid { gap: 26px; }
  body[data-helper-page] .category-search { padding: 20px; }
  body[data-helper-page] .category-search__row { flex-direction: column; }
  body[data-helper-page] .category-button--dark { width: 100%; }
  body[data-helper-page] .category-finder__aside { grid-column: auto; }
  body[data-helper-page] .category-next__inner { align-items: flex-start; flex-direction: column; gap: 26px; }
}
