/* Fusion client asset pack - shared slide shell.
   v2 report tokens, 1280x900 slides, no scroll, no app chrome. */

:root{
  color-scheme: dark;
  --bg:#0f0c05; --panel:#181409; --panel-2:#141208; --line:#332c1a;
  --ink:#ffffff; --ink-2:#cfc9ba; --ink-3:#96907e;
  --brand:#ffae00;
  --amber:#c98500; --blue:#3987e5; --aqua:#199e70; --base:#8a877e;
  --good:#4bbd85; --warn-bg:#211b0c; --warn-line:#4d4222;
  --accent-soft:#1d180c;
  --pad-x:64px; --pad-y:52px;
  /* Bottom gutter: the nav row sits at y 846 to 880, so content stops well above it. */
  --pad-bottom:84px;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Roboto",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* Slides. Inactive slides stay laid out but are pushed off-viewport so the
   injected comment layer computes a real rect and hides their pins, instead of
   stacking them at the origin the way display:none would. */
.deck{position:relative;width:100%;height:100%}
.slide{
  position:absolute; inset:0;
  padding:var(--pad-y) var(--pad-x) var(--pad-bottom);
  display:flex; flex-direction:column;
  overflow:hidden;
  visibility:hidden; transform:translateX(-300vw); pointer-events:none;
}
.slide.is-active{visibility:visible; transform:none; pointer-events:auto}
/* Content is centred as one block rather than pinned to the top, and deck.js scales a
   sparse slide up to fill the 900 px height. Without this most slides used the top half
   of the viewport and left the bottom empty. */
.slide{justify-content:center}

/* Navigation: two arrow buttons and a counter. Nothing else.
   The review host injects a comment overlay pinned at z-index 2147483000 that covers the
   whole viewport, so the arrows sit one layer above it or a click never reaches them.
   Bottom-left, because the host's comment toolbar occupies the bottom-right corner
   (measured live at x 985 to 1262, y 837 to 882). Nav ends at x 162, so the gap is
   823 px, far past the 24 px clearance the review asked for. */
.nav{position:fixed; left:22px; bottom:20px; display:flex; align-items:center; gap:10px; z-index:2147483100}
.nav button{
  width:34px; height:34px; border-radius:4px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--ink-2);
  font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
  font-family:"Roboto",sans-serif;
}
.nav button:hover{border-color:var(--brand); color:var(--brand)}
.nav button[disabled]{opacity:.32; cursor:default}
.nav button:hover[disabled]{border-color:var(--line); color:var(--ink-2)}
.counter{
  font-family:"Oswald",sans-serif; font-size:12.5px; letter-spacing:.1em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:52px; text-align:left;
}

/* Typography, carried over from the v2 report. */
.eyebrow{
  font-family:"Oswald",sans-serif;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); margin:0 0 10px;
}
h1,h2{font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.02em}
h1{font-size:52px; line-height:1.1; margin:0 0 18px; font-weight:500}
h2{font-size:31px; line-height:1.18; margin:0 0 12px; font-weight:500}
h3{font-family:"Oswald",sans-serif; font-size:17px; margin:0 0 8px; font-weight:500; letter-spacing:.04em; text-transform:uppercase}
h4{font-family:"Oswald",sans-serif; font-size:14px; margin:14px 0 6px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--brand)}
p{margin:0 0 12px; color:var(--ink-2); max-width:74ch}
.lead{font-size:18px; color:var(--ink-2); max-width:66ch}
strong{color:var(--ink); font-weight:600}
.small{font-size:13px; color:var(--ink-3)}
a{color:var(--brand)}

.body{flex:0 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:flex-start}
.slide.cover{justify-content:center}
.rule{width:64px; height:3px; background:var(--brand); border:none; margin:0 0 22px}

.meta{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.chip{border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:12.5px; color:var(--ink-2); background:var(--panel)}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:20px 0 0}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px; border-top:3px solid var(--brand)}
.tile .label{font-size:12.5px; color:var(--ink-3); margin-bottom:7px; font-weight:500}
.tile .num{font-family:"Oswald",sans-serif; font-size:36px; line-height:1.04; font-weight:500; font-variant-numeric:tabular-nums}
.tile .delta{margin-top:7px; font-size:13px; font-weight:600; color:var(--good)}
.tile .delta.flat{color:var(--ink-3); font-weight:500}
.tile .delta.down{color:var(--amber)}
.tile .sub{margin-top:4px; font-size:12px; color:var(--ink-3)}

/* A figure must never shrink below its chart: as a flex item with min-height:0 it did, and the SVG painted over the table below while the fitter saw no overflow. */
figure{margin:16px 0 0; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px; flex-shrink:0}
figcaption{margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.45}
/* A chart keeps its aspect ratio, so widening the column makes it taller. Without a
   height ceiling a chart slide grows faster than the fitter can shrink it. */
svg{display:block; max-width:100%; height:auto; max-height:46vh}
.g-label{fill:var(--ink-2); font-size:14px; font-weight:500}
.g-val{fill:var(--ink); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.g-tick{fill:var(--ink-3); font-size:11.5px; font-variant-numeric:tabular-nums}
.g-axis{stroke:var(--line); stroke-width:1}
.g-grid{stroke:var(--line); stroke-width:1; stroke-dasharray:3 4}

.legend{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px}
.legend span{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2)}
.sw{width:12px; height:12px; border-radius:3px; flex:none}

