/* Abdul El-Sayed digital persuasion case study (template-case-abdul-persuasion.php).
   Loaded on that template only. The partner's CSS from their Custom HTML block, unchanged. */

/* Abdul El-Sayed digital persuasion case study. Everything is scoped to .mscs so the theme's
   .entry__body rules stay out of the components. Colors are the site's own. */
.mscs{--ink:#231f2c;--lav:#f4f1fa;--tint:#f9f8fc;--tint2:#eae6f2;--muted:#655f73;--muted-dk:#b4afc4;--rule:rgba(35,31,44,.12);--rule-dk:rgba(244,241,250,.14);--peach:#ffadad;--peach2:#ffbcad;--accent:#d9584c;--accent-dk:#ff8a73;--gray:#8a8499;--gray-dk1:#d6d1e2;--gray-dk2:#857e97;--mono:antarctican-mono,ui-monospace,monospace;--serif:cardo,serif;--sans:proxima-nova,sans-serif;--sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.mscs,.mscs *{box-sizing:border-box}
.entry__body .mscs figure{margin:0}
.entry__body .mscs img{display:block;max-width:100%;height:auto}
.entry__body .mscs a{color:inherit}
.mscs :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Keeps a hyphenated phrase in a headline from breaking at the hyphen. */
.mscs-nowrap{white-space:nowrap}
/* The theme's header and block wrapper put a different gap above the body at each
   breakpoint (most at 1280 and up). These margins make the space from the header to
   the first heading match the space under the first section, about 93px. Added space
   is padding, since a margin here collapses into the header's. */
.entry__body .mscs{margin-top:-48px;padding-top:63px}
@media (min-width:768px){.entry__body .mscs{padding-top:54px}}
@media (min-width:1280px){.entry__body .mscs{margin-top:-75px;padding-top:0}}
.entry__body .mscs>.mscs-text:first-child h2{margin-top:0}


/* Header map: the state drawn over the banner photo, with pins dropping onto the campuses in
   the Flytedesk program. Added to the theme's header by the script below; hidden on phones. */
.mscs-hdrmap{position:absolute;z-index:1;display:none;pointer-events:none}
/* Ours: hidden until the script marks it ready, after the header photo has faded in. */
.mscs-hdrmap{opacity:0;transition:opacity .6s ease-in-out}.mscs-hdrmap.is-ready{opacity:1}
@media (min-width:1024px){.mscs-hdrmap{display:block}.entry__header--case .entry__header-inner{position:relative;z-index:2}}
.mscs-hdrmap svg{position:absolute;top:4%;left:36%;height:92%;width:auto;transform:translateX(-50%);overflow:visible}
.mscs-hdrmap__county{fill:rgba(244,241,250,.04);stroke:rgba(244,241,250,.32);stroke-width:.9;stroke-linejoin:round}
.mscs-hdrmap__pin{opacity:0;transform:translateY(-36px);will-change:transform,opacity}
.mscs-hdrmap__ring{opacity:0;fill:none;stroke:#ffadad;stroke-width:2;transform-box:fill-box;transform-origin:center}
.mscs-hdrmap.is-on .mscs-hdrmap__pin{animation:mscs-pin-drop .55s cubic-bezier(.22,.9,.3,1.25) forwards;animation-delay:var(--d)}
.mscs-hdrmap.is-on .mscs-hdrmap__ring{animation:mscs-pin-ring 1.1s ease-out forwards;animation-delay:calc(var(--d) + .45s)}
@keyframes mscs-pin-drop{from{opacity:0;transform:translateY(-36px)}to{opacity:1;transform:translateY(0)}}
@keyframes mscs-pin-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion:reduce){.mscs-hdrmap__pin{opacity:1;transform:none;animation:none!important}.mscs-hdrmap__ring{display:none}}

/* Live sports band: University of Michigan blue with maize numbers, as a call-out. */
.mscs-band--blue{background:#00274c;color:#fff}
.entry__body .mscs-band--blue h2,.entry__body .mscs-band--blue p{color:#fff}
.mscs-band--blue h2::after,.mscs-band--blue h2:after{background:#ffcb05!important}
.mscs-band--blue .mscs-stat__num{color:#ffcb05}
.mscs-band--blue .mscs-stat__label{color:#fff}
.mscs-band--blue .mscs-stat__sub,.entry__body .mscs-band--blue .mscs-chart__note{color:rgba(255,255,255,.72)}
.mscs-band--blue .mscs-cap{color:rgba(255,255,255,.72)}
.mscs-band--blue .mscs-tvs{margin-top:40px}
.mscs-band--blue .mscs-stats{margin-top:56px}
.entry__body .mscs-stats--three{max-width:960px}
@media (min-width:900px){.entry__body .mscs-stats--three{grid-template-columns:repeat(3,1fr);gap:40px 32px}}
.entry__body .mscs-stats--two{grid-template-columns:1fr 1fr;max-width:720px}
@media (min-width:600px){.entry__body .mscs-stats--two{grid-template-columns:1fr 1fr;gap:40px 48px}.mscs-stats--two .mscs-stat__num{font-size:72px}}
@media (min-width:900px){.entry__body .mscs-stats--two{grid-template-columns:1fr 1fr}.mscs-stats--two .mscs-stat__num{font-size:84px}}
.mscs-sports{display:grid;grid-template-columns:1fr;gap:36px;max-width:1200px;margin:44px auto 0}
@media (min-width:900px){.mscs-sports{grid-template-columns:1fr 1fr;gap:48px}}
.mscs-sports>div{min-width:0}
.mscs-sports__h{margin:0 0 14px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffcb05}
.entry__body .mscs-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.entry__body .mscs-chips li{margin:0;padding:9px 15px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font:400 15px/1.25 var(--sans);color:#fff}
.entry__body .mscs-chips--games li{border-color:rgba(255,203,5,.7)}

.entry__body .mscs-text--follow{margin-top:40px}

/* Instagram feed post card */
.mscs-igp{width:300px;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 30px rgba(35,31,44,.10);font-family:var(--sys);color:#262626}
.mscs-igp__head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.entry__body .mscs-igp__head img{width:32px;height:32px;margin:0;border-radius:50%;object-fit:cover;flex:none}
.mscs-igp__head>div{flex:1;min-width:0}
.mscs-igp__name{display:block;font-size:13px;font-weight:600;line-height:1.2}
.mscs-igp__spons{display:block;font-size:11px;line-height:1.3;color:#737373}
.mscs-igp__dots{font-size:16px;line-height:1;letter-spacing:1px;color:#262626}
.mscs-igp__media{position:relative;aspect-ratio:1/1;background:#17151c}
.entry__body .mscs-igp__media video{display:block;width:100%;height:100%;margin:0;object-fit:cover}
.mscs-igp__bar{display:flex;align-items:center;gap:14px;padding:10px 12px 6px}
.mscs-igp__bar svg{width:24px;height:24px;fill:none;stroke:#262626;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.mscs-igp__bar svg:last-child{margin-left:auto}
.entry__body .mscs-igp__caption{margin:0;padding:0 12px 12px;font-size:13px;line-height:1.4;color:#262626}
.mscs-igp__caption b{font-weight:600}
.mscs-igp__more{color:#737373}
/* YouTube on a phone and a tablet */
.mscs-yt{display:grid;grid-template-columns:1fr;gap:40px;justify-items:center;align-items:center;max-width:1100px;margin:48px auto 0}
@media (min-width:900px){.mscs-yt{grid-template-columns:auto 1fr;gap:56px}}
.mscs-yt figure{display:flex;flex-direction:column;align-items:center;width:100%}
.mscs-yt__phone .mscs-phone__screen{background:#141414}
.entry__body .mscs-yt__phone .mscs-phone__screen img{width:100%;height:100%;margin:0;object-fit:cover;object-position:top}
.mscs-tablet{position:relative;width:100%;max-width:640px;aspect-ratio:4/3;padding:18px;border-radius:30px;background:#17151c;box-shadow:inset 0 0 0 2px #3a3642,0 4px 14px rgba(35,31,44,.12)}
.mscs-tablet__cam{position:absolute;top:50%;left:7px;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#2a2733}
.mscs-tablet__screen{height:100%;overflow:hidden;border-radius:14px;background:#000}
.entry__body .mscs-tablet__screen img{display:block;width:100%;height:100%;margin:0;object-fit:contain}
.mscs-slot{display:grid;place-items:center;height:100%;padding:16px;background:var(--tint2);border:2px dashed rgba(35,31,44,.25);text-align:center}
.mscs .mscs-slot .mscs-ph{margin:0;white-space:normal}

/* Viewing-profile donuts under the Where the Votes Are intro, with the table behind a toggle. */
.entry__body .mscs .mscs-pies{max-width:960px;margin:28px auto 0}
.entry__body .mscs-legend--pies{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 20px;padding:0;list-style:none}
.entry__body .mscs-legend--pies li{display:flex;align-items:center;gap:8px;margin:0;padding:0;font:500 13px/1.3 var(--sans);color:var(--muted)}
.entry__body .mscs-legend--pies li:before{content:none}
.mscs-legend--pies i{display:block;width:12px;height:12px;border-radius:3px}
.mscs-pies__row{display:grid;grid-template-columns:1fr;gap:28px;justify-items:center}
@media (min-width:600px){.mscs-pies__row{grid-template-columns:repeat(3,1fr);gap:24px}.mscs-pies__row--two{grid-template-columns:repeat(2,1fr);max-width:640px;margin:0 auto;gap:48px}}
.entry__body .mscs .mscs-pie{width:100%;max-width:240px;margin:0}
.mscs-pie svg{display:block;width:100%;height:auto;font-family:var(--mono)}
.mscs-pie__slices path{transition:opacity .15s}
.mscs-pie:hover .mscs-pie__slices path{opacity:.55}
.mscs-pie .mscs-pie__slices path:hover{opacity:1}
.mscs-pie__hero{font:700 30px/1 var(--sans);fill:var(--ink)}
.mscs-pie__herolabel{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--muted)}
.entry__body .mscs-details{max-width:860px;margin:24px auto 0}
.entry__body .mscs-details summary{cursor:pointer;font:500 13px/1.5 var(--mono);color:var(--muted);text-align:center;list-style:none}
.entry__body .mscs-details summary::-webkit-details-marker{display:none}
.entry__body .mscs-details summary:before{content:"+ "}
.entry__body .mscs-details[open] summary:before{content:"\2013 "}
.entry__body .mscs-details .mscs-table{margin-top:16px}
.entry__body .mscs-details .mscs-table th:first-child{width:40%}
.entry__body .mscs-details .mscs-table th.mscs-table__num{text-align:right;padding-right:0}
.entry__body .mscs-details .mscs-table td.mscs-table__num{font-weight:600}
.entry__body .mscs-details .mscs-table td:last-child{color:var(--muted);font-weight:500}
.entry__body .mscs-pies .mscs-chart__note{margin-top:20px;text-align:center}
@media (max-width:599px){
  .entry__body .mscs-details .mscs-table th{white-space:normal;font-size:10px;letter-spacing:.04em;padding-right:6px}
  .entry__body .mscs-details .mscs-table th:first-child{width:auto}
  .entry__body .mscs-details .mscs-table td{padding-right:6px}
}

/* Small facts row: three supporting numbers, quieter than the stat tiles */
.entry__body .mscs-facts{display:grid;grid-template-columns:1fr;gap:18px 0;max-width:960px;margin:32px auto 0;padding:0;list-style:none}
.entry__body .mscs-facts li{margin:0;padding:0 24px;border-left:2px solid var(--peach)}
.entry__body .mscs-facts li:before{content:none}
.entry__body .mscs-facts b{display:block;font:400 28px/1.1 var(--serif);color:var(--ink);letter-spacing:-.01em}
.entry__body .mscs-facts span{display:block;margin-top:4px;font:400 14px/1.4 var(--sans);color:var(--muted)}
@media (min-width:768px){.entry__body .mscs-facts{grid-template-columns:1fr 1fr 1fr;gap:0 32px}.entry__body .mscs-facts li{padding:4px 0 4px 20px}.entry__body .mscs-facts--four{grid-template-columns:1fr 1fr 1fr 1fr;max-width:1100px;gap:0 24px}}

/* Social examples in one row: Meta ads, Instagram, YouTube on a phone and on a tablet. Above phone
   width each figure has a fixed width (--w, set inline) and the script sizes the row to the sum and
   scales it to fit its container, so they always sit on one line. */
.entry__body .mscs-social{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 24px;max-width:1200px;margin:32px auto 0}
.entry__body .mscs .mscs-social>figure{display:flex;flex:none;flex-direction:column;align-items:center;margin:0}
.entry__body .mscs .mscs-social>figure>figcaption.mscs-cap{display:block;max-width:260px;margin:12px auto 0;font:500 12px/1.5 var(--mono);color:var(--muted);text-align:center}
.entry__body .mscs-social .mscs-fb{width:300px}
.mscs-social .mscs-fb{zoom:.8}
.mscs-social .mscs-igp{zoom:1}
.mscs-social .mscs-phone{zoom:.85}
.mscs-social .mscs-yt__tablet{width:100%;max-width:420px}
@media (min-width:700px){
  .entry__body .mscs-social{flex-wrap:nowrap;justify-content:center;gap:24px;max-width:none;margin-left:auto;margin-right:auto}
  .entry__body .mscs .mscs-social>figure>figcaption.mscs-cap{max-width:100%}
  .entry__body .mscs .mscs-social>figure{width:var(--w)}
  .mscs-social .mscs-fb{zoom:.56}
  .mscs-social .mscs-igp{zoom:.8}
  .mscs-social .mscs-phone{zoom:.7}
  .mscs-social .mscs-yt__tablet{width:380px;max-width:380px}
}

/* Weekly spend by side, a two-line chart */
.entry__body .mscs .mscs-spend{max-width:900px;margin:36px auto 0}
.mscs-spend__plot{margin-top:8px}
.mscs-spend__svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.mscs-spend__svg circle{transition:r .15s}
.mscs-spend__svg circle:hover{r:6}
.entry__body .mscs-spend .mscs-legend--pies{margin:16px 0 0}
.entry__body .mscs-spend .mscs-chart__note{text-align:center}

/* Bands and containers */
.entry__body .mscs-band{position:relative;margin:0 calc(-50vw + 50%);padding:56px 0}
.mscs-band--tint{background:var(--tint)}
.mscs-band--dark{background:var(--ink);color:var(--lav)}
.entry__body .mscs>.mscs-band:last-child{margin-bottom:-40px}
.mscs-wrap{max-width:1328px;margin:0 auto;padding:0 16px}
.mscs-text{max-width:720px;margin:0 auto}
.entry__body .mscs-band .mscs-text>h2:first-child{margin-top:0}
.entry__body .mscs-text>p:last-child{margin-bottom:0}

.mscs [hidden]{display:none!important}


/* Overview: the nine channels */
.entry__body .mscs-channels{display:grid;grid-template-columns:1fr;gap:0 32px;margin:40px 0 72px;padding:0;list-style:none}
.entry__body .mscs-channels li{margin:0;padding:16px 0 18px;border-top:1px solid var(--rule);line-height:1.4}
.mscs-channels__name{display:block;font:700 18px/1.3 var(--sans);color:var(--ink)}
.mscs-channels__desc{display:block;margin-top:4px;font-size:16px;color:var(--muted)}

/* Charts */
.entry__body .mscs .mscs-chart{max-width:1200px;margin:0 auto}
.entry__body .mscs .mscs-text+.mscs-chart{margin-top:40px}
.entry__body .mscs .mscs-chart--narrow{max-width:880px}
.mscs-chart__head{display:block;margin:0 0 12px}
.mscs-chart__title{display:block;font:700 18px/1.3 var(--sans)}
.mscs-chart__sub{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:var(--muted)}
.mscs-band--dark .mscs-chart__sub,.mscs-band--dark .mscs-chart__note{color:var(--muted-dk)}
.mscs-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 8px;font-size:14px;line-height:1.3}
.mscs-legend__item{display:inline-flex;align-items:center;gap:8px}
.mscs-legend[hidden]{display:none}
.mscs-legend__key{display:inline-block;width:16px;height:2px;border-radius:1px}
/* Under a centered headline, a centered caption and legend keep the chart from leaning left. */
.mscs-chart--center .mscs-chart__head,.mscs-chart--center .mscs-chart__note{text-align:center}
.mscs-chart--center .mscs-legend{justify-content:center}
.entry__body .mscs .mscs-chart--center{max-width:1040px}
.mscs-chart__plot{position:relative}
.mscs-chart__plot svg{display:block;overflow:visible}
.entry__body .mscs-chart__note{margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.entry__body .mscs-chart__note--src{max-width:1200px;margin:18px auto 0;text-align:center}
.mscs-tip{position:absolute;z-index:3;min-width:180px;padding:10px 12px;border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(35,31,44,.14),0 10px 28px rgba(35,31,44,.16);font-size:13px;line-height:1.35;pointer-events:none}
.mscs-tip[hidden]{display:none}
.mscs-tip__title{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}
.mscs-tip__row{display:flex;align-items:center;gap:8px;margin-top:3px}
.mscs-tip__row b{font-size:15px;font-weight:700;min-width:62px}
.mscs-tip__key{display:inline-block;width:12px;height:2px;border-radius:1px;flex:none}
.mscs-tip__name{color:var(--muted)}
.mscs-hit{cursor:crosshair;outline:none}
.mscs-hit:focus-visible{outline:2px solid var(--accent-dk)}

/* Horizontal bars (HTML, so labels stay crisp and wrap) */
.entry__body .mscs-bars{margin:8px 0 0;padding:0;list-style:none}
.entry__body .mscs-bars li{position:relative;display:grid;grid-template-columns:1fr;gap:4px;margin:0 0 14px;line-height:1.3;outline:none}
.mscs-bars__label{font-size:15px;color:var(--ink)}
.mscs-bars__state{color:var(--muted)}
.mscs-bars li.is-hl .mscs-bars__label{font-weight:700}
.mscs-bars__track{display:flex;align-items:center;gap:8px;min-height:20px}
.mscs-bars__bar{display:block;height:20px;min-width:2px;border-radius:0 4px 4px 0;background:var(--gray);transition:filter .15s}
.mscs-bars li.is-hl .mscs-bars__bar{background:var(--accent)}
.mscs-bars li:hover .mscs-bars__bar,.mscs-bars li:focus-visible .mscs-bars__bar{filter:brightness(1.12)}
.mscs-bars li:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.mscs .mscs-ms{display:inline-block;vertical-align:middle;margin:-2px 6px 0 0;color:var(--ink)}
.mscs-bars__label{white-space:nowrap}
.mscs-chart__key{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;color:var(--muted)}
.mscs .mscs-chart__key .mscs-ms{margin:0}
.mscs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mscs-bars__val{font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mscs-grid2{display:grid;grid-template-columns:1fr;gap:48px;max-width:1200px;margin:40px auto 0}
/* Auto margins would shrink each chart to its content; fill the column instead. */
.entry__body .mscs .mscs-grid2>.mscs-chart{margin:0}
.entry__body .mscs-grid2__note{max-width:1200px;margin:24px auto 0}

/* Table view */

/* Creative: shared */
.mscs-sub{max-width:720px;margin:72px auto 0}
.entry__body .mscs-sub h4{margin:0 0 .3em}
.entry__body .mscs-sub p{margin:0}
.mscs-cap{display:block;max-width:300px;margin:14px auto 0;font:500 12px/1.5 var(--mono);color:var(--muted);text-align:center}
.mscs-rail{margin:28px -16px 0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mscs-rail::-webkit-scrollbar{display:none}
.mscs-rail__track{display:flex;gap:28px;width:max-content;margin:0 auto;padding:8px 16px 20px}
.mscs-rail__track>*{flex:none;scroll-snap-align:center}

/* Creative: faux mail client */
.mscs-mail{max-width:1120px;margin:28px auto 0;overflow:hidden;border:1px solid #e3dfeb;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.10);font-family:var(--sys);color:#202124}
.mscs-mail__top{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#f6f8fc;border-bottom:1px solid #eceff4}
.mscs-mail__menu{display:none;width:20px;color:#5f6368}
.mscs-mail__brand{display:none;font-size:20px;color:#5f6368;letter-spacing:-.01em}
.mscs-mail__search{display:flex;align-items:center;gap:10px;flex:1;max-width:560px;height:42px;padding:0 16px;border-radius:999px;background:#e9eef6;color:#5f6368;font-size:15px}
.mscs-mail__search svg{width:18px;flex:none}
.mscs-mail__me{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:var(--ink);color:#fff;font:600 14px var(--sys)}
.mscs-mail__body{display:grid;grid-template-columns:1fr}
.mscs-mail__list{display:flex;overflow-x:auto;border-bottom:1px solid #eceff4}
.mscs-mail__item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:1px 12px;flex:0 0 280px;padding:12px 16px;border:0;border-right:1px solid #eceff4;background:#fff;color:#202124;text-align:left;font:inherit;cursor:pointer}
.mscs-mail__item[aria-selected="true"]{background:#eaf1fb;box-shadow:inset 3px 0 0 #0b57d0}
.mscs-mail__item:hover{background:#f2f6fc}
.mscs-mail__pic{grid-row:1/span 3;align-self:start;width:40px;height:40px;margin-top:1px;border-radius:50%;object-fit:cover;background:var(--tint2)}
.mscs-mail__pic--logo{display:grid;place-items:center;background:#233071}
.mscs-mail__pic--logo img{width:14px;height:auto}
.mscs-mail__from{grid-column:2;min-width:0;overflow:hidden;font-size:14px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.mscs-mail__time{grid-column:3;font-size:12px;color:#5f6368;align-self:center}
.mscs-mail__subj{grid-column:2/-1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mscs-mail__snip{grid-column:2/-1;font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mscs-mail__pane{max-height:640px;overflow:auto;padding:20px 16px 28px}
.mscs-mail__msg[hidden]{display:none}
.mscs-mail__subject{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:21px;line-height:1.3;color:#1f1f1f}
.mscs-mail__label{padding:2px 6px;border-radius:4px;background:#ddd;color:#444;font-size:12px}
.mscs-mail__meta{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;margin:16px 0 8px;font-size:14px;line-height:1.3}
.mscs-mail__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#233071;object-fit:cover}
.mscs-mail__avatar img{width:18px}
.mscs-mail__meta b{display:block;font-size:14px}
.mscs-mail__meta span{color:#5f6368;font-size:12px}
.entry__body .mscs .mscs-mail__next{display:flex;align-items:center;gap:6px;width:100%;max-width:600px;margin:32px auto 4px;padding:14px 16px;border:1px solid #e3dfeb;border-radius:12px;background:#f9f8fc;color:#5f6368;font:400 14px/1.35 var(--sys);letter-spacing:0;text-align:left;text-transform:none;cursor:pointer}
.mscs-mail__next span{flex:1;min-width:0;overflow:hidden;color:#202124;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.mscs-mail__next:after{content:"\203A";font-size:22px;line-height:1;color:#5f6368}
.entry__body .mscs .mscs-mail__next:hover{background:#f2f6fc}

/* Email body. */
.mscs-em{max-width:600px;margin:22px auto 0;font:16px/1.6 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;color:#2b2733;overflow-wrap:break-word}
.entry__body .mscs-em p{margin:0 0 1em;font:inherit;color:inherit}
.entry__body .mscs-em b,.entry__body .mscs-em strong{font-weight:700;color:#1d1a24}
.entry__body .mscs-em .mscs-em__list{margin:0 0 1em;padding-left:1.4em;list-style:disc}
.entry__body .mscs-em ol.mscs-em__list{list-style:decimal}
.entry__body .mscs-em .mscs-em__list li{margin:0 0 .6em;padding-left:.15em;line-height:inherit}
.entry__body .mscs-em .mscs-em__list li:before{content:none;display:none}
.entry__body .mscs-em img{display:block;width:auto;max-width:100%;height:auto;margin:1.6em auto;border-radius:12px;box-shadow:0 1px 2px rgba(35,31,44,.08),0 10px 28px rgba(35,31,44,.12)}
.mscs-em__a{color:#2f5fb3;text-decoration:underline;text-decoration-color:rgba(47,95,179,.45);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.entry__body .mscs-em .mscs-em__btn{display:block;max-width:360px;margin:28px auto;padding:15px 12px 13px;border-radius:10px;background:#406bbf;box-shadow:inset 0 -2px 0 #233071;color:#fff;font:700 18px/1.2 var(--sans);text-align:center}
.mscs-em__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 24px}
.mscs-em__btns span{padding:12px 8px;border-radius:10px;background:#406bbf;color:#fff;font:700 16px/1.2 var(--sans);text-align:center}

/* Creative: phones */
.mscs-phone{position:relative;width:272px;height:560px;padding:10px;border-radius:46px;background:#17151c;box-shadow:inset 0 0 0 2px #3a3642,0 4px 14px rgba(35,31,44,.12)}
.mscs-phone__island{position:absolute;z-index:2;top:20px;left:50%;width:82px;height:24px;margin-left:-41px;border-radius:12px;background:#000}
.mscs-phone__screen{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:36px;background:#fff;font-family:var(--sys);color:#000}
.mscs-phone__status{display:flex;justify-content:space-between;align-items:center;height:44px;padding:4px 26px 0 30px;font-size:14px;font-weight:600}
.mscs-phone__status svg{width:56px}
.mscs-phone__head{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0 8px;border-bottom:1px solid #e5e5ea;background:#f7f7f8}
.mscs-phone__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(#a6a8b1,#858790);object-fit:cover}
.mscs-phone__avatar svg{width:22px}
.mscs-phone__num{font-size:11px;color:#000}
.mscs-phone__thread{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
.mscs-phone__thread::-webkit-scrollbar{display:none}
.mscs-phone__thread.is-end{-webkit-mask-image:none;mask-image:none}
.mscs-phone__thread:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mscs-phone__stamp{margin:4px 0 10px;font-size:10px;line-height:1.35;color:#8e8e93;text-align:center}
.mscs-phone__stamp b{font-weight:600}
.mscs-bubble{max-width:86%;margin-bottom:6px;padding:7px 12px;border-radius:18px;background:#e9e9eb;font-size:13.5px;line-height:1.32;overflow-wrap:anywhere}
.mscs-bubble a{color:#0a63d8!important;text-decoration:underline}
.mscs-bubble--img{max-width:74%;padding:0;overflow:hidden;background:none}
.entry__body .mscs-bubble--img img{display:block;width:100%;height:auto;max-height:220px;margin:0;object-fit:cover;object-position:50% 35%}
.mscs-rail--one .mscs-rail__track{width:auto;justify-content:center}
/* An MMS video plays like the ads, with smaller controls to fit the bubble. */
.mscs-bubble--video{position:relative;max-width:86%;padding:0;overflow:hidden;background:#17151c;aspect-ratio:16/9}
.entry__body .mscs-bubble--video video{display:block;width:100%;height:100%;margin:0;object-fit:cover}
.entry__body .mscs .mscs-bubble--video .mscs-fb__ctl{bottom:6px;width:26px;height:26px}
.mscs-bubble--video .mscs-fb__ctl--play{left:6px}
.mscs-bubble--video .mscs-fb__ctl--sound{right:6px}
.mscs .mscs-bubble--video .mscs-fb__ctl svg{width:11px;height:11px}
.mscs-bubble__a{color:#0a63d8;text-decoration:underline}
/* Messenger */
.mscs-msgr__head{display:flex;align-items:center;gap:10px;padding:2px 14px 10px;border-bottom:1px solid #e4e6eb}
.mscs .mscs-msgr__back{display:block;width:10px;height:18px;flex:none}
.mscs-msgr__avatar{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover}
.mscs-msgr__who{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.mscs-msgr__who b{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700}
.mscs-msgr__who span{font-size:12px;color:#65676b}
.mscs .mscs-msgr__check{display:inline-block;width:13px;height:13px;flex:none}
.mscs-msgr__card{overflow:hidden;border-radius:18px;background:#f0f0f5}
.entry__body .mscs-msgr__card img{display:block;width:100%;height:auto;margin:0}
.mscs-msgr__body{padding:12px 14px 4px;font-size:13.5px;line-height:1.38;color:#050505;overflow-wrap:anywhere}
.mscs-msgr__body b{display:block;margin-bottom:5px;font-size:16px;line-height:1.25}
.mscs-msgr__btn{display:block;margin:10px 10px 10px;padding:9px;border-radius:12px;background:#fff;font-size:14px;font-weight:600;text-align:center}
.mscs-msgr__input{display:flex;align-items:center;gap:8px;padding:8px 12px 18px}
.mscs-phone__input{display:flex;align-items:center;gap:8px;padding:8px 12px 18px}
.mscs-phone__plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9e9eb;color:#8e8e93;font-size:20px;line-height:1}
.mscs-phone__field{flex:1;padding:6px 12px;border:1px solid #d1d1d6;border-radius:18px;color:#a1a1a6;font-size:13px}

/* Creative: Meta-style ad cards */
.mscs-fb{width:300px;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1),0 10px 30px rgba(35,31,44,.10);font-family:var(--sys);color:#050505}
.mscs-fb__head{display:flex;align-items:center;gap:10px;padding:12px 12px 8px}
.mscs-fb__avatar{width:40px;height:40px;flex:none;border-radius:50%;background:var(--tint2);object-fit:cover}
.mscs-fb__who{flex:1;line-height:1.25}
.mscs-fb__name{display:block;font-size:15px;font-weight:600}
.mscs-fb__spons{display:block;font-size:12.5px;line-height:1.3;color:#65676b}
.mscs-fb__more{color:#65676b;font-size:18px;letter-spacing:1px}
.mscs-fb__text{padding:0 12px 12px;font-size:14px;line-height:1.36;overflow-wrap:break-word}
.entry__body .mscs .mscs-fb__see{display:inline;margin:0;padding:0;border:0;background:none;color:#65676b;font:600 14px/1.36 var(--sys);letter-spacing:0;text-transform:none;cursor:pointer}
.entry__body .mscs .mscs-fb__see:hover{text-decoration:underline}
.mscs-fb__media{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/1;padding:24px;overflow:hidden}
.mscs-fb__media--video{display:block;padding:0;aspect-ratio:4/5;background:#17151c}
.mscs-fb__media--square{aspect-ratio:1/1}
.mscs-fb__media--tall{aspect-ratio:9/16}
.entry__body .mscs-fb__media video{display:block;width:100%;height:100%;margin:0;object-fit:cover}
.entry__body .mscs .mscs-fb__ctl{position:absolute;bottom:10px;display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;letter-spacing:0;cursor:pointer}
.entry__body .mscs .mscs-fb__ctl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mscs-fb__ctl--play{left:10px}
.mscs-fb__ctl--sound{right:10px}
.mscs .mscs-fb__ctl svg{display:block;width:14px;height:14px}
.mscs .mscs-fb__ctl .mscs-ico-play,.mscs .mscs-fb__ctl .mscs-ico-sound,.mscs .mscs-fb__ctl.is-paused .mscs-ico-pause,.mscs .mscs-fb__ctl[aria-pressed="true"] .mscs-ico-muted{display:none}
.mscs .mscs-fb__ctl.is-paused .mscs-ico-play,.mscs .mscs-fb__ctl[aria-pressed="true"] .mscs-ico-sound{display:block}
.mscs-fb__link{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f0f2f5}
.mscs-fb__link>div{flex:1;min-width:0;line-height:1.25}
.mscs-fb__domain{display:block;font-size:12px;color:#65676b;text-transform:uppercase}
.mscs-fb__hl{display:block;font-size:15px;font-weight:600;line-height:1.25}
.mscs-fb__cta{flex:none;padding:8px 12px;border-radius:6px;background:#e2e5e9;font-size:14px;font-weight:600}
.mscs-fb__actions{display:flex;justify-content:space-around;margin:0 12px;padding:6px 0 8px;border-top:1px solid #ced0d4;color:#65676b;font-size:14px;font-weight:600}

/* Websites */
.mscs-site{position:relative;max-width:1040px;margin:40px auto 0;padding:0 0 48px}
.mscs-browser{width:88%;overflow:hidden;border:1px solid #e3dfeb;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.12)}
.mscs-browser__bar{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--tint2)}
.mscs-browser__dots{display:flex;gap:6px}
.mscs-browser__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#cbc5d8}
.mscs-browser__url{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:4px 14px;border-radius:999px;background:#fff;color:var(--muted);font:13px/1.3 var(--sys)}
.mscs-browser__url svg{width:11px}
/* The dashboard scrolls inside its window: a full-length capture in a fixed-height frame. */
.mscs-browser--scroll{position:relative}
.mscs-browser__scroll{height:560px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(35,31,44,.3) transparent}
.entry__body .mscs-browser__scroll img{display:block;width:100%;height:auto;margin:0}
.mscs-browser__scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mscs-browser__hint{position:absolute;left:14px;bottom:12px;padding:5px 9px 4px;border-radius:999px;background:rgba(35,31,44,.72);color:#fff;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.mscs-browser__hint:before{content:"";display:inline-block;width:5px;height:5px;margin:0 6px 2px 0;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
@media (min-width:768px){.mscs-browser__scroll{height:640px}}
.mscs-site__phone{position:absolute;right:0;bottom:0;width:30%;max-width:250px}
.mscs-site__phone .mscs-phone{width:100%;height:auto;aspect-ratio:272/560;padding:7px;border-radius:30px}
.mscs-site__phone .mscs-phone__screen{padding-top:15%;border-radius:24px;background:#141414}
.mscs-site__phone .mscs-phone__island{top:13px;width:30%;height:5%;margin-left:-15%}
.mscs-site__phone img{width:100%;height:100%;object-fit:cover;object-position:top}

@media (min-width:375px){
  .mscs-wrap{padding:0 20px}
  .mscs-rail{margin:28px -20px 0}.mscs-rail__track{padding:8px 20px 20px}
  .entry__body .mscs>.mscs-band:last-child{margin-bottom:-56px}
}
@media (min-width:414px){.mscs-wrap{padding:0 28px}.mscs-rail{margin:28px -28px 0}.mscs-rail__track{padding:8px 28px 20px}}
@media (min-width:480px){
  .entry__body .mscs-bars li{grid-template-columns:minmax(150px,32%) 1fr;align-items:center;gap:16px;margin-bottom:10px}
  .mscs-bars__label{text-align:right}
}
@media (min-width:600px){
  .entry__body .mscs-channels{grid-template-columns:1fr 1fr}
  .mscs-phone{width:280px;height:576px}
  .mscs-fb{width:320px}
  .mscs-em{font-size:17px;line-height:1.65}
}
@media (min-width:768px){
  .mscs-wrap{padding:0 64px}
  .entry__body .mscs-band{padding:96px 0}
  .entry__body .mscs>.mscs-band:last-child{margin-bottom:-80px}
  .mscs-rail{margin:32px -64px 0}.mscs-rail__track{gap:36px;padding:8px 64px 24px}
  .mscs-mail__menu,.mscs-mail__brand{display:block}
  .mscs-mail__body{grid-template-columns:330px 1fr;min-height:640px}
  .mscs-mail__list{display:block;overflow:visible;border-bottom:0;border-right:1px solid #eceff4}
  .mscs-mail__item{width:100%;border-right:0;border-bottom:1px solid #eceff4}
  .mscs-mail__item[aria-selected="true"]{box-shadow:inset 3px 0 0 #0b57d0}
  .mscs-mail__pane{max-height:720px;padding:24px 32px 32px}
}
@media (min-width:1280px){
  .mscs-rail--ads .mscs-rail__track{gap:32px}
  .mscs-rail--ads .mscs-fb{width:340px}
}
@media (min-width:900px){
  .entry__body .mscs-channels{grid-template-columns:repeat(3,1fr)}
  .mscs-grid2{grid-template-columns:1fr 1fr;gap:64px}
}

/* Launch: the two proof points beside one scatter. */
.mscs .mscs-both{display:grid;grid-template-columns:1fr;gap:40px;max-width:1200px;margin:48px auto 0}
.mscs .mscs-both__points{display:grid;gap:32px;align-content:start}
.entry__body .mscs .mscs-both__claim{margin:0 0 10px;padding:0;font:400 26px/1.15 var(--serif);color:var(--ink)}
.entry__body .mscs .mscs-both__text{margin:0}
.entry__body .mscs .mscs-both .mscs-chart{margin:0}
.mscs .mscs-both .mscs-chart__head{margin:0 0 4px}
.mscs .mscs-both .mscs-chart__title{font-size:15px}
@media (min-width:600px) and (max-width:899px){.mscs .mscs-both__points{grid-template-columns:1fr 1fr;gap:40px}}
@media (min-width:768px){.entry__body .mscs .mscs-both__claim{font-size:30px}}
@media (min-width:900px){.mscs .mscs-both{grid-template-columns:minmax(280px,34%) 1fr;gap:56px;align-items:start}.mscs .mscs-both__points{gap:40px;padding-top:4px}}
@media (min-width:1280px){.entry__body .mscs .mscs-both__claim{font-size:34px}}

/* ---- Persuasion page additions ---- */

/* Placeholder tag: preview only, stripped by build.py for the handoff file. */
.mscs .mscs-ph{display:inline-block;margin-left:8px;padding:3px 6px 2px;border-radius:3px;background:#fff3a8;color:#231f2c;font:600 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}

/* Stats band: the five toplines, in the site's Stats block style. */
.mscs-stats{display:grid;grid-template-columns:1fr 1fr;gap:36px 24px;max-width:1200px;margin:40px auto 0}
.mscs-stat{text-align:center}
.mscs-stat__num{display:block;font:400 52px/1 var(--serif);color:var(--peach2);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mscs-stat__label{display:block;margin-top:10px;font:400 16px/1.35 var(--sans);color:var(--lav)}
.mscs-stat__sub{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted-dk)}
.entry__body .mscs-stats__note{max-width:720px;margin:36px auto 0;text-align:center}
@media (min-width:600px){.mscs-stats{grid-template-columns:repeat(3,1fr)}.mscs-stat__num{font-size:64px}}
@media (min-width:900px){.mscs-stats{grid-template-columns:repeat(3,1fr);gap:40px 24px}.mscs-stat__num{font-size:54px}.mscs-stat__label{font-size:17px}}
@media (min-width:1280px){.mscs-stat__num{font-size:64px}}

/* TV screens: the screenshots carry their own bezels, so they sit on a plain grid. */
.mscs-tvs{display:grid;grid-template-columns:1fr;gap:36px;max-width:1200px;margin:28px auto 0}
.mscs-tvs figure{margin:0}
.entry__body .mscs-tvs img{width:100%;height:auto}
@media (min-width:768px){.mscs-tvs{grid-template-columns:1fr 1fr;gap:40px}.entry__body .mscs-tvs--one{grid-template-columns:1fr}}
.mscs-tvs--one{grid-template-columns:1fr;max-width:560px}

/* Static ad cards: an image in the feed card, no body text. */
.mscs-fb__media--img{display:block;padding:0;aspect-ratio:auto;background:#000}
.entry__body .mscs-fb__media--img img{display:block;width:100%;height:auto;margin:0}

/* Display units: two online video frames side by side, then a banner shown in the ad rail of a
   generic article page. The page is wireframe blocks, not a real publisher. */
.mscs-display{display:grid;grid-template-columns:1fr;gap:36px;max-width:1200px;margin:28px auto 0}
.mscs-display .mscs-browser{width:100%}
@media (min-width:768px){.mscs-display{grid-template-columns:1fr 1fr;gap:40px}.mscs-display--native{gap:28px}}
.mscs-display--native{align-items:start;max-width:860px;margin-top:36px}
.entry__body .mscs .mscs-webpage--native{max-width:860px;margin-top:28px}
.mscs-webpage{max-width:1040px;margin:40px auto 0}
.mscs-webpage .mscs-browser{width:100%}
.mscs-page{padding:0 0 28px;background:#fff}
.mscs-page__nav{display:flex;align-items:center;gap:18px;padding:14px 28px;border-bottom:1px solid #ebe8f0}
.mscs-page__nav i{display:block;height:9px;width:54px;border-radius:5px;background:#e3dfeb}
.mscs-page__nav i:first-child{width:92px;height:14px;background:#cbc5d8}
.mscs-page__cols{display:grid;grid-template-columns:1fr;gap:28px;padding:28px 28px 0}
.mscs-page__hed i{display:block;height:20px;margin:0 0 10px;border-radius:6px;background:#d6d1e2}
.mscs-page__byline{display:flex;align-items:center;gap:10px;margin:16px 0 20px}
.mscs-page__byline b{display:block;width:28px;height:28px;border-radius:50%;background:#e3dfeb}
.mscs-page__byline i{display:block;height:8px;width:120px;border-radius:4px;background:#e3dfeb}
.mscs-page__img{aspect-ratio:16/9;margin:0 0 20px;border-radius:8px;background:linear-gradient(135deg,#eae6f2,#f4f1fa)}
.mscs-page__txt i{display:block;height:9px;margin:0 0 9px;border-radius:4px;background:#ebe8f0}
.mscs-page__txt i:nth-child(4n){width:62%;margin-bottom:20px}
.mscs-page__rail{display:flex;flex-direction:column;align-items:center;gap:18px}
.mscs-page__rail small{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#a9a3b8}
.entry__body .mscs-page__rail img{width:100%;max-width:220px;height:auto;border:1px solid #e3dfeb}
@media (min-width:768px){.mscs-page__cols{grid-template-columns:1fr 240px;gap:40px;padding:32px 40px 0}.entry__body .mscs-page__rail img{max-width:240px}}

/* Photo frames with nothing in them yet. */
.mscs-photos{display:grid;grid-template-columns:1fr;gap:28px;max-width:1200px;margin:28px auto 0}
.entry__body .mscs-photos img{width:100%;height:auto;border-radius:12px;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.12)}
.mscs-photo{position:relative;display:grid;place-items:center;aspect-ratio:4/3;padding:24px;border:2px dashed rgba(35,31,44,.25);border-radius:12px;background:var(--tint2);text-align:center}
.mscs-photo__what{font:600 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mscs-photo--wide{aspect-ratio:21/9}
@media (min-width:768px){.mscs-photos{grid-template-columns:1fr 1fr 1fr;gap:32px}.mscs-photos--two{grid-template-columns:1fr 1fr;max-width:1040px}}
/* A row of photos at one height: each figure grows by its aspect ratio (width / height), so the row fills the width with no cropping. */
@media (min-width:768px){.mscs .mscs-photos--row{display:flex;align-items:flex-start;gap:24px;max-width:1100px}.mscs .mscs-photos--row figure{flex:0 1 0;min-width:0;margin:0}.entry__body .mscs-photos--row img{display:block;width:100%;height:auto}}
/* Checkout screen beside the billboard, both cut to the billboard's shape */
.mscs-road{display:grid;grid-template-columns:1fr;gap:28px;max-width:1200px;margin:48px auto 0}
@media (min-width:768px){.mscs-road{grid-template-columns:1fr 1fr;gap:32px}}
.entry__body .mscs .mscs-road>figure{margin:0}
.entry__body .mscs-road__photo img{display:block;width:100%;aspect-ratio:1200/620;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.12)}
.entry__body .mscs .mscs-road .mscs-billboard{max-width:none;margin:0}
.mscs-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;max-width:720px;margin:24px auto 0;padding:0;list-style:none}
.entry__body .mscs-links li{margin:0;padding:0;font:500 13px/1.5 var(--mono);color:var(--muted)}
.entry__body .mscs-links li:before{content:none}
.entry__body .mscs-links a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--peach);text-underline-offset:3px}

/* Campus print and the billboard. */
.mscs-print{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;max-width:1200px;margin:28px auto 0}
.mscs-print figure{margin:0}
.mscs-print--wide{grid-column:1/-1}
.entry__body .mscs-print>figure>img{width:100%;height:auto;border:1px solid #e3dfeb;border-radius:6px;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.12)}
.mscs-print__phone{display:flex;flex-direction:column;align-items:center}
.mscs-print__phone .mscs-phone{zoom:.6;flex:none}
@media (min-width:768px){.mscs-print{grid-template-columns:1.9fr 1fr 1fr .8fr;gap:32px}.mscs-print--wide{grid-column:auto}}
.entry__body .mscs .mscs-billboard{max-width:1040px;margin:48px auto 0}
.mscs-billboard svg{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.12)}

/* Two-claim layout without a chart beside it. */
.mscs .mscs-pair{display:grid;grid-template-columns:1fr;gap:32px;max-width:1040px;margin:40px auto 0}
@media (min-width:768px){.mscs .mscs-pair{grid-template-columns:1fr 1fr;gap:56px}}
.mscs .mscs-pair--3{max-width:1200px}
@media (min-width:768px){.mscs .mscs-pair--one{grid-template-columns:1fr;max-width:720px}}
@media (min-width:900px){.mscs .mscs-pair--3{grid-template-columns:1fr 1fr 1fr;gap:48px}}

/* Testing bars: effects in points, with a zero line when an attack runs negative. */
.entry__body .mscs-bars--fx li{grid-template-columns:1fr}
@media (min-width:480px){.entry__body .mscs-bars--fx li{grid-template-columns:minmax(150px,36%) 1fr}}
.mscs-bars__track--fx{position:relative;display:block;height:20px}
.mscs-bars__zero{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--rule)}
.mscs-bars__bar--fx{position:absolute;top:0;height:20px;min-width:2px}
.mscs-bars__bar--neg{border-radius:4px 0 0 4px;background:var(--ink)}
.mscs-bars__val--fx{position:absolute;top:0;line-height:20px}
.mscs-bars li.is-ally .mscs-bars__bar{background:var(--gray)}
.mscs-bars li.is-hl .mscs-bars__bar{background:var(--accent)}
.mscs-bars__group{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;background:var(--tint2);color:var(--muted);font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.mscs-chart__keys{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 6px;font-size:13px;color:var(--muted)}
.mscs-chart__keys span{display:inline-flex;align-items:center;gap:6px}
.mscs-chart__keys i{display:inline-block;width:14px;height:10px;border-radius:2px}

/* Map beside the market bars. */
.mscs-map{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;margin-top:12px}
.mscs-map__svg{position:relative;max-width:360px;margin:0 auto;width:100%}
.mscs-map__svg svg{display:block;width:100%;height:auto;overflow:visible}
.mscs-map__svg path{transition:fill .15s}
.mscs-map__svg .is-dim path{fill-opacity:.35}
.mscs-map__label{font:600 11px/1 var(--mono);letter-spacing:.04em;fill:var(--ink);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.mscs-map__label--light{fill:#fff;stroke:none}
.entry__body .mscs .mscs-chart--map{max-width:1100px;margin-top:56px}
@media (min-width:768px){.entry__body .mscs .mscs-chart--map{margin-top:72px}}
@media (min-width:768px){.mscs-map{grid-template-columns:minmax(300px,42%) 1fr;gap:48px}.mscs-map__svg{max-width:440px}}
.entry__body .mscs-bars--pair li.is-on .mscs-bars__label{font-weight:700}

/* Paired market bars. */
.entry__body .mscs-bars--pair li{margin-bottom:14px;align-items:center}
.mscs-bars--pair .mscs-bars__label{white-space:normal;line-height:1.25}
@media (min-width:480px){.entry__body .mscs-bars--pair li{grid-template-columns:minmax(120px,38%) 1fr}}
.mscs-bars__track--pair{display:grid;gap:3px;min-height:0}
.mscs-bars__pairrow{display:flex;align-items:center;gap:8px}
.mscs-bars__bar--imps{height:14px;background:var(--accent)}
.mscs-bars__bar--votes{height:14px;background:var(--gray-dk1)}
.mscs-bars--pair .mscs-bars__val{font-size:13px;font-weight:500;color:var(--muted)}
.mscs-bars--pair .mscs-bars__pairrow:first-child .mscs-bars__val{font-weight:700;color:var(--ink)}

/* Tracks table. */
.mscs-tracks{max-width:1040px;margin:28px auto 0;overflow-x:auto}
.entry__body .mscs-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.entry__body .mscs-table th,.entry__body .mscs-table td{padding:12px 14px 12px 0;border:0;border-top:1px solid var(--rule);background:transparent;text-align:left;vertical-align:top}
.entry__body .mscs-table th{padding-top:0;border-top:0;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.entry__body .mscs-table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.entry__body .mscs-table td:nth-child(2){color:var(--muted)}
.entry__body .mscs-table .mscs-table__num{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
@media (max-width:599px){.entry__body .mscs-table{font-size:14px}.entry__body .mscs-table td:first-child{white-space:normal}}

/* Creator cards: an Instagram-style frame on a phone. */
.mscs-ig{display:flex;flex-direction:column;height:100%;font-family:var(--sys);color:#000}
.mscs-ig__head{display:flex;align-items:center;gap:8px;padding:6px 12px 8px;border-bottom:1px solid #efefef}
.mscs-ig__avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);padding:2px}
.mscs-ig__avatar i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;border:1.5px solid #fff;box-shadow:inset 0 0 0 100px #ddd}
.mscs-ig__user{flex:1;font-size:13px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mscs-ig__media{position:relative;display:grid;place-items:center;flex:1;min-height:0;padding:20px;background:var(--tint2);text-align:center}
.mscs-ig__media .mscs-photo__what{font-size:11px}
.mscs-ig__acts{display:flex;gap:14px;padding:10px 12px 4px}
.mscs-ig__acts svg{width:22px;height:22px;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mscs-ig__cap{padding:2px 12px 14px;font-size:12.5px;line-height:1.4;color:#000}
.mscs-ig__cap b{font-weight:600}
.mscs-ig__cap a{color:#00376b!important;text-decoration:none;overflow-wrap:anywhere}
.mscs-ig__media--video{display:block;position:relative;padding:0;background:#000;overflow:hidden}
.entry__body .mscs-ig__media--video video{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;object-fit:cover}
.entry__body .mscs-ig__media--video.mscs-ig__media--square{background:#fff}
.entry__body .mscs-ig__media--video.mscs-ig__media--square video{object-fit:contain}
.mscs-ig__media--video .mscs-fb__ctl{top:10px;bottom:auto}
.entry__body .mscs-ig__cap p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.4;color:#000}
.entry__body .mscs .mscs-text a,.entry__body .mscs .mscs-sub a,.entry__body .mscs .mscs-cap a,.entry__body .mscs .mscs-both__text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--peach);text-decoration-thickness:2px;text-underline-offset:3px}
.entry__body .mscs .mscs-text a:hover,.entry__body .mscs .mscs-sub a:hover,.entry__body .mscs .mscs-cap a:hover{text-decoration-color:var(--accent)}
/* Nov 3 review: the two web-page figures were left-aligned because the theme's figure rule beat
   the margin here; mixed and single display rows; YouTube embed; mock-up cards (preview only). */
.entry__body .mscs .mscs-webpage{margin:40px auto 0}
.mscs-display--mixed{align-items:center}
@media (min-width:768px){.mscs-display--one{grid-template-columns:1fr;max-width:580px}}
.entry__body .mscs .mscs-embed-wrap{max-width:860px;margin:40px auto 0}
.entry__body .mscs .mscs-pump-photo{max-width:520px}
.mscs-pump-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 1px 2px rgba(35,31,44,.1),0 14px 36px rgba(35,31,44,.16)}
.entry__body .mscs-cap a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mscs .mscs-mock{position:relative;display:grid;place-items:center;padding:20px;border:2px dashed rgba(35,31,44,.3);border-radius:12px;background:var(--tint2);text-align:center}
.mscs .mscs-mock--tall{width:220px;aspect-ratio:9/16;border-radius:18px}
.mscs-mock__what{font:600 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mscs-mock__what small{display:block;margin-top:6px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:none}
.mscs-mock__play{position:absolute;top:16px;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:rgba(35,31,44,.18)}
.mscs-mock__play:after{content:"";position:absolute;top:13px;left:17px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.mscs-rail--mock .mscs-rail__track{align-items:flex-start}
.mscs-rail--mock figure{display:flex;flex-direction:column;align-items:center}
.mscs .mscs-fb__media.mscs-mock{aspect-ratio:4/5;border-radius:0}
.mscs .mscs-igp__media.mscs-mock{border-radius:0}
/* Track videos: 16:9 cards in a rail, same controls as the ad cards. */
.mscs .mscs-track{display:flex;flex-direction:column;align-items:center;width:460px;max-width:calc(100vw - 40px)}
/* A connected TV: bezel, screen and stand, drawn in CSS so every spot sits on the same set. */
.mscs-tv{width:100%}
.mscs-tv__panel{position:relative;aspect-ratio:16/9;overflow:hidden;border:10px solid #17151c;border-bottom-width:14px;border-radius:10px;background:#000;box-shadow:inset 0 0 0 1px #3a3642,0 6px 18px rgba(35,31,44,.16)}
.entry__body .mscs-tv__panel video{display:block;width:100%;height:100%;margin:0;object-fit:cover}
.mscs-tv__stand{display:flex;flex-direction:column;align-items:center}
.mscs-tv__stand i{display:block;width:11%;height:14px;background:#2a2733}
.mscs-tv__stand b{display:block;width:38%;height:7px;border-radius:4px;background:#3a3642}
.mscs-tv__panel .mscs-fb__ctl{bottom:8px}
.mscs .mscs-track .mscs-cap{max-width:none}
.mscs-track .mscs-cap b{font-weight:600;color:var(--ink)}
/* A landscape Instagram video post. */
.entry__body .mscs-social .mscs-igp--wide{width:300px}
.mscs-igp__media--fit{background:#000}
.entry__body .mscs-igp__media--fit video{object-fit:contain}

/* Media Consumption Analysis: Hector's "Down to the App" block, ported. His class names carry a mix- prefix
   so they cannot collide with the page or the theme. */
.mscs-mix{--surface:#fff}
@media (min-width:768px){.entry__body .mscs-h2--oneline{white-space:nowrap}}
.entry__body .mscs .mscs-text--wide{max-width:1000px}
.entry__body .mscs .mscs-text--wide+.mscs-text>p:first-child{margin-top:0}
.entry__body .mscs-mix ul,.entry__body .mscs-mix ol{margin:0;padding:0;list-style:none}
.entry__body .mscs-mix li:before{content:none}
.entry__body .mscs-mix .mix-roku__menu li{margin:0;padding:.85cqw 1.6cqw;font:500 2.45cqw/1.15 var(--sys)}
.entry__body .mscs-mix .mix-roku__promo{overflow:hidden}
.entry__body .mscs-mix .mix-facts{margin:48px auto 0}
.entry__body .mscs-mix .mix-facts li{margin:0}
.entry__body .mscs-mix .mix-paper__item{margin:0}
.entry__body .mscs-mix .mix-facts b,.entry__body .mscs-mix .mix-bars__label{font-family:var(--serif)}
.entry__body .mscs-mix .mix-bars__label{font-family:var(--sans)}
.entry__body .mscs-mix .mix-list{margin:0;min-width:0}
.entry__body .mscs-mix .mix-stage{margin-top:48px}
.entry__body .mscs-mix .mix-bars li{margin:0 0 12px}
@media (min-width:560px){.entry__body .mscs-mix .mix-bars li{margin-bottom:6px}}
.entry__body .mscs-mix .mix-paper p{font-family:var(--serif)}
.entry__body .mscs-mix .mix-paper .mix-paper__by{font-family:var(--mono)}
.entry__body .mscs-mix .mix-chart__note,.entry__body .mscs-mix .mscs-chart__note{margin-top:14px}
/* App tiles: one look for every logo, whatever file it came from */
.mix-tile{position:relative;display:grid;place-items:center;flex:none;width:var(--s,36px);height:var(--s,36px);overflow:hidden;border-radius:calc(var(--s,36px) * .23);background:#fff;box-shadow:inset 0 0 0 1px rgba(35,31,44,.10)}
.mix-tile img{display:block;width:100%;height:100%;object-fit:cover}
.mix-tile--pad img{width:76%;height:76%;object-fit:contain}
.mix-tile--mask{box-shadow:none}
.mix-tile--mask i{display:block;width:var(--fit,62%);height:var(--fit,62%);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mix-tile--crop img{width:78%;height:78%;object-fit:cover;object-position:left center}
.mix-tile--text b{font:700 calc(var(--s,36px) * .34)/1 var(--serif);letter-spacing:-.02em;color:#111}
.mix-tile--icon{background:var(--peach);box-shadow:none;color:var(--ink)}
.mix-tile--icon svg{width:52%;height:52%}

/* Facts row, as on the page, with an app tile over each number */
.mix-facts{display:grid;grid-template-columns:1fr;gap:18px 0;max-width:960px;margin:36px auto 0;padding:0;list-style:none}
.mix-facts li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;margin:0;padding:0 24px;border-left:2px solid var(--peach)}
.mix-facts .mix-tile{grid-row:1/span 2;--s:48px}
.mix-facts b{display:block;font:400 34px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);letter-spacing:-.01em;align-self:end}
.mix-facts__label{display:block;margin-top:4px;font:400 14px/1.4 var(--sans);color:var(--muted);align-self:start}
@media (min-width:768px){.mix-facts{display:flex;justify-content:center;gap:0 56px}.mix-facts li{padding:4px 0 4px 20px}}

/* Stage: phone beside the ranked list */
.mix-stage{display:grid;grid-template-columns:1fr;gap:36px;max-width:1040px;margin:56px auto 0;align-items:center}
@media (min-width:900px){.mix-stage{grid-template-columns:minmax(0,440px) 1fr;gap:48px}.mix-stage>.mix-list{align-self:start}}
.mix-stage__device{display:flex;justify-content:center;min-width:0}
.mix-stage__device>[hidden]{display:none!important}

/* TV, for streaming TV: a Roku-style home screen (menu and promo on the left,
   channel tiles on the right). Everything inside scales with the TV's width. */
.mix-tv{width:100%;max-width:440px;margin:28px 0 0}
.mix-tv__frame{container-type:inline-size;padding:5px 5px 7px;border-radius:7px;background:#0d0c10;box-shadow:inset 0 0 0 1px #2c2933,0 24px 50px rgba(35,31,44,.24)}
.mix-tv__screen{display:flex;flex-direction:column;aspect-ratio:16/9;overflow:hidden;padding:2.6cqw 3cqw 2.4cqw;border-radius:2px;color:#fff;font-family:var(--sys);
  background:radial-gradient(70% 80% at 85% 0%,rgba(140,82,214,.35),transparent 60%),linear-gradient(165deg,#3a1f63 0%,#24133f 55%,#1a0e2e 100%)}
.mix-tv__chin{height:4px}
.mix-roku__bar{display:flex;justify-content:space-between;align-items:center;height:5cqw;margin-bottom:1.8cqw}
.mix-roku__logo{display:block;width:16cqw;height:6cqw;margin-left:-2.2cqw;background:#fff}
.mix-roku__clock{font:500 2.5cqw/1 var(--sys);opacity:.9}
.mix-roku__clock span{opacity:.6;margin-left:1.4cqw}
.mix-roku__body{display:grid;grid-template-columns:27cqw 1fr;gap:3cqw;flex:1;min-height:0}
.mix-roku__side{display:flex;flex-direction:column;gap:2cqw;min-height:0}
.mix-roku__menu{display:flex;flex-direction:column;gap:.35cqw;margin:0;padding:0;list-style:none}
.mix-roku__menu li{padding:.85cqw 1.6cqw;border-radius:.8cqw;font:500 2.45cqw/1.15 var(--sys);color:rgba(255,255,255,.82)}
.mix-roku__menu li.is-on{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.mix-roku__promo{display:flex;flex-direction:column;justify-content:flex-end;gap:.5cqw;flex:1;min-height:0;margin-top:.4cqw;padding:1.8cqw;border-radius:1cqw;
  background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 70%),linear-gradient(135deg,#ef7062 0%,#d9584c 45%,#8a2f4f 100%)}
.mix-roku__promo b{font:800 3cqw/1.05 var(--sys)}
.mix-roku__promo span{font:500 1.75cqw/1.25 var(--sys);opacity:.92;text-wrap:balance}
.mix-tv__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1.3cqw;min-height:0}
.mix-tvcard{position:relative;display:grid;place-items:center;min-width:0;padding:0;overflow:hidden;border:0;border-radius:.9cqw;background:#2a1d40;cursor:pointer;
  box-shadow:0 .4cqw 1cqw rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.mix-tvcard img{display:block;height:62%;width:auto;max-width:60%;object-fit:contain;border-radius:.6cqw}
.mix-tvcard--pad img{height:52%;max-width:62%;border-radius:0}
.mix-tvcard i{display:block;width:52%;height:46%;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mix-tvcard svg{width:24%;height:auto;margin-bottom:2.2cqw;color:var(--ink)}
.mix-tvcard__label{position:absolute;left:1cqw;bottom:1.1cqw;font:700 1.8cqw/1 var(--sys);color:var(--ink)}
.mix-tvcard__pct{position:absolute;right:.7cqw;bottom:.7cqw;padding:.3cqw .8cqw;border-radius:999px;background:rgba(17,12,26,.78);color:#fff;font:700 1.8cqw/1.2 var(--sys);font-variant-numeric:tabular-nums}
.mix-tvcard.is-on{z-index:2;transform:scale(1.07);box-shadow:0 0 0 .55cqw #fff,0 1.2cqw 2.6cqw rgba(0,0,0,.5)}
.mix-tv__stand{width:20%;height:14px;margin:0 auto;background:linear-gradient(#17151c,#26232d);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.mix-tv__base{width:38%;height:5px;margin:0 auto;border-radius:3px;background:#26232d}

/* Newspaper, for news: a made-up front page (not any real paper) on newsprint. */
.mix-paper{position:relative;width:100%;max-width:430px;margin:10px 0 0;padding:18px 20px 20px;color:#1b1a1d;transform:rotate(-1deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),#f3eee2;
  box-shadow:0 1px 0 #ddd3bd,0 2px 0 #f0e9da,0 3px 0 #d8cdb4,0 24px 50px rgba(35,31,44,.20)}
.mix-paper__top{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;gap:8px}
.mix-paper__ear{padding:4px 6px;border:1px solid #1b1a1d;font:500 8.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.mix-paper__ear b{display:block;margin-top:2px;font:700 11px/1.1 var(--serif);letter-spacing:0;text-transform:none}
.mix-paper__mast{margin:0;font:400 29px/1 "UnifrakturMaguntia",var(--serif);text-align:center;white-space:nowrap}
.mix-paper__line{display:flex;justify-content:space-between;gap:8px;margin:8px 0 10px;padding:3px 0;border-top:1px solid #1b1a1d;border-bottom:3px double #1b1a1d;font:500 8.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mix-paper__lead{margin:0 -6px;padding:2px 6px 8px;border-radius:3px;transition:background-color .15s}
.mix-paper__lead.is-on{background:rgba(217,88,76,.09)}
.mix-paper__head{margin:0;font:700 27px/1.02 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.mix-paper__deck{margin:5px 0 7px;font:italic 400 13px/1.25 var(--serif);color:#3b3740}
.mix-paper__by{margin:0 0 6px;font:500 8px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5d5764}
.mix-paper__story{display:grid;grid-template-columns:1fr 96px;gap:12px}
.mix-paper__body{margin:0;font:400 11.5px/1.4 var(--serif);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.mix-paper__drop{float:left;margin:2px 4px 0 0;font:700 31px/.8 var(--serif)}
.mix-paper__stat{display:flex;flex-direction:column;justify-content:center;padding-left:12px;border-left:1px solid #cfc5ad;text-align:center}
.mix-paper__stat b{font:400 40px/.9 var(--serif);font-variant-numeric:lining-nums}
.mix-paper__stat small{margin-top:4px;font:italic 400 11px/1.2 var(--serif)}
.mix-paper__box{margin-top:10px;padding:8px 10px 6px;border:1px solid #1b1a1d}
.mix-paper__sub{margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid #1b1a1d;font:700 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mix-paper__list{display:grid;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
.mix-paper__item{display:grid;grid-template-columns:18px 104px 1fr 30px;gap:8px;align-items:center;padding:3px 2px;border-bottom:1px dotted #b9ae95;border-radius:2px;cursor:default;transition:background-color .15s}
.mix-paper__item:last-child{border-bottom:0}
.mix-paper__item .mix-tile{--s:18px;filter:grayscale(1) contrast(1.1)}
.mix-paper__item span{min-width:0;font:400 12px/1.2 var(--serif)}
.mix-paper__item i{display:block;height:7px;background:#1b1a1d}
.mix-paper__item b{font:700 11px/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.mix-paper__item.is-on{background:rgba(217,88,76,.12)}
.mix-paper__item.is-on .mix-tile{filter:none}
.mix-paper__item.is-on i{background:var(--accent)}
@media (max-width:420px){.mix-paper__top{grid-template-columns:1fr}.mix-paper__ear{display:none}.mix-paper__story{grid-template-columns:1fr}.mix-paper__stat{display:none}.mix-paper__item{grid-template-columns:18px 96px 1fr 30px}}

/* Phone, built on the page's .mix-phone */
.mix-phone{position:relative;width:286px;height:590px;padding:10px;border-radius:48px;background:#17151c;box-shadow:inset 0 0 0 2px #3a3642,0 24px 60px rgba(35,31,44,.22)}
.mix-phone__island{position:absolute;z-index:4;top:21px;left:50%;width:86px;height:25px;margin-left:-43px;border-radius:13px;background:#000}
.mix-screen{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:38px;color:#fff;font-family:var(--sys);
  background:radial-gradient(120% 70% at 15% 0%,rgba(255,173,173,.55),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(217,88,76,.55),transparent 65%),linear-gradient(170deg,#3b2f52 0%,#231f2c 70%)}
.mix-status{display:flex;justify-content:space-between;align-items:center;height:46px;padding:6px 28px 0 32px;font-size:14px;font-weight:600;letter-spacing:.01em}
.mix-status svg{width:58px;height:12px}
.mix-widget{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;margin:6px 16px 4px;padding:11px 13px;border-radius:20px;background:rgba(255,255,255,.92);color:var(--ink)}
.mix-widget__day{grid-row:1/span 3;display:flex;flex-direction:column;align-items:center;padding-right:12px;border-right:1px solid rgba(35,31,44,.12)}
.mix-widget__dow{font:700 10px/1 var(--sys);letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.mix-widget__date{font:400 34px/1 var(--serif);font-variant-numeric:lining-nums}
.mix-widget__title{font:700 14px/1.2 var(--sys)}
.mix-widget__sub{font:500 11.5px/1.3 var(--sys);color:var(--muted)}
.mix-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;padding:14px 14px 0;align-content:start;flex:1}
.mix-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;transition:transform .18s ease}
.mix-app .mix-tile{--s:48px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.mix-app__name{max-width:100%;overflow:hidden;font-size:9.5px;line-height:1.15;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mix-app__badge{position:absolute;top:-7px;right:2px;z-index:2;min-width:22px;padding:2px 5px;border-radius:999px;background:#ff3b30;color:#fff;font:700 10px/1.25 var(--sys);font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.mix-app.is-on{transform:translateY(-3px) scale(1.08)}
.mix-app.is-on .mix-tile{box-shadow:0 0 0 2px #fff,0 6px 14px rgba(0,0,0,.35)}
.mix-app:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.mix-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 8px}
.mix-dots i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background-color .15s}
.mix-dots i.is-on{background:#fff}
.mix-dock{display:flex;justify-content:space-between;gap:6px;margin:0 10px 12px;padding:9px 10px;border-radius:26px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mix-dock button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:11px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:background-color .15s,transform .15s}
.mix-dock button svg{width:21px;height:21px}
.mix-dock button[aria-pressed="true"]{background:var(--accent);transform:translateY(-2px)}
.mix-dock button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Ranked list */
.mix-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0}
.mix-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--muted);font:600 14px/1.2 var(--sans);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.mix-tab svg{width:16px;height:16px}
.mix-tab:hover{border-color:rgba(35,31,44,.3);color:var(--ink)}
.mix-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mix-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mix-bars{margin:0;padding:0;list-style:none}
.mix-bars li{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"tile name" "tile track";gap:3px 12px;align-items:center;margin:0 0 12px;padding:3px 6px;border-radius:8px;outline:none;cursor:default;transition:background-color .15s}
.mix-bars .mix-tile{grid-area:tile;--s:32px}
.mix-bars__label{grid-area:name;min-width:0;font-size:15px;line-height:1.25;color:var(--ink);text-wrap:balance}
.mix-bars__track{grid-area:track;display:flex;align-items:center;gap:8px;min-height:16px}
.mix-bars__bar{display:block;height:14px;min-width:2px;border-radius:0 4px 4px 0;background:var(--gray);transition:background-color .15s,width .35s ease}
.mix-bars__val{font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.mix-bars li.is-on{background:var(--tint)}
.mix-bars li.is-on .mix-bars__bar{background:var(--accent)}
.mix-bars li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:560px){
  .mix-bars li{grid-template-columns:32px minmax(130px,34%) 1fr;grid-template-areas:"tile name track";gap:12px;margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.mix-app,.mix-tvcard,.mix-paper__item,.mix-paper__lead,.mix-bars__bar,.mix-dock button,.mix-tab,.mix-bars li{transition:none}}

/* Creative calendar: audience tracks down, weeks across; each cell is the number of spots live that week. */
.mscs .mscs-cal{max-width:1040px;margin:56px auto 0}
.mscs-cal__scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.mscs-cal__scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.mscs-cal__grid{display:grid;grid-template-columns:minmax(168px,200px) repeat(13,minmax(36px,1fr)) 56px;gap:3px;min-width:700px;text-align:left}
.mscs-cal__h{align-self:end;padding:0 0 6px;font:500 11px/1.2 var(--mono);color:var(--muted);text-align:center;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.mscs-cal__h--l{text-align:left}
.mscs-cal__lab{display:flex;align-items:center;padding-right:10px;font:400 14px/1.2 var(--sans);color:var(--ink)}
.entry__body .mscs-cal__cell{display:grid;place-items:center;min-height:32px;margin:0;padding:0;border:0;border-radius:4px;background:var(--tint2);font:600 12px/1 var(--sans);color:var(--ink);cursor:default;box-shadow:none}
.entry__body .mscs-cal__cell.is-on{cursor:pointer}
.entry__body .mscs-cal__cell.is-dark{color:#fff}
.entry__body .mscs-cal__cell:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.entry__body .mscs-cal__cell.is-hl{box-shadow:inset 0 0 0 2px var(--ink)}
.mscs-cal__tot{display:grid;place-items:center;font:400 20px/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.mscs .mscs-cal__keys{justify-content:center;margin-top:14px}
.mscs-cal__sw{display:inline-block;width:14px;height:14px;margin-right:6px;border-radius:3px;vertical-align:-2px}
.mscs-cal__h-short{display:none}
@media (max-width:767px){.mscs-cal__grid{grid-template-columns:minmax(140px,160px) repeat(13,36px) 48px}.mscs-cal__h{font-size:10px;letter-spacing:0}.mscs-cal__h-long{display:none}.mscs-cal__h-short{display:inline}}

/* Rails: arrow buttons for mouse users (the scrollbar is hidden; trackpads and touch swipe sideways). */
.mscs-railwrap{position:relative}
.entry__body .mscs-rail__btn{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-34px 0 0;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(35,31,44,.1),0 8px 24px rgba(35,31,44,.18);cursor:pointer;transition:opacity .2s}
.entry__body .mscs-rail__btn:hover{background:var(--peach)}
.entry__body .mscs-rail__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mscs-rail__btn svg{width:18px;height:18px}
.mscs-rail__btn--prev{left:4px}
.mscs-rail__btn--next{right:4px}
.mscs-rail__btn[hidden]{display:none}
@media (hover:none){.entry__body .mscs-rail__btn{display:none}}
@media (min-width:1280px){.mscs-rail__btn--prev{left:12px}.mscs-rail__btn--next{right:12px}}

/* Gas pump: a CSS-drawn pump housing around the YouTube embed. The ad is real; the pump is an illustration. */

/* The Result: counties shaded by how far they moved toward Abdul; three facts beside the map. */
/* The Result: an AP-style results card beside the county map (winner and share). */
.entry__body .mscs .mscs-ap{max-width:1100px}
.mscs-ap__grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;margin-top:8px}
.mscs-ap__card{padding:18px 20px 16px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(35,31,44,.06),0 16px 48px rgba(35,31,44,.12);font-family:var(--sans)}
.mscs-ap__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.mscs-ap__title{font:700 17px/1.3 var(--sans);color:var(--ink)}
.mscs-ap__src{font:400 12px/1.4 var(--sans);color:var(--muted);text-align:right}
.entry__body .mscs-ap__table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.3}
.entry__body .mscs-ap__table th{padding:0 0 8px;border:0;background:transparent;text-align:left;font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.entry__body .mscs-ap__table td{padding:10px 0 10px 12px;border:0;border-top:1px solid var(--rule);border-left:4px solid var(--gray-dk1);background:transparent;vertical-align:middle;color:var(--ink)}
.entry__body .mscs-ap__table td+td{border-left:0;padding-left:12px}
.entry__body .mscs-ap__table .mscs-ap__row--d td:first-child{border-left-color:#1f5fa8}
.entry__body .mscs-ap__table .mscs-ap__row--r td:first-child{border-left-color:#d9584c}
.entry__body .mscs-ap__table .is-winner td{background:#eef4fb;font-weight:700}
.entry__body .mscs-ap__table td:first-child{display:flex;align-items:center;gap:12px;white-space:nowrap}
.entry__body .mscs-ap__table .mscs-ap__num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.entry__body .mscs-ap__table .mscs-ap__pct{padding-right:4px}
.entry__body .mscs-ap__pic{display:block;width:44px;height:44px;margin:0;border-radius:50%;object-fit:cover;flex:none}
.mscs-ap__pic--blank{display:grid;place-items:center;background:#e6e2ee;font:600 13px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.mscs-ap__check{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:4px;background:#1f5fa8;color:#fff}
.mscs-ap__check svg{width:18px;height:18px}
.mscs-ap__check--none{background:transparent}
.mscs-ap__name{display:block;line-height:1.2}
.mscs-ap__party{display:block;margin-top:2px;font:400 12px/1.3 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mscs-ap__margin{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:12px;padding-top:12px;border-top:2px solid var(--ink);font:400 14px/1.4 var(--sans);color:var(--ink)}
.mscs-ap__margin b{font-weight:700;margin-right:6px}
.mscs-ap__foot{margin-top:10px;font:400 12px/1.4 var(--sans);color:var(--muted);text-align:right}
.mscs-ap__map{display:flex;flex-direction:column;align-items:center}
.entry__body .mscs .mscs-result__map{width:100%;max-width:440px;margin:0 auto}
.mscs-result .mscs-map__svg path{cursor:default}
.mscs-result .mscs-map__svg path.is-on{stroke:var(--ink);stroke-width:1.4}
.mscs-ap__legend{align-self:flex-start;margin:18px 0 0;font:400 12px/1.3 var(--sans);color:var(--muted)}
.mscs-ap__legend-h{display:block;margin-bottom:6px;font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mscs-ap__ramp{display:flex;align-items:center;gap:0;margin-top:3px}
.mscs-ap__ramp i{display:block;width:36px;height:12px}
.mscs-ap__ramp i:first-child{border-radius:2px 0 0 2px}.mscs-ap__ramp i:nth-child(4){border-radius:0 2px 2px 0}
.mscs-ap__ramp span{margin-left:10px;color:var(--ink)}
.mscs-ap__ticks{display:flex;margin-top:4px;padding-left:28px;gap:0}
.mscs-ap__ticks span{width:36px}
.mscs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:900px){.mscs-ap__grid{grid-template-columns:minmax(360px,440px) 1fr;gap:48px}.mscs-ap__legend{align-self:flex-start;margin-left:8%}}
@media (max-width:559px){.entry__body .mscs-ap__pic{width:36px;height:36px}.mscs-ap__check{width:24px;height:24px}.mscs-ap__check svg{width:14px;height:14px}.entry__body .mscs-ap__table{font-size:14px}.mscs-ap__card{padding:14px 14px 12px}}
/* Table inside the blue band: white text, horizontal rules only. */
.entry__body .mscs-band--blue .mscs-table,.entry__body .mscs-band--blue .mscs-table td,.entry__body .mscs-band--blue .mscs-table td:first-child,.entry__body .mscs-band--blue .mscs-table td:nth-child(2){color:#fff}
.entry__body .mscs-band--blue .mscs-table th,.entry__body .mscs-band--blue .mscs-table td{border:0;border-top:1px solid rgba(255,255,255,.22);background:transparent}
.entry__body .mscs-band--blue .mscs-table th{border-top:0;color:rgba(255,255,255,.72)}

/* Ours, not the partner's: the long title ("Abdul El-Sayed: Digital Persuasion")
   wraps at 640px, wide enough to keep "Digital Persuasion" on its own line
   rather than running across the whole header. Other case studies keep the
   theme's uncapped title. */
@media (min-width:768px){.entry__header--case .entry__hed{max-width:640px}}

/* Ours, not the partner's: keep the Result card and map inside the phone screen.
   Without min-width:0 the table's width pushes its grid column past the column,
   which cuts off the Pct. column and the east side of the map. */
.mscs-ap__grid>*{min-width:0}
.mscs-ap__card{padding:14px 12px 12px}
.entry__body .mscs-ap__table{font-size:13px}
.entry__body .mscs-ap__table td{padding-left:8px}
.entry__body .mscs-ap__table td+td{padding-left:8px}
.entry__body .mscs-ap__table td:first-child{gap:6px;white-space:normal}
.entry__body .mscs-ap__pic{width:28px;height:28px}
.mscs-ap__check{width:20px;height:20px}
.mscs-ap__check svg{width:12px;height:12px}
@media (min-width:560px){
  .mscs-ap__card{padding:18px 20px 16px}
  .entry__body .mscs-ap__table{font-size:15px}
  .entry__body .mscs-ap__table td{padding-left:12px}
  .entry__body .mscs-ap__table td+td{padding-left:12px}
  .entry__body .mscs-ap__table td:first-child{gap:12px;white-space:nowrap}
  .entry__body .mscs-ap__pic{width:44px;height:44px}
  .mscs-ap__check{width:30px;height:30px}
  .mscs-ap__check svg{width:18px;height:18px}
}

/* Ours, not the partner's: the TV tile logos. The block's general image rule beat
   the partner's tile sizes, so logos showed at full tile width and got cropped.
   These restate those sizes with enough specificity, positioned against the tile
   so the percentage height applies. */
.entry__body .mscs .mix-tvcard img{position:absolute;inset:0;width:auto;height:62%;max-width:60%;margin:auto;object-fit:contain}
.entry__body .mscs .mix-tvcard--pad img{height:52%;max-width:62%}
