/* =====================================================================
   DataDad product pages — shared layer for the home page and product pages.
   Loads after ds.css and landing.css. Adds the Product menu, the mobile
   header, the product map, compact cards, band backgrounds, the revenue
   mix, and a card layout for the campaigns table on small screens.
   ===================================================================== */

/* ---------- header: Product menu ---------- */
.cnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.cnav>a{color:var(--hero-ink2);font-size:14px;font-weight:500;padding:7px 11px;border-radius:9px;text-decoration:none;white-space:nowrap}
.cnav>a:hover,.pmenu>summary:hover{color:var(--hero-ink);background:color-mix(in srgb,var(--hero-ink) 7%,transparent)}
.cnav>a[aria-current=page]{color:var(--hero-ink)}
.pmenu{position:relative}
.pmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--hero-ink2);font-size:14px;font-weight:500;padding:7px 11px;border-radius:9px}
.pmenu>summary::-webkit-details-marker{display:none}
.pmenu>summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.pmenu[open]>summary{color:var(--hero-ink);background:color-mix(in srgb,var(--hero-ink) 9%,transparent)}
.pmenu[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.pmenu .burger{display:none;width:18px;height:18px}
.pmenu-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:60;width:min(620px,calc(100vw - 32px));background:var(--tile);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -24px #0b123d66,0 2px 6px #0b123d14;padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.pm-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-items:center;padding:10px 12px;border-radius:11px;text-decoration:none;color:var(--text)}
.pm-item:hover{background:var(--tile2)}
.pm-item[aria-current=page]{background:var(--accent-wash)}
.pm-item b{font-size:14.5px;font-weight:600;align-self:end}
.pm-item>span:not(.pm-ico){grid-column:2;font-size:13px;color:var(--text2);line-height:1.35;align-self:start}
.pm-ico{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--c,var(--accent));color:#fff}
.pm-ico svg{width:19px;height:19px}
.pmenu-panel .pm-foot{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:6px;padding:12px 12px 4px;font-size:13.5px}
.pmenu-panel .pm-foot a{color:var(--text2);text-decoration:none;font-weight:500}
.pmenu-panel .pm-foot a:hover{color:var(--text)}
.head-cta .btn.cta.sm{display:none}

@media (max-width:860px){
  .cnav{margin-left:auto;order:3}
  .cnav>a{display:none}
  .head-cta{margin-left:0!important;order:2;gap:6px}
  .head-cta .btn.login{display:none}
  .head-cta .btn.cta.sm{display:inline-flex;padding:7px 12px}
  .head-cta .btn.cta.lg-only{display:none}
  .site-head{gap:10px}
  .site-head .brand{margin-right:auto}
  .pmenu>summary{padding:8px;border:1px solid var(--hero-chip-line);border-radius:10px}
  .pmenu>summary::after,.pmenu .lbl{display:none}
  .pmenu .burger{display:block}
  .pmenu-panel{position:fixed;top:64px;left:16px;right:16px;transform:none;width:auto;grid-template-columns:minmax(0,1fr);max-height:calc(100dvh - 80px);overflow:auto}
  .pmenu-panel .pm-login{display:inline}
}
.pm-login{display:none}

/* ---------- eyebrow + hero trust line ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--hero-ink2);margin-bottom:16px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#7fe3b0;box-shadow:0 0 0 4px #7fe3b033}
.sec-head .kicker{font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}

/* ---------- product map ---------- */
.pmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pm-card{position:relative;display:grid;grid-template-rows:auto 26px 1fr auto auto;gap:8px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:16px;background:var(--tile);box-shadow:var(--e-tile);text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s,border-color .2s;min-height:228px;overflow:hidden}
.pm-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:0 18px 40px -26px #1b2b4a66}
.pm-card .pm-ico{width:38px;height:38px}
.pm-card h3{line-height:26px;font-size:17px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.pm-card h3 small{font-size:11px;font-weight:650;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:999px;padding:1px 7px}
.pm-card p{color:var(--text2);font-size:14px;line-height:1.5}
.pm-card .pm-viz{height:56px;display:flex;align-items:flex-end}
.pm-card .pm-viz svg{width:100%;height:56px;display:block}
.pm-card .pm-go{font-size:13.5px;font-weight:600;color:var(--c);display:inline-flex;align-items:center;gap:6px}
.pm-card .pm-go::after{content:"→";transition:transform .2s}
.pm-card:hover .pm-go::after{transform:translateX(3px)}
@media (max-width:980px){ .pmap{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .pmap{grid-template-columns:minmax(0,1fr);gap:10px}
  .pm-card{min-height:0;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 14px;padding:16px}
  .pm-card .pm-ico{grid-row:span 2}
  .pm-card .pm-viz,.pm-card .pm-go{display:none}
}

/* ---------- section bands ---------- */
main.lpmain>section.band{margin-top:96px;padding-block:88px;background:var(--tile);border-block:1px solid var(--line)}
main.lpmain>section.band+section{padding-top:88px}
main.lpmain>section.band.ink{background:#0f1533;color:#e8ecff;border:0}
.band.ink .sec-head p,.band.ink .split-copy p,.band.ink .feats p{color:#aeb7e0}
.band.ink .sec-head .kicker{color:#9fb0ff}
.band.ink .textlink{color:#fff}
.more-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-ink);text-decoration:none;font-size:15px}
.more-link::after{content:"→";transition:transform .2s}
.more-link:hover::after{transform:translateX(3px)}
.band.ink .more-link{color:#b8c3ff}

/* ---------- compact cards ("also in DataDad") ---------- */
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ccard{display:grid;gap:10px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--tile);color:var(--text);text-decoration:none;box-shadow:var(--e-tile)}
.ccard:hover{border-color:var(--line2)}
.ccard h3{font-size:16px;font-weight:650;letter-spacing:-.01em}
.ccard p{color:var(--text2);font-size:14px;line-height:1.5}
.ccard .big{font-family:var(--font-display);font-weight:var(--display-weight);font-size:34px;letter-spacing:-.02em;line-height:1}
.ccard .big small{font-family:inherit;font-size:14px;font-weight:600;color:var(--text2);letter-spacing:0;margin-left:6px}
.ccard .viz{min-height:64px}
@media (max-width:1040px){ .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cgrid{grid-template-columns:minmax(0,1fr)} }

/* mini funnel + mini uptime bars used inside compact cards */
.mfun{display:grid;gap:5px}
.pm-viz .mfun{gap:3px;width:100%}
.pm-viz .mfun i{height:6px}
.mfun i{display:block;height:9px;border-radius:4px;background:var(--s1)}
.mfun i.leak{background:repeating-linear-gradient(135deg,var(--crit) 0 4px,color-mix(in srgb,var(--crit) 40%,transparent) 4px 8px)}
.mup{display:flex;gap:2px;height:28px;align-items:stretch}
.mup i{flex:1;border-radius:2px;background:var(--good-soft)}
.mup i.w{background:var(--warn)}
.nobnr{display:grid;gap:6px;font-size:12.5px}
.nobnr span{display:flex;align-items:center;gap:8px;color:var(--text2)}
.nobnr span::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--good);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-7" stroke="black" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/10px no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- revenue mix (DDC.revenueMix) ---------- */
.rmix{display:grid;gap:18px}
.rmix-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rmix-top h3{font-size:14px;font-weight:600;color:var(--text2)}
.rmix-top .rev-fig{margin-top:4px}
.rmix-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rmix-kpis>div{padding:12px 14px;display:grid;gap:2px}
.rmix-kpis>div+div{border-left:1px solid var(--line)}
.rmix-kpis dt{font-size:12.5px;color:var(--text2);display:flex;align-items:center;gap:7px}
.rmix-kpis dt i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.rmix-kpis dd{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rmix-kpis dd small{display:block;font-size:12px;font-weight:600;color:var(--up-ink,var(--good))}
.rmix svg.rmix-chart{width:100%;height:220px;display:block;overflow:visible}
.rmix-chart text{font-size:11px;fill:var(--muted)}
.rmix-chart .grid{stroke:var(--grid)}
.rmix-chart rect{transition:opacity .15s}
.rmix-chart g.col:hover rect{opacity:.85}
@media (max-width:560px){
  .rmix-kpis{grid-template-columns:minmax(0,1fr)}
  .rmix-kpis>div+div{border-left:0;border-top:1px solid var(--line)}
  .rmix-kpis>div{grid-template-columns:1fr auto;align-items:center}
  .rmix-kpis dd{font-size:18px;text-align:right}
  .rmix svg.rmix-chart{height:170px}
}

/* ---------- campaigns table as cards on small screens ---------- */
@media (max-width:640px){
  .ctable{min-width:0!important}
  .ctable tr{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .ctable td{display:grid!important}
  .ctable,.ctable tbody,.ctable tfoot{display:block;width:100%}
  .ctable thead{display:none}
  .ctable tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:14px 2px;border-bottom:1px solid var(--line)}
  .ctable tr>th{grid-column:1/-1;text-align:left;padding:0!important;border:0!important}
  .ctable tr>td{padding:0!important;border:0!important;text-align:left!important;display:grid;font-size:14px}
  .ctable tr>td::before{font-size:11.5px;color:var(--muted);font-weight:500;font-family:var(--font-ui,inherit)}
  .ctable tr>td:nth-of-type(1)::before{content:"Spend"}
  .ctable tr>td:nth-of-type(2)::before{content:"Installs"}
  .ctable tr>td:nth-of-type(3)::before{content:"Trials"}
  .ctable tr>td:nth-of-type(4)::before{content:"Trial to paid"}
  .ctable tr>td:nth-of-type(5)::before{content:"Revenue"}
  .ctable tr>td.roas-col{grid-column:1/-1;display:block!important}
  .ctable tr>td.roas-col::before{content:"Return on ad spend";display:block;margin-bottom:4px}
  .ctable .roas-col{display:block!important}
  .ctable tfoot tr{border-bottom:0}
}

/* ---------- steps with visuals (angle pages) ---------- */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;padding:0;counter-reset:hw}
.how li{counter-increment:hw;display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--tile)}
.how li::before{content:counter(hw);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-wash2);color:var(--accent-ink);font-weight:700;font-size:13px}
.how h3{font-size:16px;font-weight:650}
.how p{color:var(--text2);font-size:14.5px}
.how code{font-size:12.5px;background:var(--tile2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
@media (max-width:860px){ .how{grid-template-columns:minmax(0,1fr)} }

/* code sample tile */
.codebox{background:#0f1533;color:#dfe5ff;border-radius:14px;padding:18px 20px;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;box-shadow:var(--e-tile)}
.codebox .k{color:#9fb0ff}.codebox .s{color:#7fe3b0}.codebox .c{color:#7d88b8}

/* related-pages row */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){ .related{grid-template-columns:minmax(0,1fr)} }

/* hero stage used by angle pages (no globe) */
.hero-stage{position:relative;min-width:0}
.hero-stage>.tile{box-shadow:var(--e-hero)}
.hero-float{position:absolute;z-index:3;background:var(--tile);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 16px 40px -18px #0b123d80;font-size:13px;display:grid;gap:2px}
.hero-float b{font-size:14px}
.hero-float small{color:var(--text2);font-size:12px}
@media (max-width:720px){ .hero-float{display:none} }

@media (max-width:720px){
  main.lpmain>section{padding-block:72px 0}
  main.lpmain>section.band{margin-top:72px;padding-block:64px}
  main.lpmain>section.band+section{padding-top:64px}
}

/* tiles and cards keep their own ink on dark grounds */
.hero-band .tile,.band.ink .tile,.band.ink .ccard,.hero-band .ccard{color:var(--text)}
.kicker{font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.band.ink .kicker{color:#9fb0ff}
main.lpmain>section.band+section.band{margin-top:0}
.band.ink .dad-say{color:var(--dad-ink,#121a2e)}
.band.ink .dad-mark{color:#fff}

/* ---------- related cards (DDC related renderer) ---------- */
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rcard{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:18px;background:var(--tile);color:var(--text);text-decoration:none;overflow:hidden;box-shadow:var(--e-tile);transition:transform .2s,box-shadow .2s,border-color .2s}
.rcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:0 22px 44px -28px #1b2b4a66}
.rc-viz{position:relative;height:148px;padding:20px 24px;display:flex;align-items:center;background:
  linear-gradient(color-mix(in srgb,var(--c) 7%,transparent) 1px,transparent 1px) 0 0/100% 24px,
  linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--tile)),color-mix(in srgb,var(--c) 3%,var(--tile)));border-bottom:1px solid color-mix(in srgb,var(--c) 14%,var(--line))}
.rc-viz>svg{width:100%;height:108px;display:block;align-self:flex-end;margin-bottom:-20px}
.rc-body{display:grid;gap:8px;align-content:start;padding:18px 22px 20px}
.rc-head{display:flex;align-items:center;gap:10px}
.rc-head .pm-ico{width:30px;height:30px;border-radius:9px;grid-row:auto}
.rc-head .pm-ico svg{width:16px;height:16px}
.rc-head h3{font-size:17px;font-weight:650;letter-spacing:-.01em}
.rc-head small{font-size:11px;font-weight:650;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:999px;padding:1px 7px}
.rc-body p{color:var(--text2);font-size:14.5px;line-height:1.5}
.rc-go{margin-top:4px;font-size:14px;font-weight:600;color:var(--c);display:inline-flex;align-items:center;gap:6px}
.rc-go::after{content:"→";transition:transform .2s}
.rcard:hover .rc-go::after{transform:translateX(3px)}
.rc-roas{width:100%;display:grid;gap:12px}
.rc-roas>div{display:grid;grid-template-columns:78px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:12.5px;color:var(--text2)}
.rc-roas i{height:10px;border-radius:5px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden}
.rc-roas b{display:block;height:100%;border-radius:5px}
.rc-roas em{font-style:normal;font-weight:650;color:var(--text);text-align:right}
.rc-fun{width:100%;display:grid;gap:8px}
.rc-fun i{display:block;height:12px;border-radius:6px;background:var(--c)}
.rc-fun i.leak{background:repeating-linear-gradient(135deg,var(--crit) 0 5px,color-mix(in srgb,var(--crit) 40%,transparent) 5px 10px)}
.rc-up{width:100%;display:grid;gap:12px}
.rc-upbar{display:flex;gap:3px;height:40px}
.rc-upbar i{flex:1;border-radius:3px;background:color-mix(in srgb,var(--good) 45%,var(--tile))}
.rc-upbar i.w{background:var(--warn)}
.rc-up span{font-size:13px;color:var(--text2)}
.rc-up b{color:var(--text);font-size:15px}
@media (max-width:960px){ .rcards{grid-template-columns:minmax(0,1fr)} .rcard{grid-template-rows:auto;grid-template-columns:200px minmax(0,1fr)} .rc-viz{height:auto;min-height:140px;border-bottom:0;border-right:1px solid color-mix(in srgb,var(--c) 14%,var(--line));padding:18px} }
@media (max-width:560px){ .rcard{grid-template-columns:minmax(0,1fr)} .rc-viz{height:124px;min-height:0;padding:18px 20px;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--c) 14%,var(--line))} .rc-viz>svg{height:88px;margin-bottom:-18px} .rc-fun{gap:6px} .rc-fun i{height:10px} }

/* ---------- hero tile bar: product name left, one live/key pill right (no floating chips) ---------- */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--tile2);font-size:13.5px;color:var(--text)}
.hbar-site{display:inline-flex;align-items:center;gap:9px;font-weight:600;min-width:0}
.hbar-site i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--c,var(--s7));flex:none}
.hbar-pill{display:inline-flex;align-items:center;gap:8px;color:var(--text2);background:var(--tile);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 10px;white-space:nowrap}
.hbar-pill b{color:var(--text);font-size:14px;font-weight:650}
.hbar-pill .up{color:var(--up-ink,var(--good));font-weight:650}
@media (max-width:560px){ .hbar{padding:10px 12px} .hbar-pill{padding:3px 10px 3px 8px;font-size:12.5px} }


/* ---------- product bento (home) ---------- */
.pbento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pb{--c:var(--accent);position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:22px;background:var(--tile);color:var(--text);text-decoration:none;overflow:hidden;isolation:isolate;box-shadow:0 1px 2px #1b2b4a0d;transition:transform .25s,box-shadow .25s,border-color .25s}
.pb::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--c) 9%,transparent),transparent 60%);opacity:.8;transition:opacity .25s}
.pb:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 35%,var(--line));box-shadow:0 26px 50px -30px color-mix(in srgb,var(--c) 45%,#1b2b4a)}
.pb:hover::before{opacity:1}
.pb:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pb-head{display:flex;align-items:center;gap:12px;color:var(--c)}
.pb-ico{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,var(--tile));color:var(--c)}
.pb-ico svg{width:19px;height:19px}
.pb-name{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:clamp(21px,1.9vw,25px);letter-spacing:-.018em;line-height:1.1;color:var(--text)}
.pb-free{font-size:11px;font-weight:650;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:999px;padding:0 7px}
.pb-arrow{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text2);font-size:14px;transition:all .25s}
.pb:hover .pb-arrow{background:var(--c);border-color:var(--c);color:#fff;transform:translateX(2px)}
.pb h3{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:clamp(20px,1.8vw,24px);letter-spacing:-.018em;line-height:1.12;text-wrap:balance;max-width:24ch}
.pb>p{font-size:14.5px;color:var(--text2);line-height:1.5;margin-top:-2px}
.pb>.pb-ui{margin-top:auto}
.pb-ui{border:1px solid var(--line);border-radius:14px;background:var(--tile);padding:14px;display:grid;gap:10px;box-shadow:0 12px 30px -24px #1b2b4a66;font-size:12.5px;color:var(--text2)}
.pb-ui small{font-size:12px;color:var(--text2)}
.pb-ui b{color:var(--text);font-weight:650}
.pb-ui .up{font-style:normal;font-size:12px;font-weight:650;color:var(--up-ink,var(--good))}
.pb-chart svg{display:block;width:100%;overflow:visible}
.pb-chart text{font-size:10.5px;fill:var(--muted)}

/* web */
.pb-kpi{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pb-kpi>div:first-child{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 8px}
.pb-kpi small{grid-column:1/-1}
.pb-kpi b{font-size:24px;letter-spacing:-.02em}
.pb-live{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 8px;background:var(--tile2)}
.pb-src{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.pb-src li{display:grid;grid-template-columns:78px minmax(0,1fr) 48px;align-items:center;gap:10px}
.pb-src i,.pb-roas i{height:8px;border-radius:4px;background:color-mix(in srgb,var(--text) 6%,transparent);position:relative;overflow:hidden}
.pb-src i::after,.pb-roas i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;background:var(--k,var(--c))}
.pb-src b,.pb-roas b{text-align:right}

/* revenue */
.pb-revui{align-content:start}
.pb-big{font-family:var(--font-display);font-weight:var(--display-weight);font-size:40px;letter-spacing:-.025em;line-height:1;margin-top:-4px}
.pb-split,.pb-plat{display:flex;gap:3px;height:10px}
.pb-split i,.pb-plat i{width:var(--w);border-radius:3px}
.pb-streams{list-style:none;padding:0;margin:0;display:grid}
.pb-streams li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.pb-streams li::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--k)}
.pb-streams b{margin-left:auto}
.pb-mini{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0}
.pb-mini>div{padding:9px 11px;display:grid;gap:1px;background:var(--tile2)}
.pb-mini>div+div{border-left:1px solid var(--line)}
.pb-mini dt{font-size:11.5px}
.pb-mini dd{font-size:17px;font-weight:650;color:var(--text)}

/* app */
.pb-platk{display:flex;justify-content:space-between;font-size:11.5px}

/* attribution */
.pb-roas{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pb-roas li{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto auto;gap:4px 8px}
.pb-roas span{grid-column:1/-1;font-size:12px}
.pb-roas i{grid-column:1}
.pb-roas b{grid-column:2;grid-row:2;margin-top:-5px}
.pb-sent{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 10px;border-radius:9px;background:color-mix(in srgb,var(--good) 10%,var(--tile));color:var(--text)}

/* funnels */
.pb-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;align-items:end;height:140px}
.pb-steps span{font-size:10.5px}
.pb-steps b{font-size:11.5px}
.pb-steps li{position:relative;display:grid;grid-template-rows:1fr auto auto;height:100%;gap:3px;text-align:center}
.pb-steps i{align-self:end;height:var(--h);min-height:4px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 85%,#fff),var(--s1))}
.pb-steps li.leak i{background:repeating-linear-gradient(135deg,var(--crit) 0 5px,color-mix(in srgb,var(--crit) 45%,var(--tile)) 5px 10px)}
.pb-steps b{font-size:12.5px}
.pb-steps span{font-size:11px}
.pb-steps em{position:absolute;left:50%;top:calc(100% - var(--h) - 58px);transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--crit);border-radius:999px;padding:2px 7px;white-space:nowrap}
.pb-worth{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:9px;background:var(--tile2);color:var(--text)}
.pb-worth b{color:var(--up-ink,var(--good))}

/* uptime */
.pb-status{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--good) 12%,var(--tile));color:var(--text)}
.pb-ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:#fff;font-size:12px;font-weight:700}
.pb-mons{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.pb-mons li{display:grid;grid-template-columns:72px minmax(0,1fr) 52px;align-items:center;gap:10px}
.pb-mons i{display:flex;gap:2px;height:18px}
.pb-mons i u{flex:1;border-radius:2px;background:color-mix(in srgb,var(--good) 45%,var(--tile))}
.pb-mons i u.w{background:var(--warn)}
.pb-mons b{text-align:right}

@media (max-width:1080px){ .pbento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){
  .pbento{grid-template-columns:minmax(0,1fr);gap:12px}
  .pb{padding:18px}
  .pb-steps{height:130px;gap:4px}
  .pb-steps span{font-size:10px}
  .pb-steps b{font-size:11px}
  .pb-mons li{grid-template-columns:64px minmax(0,1fr) 48px}
}
.pb-resp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding-top:9px;border-top:1px solid var(--line)}
.pb-resp svg{display:block;width:100%}
.pb .pb-ui{align-content:start}