.callout{background:var(--accent-soft); border:1px solid var(--warn-line); border-left:4px solid var(--brand); border-radius:4px; padding:18px 20px; margin:16px 0 0}
.callout .big{font-family:"Oswald",sans-serif; font-size:23px; font-weight:500; letter-spacing:.02em; margin:0 0 6px; color:var(--ink)}
.callout p{margin:0; max-width:78ch}

.note{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:4px; padding:13px 16px; margin:14px 0 0; font-size:13.5px; color:var(--ink-2)}
.note strong{display:block; margin-bottom:3px}

.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:18px}
.cols.two{grid-template-columns:1fr 1fr}
.cols.three{grid-template-columns:1fr 1fr 1fr}
.cols.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:17px; min-width:0}
.card p{font-size:13.5px; margin:0 0 8px}
.card p:last-child{margin:0}
.card .n{display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:4px; background:var(--brand); color:#181409; font-size:13px; font-weight:700; margin-bottom:9px}

.badge{display:inline-block; font-family:"Oswald",sans-serif; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#181409; background:var(--brand); border-radius:3px; padding:3px 9px; font-weight:600}
.badge.ghost{background:transparent; color:var(--brand); border:1px solid var(--brand)}
.badge.grey{background:transparent; color:var(--ink-3); border:1px solid var(--line)}
.badge.blue{background:var(--blue); color:#fff}
.badge.aqua{background:var(--aqua); color:#fff}

ul.clean{margin:12px 0 0; padding:0; list-style:none}
ul.clean li{position:relative; padding-left:23px; margin-bottom:9px; color:var(--ink-2); max-width:78ch}
ul.clean li::before{content:""; position:absolute; left:5px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--brand)}
ul.clean.tight li{margin-bottom:6px; font-size:14px}
ul.clean.two{columns:2; column-gap:32px}
ul.clean.two li{break-inside:avoid}

table{border-collapse:collapse; width:100%; margin-top:14px; font-size:13.5px}
caption{text-align:left; font-size:12.5px; color:var(--ink-3); padding-bottom:8px}
th,td{padding:8px 11px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top}
th:first-child,td:first-child{text-align:left; color:var(--ink)}
th{font-family:"Oswald",sans-serif; font-size:12px; color:var(--ink-3); font-weight:500; letter-spacing:.06em; text-transform:uppercase}
td{color:var(--ink-2); font-variant-numeric:tabular-nums}
td.pos{color:var(--good); font-weight:600}
td.neg{color:var(--amber); font-weight:600}
td.txt{text-align:left; font-variant-numeric:normal}
table.compact{font-size:12.5px}
table.compact th,table.compact td{padding:6px 9px}

/* Ad preview cards and competitor screenshots. */
.shots{display:grid; gap:14px; margin-top:16px}
.shots.two{grid-template-columns:1fr 1fr}
.shots.three{grid-template-columns:1fr 1fr 1fr}
.shot{background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; min-width:0}
.shot img{width:100%; display:block; object-fit:cover; background:var(--panel-2)}
.shot .cap{padding:11px 13px; font-size:12.5px; color:var(--ink-2)}
.shot .cap b{display:block; color:var(--ink); font-family:"Oswald",sans-serif; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase; margin-bottom:4px}

.adcard{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:15px; font-size:13.5px; min-width:0}
.adcard .hook{color:var(--ink); font-weight:600; margin:0 0 6px}
.adcard .primary{color:var(--ink-2); margin:0 0 8px}
.adcard .cta{display:inline-block; background:var(--brand); color:#181409; font-weight:700; font-size:12px; border-radius:3px; padding:4px 10px}

/* Missing metric marker. Never a zero. */
.na{color:var(--ink-3); font-style:normal}

/* round-zero placeholders: visibly marked, never styled as data */
.ph{background:repeating-linear-gradient(135deg,#ececec 0 10px,#f6f6f6 10px 20px); border:1px dashed #9a9a9a; border-radius:4px; color:#555; font-family:"Roboto Condensed",sans-serif; font-size:14px; line-height:1.3; padding:10px 12px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:56px}
.ph::before{content:"HELYŐRZŐ"; font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.14em; color:#888; margin-bottom:4px}
.ph.chart{min-height:220px}
.ph.img{min-height:120px; aspect-ratio:1/1; max-width:180px}
.ph.wide{min-height:120px; width:100%}
.ph.tall{min-height:420px; aspect-ratio:9/16; max-width:240px}
.ph.inline{display:inline-flex; min-height:0; padding:2px 8px}
.ph.inline::before{content:none}
.grid30{display:grid; grid-template-columns:repeat(10,1fr); gap:8px}
.grid30 .card{display:flex; flex-direction:column; gap:4px; font-size:10px}
.grid30 .card .ph.img{min-height:70px; max-width:none}
.adrow{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px}
.adrow .card{flex:0 0 120px; font-size:11px}
.tag-soft{font-size:11px; color:#fff; opacity:.5}
th.left, td.left, table.leftfirst tr > *:first-child{text-align:left}