/*
 * /integrations/ad-platforms/realize: LanderLab x Realize (Taboola's
 * performance platform). The page is src/pages/integrations/ad-platforms/
 * realize.astro; its own parts are src/components/realize/. On top of
 * grid.css (the cells), ig-detail.css (the pair, the guide and its
 * contents), integrations.css (the tiles and cards) and product.css.
 * Prefix rz-.
 */

.rz-page {
  --rz-green: #005645;
  --rz-lime: #c9ff5c;
  --rz-ink: #181822;
  --rz-soft: #6b6f7d;
  --rz-line: #e8e8fe;
  --rz-bone: #eceef3;
}

/* ---------- hero ---------- */
.rz-hero__copy { max-width: 800px; padding: 44px 0 44px; }
.rz-pair { margin-top: 26px; }
.rz-hero .gk-hero__title.rz-hero__title { margin-top: 22px; font-size: 56px; }
.rz-hero .gk-hero__sub { max-width: 620px; }

.rz-stage { padding: 32px; }
.rz {
  --rz-k: 1;
  display: grid;
  grid-template-columns: 300px 104px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  padding: 24px;
  font-family: var(--font-ui);
}

/* the campaign */
.rz-camp {
  grid-column: 1; grid-row: 1;
  min-width: 0; margin: 0; padding: 14px;
  display: flex; flex-direction: column;
}
.rz-camp__head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--gk-line); }
.rz-camp__head img { flex: none; width: 22px; height: 22px; }
.rz-camp__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rz-camp__name b { font: 600 12.5px/1.2 var(--font-ui); color: var(--rz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-camp__name span { font: 400 11px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-live {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 5px;
  font: 500 10.5px/1.2 var(--font-ui); color: #1f8f5a; background: #e8f6ee;
}
.rz-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rz-label { margin: 12px 0 8px; font: 500 11px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-ads { display: flex; flex-direction: column; gap: 6px; }
.rz-ad {
  position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 7px; border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.rz-ad:hover { background: #f7f8fb; }
.rz-ad:has(input:checked) { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(35 71 255 / .1); }
.rz-ad:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.rz-ad__img { width: 64px; height: 48px; border-radius: 6px; background: #dfe3ea center / cover no-repeat; }
.rz-ad__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rz-ad__title {
  font: 500 12.5px/1.3 var(--font-ui); color: var(--rz-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rz-ad__meta { display: flex; align-items: center; gap: 8px; font: 400 11px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-ad__angle { padding: 2px 6px; border-radius: 4px; background: #f1f2f5; color: #4b4f5c; }
.rz-ad:has(input:checked) .rz-ad__angle { background: rgb(35 71 255 / .09); color: var(--brand); }
.rz-camp__foot {
  display: flex; align-items: center; gap: 6px;
  margin: auto 0 0; padding-top: 12px;
  font: 400 11px/1.2 var(--font-ui); color: var(--rz-soft);
}
.rz-camp__foot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* the wire, after todesktop.com's: a faint track, a light with a tail */
.rz-wire {
  grid-column: 2; grid-row: 1;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.rz-wire__label {
  position: absolute; top: calc(50% - 30px); left: 50%; translate: -50% 0;
  white-space: nowrap; padding: 3px 7px; border-radius: 5px;
  font: 500 10.5px/1.2 var(--font-ui); color: var(--rz-soft); background: #fff; border: 1px solid var(--gk-line);
  z-index: 1;
}
.rz-wire__track { position: relative; width: 100%; height: 2px; background: #d5d9e3; overflow: hidden; }
.rz-wire__track::before, .rz-wire__track::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: #c3c8d6; box-shadow: 0 0 0 2px #fff;
}
.rz-wire__track { overflow: visible; }
.rz-wire__track::before { left: -3px; }
.rz-wire__track::after { right: -3px; background: var(--brand); }
.rz-wire__run {
  position: absolute; left: 0; top: 0; width: 100%; height: 2px; overflow: hidden;
}
.rz-wire__run::after {
  content: ""; position: absolute; top: 0; left: -40px; width: 40px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgb(35 71 255 / 0), var(--brand));
}
.rz.is-go .rz-wire__run::after { animation: rzRun .9s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes rzRun { from { left: -40px; } to { left: 100%; } }

/* the editor */
.rz-app { grid-column: 3; grid-row: 1; min-width: 0; height: 452px; border-radius: 12px; overflow: hidden; border: 1px solid var(--gk-line); background: #fff; }
.rz-ed { height: 100%; }
.rz-ed .lla-ebar__mid > .lla-ebar__title { display: block; color: var(--lla-ink); }
.rz-title > span { display: none; }
.rz-canvas {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 18px 0;
  background: #f4f5f9;
}
.rz-built {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 5px 9px; border-radius: 7px;
  font: 500 11px/1.2 var(--font-ui); color: #3d4150;
  background: #fff; border: 1px solid var(--gk-line);
}
.rz-built img { width: 14px; height: 14px; }

/* the page the ad built, drawn in em off its own width */
.rz-pg {
  display: none;
  width: 100%; max-width: 470px; flex: 1;
  font-size: 10px;
  background: #fff; border-radius: 8px 8px 0 0;
  box-shadow: 0 0 0 1px #e6e8ef;
  overflow: hidden;
}
.rz-pg__url {
  display: flex; align-items: center; gap: .5em;
  margin: 0; padding: .8em 1.2em;
  font: 400 1.05em/1 var(--font-ui); color: #6b6f7d;
  border-bottom: 1px solid #eef0f4;
}
.rz-pg__url svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.2; }
.rz-pg__body { display: flex; flex-direction: column; gap: 1em; padding: 1.4em 2.2em 2em; }
.rz-pg__adlabel { align-self: flex-start; font: 600 .9em/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #8b8f9a; }
.rz-pg__mast { display: flex; align-items: center; gap: .8em; padding-bottom: .9em; border-bottom: 1px solid #eef0f4; }
.rz-pg__mast i { width: 7em; height: 1.2em; border-radius: .3em; background: #1f2a24; }
.rz-pg__mast b { width: 3.6em; height: .7em; border-radius: .3em; background: var(--rz-bone); }
.rz-pg__mast b:first-of-type { margin-left: auto; }
.rz-pg__mast--quiz i { width: 5em; background: #0e5a3d; }
.rz-pg__h { font: 600 2.15em/1.15 var(--font-ui); letter-spacing: -.02em; color: #14181f; text-wrap: balance; }
.rz-pg__dek { font: 400 1.3em/1.45 var(--font-ui); color: #555a66; }
.rz-pg__img { height: 13em; border-radius: .5em; background: #dfe3ea center / cover no-repeat; }
.rz-lines { display: flex; flex-direction: column; gap: .6em; }
.rz-lines i { height: .75em; border-radius: .3em; background: var(--rz-bone); }
.rz-lines i:nth-child(2n) { width: 92%; }
.rz-lines i:last-child { width: 64%; }
.rz-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1em 1em 1em 1.3em; border-radius: .6em;
  background: #f1f7f3; border: 1px solid #d6eadc;
  font: 500 1.25em/1.3 var(--font-ui); color: #14181f;
}
.rz-offer b {
  flex: none; padding: .75em 1.1em; border-radius: .45em;
  font: 600 .95em/1 var(--font-ui); color: #fff; background: #0e7a4f;
}
.rz-offer--btn { justify-content: center; padding: 0; background: none; border: 0; }
.rz-offer--btn b { width: 100%; padding: 1em; text-align: center; font-size: 1.1em; }
.rz-li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: .8em; align-items: start; }
.rz-li > b {
  display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%;
  font: 600 1.1em/1 var(--font-ui); color: #fff; background: #0e7a4f;
}
.rz-li > span { display: flex; flex-direction: column; gap: .5em; padding-top: .3em; }
.rz-li strong { font: 600 1.35em/1.3 var(--font-ui); color: #14181f; }
.rz-li i { height: .7em; border-radius: .3em; background: var(--rz-bone); }
.rz-li i:last-child { width: 70%; }
.rz-pg__body--quiz { gap: 1.1em; padding-top: 1.2em; }
.rz-prog { height: .45em; border-radius: 1em; background: #edf0ee; overflow: hidden; }
.rz-prog i { display: block; height: 100%; background: #0e7a4f; border-radius: inherit; }
.rz-pg__step { font: 500 1.05em/1 var(--font-ui); color: #8b8f9a; }
.rz-pg__q { margin-top: .4em; font: 500 1.4em/1.3 var(--font-ui); color: #14181f; }
.rz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.rz-tile {
  padding: 1.5em 1em; border-radius: .6em; text-align: center;
  font: 500 1.3em/1.2 var(--font-ui); color: #14181f;
  border: 1px solid #dfe3ea; background: #fff;
}
.rz-tile.is-on { border-color: #0e7a4f; box-shadow: inset 0 0 0 1px #0e7a4f; background: #f1f7f3; }

[data-rz-flash] { outline: 1.5px dashed transparent; outline-offset: 3px; transition: outline-color .6s ease; }
.rz-pg.is-flash [data-rz-flash] { outline-color: var(--brand); transition: none; }

/* the numbers, the ad's from Realize beside its page's from LanderLab */
.rz-nums {
  grid-column: 1 / -1; grid-row: 2;
  margin-top: 16px; padding: 14px 16px 16px;
}
.rz-nums__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; font: 500 11.5px/1.3 var(--font-ui); color: var(--rz-soft); }
.rz-nums__head b { display: none; font-weight: 500; padding: 3px 8px; border-radius: 5px; color: #3d4150; background: #f1f2f5; }
.rz-nums__head b.is-best { color: #1f8f5a; background: #e8f6ee; }
.rz-nums__row { display: none; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 12px; }
.rz-nums__set { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--gk-line); border-radius: 10px; overflow: hidden; }
.rz-nums__set--ll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rz-nums__src {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--gk-line);
  font: 500 11px/1.2 var(--font-ui); color: #3d4150; background: #fafbfc;
}
.rz-nums__src img { width: 14px; height: 14px; }
.rz-nums__ll { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: #0b0d12; }
.rz-nums__ll svg { width: 5px; height: 8px; fill: #fff; }
.rz-nums__set dd { margin: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.rz-nums__set dd + dd { border-left: 1px solid var(--gk-line); }
.rz-nums__set dd span { font: 400 11px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-nums__set dd b { font: 500 18px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--rz-ink); font-variant-numeric: tabular-nums; }
.rz-nums__set--ll dd:last-child b { color: var(--brand); }

/* which ad is picked: its page, title, verdict and numbers */
.rz:has(#rz-ad-story:checked) [data-for="story"],
.rz:has(#rz-ad-list:checked) [data-for="list"],
.rz:has(#rz-ad-quiz:checked) [data-for="quiz"] { display: block; }
.rz:has(#rz-ad-story:checked) .rz-nums__row[data-for="story"],
.rz:has(#rz-ad-list:checked) .rz-nums__row[data-for="list"],
.rz:has(#rz-ad-quiz:checked) .rz-nums__row[data-for="quiz"] { display: grid; }
.rz:has(#rz-ad-story:checked) .rz-nums__head b[data-for="story"],
.rz:has(#rz-ad-list:checked) .rz-nums__head b[data-for="list"],
.rz:has(#rz-ad-quiz:checked) .rz-nums__head b[data-for="quiz"] { display: inline-block; }

@media (max-width: 1100px) {
  .rz { grid-template-columns: 260px 56px minmax(0, 1fr); padding: 20px; }
  .rz-wire__label { display: none; }
}
@media (max-width: 900px) {
  .rz-stage { padding: 20px 12px; }
  .rz { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 14px; gap: 12px; }
  .rz-camp, .rz-wire, .rz-app, .rz-nums { grid-column: 1; grid-row: auto; }
  .rz-wire { display: none; }
  .rz-ads { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .rz-ad { flex: 0 0 240px; }
  .rz-app { height: 420px; }
  .rz-ed .lla-rail { display: none; }
  .rz-ed { grid-template-columns: minmax(0, 1fr); }
  .rz-nums { margin-top: 0; }
  .rz-nums__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rz-hero .gk-hero__title.rz-hero__title { font-size: 40px; }
  .rz-ed .lla-tabs, .rz-ed .lla-ebar__ab, .rz-ed .lla-sq, .rz-ed .lla-save { display: none; }
  .rz-nums__set, .rz-nums__set--ll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rz-nums__set dd:nth-of-type(odd) { border-left: 0; }
  .rz-nums__set dd:nth-of-type(n + 3) { border-top: 1px solid var(--gk-line); }
  .rz-nums__set dd b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rz.is-go .rz-wire__run::after { animation: none; }
  [data-rz-flash] { transition: none; }
}

.rz-nums__head b.is-bad { color: #b42318; background: #fef3f2; }

/* ---------- at a glance ---------- */
.rz-glance__cells { margin-block: 0; }
.rz-glance__cell { padding: 32px 32px 36px; }
.rz-glance__k { font: 500 13px/1.3 var(--font-ui); color: var(--brand); }
.rz-glance__v { margin: 10px 0 0; font: 400 15.5px/1.55 var(--font-ui); color: var(--ink-nav); text-wrap: pretty; }

/* ---------- sketches (loop, build) ---------- */
.rz-loop__cell { padding: 24px 24px 32px; }
.rz-loop__cell .gk-step__n { margin-top: 22px; }
.rz-loop__cell .gk-cell__title { margin-top: 10px; }
.rz-sk {
  height: 220px; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); color: var(--rz-ink);
}
.rz-sk--tall { height: 300px; padding: 24px; }
.rz-sk__pane {
  width: 100%; max-width: 300px;
  padding: 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--gk-line);
}
.rz-sk__head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 600 11px/1.2 var(--font-ui); color: var(--rz-ink); }
.rz-sk__head img { width: 14px; height: 14px; }
.rz-sk__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  margin: 0; padding: 7px 6px; border-radius: 6px;
  font: 400 11px/1.2 var(--font-ui);
}
.rz-sk__row + .rz-sk__row { border-top: 1px solid #f1f2f5; }
.rz-sk__row.is-on { background: rgb(35 71 255 / .05); }
.rz-sk__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rz-sk__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3d4150; }
.rz-sk__pill { padding: 2px 6px; border-radius: 4px; font-size: 10px; }
.rz-sk__pill.is-live { color: #1f8f5a; background: #e8f6ee; }
.rz-sk__pill.is-off { color: #6b6f7d; background: #f1f2f5; }
.rz-sk__foot { margin: 8px 0 0; font: 400 10.5px/1.2 var(--font-ui); color: var(--rz-soft); }

.rz-sk__build { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.rz-sk__ad, .rz-sk__mini {
  flex: 0 1 132px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 9px; background: #fff; border: 1px solid var(--gk-line);
}
.rz-sk__thumb { height: 64px; border-radius: 5px; background: #dfe3ea center / cover no-repeat; }
.rz-sk__adtitle, .rz-sk__mini .rz-sk__minih { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rz-sk__adtitle { font: 500 10.5px/1.3 var(--font-ui); }
.rz-sk__sponsor { font: 400 9px/1 var(--font-ui); color: #8b8f9a; }
.rz-sk__to { flex: none; color: var(--brand); }
.rz-sk__to svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rz-sk__minih { font: 600 10.5px/1.25 var(--font-ui); }
.rz-sk__miniimg { height: 40px; border-radius: 4px; background: #dfe3ea center / cover no-repeat; }
.rz-sk__mini i, .rz-sk__page i { height: 5px; border-radius: 3px; background: var(--rz-bone); }
.rz-sk__mini i:last-of-type, .rz-sk__page i:last-of-type { width: 70%; }
.rz-sk__minibtn { padding: 5px; border-radius: 4px; text-align: center; font: 600 9px/1 var(--font-ui); color: #fff; background: #0e7a4f; }
.rz-sk__match { outline: 1.5px dashed var(--brand); outline-offset: 2px; border-radius: 2px; }

.rz-sk__ev {
  display: grid; grid-template-columns: 16px auto minmax(0, 1fr); gap: 8px; align-items: center;
  margin: 0; padding: 7px 4px;
  font: 400 11px/1.2 var(--font-ui); color: var(--rz-soft);
}
.rz-sk__ev + .rz-sk__ev { border-top: 1px solid #f1f2f5; }
.rz-sk__ev code { font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rz-ink); }
.rz-sk__ok { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgb(35 71 255 / .1); color: var(--brand); }
.rz-sk__ok svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rz-sk__click {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0; padding: 7px 8px; border-radius: 6px; background: #f6f7fa;
  font: 400 10.5px/1 var(--font-ui); color: var(--rz-soft);
}
.rz-sk__click code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand); }

.rz-sk__cpa {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  margin: 0; padding: 6px 4px; font: 400 11px/1.2 var(--font-ui);
}
.rz-sk__cpa b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rz-sk__bar { height: 6px; border-radius: 3px; background: #f1f2f5; overflow: hidden; }
.rz-sk__bar i { display: block; height: 100%; border-radius: inherit; background: #c3c9d8; }
.rz-sk__cpa.is-flag .rz-sk__bar i { background: #f04438; }
.rz-sk__cpa.is-flag b { color: #b42318; }
.rz-sk__act {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 8px 0 0; padding-top: 9px; border-top: 1px solid #f1f2f5;
  font: 400 10.5px/1.3 var(--font-ui); color: var(--rz-soft);
}
.rz-sk__act b { flex: none; padding: 5px 8px; border-radius: 5px; font: 500 10.5px/1 var(--font-ui); color: #fff; background: var(--brand); }

/* build */
.rz-build__cell { padding: 24px 24px 40px; }
.rz-build__eyebrow { margin-top: 26px; }
.rz-build__title { margin: 12px 0 0; font: 300 28px/1.15 var(--font-display); letter-spacing: -.014em; color: var(--ink); }
.rz-sk__ai, .rz-sk__imp { max-width: 380px; }
.rz-sk__ai .lla-orb { width: 14px; height: 14px; }
.rz-sk__brief {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 8px; border-radius: 8px; background: #f6f7fa;
}
.rz-sk__brief .rz-sk__thumb { height: 52px; }
.rz-sk__brieftext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rz-sk__brieftext em { font: 500 9.5px/1 var(--font-ui); font-style: normal; color: #005645; }
.rz-sk__brieftext b { font: 500 11.5px/1.3 var(--font-ui); }
.rz-sk__brieftext span { font: 400 10px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-sk__msg {
  margin: 10px 0 0 auto; max-width: 92%;
  padding: 8px 10px; border-radius: 9px 9px 2px 9px; background: #f1f2f5;
  font: 400 11px/1.4 var(--font-ui); color: var(--rz-ink);
}
.rz-sk__steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.rz-sk__steps li { display: flex; align-items: center; gap: 8px; font: 400 11px/1.3 var(--font-ui); color: #3d4150; }
.rz-sk__field {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 6px 6px 6px 10px; border-radius: 8px; border: 1px solid var(--gk-line);
  font: 400 11px/1 var(--font-ui);
}
.rz-sk__field > span { display: grid; color: var(--rz-soft); }
.rz-sk__field svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.rz-sk__field code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rz-ink); }
.rz-sk__field b { padding: 6px 10px; border-radius: 6px; font: 500 10.5px/1 var(--font-ui); color: #fff; background: var(--brand); }
.rz-sk__from { margin: 8px 0 10px; font: 400 10.5px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-sk__page {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 8px; border: 1px solid var(--gk-line); background: #fff;
}
.rz-sk__page .rz-sk__miniimg { height: 58px; }
.rz-sk__page .rz-sk__minih { font-size: 12px; }
.rz-sk__scan {
  position: absolute; left: 0; right: 0; top: 62%; height: 38%;
  background: linear-gradient(180deg, rgb(35 71 255 / .0), rgb(35 71 255 / .06));
  border-top: 1.5px solid var(--brand);
}

/* ---------- the report ---------- */
.rz-rep__frame { padding: 32px; }
.rz-rep__tray { padding: 24px; }
.rz-rep__pane { padding: 0; overflow: hidden; }
.rz-rep__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--gk-line);
}
.rz-rep__camp { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 12.5px/1.2 var(--font-ui); color: var(--rz-soft); }
.rz-rep__camp b { font-weight: 600; color: var(--rz-ink); }
.rz-rep__seg { display: flex; gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: 9px; background: #f1f2f5; }
.rz-rep__seg label { cursor: pointer; }
.rz-rep__seg span { display: block; padding: 6px 12px; border-radius: 7px; font: 500 12px/1 var(--font-ui); color: #5b5f6b; }
.rz-rep__seg input:checked + span { background: #fff; color: var(--rz-ink); box-shadow: 0 1px 2px rgb(24 24 34 / .08); }
.rz-rep__seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.rz-rep__view { display: none; }
.rz-rep__pane:has(#rz-rep-ad:checked) .rz-rep__view[data-view="ad"],
.rz-rep__pane:has(#rz-rep-site:checked) .rz-rep__view[data-view="site"] { display: block; }
.rz-rep__scroll { overflow-x: auto; }
.rz-rep__table { width: 100%; min-width: 820px; border-collapse: collapse; font: 400 13px/1.3 var(--font-ui); color: var(--rz-ink); }
.rz-rep__table th, .rz-rep__table td { padding: 11px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid #f1f2f5; font-variant-numeric: tabular-nums; }
.rz-rep__table th:first-child { text-align: left; white-space: normal; width: 34%; }
.rz-rep__table thead th { font: 500 11.5px/1.2 var(--font-ui); color: var(--rz-soft); background: #fafbfc; }
.rz-rep__src th, .rz-rep__src td { padding-block: 8px 0; border-bottom: 0 !important; background: #fafbfc; }
.rz-rep__src th { text-align: left !important; font: 500 11px/1.2 var(--font-ui) !important; color: #3d4150 !important; }
.rz-rep__src th img { vertical-align: -2px; margin-right: 6px; }
.rz-rep__table .rz-rep__ll { border-left: 1px solid var(--gk-line); }
.rz-rep__name { display: block; font-weight: 500; }
.rz-rep__note { display: inline-block; margin-top: 5px; padding: 2px 7px; border-radius: 4px; font: 500 11px/1.3 var(--font-ui); color: #3d4150; background: #f1f2f5; }
tr.is-bad .rz-rep__note { color: #b42318; background: #fef3f2; }
tr.is-bad .rz-rep__cpa { color: #b42318; }
tr.is-good .rz-rep__note { color: #1f8f5a; background: #e8f6ee; }
tr.is-watch .rz-rep__note { color: #93370d; background: #fffaeb; }
.rz-rep__table tbody th { font-weight: 400; }
.rz-rep__cpa { font-weight: 600; }
.rz-rep__table tfoot th, .rz-rep__table tfoot td { border-bottom: 0; background: #fafbfc; font-weight: 600; }
.rz-rep__pt { margin-top: 0; }

/* ---------- review ---------- */
.rz-review__note { margin: 0 auto; padding: 18px 32px; font: 400 13px/1.55 var(--font-ui); color: var(--gk-grey); }

/* ---------- guide ---------- */
.rz-guide .igd-guide__grid { padding-top: 64px; }
.rz-doc__list { margin: 16px 0 0; padding: 0 0 0 20px; display: grid; gap: 10px; font: 400 16px/1.7 var(--font-ui); color: var(--ink-soft); }
.rz-doc__list b { font-weight: 600; color: var(--ink-nav); }
.igd-doc__text code { padding: 1px 5px; border-radius: 4px; background: #f1f2f5; font: 500 .9em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-nav); }

@media (min-width: 901px) and (max-width: 1100px) {
  .rz-loop__cells { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rz-loop__cells > :nth-child(3) { border-left: 0; }
  .rz-loop__cells > :nth-child(n + 3) { border-top: 1px solid var(--rail); }
  .rz-glance__cells { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rz-glance__cells > :nth-child(3) { border-left: 0; }
  .rz-glance__cells > :nth-child(n + 3) { border-top: 1px solid var(--rail); }
}
@media (max-width: 900px) {
  .rz-rep__frame { padding: 16px 12px; }
  .rz-rep__tray { padding: 12px; }
}
@media (max-width: 760px) {
  .rz-sk--tall { height: auto; min-height: 260px; padding: 16px; }
  .rz-build__title { font-size: 24px; }
}