/* whole-card links never underline their content */
.pb,.pb:hover,.rcard,.rcard:hover,.pm-card,.pm-card:hover,.ccard,.ccard:hover,.pm-item,.pm-item:hover,.m-hub a,.m-hub a:hover,.m-rel a,.m-rel a:hover{text-decoration:none}
.pb:hover *,.rcard:hover *,.pm-card:hover *,.ccard:hover *,.pm-item:hover *,.m-hub a:hover *,.m-rel a:hover *{text-decoration:none}

/* ---------- dark feature cards (.dcards on .band.ink): home "Under the hood", attribution platform rules ---------- */
.dcards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
.dcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;border:1px solid #ffffff17;background:linear-gradient(180deg,#ffffff0e,#ffffff04);color:#e8ecff;text-decoration:none;overflow:hidden;isolation:isolate;transition:border-color .25s,transform .25s,background .25s}
.dcard::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 60% at 0% 0%,color-mix(in srgb,var(--c,#8ea0ff) 22%,transparent),transparent 65%);opacity:.7}
a.dcard:hover{border-color:#ffffff38;transform:translateY(-2px)}
a.dcard,a.dcard:hover,a.dcard:hover *{text-decoration:none}
.dviz{min-height:116px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;margin-bottom:6px;font-size:12.5px;color:#c3cbef}
.dbig{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);font-size:clamp(30px,2.6vw,38px);letter-spacing:-.025em;line-height:1;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dbig small{font-family:var(--font-ui,inherit);font-size:13px;font-weight:500;letter-spacing:0;color:#aeb7e0}
.dcard h3{font-size:16.5px;font-weight:650;letter-spacing:-.01em;color:#fff;margin-top:4px}
.dcard>p:not(.dbig){font-size:14px;line-height:1.55;color:#aeb7e0}
.dcard>p a{color:#b8c3ff;text-decoration:underline;text-underline-offset:3px}
.dgo{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600;color:#b8c3ff}
.dgo::after{content:" →"}
/* visuals */
.dchecks{display:grid;gap:7px}
.dchecks span{display:flex;align-items:center;gap:9px}
.dchecks span::before{content:"✓";width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#0f1533;background:#7fe3b0;flex:none}
.dcode{font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dfe5ff;background:#0a0f28;border:1px solid #ffffff17;border-radius:10px;padding:9px 11px;white-space:pre-wrap;word-break:break-all;overflow:hidden}
.dcode .k{color:#9fb0ff}.dcode .s{color:#7fe3b0}
.dsq{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px}
.dsq i{aspect-ratio:1;border-radius:3px;background:#3fb97a}
.dfeed{display:grid;gap:6px}
.dfeed span{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;background:#ffffff0a;border:1px solid #ffffff12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfeed span::before{content:"";width:7px;height:7px;border-radius:50%;background:#7fe3b0;box-shadow:0 0 0 3px #7fe3b033;flex:none}
.dfeed span:nth-child(2)::before{background:#8ea0ff;box-shadow:0 0 0 3px #8ea0ff33}
.dfeed b{color:#fff;font-weight:600}
.dfeed em{margin-left:auto;font-style:normal;color:#7d88b8;font-size:11.5px}
.dwin{display:flex;gap:4px;height:32px}
.dwin span{flex:1;display:grid;place-items:center;border-radius:7px;font-size:11px;font-weight:650;color:#fff;background:#4a3aa7;white-space:nowrap;min-width:52px}
.dwin span:nth-child(2){background:#2a78d6}
.dwin span:nth-child(3){background:#1f9a6c;flex:2.4}
@media (max-width:1080px){ .dcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .dcards{grid-template-columns:minmax(0,1fr)} .dviz{min-height:0} }

.metric-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}.fs-target{display:grid;gap:8px;font-size:13px;margin:16px 0}.fs-target input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--text);background:var(--tile)}