:root {
  --yellow: #ffbe0a;
  --ink: #0a0a0a;
  --paper: #fffdf6;
  --rule: #e4d7a4;
  --dim: #4a5340;
  --faint: #7a806c;
  --leaf: #004c1d;
  --lime: #7baf37;
  --harvest: #fdc42d;
  --orange: #f78028;
  --farm-red: #e1251b;
}

* { box-sizing: border-box; }

html {
  font-family: "Heebo", "Arial Hebrew", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  direction: rtl;
  line-height: 1.45;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--yellow); }

.ribbon {
  height: 7px;
  background: linear-gradient(
    110deg,
    var(--leaf) 0 34%,
    var(--lime) 34% 50%,
    var(--harvest) 50% 68%,
    var(--orange) 68% 84%,
    var(--farm-red) 84% 100%
  );
}

.badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.2em;
  direction: ltr;
  text-decoration: none;
  flex: none;
}
.badge.sm { width: 40px; height: 40px; font-size: 7px; }

.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.1em;
  height: 0.12em;
  background: #000;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.logo-42 { height: 44px; width: auto; }

.gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 36px 28px 48px;
  background:
    linear-gradient(#ffbe0af2, #ffbe0af6),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(0, 76, 29, 0.07) 47px 48px),
    var(--yellow);
}
.gate h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(36px, 11vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.gate p { margin: 0; max-width: 22em; font-size: 17px; }
.gate .ribbon { position: absolute; inset-inline: 0; bottom: 0; }

@media (max-width: 1023px) {
  .gate { display: flex; }
  body > :not(.gate) { display: none !important; }
}
html.is-handheld .gate { display: flex; }
html.is-handheld body > :not(.gate) { display: none !important; }

.top { background: var(--yellow); }
.top-row {
  /* Single source of truth for the banner's width — the brand column derives
     its own height from it, so the buttons' bottom edge rides the banner's
     bottom edge at any viewport without knowing the row's height. */
  --banner-w: clamp(260px, 30vw, 470px);
  display: flex;
  /* One shared top axis: logos, clock and banner all hang from the same line. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 14px 40px 16px;
}
.brand-lock {
  flex: none;
  display: flex;
  /* Reversed so the row reads QUESTO · 42 · עוף טוב from the right. */
  flex-direction: row-reverse;
  align-items: center;
  gap: 20px;
}
/* Each logo sits inside its own <a>, so positional selectors match both. Target
   them by identity instead and let each keep its own aspect. */
.brand-lock img:not(.logo-42) { width: 96px; height: auto; }
.brand-lock .logo-42 { height: 78px; width: auto; }
.brand-lock .badge { width: 84px; height: 84px; font-size: 12.5px; }
/* שעון המילים. Frank Ruhl Libre — the classic Hebrew book serif — because the
   whole point is that these are words, not a readout. It also carries nikud far
   better than the sans the rest of the dashboard is set in. The box shrinks to
   the phrase so #סליחה can sit against its right edge. */
.wordclock {
  /* Grows to fill the gap between banner and brand lock instead of shrinking to
     its text. The box edges are therefore fixed, and since every line inside is
     right-aligned, the start of the phrase stays put while a longer minute
     grows leftward — a shrink-to-fit box would drift both ways at once. */
  flex: 1 1 auto;
  min-width: 0;
  /* Capping the box is what actually moves the clock off the logos. Left to
     grow, it spanned the whole gap and the right-aligned phrase sat pinned to
     the brand lock with a few hundred pixels of void behind it. Capped, the
     leftover width goes back to the row's own spacing on both sides, so the
     phrase lands between banner and logos instead of against them — and since
     the cap does not depend on the text, the right edge still never moves.
     On narrower screens the box never reaches the cap and this is inert. */
  max-width: 40rem;
  padding: 0 clamp(16px, 3vw, 48px) 0 8px;
  /* Pull the line-box half-leading back out, so the letters themselves — not
     the invisible leading above them — sit on the banner's top edge. */
  margin-top: -0.16em; /* measured: puts the letters' ink line on the banner's top edge */
  font-size: clamp(19px, 2.9vw, 42px);
}
.wordclock-time {
  display: block;
  font-family: "Frank Ruhl Libre", "David Libre", Georgia, serif;
  font-size: inherit;
  font-weight: 500;
  /* Tight enough to set two lines as one block, loose enough to clear nikud. */
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
  transition: opacity 220ms ease;
  text-align: right;
  text-wrap: balance;
}
/* Per-word turning: only the words that change move. Outgoing words freeze as
   absolutely-positioned ghosts and lift away; incoming words rise in; words
   that survive the change slide (FLIP) to their new spots. */
.wordclock-time, .wordclock-seconds { position: relative; }
.wc-w { display: inline-block; }
.wc-in { animation: wc-in 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes wc-in {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.wc-slide { transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.wc-ghost {
  position: absolute;
  pointer-events: none;
  transition: opacity 300ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1), filter 300ms ease;
}
.wc-ghost.wc-out { opacity: 0; transform: translateY(-0.35em); filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  .wc-in { animation: none; }
  .wc-slide, .wc-ghost { transition: none; }
}

/* מונה הרגעים — the clock's second line, in the clock's own voice: same face,
   same size, same ink, hung on the same right edge as the line above it. */
.wordclock-seconds {
  display: block;
  text-align: right;
  font-family: "Frank Ruhl Libre", "David Libre", Georgia, serif;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.3;
  min-height: 1.3em; /* keeps the tag from hopping while words turn */
  color: var(--ink);
}
.wordclock-tag {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--leaf);
}

/* Brand block: logos with the two links tucked under them, all flush to the
   right edge of the header. */
/* Exactly as tall as the banner (width × 350/970 + its 2px frame twice), with
   the pair pushed apart — logos on the banner's top line, buttons on its
   bottom line. min-height lets narrow viewports overflow gracefully instead of
   crushing the logos. */
.top-start {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--banner-w) * 350 / 970 + 4px);
  min-height: max-content;
}
.top-side {
  display: flex;
  gap: 14px;
  align-items: center;
}
/* The ghost trades 2px of bottom padding for its rule, so both boxes come out
   the same height and the two labels share a baseline. */
