/* Adsposure CPM calculator. Every rule is scoped under .adsp-tool. */
/* Layout: page intro, then two columns. Left = plan builder card, right = sticky results. Stacks under 940px.
   Tokens are the Adsposure UI kit's, moved onto the .adsp-tool wrapper for embedding. Light theme only, like the site. */
.adsp-tool{
  --navy:#002b49;--cyan:#00a7e1;--lime:#91d400;--orange:#fe4815;
  --ink:#000000d9;--text:#000000b3;--soft:#00000073;--line:#00000026;--hair:#00000014;--tint:#58849f1a;
  --paper:#fff;--ground:#eef2f5;
  --grad:linear-gradient(90deg,#91d400 0,#00a7e1 45%,#91d400);--grad-flat:linear-gradient(90deg,#91d400,#00a7e1);
  --card-shadow:0 1px 15px #0000001a;--lift-shadow:0 14px 15px rgb(0 0 0 / 10%);--ease-out:cubic-bezier(.2,.8,.3,1);
  --f-head:"Questrial","ITC Avant Garde Gothic W02 Md","Century Gothic","Avenir Next",sans-serif;
  --f-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-btn:5px;--r-input:8px;--r-tile:10px;--r-card:12px;--r-tool:14px;--r-pill:26px;
  background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:15px;line-height:1.6}
.adsp-tool *,.adsp-tool *::before,.adsp-tool *::after{box-sizing:border-box}
.adsp-tool [hidden]{display:none!important}
.adsp-tool button,.adsp-tool input{font:inherit;color:inherit}
.adsp-tool a{color:inherit;text-decoration:none}
.adsp-tool :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.adsp-tool .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.adsp-tool .big-container{max-width:1230px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.adsp-tool .subtitle{color:var(--cyan);text-transform:uppercase;font-family:var(--f-head);font-size:14px;letter-spacing:.06em;line-height:1;display:inline-block;margin:0}
.adsp-tool .heading{color:var(--ink);margin:0;font-family:var(--f-head);font-weight:400;font-size:clamp(30px,4.6vw,48px);line-height:1.2;text-wrap:balance}
.adsp-tool .heading span{color:var(--cyan)}
.adsp-tool .label{font-family:var(--f-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.adsp-tool .fine{margin:0;font-size:11.5px;line-height:1.55;color:var(--soft)}
.adsp-tool .num{font-variant-numeric:tabular-nums; transition: 0.2s ease-in;}
.adsp-tool .num:hover{color:var(--cyan)}
.adsp-tool .rule-label{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.adsp-tool .rule-label::after{content:"";flex:1;height:1px;background:var(--line)}
.adsp-tool .text-btn{border:0;background:none;color:var(--cyan);font-family:var(--f-head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:4px 0}
.adsp-tool .text-btn:hover{text-decoration:underline}
.adsp-tool .whitebtn{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);background:#fff;border:0;border-radius:var(--r-btn);padding:11px 16px;font-family:var(--f-head);font-size:12px;letter-spacing:.04em;text-transform:uppercase;position:relative;overflow:hidden;z-index:0;white-space:nowrap;cursor:pointer;transition:color .3s}
.adsp-tool .whitebtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-flat);opacity:0;transition:opacity .4s}
.adsp-tool .whitebtn:hover{color:#fff}.adsp-tool .whitebtn:hover::before{opacity:1}
.adsp-tool .whitebtn svg{width:9px;height:9px;flex:none;transform-origin:0 50%;transition:transform .3s}
.adsp-tool .whitebtn:hover svg{transform:rotate(-45deg)}

/* intro */
.adsp-tool .page-intro{padding-block:52px 30px;background:linear-gradient(#58849f1f,#fff 78%)}
.adsp-tool .section-heading{text-align:center;max-width:820px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.adsp-tool .section-heading p{margin:0;max-width:62ch}
/* .adsp-tool .tool-section{padding-block:6px 80px} */
.adsp-tool .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:28px;align-items:start}

/* builder card */
.adsp-tool .builder{background:#fff;border:1px solid var(--hair);border-radius:var(--r-tool);box-shadow:var(--lift-shadow);padding:20px;display:flex;flex-direction:column;gap:22px;min-width:0}
.adsp-tool .modes{display:grid;grid-template-columns:1fr 1fr;background:var(--ground);border-radius:var(--r-input);padding:4px;gap:4px}
.adsp-tool .modes button{border:0;background:none;border-radius:6px;padding:10px 8px;font-family:var(--f-head);font-size:14px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.adsp-tool .modes button[aria-pressed="true"]{background:var(--navy);color:#fff}
.adsp-tool .modes button:disabled{cursor:not-allowed;color:var(--soft)}
.adsp-tool .soon{font-family:var(--f-head);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--orange);border-radius:var(--r-pill);padding:3px 7px;line-height:1.2}
.adsp-tool .block{display:flex;flex-direction:column;gap:10px;min-width:0}
.adsp-tool .block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.adsp-tool .block-head label,.adsp-tool .block-head .t{font-family:var(--f-head);font-size:15px;color:var(--ink)}
.adsp-tool .block-head small{font-size:12px;color:var(--soft)}
.adsp-tool .money{display:flex;align-items:center;gap:6px;background:var(--ground);border:1px solid var(--line);border-radius:var(--r-input);padding:0 14px;height:52px;transition:border-color .2s,box-shadow .2s}
.adsp-tool .money:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px #00a7e122}
.adsp-tool .money b{font-family:var(--f-head);font-weight:400;font-size:24px;color:var(--cyan)}
.adsp-tool .money input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--f-head);font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.adsp-tool input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;margin:0;cursor:pointer}
.adsp-tool input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),#00000026 var(--p,0%))}
.adsp-tool input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),#00000026 var(--p,0%))}
.adsp-tool input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cyan);border:3px solid #fff;box-shadow:0 0 0 1px var(--cyan),0 2px 6px #0003;margin-top:-6.5px}
.adsp-tool input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--cyan);border:3px solid #fff;box-shadow:0 0 0 1px var(--cyan),0 2px 6px #0003}
.adsp-tool .ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--soft);margin-top:-6px}
.adsp-tool .guide{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:13px;line-height:1.3}
.adsp-tool .guide:hover{text-decoration:underline}
.adsp-tool .guide svg{width:9px;height:9px;flex:none}
.adsp-tool .pills{display:flex;flex-wrap:wrap;gap:8px}
.adsp-tool .pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--hair);background:var(--tint);color:#000c;font-family:var(--f-head);font-size:13px;line-height:1;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.adsp-tool .pill:hover{border-color:var(--cyan);color:var(--cyan)}
.adsp-tool .pill[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.adsp-tool .pill i{width:12px;height:12px;border-radius:3px;border:1.5px solid currentColor;display:grid;place-items:center;font-style:normal;font-size:9px;line-height:1;opacity:.55}
.adsp-tool .pill[aria-pressed="true"] i{opacity:1;background:var(--cyan);border-color:var(--cyan)}
.adsp-tool .pill[aria-pressed="true"] i::before{content:"✓";color:#fff}

.adsp-tool .select{appearance:none;-webkit-appearance:none;width:100%;height:52px;border:1px solid var(--line);border-radius:var(--r-input);padding:0 42px 0 14px;font-family:var(--f-head);font-size:18px;color:var(--ink);cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5' fill='none' stroke='%2300a7e1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center no-repeat;transition:border-color .2s,box-shadow .2s}
.adsp-tool .select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px #00a7e122}
.adsp-tool .goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.adsp-tool .goal{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-tile);padding:7px 7px 10px;cursor:pointer;box-shadow:var(--card-shadow);transition:border-color .25s,transform .25s,box-shadow .25s;min-width:0}
.adsp-tool .goal:hover{border-color:var(--cyan);transform:translateY(-2px)}
.adsp-tool .goal .ph{display:block;border-radius:7px;overflow:hidden;background:var(--ground)}
.adsp-tool .goal img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .4s}
.adsp-tool .goal:hover img{transform:scale(1.06)}
.adsp-tool .goal b{font-family:var(--f-head);font-weight:400;font-size:16px;line-height:1.2;color:var(--navy);margin:9px 3px 3px}
.adsp-tool .goal small{color:var(--text);font-size:11.5px;line-height:1.4;margin-inline:3px}
.adsp-tool .goal[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);box-shadow:0 0 0 3px #00a7e133}
.adsp-tool .goal[aria-pressed="true"] b{color:#fff}.adsp-tool .goal[aria-pressed="true"] small{color:#ffffffc7}
.adsp-tool .targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.adsp-tool .target{display:flex;align-items:flex-start;gap:9px;text-align:left;padding:10px 12px;border-radius:var(--r-tile);border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .25s,background .25s;min-width:0}
.adsp-tool .target:hover{border-color:var(--cyan)}
.adsp-tool .target i{flex:none;width:16px;height:16px;margin-top:2px;border-radius:4px;border:1.5px solid var(--soft);display:grid;place-items:center;font-style:normal;font-size:11px;line-height:1;color:#fff}
.adsp-tool .target span{display:flex;flex-direction:column;gap:2px;min-width:0}
.adsp-tool .target b{font-family:var(--f-head);font-weight:400;font-size:14.5px;line-height:1.25;color:var(--ink)}
.adsp-tool .target small{font-size:11.5px;line-height:1.3;color:var(--text)}
.adsp-tool .target[aria-pressed="true"]{border-color:var(--navy);background:var(--tint)}
.adsp-tool .target[aria-pressed="true"] i{background:var(--cyan);border-color:var(--cyan)}
.adsp-tool .target[aria-pressed="true"] i::before{content:"\2713"}
.adsp-tool .target:disabled{cursor:not-allowed;background:var(--ground);border-color:var(--hair)}
.adsp-tool .target:disabled b,.adsp-tool .target:disabled small{color:var(--soft)}
.adsp-tool .mixnote{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink);border-left:3px solid var(--cyan);background:var(--tint);border-radius:0 8px 8px 0;padding:8px 12px}
.adsp-tool #cpm-more .text-btn{font-size:11.5px}
.adsp-tool .switch-warn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border-left:3px solid var(--orange);background:var(--tint);border-radius:0 5px 5px 0;padding:10px 12px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.adsp-tool .switch-warn p{margin:0;flex:1 1 220px}
.adsp-tool .switch-warn b{font-weight:500}
.adsp-tool .switch-warn div{display:flex;align-items:center;gap:14px}
@keyframes adsp-flash{from{background:#00a7e133}to{background:transparent}}
.adsp-tool .line.flash{animation:adsp-flash 1.4s ease-out;border-radius:6px}
/* mix */
.adsp-tool .mixbar{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;background:var(--tint);border-radius:var(--r-input);padding:8px 12px;font-size:12.5px}
.adsp-tool .mixbar b{color:var(--ink);font-weight:500}
.adsp-tool .mixbar .acts{display:flex;gap:16px}
.adsp-tool .mkt{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.adsp-tool .x-unused{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:linear-gradient(#58849f14,#fff)}
.adsp-tool .x-unused::-webkit-details-marker{display:none}
.adsp-tool .x-unused .n{font-family:var(--f-head);font-size:18px;color:var(--ink);display:flex;align-items:center;gap:9px}
.adsp-tool .x-unused .n::before{content:"";width:7px;height:7px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg);transition:transform .2s}
.adsp-tool .mkt[open]>summary .n::before{transform:rotate(45deg)}
.adsp-tool .x-unused small{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}
.adsp-tool .mkt-body{padding:6px 14px 14px;display:flex;flex-direction:column;gap:6px}
.adsp-tool .mkt-body .rule-label{margin-top:10px}
.adsp-tool .line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;min-width:0}
.adsp-tool .line .nm{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.adsp-tool .line .nm b{font-weight:500;color:var(--ink);font-size:14px}
.adsp-tool .line .nm small{font-size:11.5px;color:var(--soft)}
.adsp-tool .line.on .nm b{color:var(--navy)}
.adsp-tool .step{flex:none;display:grid;grid-template-columns:32px 46px 32px;height:34px;border:1px solid var(--line);border-radius:var(--r-input);overflow:hidden;background:#fff}
.adsp-tool .line.on .step{border-color:var(--cyan)}
.adsp-tool .step button{border:0;background:var(--ground);color:var(--navy);font-size:17px;line-height:1;cursor:pointer}
.adsp-tool .step button:hover{background:var(--cyan);color:#fff}
.adsp-tool .step button:disabled{color:var(--soft);cursor:default;background:var(--ground)}
.adsp-tool .step input{border:0;width:100%;text-align:center;font-size:14px;font-weight:500;color:var(--ink);background:#fff;font-variant-numeric:tabular-nums;outline-offset:-2px;-moz-appearance:textfield;appearance:textfield}
.adsp-tool .step input::-webkit-outer-spin-button,.adsp-tool .step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.adsp-tool .none{border:1px dashed var(--line);border-radius:var(--r-card);padding:18px;text-align:center;font-size:13.5px}

/* results */
.adsp-tool .results{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;gap:22px;min-width:0}
.adsp-tool .hero{background:#fff;border:1px solid var(--hair);border-top:2px solid var(--cyan);border-radius:var(--r-tool);box-shadow:var(--lift-shadow);padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.adsp-tool .hero .big{font-family:var(--f-head);font-size:clamp(40px,6vw,58px);line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.adsp-tool .hero .cap{font-family:var(--f-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.adsp-tool .hero hr{border:0;border-top:1px solid var(--line);margin:12px 0 8px;width:100%}
.adsp-tool .costrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.adsp-tool .cost{font-family:var(--f-head);font-size:clamp(24px,3.2vw,32px);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.adsp-tool .chip{font-family:var(--f-head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:#000c;background:var(--tint);border:1px solid var(--hair);border-radius:var(--r-pill);padding:7px 11px;white-space:nowrap}
.adsp-tool .chip.over{color:#fff;background:var(--orange);border-color:var(--orange)}
.adsp-tool .cpm{margin-top:8px;background:var(--tint);border-radius:var(--r-input);padding:10px 14px;font-size:13.5px;color:var(--ink);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.adsp-tool .cpm b{font-family:var(--f-head);font-weight:400;font-size:20px;color:var(--cyan);font-variant-numeric:tabular-nums}
.adsp-tool .cpm small{color:var(--text);font-size:12px}
.adsp-tool .hero>.fine{margin-top:8px}
.adsp-tool .mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.adsp-tool .mini-stats div{background:var(--tint);border-radius:10px;padding:9px 12px}
.adsp-tool .mini-stats b{display:block;font-family:var(--f-head);font-size:22px;font-weight:400;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.adsp-tool .mini-stats small{font-size:11.5px;color:var(--text)}
.adsp-tool .compare{display:flex;flex-direction:column;gap:10px}
.adsp-tool .bar{display:grid;grid-template-columns:128px minmax(0,1fr) 88px;align-items:center;gap:10px;font-size:11.5px}
.adsp-tool .bar .k{font-family:var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.adsp-tool .bar .track{height:26px;background:var(--ground);border-radius:4px;overflow:hidden}
.adsp-tool .bar .fill{display:block;height:100%;min-width:4px;background:var(--navy);border-radius:4px;transition:width .5s var(--ease-out)}
.adsp-tool .bar.me .fill{background:var(--cyan)}
.adsp-tool .bar.me .k{color:var(--cyan)}
.adsp-tool .bar .v{text-align:right;color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.adsp-tool .callout{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:10px;background:var(--tint);font-size:13px;color:var(--ink)}
.adsp-tool .callout b{font-family:var(--f-head);font-weight:400;font-size:24px;color:var(--cyan);line-height:1}
.adsp-tool .contact{border-radius:var(--r-card);padding:22px;color:#fff;display:flex;flex-direction:column;gap:12px;background:radial-gradient(120% 140% at 100% 0,#00a7e140,transparent 55%),var(--navy)}
.adsp-tool .contact h4{font-family:var(--f-head);font-weight:400;font-size:23px;line-height:1.25;margin:0;text-wrap:balance}
.adsp-tool .contact h4 span{color:var(--cyan)}
.adsp-tool .contact .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.adsp-tool .contact .num{font-family:var(--f-head);font-size:18px;letter-spacing:.02em;user-select:all}
.adsp-tool .contact small{color:#ffffffb3;font-size:12px}
.adsp-tool .notice{background:var(--tint);border-left:3px solid var(--lime);border-radius:0 8px 8px 0;padding:12px 14px;font-size:13px;line-height:1.5;color:var(--text)}
.adsp-tool .notice b{color:var(--ink);font-weight:500}
.adsp-tool .notice p{margin:0}.adsp-tool .notice p+p{margin-top:8px}

@keyframes adsp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.adsp-tool .section-heading>*{animation:adsp-rise .6s var(--ease-out) both}
.adsp-tool .section-heading>:nth-child(2){animation-delay:.06s}.adsp-tool .section-heading>:nth-child(3){animation-delay:.14s}
.adsp-tool .calc{animation:adsp-rise .7s var(--ease-out) .25s both}
@media (max-width:940px){.adsp-tool .calc{grid-template-columns:minmax(0,1fr)}.adsp-tool .results{position:static}}
@media (max-width:640px){
  .adsp-tool .page-intro{padding-block:34px 20px}.adsp-tool .tool-section{padding-block:4px 56px}
  .adsp-tool .builder{padding:14px}.adsp-tool .hero{padding:18px}
  .adsp-tool .bar{grid-template-columns:96px minmax(0,1fr) 78px;gap:8px}.adsp-tool .bar .k{font-size:10.5px}
  .adsp-tool .modes button{font-size:13px}
  .adsp-tool .goal b{font-size:11px !important; word-break: break-word;}.adsp-tool .goal small{font-size:11px}
}
/* ---- Site sizing: values taken from the live .homebudget-* / .budget-* styles on the new adsposure.com ---- */
.adsp-tool{--f-head:"ITC Avant Garde Gothic W02 Md","Questrial","Century Gothic","Avenir Next",sans-serif}
.adsp-tool .heading{font-size:46px;font-weight:600}
.adsp-tool .section-heading p{font-size:15px}
.adsp-tool .calc{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:36px}
.adsp-tool .builder{padding:20px;border: 1px solid #e4e4e4; gap:17px}
.adsp-tool .modes{background:var(--tint);border-radius:4px;padding:5px;gap:5px}
.adsp-tool .modes button{height:38px;padding:0 8px;border-radius:4px;font-size:13px;color:#000c}
.adsp-tool .modes button[aria-pressed="true"]{color:#fff}
.adsp-tool .block{gap:8px}
.adsp-tool .block-head label,.adsp-tool .block-head .t{font-size:12.5px;color:#000c}
.adsp-tool .block-head small{font-size:11px}
.adsp-tool .money{height:45px;border:0;border-radius:4px;padding:0 13px;gap:7px;background:var(--tint);box-shadow:inset 0 1px 5px #00000029}
.adsp-tool .money:focus-within{box-shadow:inset 0 1px 5px #00000029,0 0 0 2px var(--cyan)}
.adsp-tool .money b{font-size:23px;font-weight:600}
.adsp-tool .money input{font-size:22px;font-weight:600;color:#3f3f3f}
.adsp-tool input[type=range]{height:21px;margin:9px 0 0}
.adsp-tool input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),#cfcfcf var(--p,0%));box-shadow:inset 0 1px 4px #0003}
.adsp-tool input[type=range]::-moz-range-track{height:7px;border-radius:999px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),#cfcfcf var(--p,0%));box-shadow:inset 0 1px 4px #0003}
.adsp-tool input[type=range]::-webkit-slider-thumb{width:11px;height:11px;border:0;margin-top:-2px;box-shadow:0 0 0 5px #00a7e142,inset 0 1px 3px #ffffffa6}
.adsp-tool input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;box-shadow:0 0 0 5px #00a7e142,inset 0 1px 3px #ffffffa6}
.adsp-tool .ends{margin-top:0;font-family:var(--f-head);font-size:12px;color:#0006}
.adsp-tool .guide{font-size:12px}
.adsp-tool .select{height:45px;border-color:#d5d5d5;border-radius:5px;padding:0 36px 0 13px;font-size:16px;color:#000c;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12px center}
.adsp-tool .targets{background:var(--tint);border-radius:4px;padding:15px;gap:14px 18px;box-shadow:inset 0 1px 5px #00000029;grid-template-columns:repeat(3,minmax(0,1fr))}
.adsp-tool .target,.adsp-tool .target[aria-pressed="true"],.adsp-tool .target:disabled{background:none;border:0;border-radius:3px;padding:0;gap:9px}
.adsp-tool .target i{width:13px;height:13px;margin-top:1px;flex:none;border:1px solid #aab9c2;border-radius:3px;font-size:9px;background:#fff;box-shadow:inset 0 1px 3px #00000029}
.adsp-tool .target b{font-size:12.5px;line-height:1.2;color:#000c}
.adsp-tool .target small{font-size:11px;color:#0009}
.adsp-tool .target:disabled i{background:none}
.adsp-tool .goal b{font-size:14px}.adsp-tool .goal small{font-size:11px}
.adsp-tool .mixbar{border-radius:5px;padding:9px 12px;font-family:var(--f-head);font-size:12px;color:#000;box-shadow:inset 0 1px 10px #0000000f}
.adsp-tool .mixbar b{font-weight:400;color:var(--navy)}
.adsp-tool .mixnote{font-size:12px}
.adsp-tool .mkt{border-radius:5px;border-color:#d5d5d5}
.adsp-tool .mkt-body .rule-label{font-size:11px;letter-spacing:1px;color:#000c}
.adsp-tool .line .nm b{font-family:var(--f-head);font-weight:400;font-size:13px;color:#000c}
.adsp-tool .line.on .nm b{color:var(--navy)}
.adsp-tool .line .nm small{font-size:11px}
.adsp-tool .line .nm a{color:var(--cyan)}
.adsp-tool .line .nm a:hover{text-decoration:underline}
.adsp-tool .step{height:32px;border-radius:5px;grid-template-columns:30px 42px 30px}
.adsp-tool .step input{font-family:var(--f-head);font-size:13px}
.adsp-tool .text-btn{font-size:11px}
.adsp-tool .results{gap:25px}
.adsp-tool .hero{padding:20px;border:0;border-top:2px solid var(--cyan);gap:0}
.adsp-tool .label{font-size:11px;letter-spacing:1px;color:#000c;line-height:1;margin-bottom:10px}
.adsp-tool .hero .big{font-size:48px;font-weight:600;line-height:.95;margin-bottom:12px}
.adsp-tool .hero .cap{font-size:12px;letter-spacing:1.2px;line-height:1.3}
.adsp-tool .hero hr{border-top-color:#00000024;margin:21px 0 17px}
.adsp-tool .costrow{margin-bottom:14px}
.adsp-tool .cost{font-size:31px;font-weight:600;line-height:1;color:#414141}
.adsp-tool .chip{font-family:var(--f-body);font-size:10px;font-weight:500;letter-spacing:0;color:#373737;background:#edf2f5;border:0;border-radius:20px;padding:7px 12px}
.adsp-tool .cpm{margin-top:0;border-radius:5px;padding:9px 12px;font-family:var(--f-head);font-size:12px;color:#000;box-shadow:inset 0 1px 10px #0000000f}
.adsp-tool .cpm b{font-size:15px}
.adsp-tool .cpm small{font-family:var(--f-body);font-size:11px}
.adsp-tool .hero>.fine{font-size:11.5px;margin-top:10px}
.adsp-tool .cpm.exp{margin-top:8px}
.adsp-tool .avg{margin:-6px 0 14px;font-family:var(--f-head);font-size:12px;color:#000c}
.adsp-tool .avg b{font-weight:400;color:var(--navy);font-size:15px}
.adsp-tool .mini-stats{margin-top:14px}
.adsp-tool .mini-stats div{border-radius:5px}
.adsp-tool .mini-stats b{font-size:20px}.adsp-tool .mini-stats small{font-size:11px}
.adsp-tool .compare{gap:10px}
.adsp-tool .compare>.rule-label{font-size:12px;letter-spacing:1.5px;color:#000c;margin-bottom:8px}
.adsp-tool .bar{grid-template-columns:106px minmax(0,1fr) 96px;gap:15px}
.adsp-tool .bar .k{font-size:11px;letter-spacing:0;line-height:1.2;color:#000c}
.adsp-tool .bar .track{height:29px;background:var(--tint);box-shadow:inset 0 1px 5px #00000029}
.adsp-tool .bar .fill{min-width:9px}
.adsp-tool .bar .track{position:relative}
.adsp-tool .bar .fill{position:absolute;inset:0 auto 0 0}
.adsp-tool .bar .fill.hi{background:#002b4947}
.adsp-tool .bar .v{font-family:var(--f-head);font-size:12.8px;color:#000c}
.adsp-tool .callout{align-self:flex-start;align-items:center;gap:9px;margin-top:10px;padding:10px 13px;border-radius:5px;background:#58849f14;font-family:var(--f-head);font-size:12px;color:#000;box-shadow:inset 0 1px 5px #0000001f}
.adsp-tool .callout b{font-size:22px}
.adsp-tool .default-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:35px;text-transform:uppercase;color:#fff;background-image:var(--grad);background-size:200%;border:0;border-radius:5px;padding:10px 15px;font-family:var(--f-head);font-size:12px;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-position .4s,box-shadow .3s}
.adsp-tool .default-btn:hover{background-position:100%;}
.adsp-tool .default-btn svg{width:9px;height:9px;flex:none;transform-origin:0 50%;transition:transform .3s}
.adsp-tool .default-btn:hover svg{transform:rotate(-45deg)}
.adsp-tool .cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px}
.adsp-tool .cta b{font-family:var(--f-head);font-weight:400;font-size:15px;color:var(--ink);user-select:all}
.adsp-tool .notice{font-size:13.5px;border-radius:0 5px 5px 0}
.adsp-tool .results>.fine{font-size:13.5px;color:#0009}
@media (min-width:768px) and (max-width:991px){
  .adsp-tool .heading{font-size:34px}.adsp-tool .calc{gap:28px}.adsp-tool .hero .big{font-size:38px}.adsp-tool .modes button{font-size:12px}
}
@media (max-width:940px){.adsp-tool .calc{grid-template-columns:minmax(0,1fr);gap:30px}}
@media (max-width:767px){
  .adsp-tool .heading{font-size:30px}
  .adsp-tool .builder{padding:18px 14px}
  .adsp-tool .modes button{font-size:12px}
  .adsp-tool .targets{grid-template-columns:minmax(0,1fr)}
  .adsp-tool .hero .big{font-size:30px}
  .adsp-tool .cost{font-size:24px}
  .adsp-tool .bar{grid-template-columns:96px minmax(0,1fr) 92px;gap:6px}
  .adsp-tool .big-container { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px));}
}
@media (prefers-reduced-motion:reduce){.adsp-tool *,.adsp-tool *::before,.adsp-tool *::after{animation:none!important;transition:none!important}}

@font-face{
  font-family:"ITC Avant Garde Gothic W02 Md";
  src:url('/fonts/ITC-Avant-Garde-Gothic-W02-Md.woff2') format('woff2');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
.adsp-tool--embed{--f-head:"ITC Avant Garde Gothic W02 Md",sans-serif}
/* Leave room for the card shadows inside the iframe viewport. */
.adsp-tool--embed .tool-section{padding-block:12px 24px}
/* The homepage's 960px desktop container gives the iframe about 936px. */
@media (min-width:900px) and (max-width:940px){
  .adsp-tool--embed .calc{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:36px}
  .adsp-tool--embed .results{position:sticky}
}