/* Top Funnel Media — CPG Meta Advertising case study
   Scoped under .tfm-cpg so it never affects the theme header, footer or other content.
   Enqueued by the plugin only on pages that use the [tfm_cpg_case_study] shortcode. */
.tfm-cpg{--indigo:#283088; --indigo-d:#1E2568; --peri:#A8A0D8; --peri-lt:#E6E4F2;
  --ink:#111114; --body:#34343F; --white:#fff; --off:#F8F8F8; --green:#3DB54A; --mute:#5A5A6B;
  --disp:'Poppins',system-ui,sans-serif; --text:'Inter',system-ui,sans-serif;
  --wrap:1180px; --pad:clamp(56px,7vw,104px); --r:8px; --r-lg:16px;}
.tfm-cpg *,.tfm-cpg *::before,.tfm-cpg *::after{box-sizing:border-box;margin:0;padding:0}
.tfm-cpg{font-family:var(--text);color:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;background:var(--white)}
.tfm-cpg h1,.tfm-cpg h2,.tfm-cpg h3,.tfm-cpg h4{font-family:var(--disp);color:var(--indigo);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.tfm-cpg a{color:var(--indigo);text-decoration:none}
.tfm-cpg p{max-width:68ch}
.tfm-cpg img{display:block;max-width:100%}
.tfm-cpg .wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.tfm-cpg .sec{padding-block:var(--pad)}
.tfm-cpg :focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:3px}
.tfm-cpg .panel--dark :focus-visible{outline-color:var(--white)}
.tfm-cpg .eyebrow{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);margin-bottom:16px}
.tfm-cpg .panel--dark .eyebrow,.tfm-cpg .panel--tint .eyebrow{color:var(--indigo)}
.tfm-cpg .panel--dark .eyebrow{color:var(--peri-lt)}
.tfm-cpg h2.big{font-size:clamp(29px,3.7vw,46px);max-width:20ch}
.tfm-cpg .lead{font-size:clamp(17px,1.4vw,20px);color:var(--body)}
.tfm-cpg .lead p+p{margin-top:1em}
.tfm-cpg .stack>*+*{margin-top:16px}
.tfm-cpg /* buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.tfm-cpg .btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 32px;font-family:var(--disp);font-weight:600;font-size:16px;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.tfm-cpg .btn:hover{transform:translateY(-2px)}
.tfm-cpg .btn--solid{background:var(--white);color:var(--indigo)}
.tfm-cpg .btn--solid:hover{background:var(--peri-lt)}
.tfm-cpg .btn--indigo{background:var(--indigo);color:var(--white)}
.tfm-cpg .btn--indigo:hover{background:var(--indigo-d)}
.tfm-cpg .btn--ghost{border-color:var(--peri);color:var(--white)}
.tfm-cpg .btn--ghost:hover{background:rgba(255,255,255,.12)}
.tfm-cpg .btn--outline{border-color:var(--indigo);color:var(--indigo)}
.tfm-cpg .btn--outline:hover{background:var(--peri-lt)}
.tfm-cpg /* hero */
.hero{position:relative;background:var(--indigo);color:var(--off);overflow:hidden}
.tfm-cpg .hero::after{content:"";position:absolute;right:0;bottom:0;width:32%;height:44%;background:var(--ink);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.tfm-cpg .hero__dots{position:absolute;top:0;right:0;width:min(300px,32%);opacity:.6;pointer-events:none}
.tfm-cpg .hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,64px);align-items:center}
.tfm-cpg .hero h1{color:#fff;font-size:clamp(38px,5.4vw,66px);line-height:1.03;letter-spacing:-.03em}
.tfm-cpg .hero h1 em{font-style:normal;display:block;color:var(--peri)}
.tfm-cpg .hero__copy{margin-top:26px;max-width:52ch;font-size:clamp(16px,1.35vw,19px);color:var(--peri-lt)}
.tfm-cpg .hero__copy p+p{margin-top:14px}
.tfm-cpg .hero__art{width:100%;height:auto}
.tfm-cpg .strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:clamp(44px,5vw,64px);background:rgba(168,160,216,.34);border-radius:var(--r);overflow:hidden}
.tfm-cpg .strip__i{background:var(--indigo);padding:26px clamp(18px,2vw,30px) 28px}
.tfm-cpg .strip__k{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.2vw,26px);color:#fff}
.tfm-cpg .strip__v{margin-top:8px;font-size:15px;color:var(--peri-lt);line-height:1.5}
.tfm-cpg /* panels */
.panel--tint{background:var(--peri-lt)}
.tfm-cpg .panel--dark{background:var(--indigo);color:var(--off)}
.tfm-cpg .panel--dark h2,.tfm-cpg .panel--dark h3,.tfm-cpg .panel--dark h4{color:#fff}
.tfm-cpg /* numbered cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.tfm-cpg .card{background:var(--peri-lt);border-top:5px solid var(--indigo);border-radius:var(--r);padding:clamp(26px,3vw,38px);transition:transform .18s,box-shadow .18s}
.tfm-cpg .card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(40,48,136,.1)}
.tfm-cpg .card__n{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--indigo);opacity:.55}
.tfm-cpg .card h3{font-size:clamp(20px,1.9vw,24px);margin:10px 0 14px}
.tfm-cpg .card p{font-size:16px}
.tfm-cpg /* stats */
.badge{display:inline-block;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--white);color:var(--indigo);padding:8px 16px;border-radius:999px;margin-bottom:24px}
.tfm-cpg .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tfm-cpg .stat{background:var(--indigo);border-radius:var(--r);padding:clamp(26px,2.6vw,34px);color:var(--peri-lt)}
.tfm-cpg .stat__n{font-family:var(--disp);font-weight:800;color:#fff;font-size:clamp(40px,4.8vw,60px);line-height:1;letter-spacing:-.03em;margin-bottom:14px}
.tfm-cpg .stat__n small{display:block;font-size:.4em;font-weight:600;letter-spacing:.03em;opacity:.82;margin-bottom:2px}
.tfm-cpg .stat p{font-size:15px;line-height:1.45;max-width:none}
.tfm-cpg .note{margin-top:26px;font-size:14.5px;line-height:1.6;border-left:4px solid var(--peri);padding-left:18px;max-width:92ch}
.tfm-cpg .src{margin-top:16px;font-size:13.5px;color:var(--mute);max-width:92ch}
.tfm-cpg .src a{text-decoration:underline;text-underline-offset:2px}
.tfm-cpg /* descriptor strip */
.desc{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--peri);border-radius:var(--r);overflow:hidden;margin-top:44px}
.tfm-cpg .desc__i{background:#fff;padding:22px 24px}
.tfm-cpg .desc__k{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tfm-cpg .desc__v{margin-top:6px;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--indigo);line-height:1.3}
.tfm-cpg .block{margin-top:60px}
.tfm-cpg .block h3{font-size:clamp(23px,2.4vw,30px);margin-bottom:16px}
.tfm-cpg .list{display:grid;gap:12px;margin-top:20px;list-style:none;max-width:74ch}
.tfm-cpg .list li{position:relative;padding-left:28px;font-size:16.5px}
.tfm-cpg .list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--indigo)}
.tfm-cpg .list--chk li::before{background:var(--green);clip-path:polygon(14% 46%,0 60%,38% 96%,100% 22%,86% 10%,38% 68%);width:16px;height:16px;top:.32em}
.tfm-cpg .do{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 44px;margin-top:28px}
.tfm-cpg .do__i{border-top:2px solid var(--peri);padding-top:20px}
.tfm-cpg .do__i h4{font-family:var(--disp);font-size:19px;margin-bottom:10px}
.tfm-cpg .do__i p{font-size:16px}
.tfm-cpg /* measurement */
.meas{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.tfm-cpg .meas__c{background:#fff;border:1px solid var(--peri);border-radius:var(--r);padding:clamp(24px,2.6vw,32px)}
.tfm-cpg .meas__c h3{font-size:20px;margin-bottom:8px}
.tfm-cpg .meas__c .pre{font-size:15px;color:var(--mute);font-style:italic;margin-bottom:6px}
.tfm-cpg .meas__c ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.tfm-cpg .meas__c li{position:relative;padding-left:20px;font-size:15.5px}
.tfm-cpg .meas__c li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--peri)}
.tfm-cpg /* funnel */
.funnel{margin-top:48px;display:grid;gap:6px}
.tfm-cpg .stage{background:rgba(255,255,255,.06);border-radius:var(--r);padding:22px clamp(20px,2.4vw,32px) 26px}
.tfm-cpg .stage__track{height:6px;background:rgba(168,160,216,.28);border-radius:3px;overflow:hidden;margin-bottom:18px}
.tfm-cpg .stage__fill{display:block;height:100%;background:var(--peri)}
.tfm-cpg .stage__row{display:grid;grid-template-columns:54px 1fr;gap:clamp(16px,2vw,28px);align-items:start}
.tfm-cpg .stage__n{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--peri);line-height:1;padding-top:2px}
.tfm-cpg .stage h3{font-size:21px;color:#fff;margin-bottom:8px}
.tfm-cpg .stage p{font-size:16px;color:var(--peri-lt);max-width:76ch}
.tfm-cpg .kick{margin-top:44px;font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.1vw,26px);line-height:1.35;color:#fff;border-left:5px solid var(--peri);padding-left:24px;max-width:42ch}
.tfm-cpg /* pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.tfm-cpg .pill{font-family:var(--disp);font-weight:500;font-size:15px;background:var(--peri-lt);color:var(--indigo);padding:11px 20px;border-radius:999px}
.tfm-cpg /* faq */
.faq{margin-top:40px;border-top:1px solid var(--peri)}
.tfm-cpg .faq details{border-bottom:1px solid var(--peri)}
.tfm-cpg .faq summary{list-style:none;cursor:pointer;position:relative;padding:26px 60px 26px 0;font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.7vw,20px);color:var(--indigo);line-height:1.35}
.tfm-cpg .faq summary::-webkit-details-marker{display:none}
.tfm-cpg .faq summary::after,.tfm-cpg .faq summary::before{content:"";position:absolute;right:8px;top:50%;background:var(--indigo);transition:transform .2s,opacity .2s}
.tfm-cpg .faq summary::after{width:17px;height:2px;transform:translateY(-50%)}
.tfm-cpg .faq summary::before{width:2px;height:17px;right:15.5px;transform:translateY(-50%)}
.tfm-cpg .faq details[open] summary::before{opacity:0}
.tfm-cpg .faq__a{padding:0 60px 28px 0;font-size:16.5px;max-width:76ch;color:var(--body)}
.tfm-cpg /* closing */
.close{position:relative;overflow:hidden}
.tfm-cpg .close .wrap{position:relative;z-index:1}
.tfm-cpg .close__dots{position:absolute;left:0;bottom:0;width:min(240px,26%);opacity:.4;transform:scaleY(-1);pointer-events:none;z-index:0}
.tfm-cpg .contacts{display:flex;flex-wrap:wrap;gap:44px;margin-top:34px}
.tfm-cpg .contact .nm{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--peri)}
.tfm-cpg .contact .rl{font-size:15px;color:var(--off);margin-top:2px}
.tfm-cpg .contact .yr{font-size:14px;color:var(--peri-lt);font-style:italic;margin-top:2px}
.tfm-cpg .contact .ct{font-family:var(--disp);font-weight:600;font-size:15px;color:#fff;margin-top:8px}
.tfm-cpg .disclaimer{margin-top:44px;padding-top:24px;border-top:1px solid rgba(168,160,216,.4);font-size:13px;line-height:1.65;color:var(--peri-lt);max-width:92ch}
@media (max-width:1000px){.tfm-cpg .hero__grid{grid-template-columns:1fr}
.tfm-cpg .hero__art{max-width:520px;margin-top:8px}
.tfm-cpg .hero::after{width:46%;height:28%}
.tfm-cpg .stats{grid-template-columns:repeat(2,1fr)}
.tfm-cpg .desc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.tfm-cpg .cards,.tfm-cpg .do,.tfm-cpg .meas{grid-template-columns:1fr}
.tfm-cpg .strip{grid-template-columns:1fr}
.tfm-cpg .btn{width:100%}
.tfm-cpg .contacts{gap:28px}}
@media (max-width:540px){.tfm-cpg .stats,.tfm-cpg .desc{grid-template-columns:1fr}
.tfm-cpg .stage__row{grid-template-columns:40px 1fr}}
@media (prefers-reduced-motion:reduce){.tfm-cpg *{transition:none!important;scroll-behavior:auto!important}}