.cta, .ghost {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 12px 20px;
}
.cta { background: #000; color: #fff; }
.cta:hover { background: var(--leaf); }
.ghost { padding: 12px 3px 10px; border-bottom: 2px solid #000; }

/* Provenance of the numbers. Lives with the data now, not in the header. */
.meta-line {
  margin: -18px 0 30px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--faint);
}

main {
  width: min(1240px, calc(100% - 80px));
  margin: 28px auto 72px;
}

.hero h1 {
  margin: 0 0 8px;
  max-width: 18ch;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.lede {
  margin: 0 0 28px;
  max-width: 40em;
  font-size: 17px;
  color: var(--dim);
}

/* The frame sits outside the aspect box on purpose: a border on .head-banner
   itself would eat into the container width that drives the scale and knock the
   creative a hair off 970×350. */
.head-banner-frame {
  flex: none;
  line-height: 0;
  border: 2px solid var(--leaf);
}

/* The campaign creative, scaled into the header. Width drives the scale; the
   aspect-ratio box keeps 970×350 exact at every size. */
.head-banner {
  container-type: inline-size;
  width: var(--banner-w);
  aspect-ratio: 970 / 350;
  position: relative;
  overflow: hidden;
}
.head-banner:empty { display: none; }
.head-banner iframe {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  transform-origin: top right;
  transform: scale(calc(100cqi / (970 * 1px)));
}
.film {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
footer.site .film {
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto 22px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 8px;
}
.kpi { border-top: 3px solid #000; padding-top: 12px; }
.kpi dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 4px;
}
.kpi dd {
  margin: 0;
  font-size: 33px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
}

.pace {
  margin: 0 0 36px;
}
.pace-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.track {
  height: 8px;
  background: #efe8c8;
  overflow: hidden;
}
.track > span {
  display: block;
  height: 100%;
  background: var(--leaf);
}

.live-board {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin: 0 0 18px;
  align-items: start;
}
.live-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-inline-end: 20px;
  border-inline-end: 1px solid var(--rule);
}
.live-card {
  border-top: 2px solid #000;
  padding-top: 10px;
}
.live-card.is-fee {
  border-top-color: var(--leaf);
}
.live-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}
.live-card .amt {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.live-card small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--dim);
}
.day-ticks {
  display: flex;
  gap: 3px;
  margin: 0 0 10px;
  height: 10px;
}
.day-ticks i {
  flex: 1;
  background: #efe8c8;
}
.day-ticks i.on { background: var(--leaf); }
.live-card.is-down .day-ticks i.on { background: #000; }

.mix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.mix-card {
  border-top: 1px solid var(--rule);
  padding: 10px 0 4px;
}
.mix-card h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dim);
}
.mix-card .amt {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mix-card .track { margin: 9px 0 6px; height: 6px; }
.mix-card small {
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
}
.mix-card .gap {
  margin-top: 8px;
  font-size: 13px;
  color: var(--dim);
}
.mix-card .gap.ok { color: var(--leaf); }
.mix-card .gap.off { color: var(--farm-red); }

h2 {
  margin: 52px 0 16px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
h2 .num {
  color: var(--yellow);
  -webkit-text-stroke: 1.1px #000;
  paint-order: stroke fill;
  margin-inline-end: 10px;
}

.bars { display: grid; gap: 12px; margin-bottom: 12px; }
/* Fixed amount column: with `auto` the track's length changed with the digit
   count of each total, so the bars no longer shared a baseline. */
.bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 104px;
  gap: 14px;
  align-items: center;
}
.bar-row span { font-size: 14px; font-weight: 700; }
.bar-row b {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  white-space: nowrap;
  text-align: left;
  direction: ltr;
  unicode-bidi: isolate;
}
.bar {
  height: 10px;
  background: #efe8c8;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--leaf);
}

.goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 28px;
}
.goal {
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.goal dt { font-size: 12px; font-weight: 700; color: var(--faint); }
.goal dd {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.goal small { display: block; font-size: 12px; font-weight: 500; color: var(--dim); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.section-head p {
  margin: 0;
  font-size: 14px;
  color: var(--dim);
}

table.lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-bottom: 8px;
}
table.lines th,
table.lines td {
  text-align: right;
}
table.lines th {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
  background: var(--yellow);
  padding: 8px 10px;
  border: 1px solid #000;
}
table.lines td {
  padding: 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.lines .n {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Amount then ₪, RTL — so the shekel sits to the left of the digits. Its own
   base direction survives being nested inside the LTR number cells. */
.ils {
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

table.lines .fig {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
table.lines .tool { font-weight: 800; }
table.lines .sub { display: block; font-size: 12px; font-weight: 500; color: var(--dim); }
/* Cheaper than the brief is good news; dearer is worth seeing at a glance. */
table.lines .sub.good { color: var(--leaf); font-weight: 700; }
table.lines .sub.bad { color: var(--farm-red); font-weight: 700; }
table.lines .sub bdi,
table.lines .tool bdi { unicode-bidi: isolate; }
.none {
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 500;
}
/* Not applicable, as opposed to missing — quieter than "אין נתונים" on purpose. */
.na {
  color: var(--rule);
  font-weight: 700;
  cursor: default;
}

/* Budget-consumption bar inside the ביצוע cell. */
.exec-bar {
  display: block;
  width: 100%;
  min-width: 64px;
  max-width: 120px;
  height: 4px;
  margin: 5px 0 3px;
  background: #efe8c8;
  overflow: hidden;
}
.exec-bar i {
  display: block;
  height: 100%;
  background: var(--leaf);
}
.exec-bar.over i { background: var(--farm-red); }

/* The DV360 block reads as measured fact, not plan — hence the green rule. */
.kpis.dv { margin-bottom: 18px; }
.kpis.dv .kpi { border-top-color: var(--leaf); }

.note {
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 24px;
}

.creatives {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 8px;
}
.mini {
  position: relative;
  overflow: hidden;
  flex: none;
}
.mini iframe {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  border: 0;
  background: #fff;
  transform-origin: top right;
}
.more {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #000;
}

footer.site {
  text-align: center;
  padding: 8px 0 36px;
}
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 22px 20px 0;
  font-size: 14px;
  font-weight: 700;
}
.lockup img { width: 44px; height: auto; }
.lockup .logo-42 { width: 100px; height: auto; }
.lockup i { width: 1px; height: 26px; background: #000; opacity: 0.2; }

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  margin-inline-end: 6px;
}
.live-dot.off { background: var(--faint); }

@media (max-width: 1100px) {
  .kpis, .mix { grid-template-columns: 1fr 1fr; }
  .live-board { grid-template-columns: 1fr; }
  .live-pair { border-inline-end: 0; padding-inline-end: 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
  .bar-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------------------------------------------- expandable line detail */

/* A line that opens carries the affordance on its name, not as a stray column. */
tr.has-detail { cursor: pointer; }
tr.has-detail:hover td { background: rgba(0, 76, 29, 0.04); }
tr.has-detail:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }

.disc {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-inline-end: 8px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  vertical-align: baseline;
}
.chev {
  display: block;
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--leaf);
  border-bottom: 2px solid var(--leaf);
  /* Points at the row in RTL; rotates down when the row is open. */
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}
tr.is-open .chev { transform: rotate(-135deg); }

tr.detail > td { padding: 0; background: rgba(0, 76, 29, 0.03); }
.detail-in { padding: 4px 0 14px; }

.sub-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sub-lines th {
  padding: 8px 14px;
  text-align: right;
  font-weight: 700;
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
}
.sub-lines th.n, .sub-lines td.n { text-align: left; }
.sub-lines td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.sub-lines .sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--faint);
}
.sub-lines tfoot td {
  border-bottom: 0;
  border-top: 2px solid #000;
  font-weight: 700;
}