/* Business article layout (LAT-4519): checklist cards | article | MCP Analytics ad.
   Spec: Business Style Sheet v3, Layout section. Loaded only by articles that opt in
   (<meta name="audience" content="business"> + the .biz-layout wrapper, written by qa/apply-biz-layout.py).
   Differences from the mock: no width:100vw breakout (it overflowed by the scrollbar width), the mock's note class is gone.
   WIDTH (10-22 fix): css/content.css caps .article at 800px, and the grid sits INSIDE .article, so 260 + 720 + 260 + gaps
   cannot fit and the centre column collapsed to ~100px. .article:has(> .biz-layout) lifts the cap to 1400px and drops the
   article's own side padding (the layout carries 24px of its own). The centre column is W - 648px, so it is at least 560px
   from 1240px up; below 1240px the columns stack (article, checklist, ad). The Style Sheet spec said 1180; at 1180 the
   centre would be 532px. */
.article:has(> .biz-layout){max-width:none;padding-left:0;padding-right:0;padding-top:0}
.article:has(> .biz-layout) .article-header{padding-top:72px}
/* header text and body text share one left edge at every width: no inner padding in main */
.biz-layout>main .container{padding-left:0;padding-right:0}
.biz-layout>main .article-body{padding-left:0;padding-right:0}
.biz-layout{display:grid;grid-template-columns:260px minmax(0,720px) 260px;justify-content:center;gap:40px;width:100%;padding:0 24px;box-sizing:border-box;align-items:start}
.biz-layout>main.article-content{max-width:none;margin:0;padding-left:0;padding-right:0;min-width:0}
.biz-side{position:sticky;top:96px;display:grid;gap:16px;padding-top:32px}
.biz-card{border:1px solid #e3e5ea;border-radius:10px;padding:16px;background:#fff;display:grid;gap:10px}
.biz-card h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#1a1a2e;margin:0;font-weight:700}
.biz-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.biz-card label{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;font-size:.86rem;line-height:1.4;color:#374151;cursor:pointer}
.biz-card input[type=checkbox]{accent-color:#C65000;width:16px;height:16px;margin:2px 0 0}
.biz-card small{display:block;color:#636b74;font-size:.78rem;margin-top:2px}
.biz-card .opt{color:#636b74;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.biz-progress{font-family:'Geist Mono',ui-monospace,monospace;font-size:.8rem;color:#1a1a2e}
.biz-progress b{color:#C65000}
.biz-meter{height:6px;background:#eef0f3;border-radius:3px;overflow:hidden}
.biz-meter i{display:block;height:100%;width:0;background:#C65000;transition:width .2s}
.biz-btn{display:block;text-align:center;background:#1a1a2e;color:#fff!important;text-decoration:none;border-radius:6px;padding:10px 12px;font-weight:600;font-size:.88rem}
/* ONE global look for every business ad (operator 10-22, look D). Change a token here and every ad changes.
   Ads are styled ONLY through these tokens; no colour is written on an ad rule. Source: binders/business/drafts/ads/business-ads.html */
:root{--ad-bg:#fff4ec;--ad-border:#f4d6c1;--ad-kicker:#C65000;--ad-head:#1a1a2e;--ad-text:#374151;--ad-muted:#636b74;--ad-btn-bg:#C65000;--ad-btn-text:#ffffff;--ad-inset:#ffffff}
.biz-ad{background:var(--ad-bg);border:1px solid var(--ad-border);color:var(--ad-text);border-radius:10px;padding:20px 18px;display:grid;gap:12px}
.biz-ad .kicker{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ad-kicker)}
.biz-ad h3{color:var(--ad-head);font-size:1.12rem;line-height:1.28;font-weight:750;margin:0}
.biz-ad p{margin:0;font-size:.87rem;line-height:1.5;color:var(--ad-text)}
.biz-ad .q{background:var(--ad-inset);border:1px solid var(--ad-border);color:var(--ad-head);border-radius:6px;padding:10px 12px;font-size:.85rem;font-style:italic}
.biz-ad a{display:block;text-align:center;background:var(--ad-btn-bg);color:var(--ad-btn-text)!important;text-decoration:none;border-radius:6px;padding:10px 12px;font-weight:700;font-size:.88rem}
.biz-ad .addr{background:var(--ad-inset);border:1px solid var(--ad-border);border-radius:6px;padding:8px 10px;color:var(--ad-head);font-size:.9rem;font-weight:600;user-select:all;word-break:break-all}
.biz-ad .stat{font-size:1.6rem;font-weight:600;line-height:1;color:var(--ad-head)}
.biz-ad ul{margin:0;padding-left:18px;font-size:.86rem;display:grid;gap:3px}
.biz-ad ul a{display:inline;background:none;color:var(--ad-head)!important;padding:0;text-align:left;font-weight:600}
.biz-ad .months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.biz-ad .months span{background:var(--ad-inset);border:1px solid var(--ad-border);border-radius:6px;padding:6px;text-align:center;font-size:.72rem;color:var(--ad-muted)}
.biz-ad .months span.now{border-color:var(--ad-kicker);color:var(--ad-kicker);font-weight:600}
.biz-ad .fine{font-size:.72rem;color:var(--ad-muted)}
.biz-output{margin:24px 0;border:1px solid #e3e5ea;border-radius:10px;padding:18px;display:grid;gap:14px;background:#fff}
.biz-output figcaption{font-size:.85rem;color:#374151;display:grid;gap:4px}
.biz-out-grid{display:grid;gap:8px}
.biz-out-row{display:grid;grid-template-columns:150px 1fr 56px 96px;gap:10px;align-items:center;font-size:.86rem;color:#374151}
.biz-out-row .bar-wrap{height:14px;background:#eef0f3;border-radius:3px;overflow:hidden}
.biz-out-row .bar-wrap i{display:block;height:100%;background:#9aa1ab}
.biz-out-row.win .bar-wrap i{background:#C65000}
.biz-out-row b{font-family:'Geist Mono',ui-monospace,monospace;color:#1a1a2e;text-align:right}
.biz-out-row em{font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;color:#636b74;font-size:.78rem}
.biz-out-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
.biz-out-table th,.biz-out-table td{padding:8px 10px;border-bottom:1px solid #e3e5ea;text-align:left}
.biz-out-table .n{text-align:right;font-family:'Geist Mono',ui-monospace,monospace;white-space:nowrap}
.biz-out-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#636b74}
.biz-out-note{font-size:.8rem;color:#636b74;margin:0}
@media (max-width:520px){.biz-out-row{grid-template-columns:1fr 56px;}.biz-out-row .bar-wrap,.biz-out-row em{display:none}}
@media (max-width:1239px){.biz-layout{grid-template-columns:minmax(0,760px);padding:0 16px;gap:24px}.biz-side{position:static;padding-top:0}.biz-left{order:2}.biz-layout>main{order:1}.biz-right{order:3}}
/* Stacked (phone/tablet): header, article text and side cards share ONE left edge (16px on a phone; on a tablet the 760px column is centred and the header container is centred on the same 792px box). The header block sits outside the
   layout with its own 24px padding, and .article-body adds 16px inside main, so they used to start at 32 / 48 / 16. */
@media (max-width:1239px){
.article:has(> .biz-layout) .article-header{padding-left:0;padding-right:0}
.article:has(> .biz-layout) .article-header .container{max-width:792px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.biz-layout>main .container{padding-left:0;padding-right:0}
.biz-layout>main .article-body{padding-left:0;padding-right:0}
}

/* WIDE SCREENS (operator 10-22, business): the columns grow with the viewport instead of staying a 1320px strip, and the header
   block is aligned to the centre column. Side 260-340px, centre 560-800px, gap 40-72px. The centre minimum is 560 (business's
   draft said 640, which needs 1288px and would overflow between 1240 and 1288). */
:root{--biz-side:clamp(260px,17vw,340px);--biz-main:clamp(560px,42vw,800px);--biz-gap:clamp(40px,3vw,72px)}
@media (min-width:1240px){
.biz-layout{grid-template-columns:var(--biz-side) var(--biz-main) var(--biz-side);gap:var(--biz-gap);justify-content:center}
.article:has(> .biz-layout) .article-header .container{max-width:none;width:calc(var(--biz-side)*2 + var(--biz-main) + var(--biz-gap)*2);margin:0 auto;padding-left:calc(var(--biz-side) + var(--biz-gap));padding-right:0;box-sizing:border-box}
}

/* main.css makes a real comparison table display:block so it can scroll; its anonymous inner table then shrinks to
   content and ended ~65px short of the text column at 1920. In the layout the table fills the column and its
   wrapper scrolls instead. */
.biz-layout table.comparison-table{display:table;width:100%;max-width:none}
.biz-layout .inc-table-wrap{overflow-x:auto;max-width:100%}

/* ===== Business article, answer-first (LAT-4519 / LAT-4520, business mock inc-article-c). Every block below is opt-in:
   it renders only when qa/apply-biz-layout.py was given the matching layout.json key (header, checks, video, related,
   closing, free_run points). ===== */
/* 1. header sits in the centre column, so the rails start at the headline */
.article:has(> .biz-hx-on){padding-top:0}
.biz-hx-on{padding-top:40px}
.biz-hx-on .biz-side{padding-top:0;top:88px}
.biz-hx-on>main .biz-hx{padding:0 0 8px}
/* css/content.css gives main.article-content 80px (60px phone) of top padding; with the header inside the centre column that pushed it ~90px below the rails */
.biz-hx-on>main.article-content{padding-top:0}
/* the old lead line repeats the three header tiles (its text stays in the source) */
.biz-hx-on .inc-answer{display:none}
.hx{display:grid;gap:14px;padding:0 0 8px}
.hx-crumb{font-size:.82rem;color:#636b74}.hx-crumb a{color:#636b74;text-decoration:none;border:0}.hx-crumb a:hover{color:#c65000}
.hx-eyebrow{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:#636b74;font-weight:600}
.hx-eyebrow .pill{background:#1a1a2e;color:#fff;border-radius:999px;padding:5px 12px;letter-spacing:.06em}
.hx h1,.hx h1.article-title{margin:0;font-size:clamp(2.1rem,2.9vw,3.1rem);line-height:1.08;color:#1a1a2e;font-weight:800;letter-spacing:-.01em}
.hx h1 em,.hx h1.article-title em,.hx h1 em.word-orange{font-style:normal;color:#c65000}
/* the header carries its own .word-black / .word-orange so js/main.js leaves it alone (see qa/apply-biz-layout.py render_header) */
.hx h1 .word-black{color:#1a1a2e}
.hx-dek{margin:0;font-size:1.15rem;line-height:1.5;color:#4b5563;max-width:34em}
.hx-stats{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:12px;margin:10px 0 4px}
.hx-stat{border:1px solid #e3e5ea;border-radius:12px;padding:16px 16px 14px;background:#fff;display:grid;gap:4px;align-content:start}
.hx-stat b{font-size:2.2rem;line-height:1;color:#1a1a2e;font-weight:800;font-variant-numeric:tabular-nums}
.hx-stat b{white-space:nowrap}.hx-stat b i{font-style:normal;font-size:.95rem;font-weight:700;letter-spacing:0;margin-right:2px}
.hx-stat span{font-size:.86rem;line-height:1.35;color:#4b5563}
.hx-stat.hot{background:#c65000;border-color:#c65000}
.hx-stat.hot b,.hx-stat.hot b i,.hx-stat.hot span{color:#fff}
.hx-by{font-size:.85rem;color:#636b74;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.hx-by span+span::before{content:'\00b7';margin-right:10px;color:#c9cdd4}
.hx-by span:nth-child(n+3){flex-basis:100%}.hx-by span:nth-child(n+3)::before{content:none}
@media (max-width:640px){.hx-stats{grid-template-columns:1fr}.hx-stat{grid-template-columns:auto 1fr;align-items:center;gap:0 14px}.hx-stat b{grid-row:span 2}}
/* 2. How we checked */
.mx{margin:40px 0 8px;border:1px solid #e3e5ea;border-radius:16px;background:#fbf8f5;padding:28px 28px 24px}
.mx .k{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#c65000;font-weight:700}
.mx h2{margin:6px 0 14px;font-size:1.55rem;line-height:1.2;color:#1a1a2e}
.mx>p.lead{margin:0 0 20px;color:#4b5563;font-size:1rem;line-height:1.55}
.mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mx-t{background:#fff;border:1px solid #ece4db;border-radius:12px;padding:16px 16px 14px;display:grid;gap:6px;align-content:start}
.mx-n{width:28px;height:28px;border-radius:50%;background:#fff1e6;color:#a84300;font-weight:800;display:grid;place-items:center;font-size:.9rem}
.mx-t h3{margin:4px 0 0;font-size:1.02rem;color:#1a1a2e}
.mx-t p{margin:0;font-size:.92rem;line-height:1.5;color:#374151}
.mx-t .tag{margin-top:4px;font-family:'Geist Mono',ui-monospace,monospace;font-size:.72rem;color:#636b74}
.mx-foot{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px}
.mx-foot a.btn{background:#1a1a2e;color:#fff!important;border:0;border-radius:8px;padding:11px 18px;font-weight:700;text-decoration:none;font-size:.92rem}
.mx-foot a.lnk{font-weight:700;color:#c65000;text-decoration:none;border:0}
.mx details{margin-top:18px;border-top:1px solid #ece4db;padding-top:14px}
.mx summary{cursor:pointer;font-weight:700;color:#1a1a2e;font-size:.95rem}
.mx details p{margin:10px 0 0;font-size:.88rem;line-height:1.6;color:#4b5563}
@media (max-width:640px){.mx{padding:22px 18px}.mx-grid{grid-template-columns:1fr}}
/* 3. free-run card, the one call to action in the left rail */
.biz-run{border:1px solid #f4d6c1!important;border-top:4px solid #c65000!important;background:#fff!important;gap:12px!important;padding:18px 16px 16px!important}
.biz-run .k{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#c65000}
.biz-run h3{font-size:1.15rem!important;line-height:1.25;text-transform:none!important;letter-spacing:0!important;font-weight:800!important}
.biz-run p{margin:0;font-size:.86rem;line-height:1.45;color:#374151}
.biz-run ul.pts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.biz-run ul.pts li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:.84rem;color:#1a1a2e;line-height:1.35}
.biz-run ul.pts li::before{content:'';width:14px;height:14px;margin-top:2px;border-radius:50%;background:#fff1e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.2 4.7-4.8' fill='none' stroke='%23c65000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.biz-run .go{display:block;text-align:center;background:#c65000;color:#fff!important;text-decoration:none;border:0;border-radius:8px;padding:12px;font-weight:700;font-size:.92rem}
.biz-run .go:hover{background:#a84300}
.biz-run .alt{text-align:center;font-size:.84rem}.biz-run .alt a{color:#c65000;font-weight:700;text-decoration:none;border:0}
.biz-run .fine{font-size:.74rem;color:#636b74;text-align:center}
.biz-run.ready{background:#fff4ec!important;box-shadow:0 0 0 3px rgba(198,80,0,.15)}
/* 4. rail video, above the ad (only rendered with a real YouTube id) */
.biz-vid{border-radius:12px;overflow:hidden;background:#0f1020;border:1px solid #23253d;display:grid}
.biz-vid .thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#1a1a2e;cursor:pointer}
.biz-vid .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;max-width:none} /* LAT-4490: article css gives img margin:24px 0, which pushed the thumb over the caption */
/* LAT-4490: play button in the lower-left corner, so it never covers the numbers a thumbnail carries in its centre */
.biz-vid .play{position:absolute;left:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:#c65000;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.biz-vid .play::after{content:'';position:absolute;left:15px;top:11px;border-left:11px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.biz-vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.biz-vid .cap{padding:12px 14px;color:#e7e9f2;font-size:.86rem;line-height:1.4;background:#15162b}
.biz-vid .cap b{color:#fff;display:block;margin-bottom:2px}
.biz-vid .cap .k{color:#ffb27a;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.biz-vid .cap span{display:block}.biz-vid .cap .dur{color:#9aa1ab;font-size:.76rem;margin-top:4px}
/* 5. related carousel and the one closing band, after the layout */
.biz-related{background:#fbf8f5;border-top:1px solid #f0e6dc;padding:64px 24px 72px}
.biz-related .in{max-width:1240px;margin:0 auto}
.biz-related .hd{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.biz-related h2{margin:0;font-size:1.6rem;color:#1a1a2e}
.biz-related .sub{color:#636b74;font-size:.95rem;margin-top:4px}
.biz-related .arrows{display:flex;gap:10px}
.biz-related .arrows button{width:44px;height:44px;border-radius:50%;border:1px solid #d9dde3;background:#fff;color:#1a1a2e;font-size:1.2rem;cursor:pointer}
.biz-related .arrows button:hover{border-color:#c65000;color:#c65000}
.biz-related .article-grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px;margin:0}
.biz-related .article-grid::-webkit-scrollbar{display:none}
.biz-related .article-card{flex:0 0 min(360px,82vw);scroll-snap-align:start;background:#fff;border:1px solid #e3e5ea;border-radius:14px;padding:0;margin:0;display:flex;box-shadow:0 1px 2px rgba(20,20,40,.04);transition:box-shadow .15s,transform .15s}
.biz-related .article-card:hover{box-shadow:0 8px 24px rgba(20,20,40,.10);transform:translateY(-2px)}
.biz-related .article-card-content{display:flex;flex-direction:column;gap:12px;padding:24px;width:100%;text-align:left}
.biz-related .article-card-category{align-self:flex-start;background:#fff1e6;color:#a84300;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 11px}
.biz-related .article-card-title{margin:0;font-size:1.15rem;line-height:1.3;color:#1a1a2e;text-align:left;font-weight:750}
.biz-related .article-card-excerpt{margin:0;color:#4b5563;font-size:.93rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.biz-related .article-card-link{margin-top:auto;padding-top:8px;color:#c65000;font-weight:700;text-decoration:none;border:0}
.biz-related .article-card-link:hover{text-decoration:underline}
.biz-cta{background:linear-gradient(135deg,#c65000,#e06a00);color:#fff;text-align:center;padding:64px 24px}
section.biz-cta h2{color:#fff;font-size:clamp(1.7rem,2.4vw,2.3rem);margin:0 0 26px;font-weight:750}
section.biz-cta p{color:#ffe9d6;max-width:620px;margin:-10px auto 26px;font-size:1.05rem;line-height:1.5}
.biz-cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.biz-cta a{display:inline-block;border-radius:8px;padding:13px 24px;font-weight:700;text-decoration:none;font-size:1rem}
.biz-cta a.p{background:#fff;color:#c65000}
.biz-cta a.s{border:2px solid rgba(255,255,255,.85);color:#fff}
.biz-one-cta .cta-unit-content{display:none}
.article:has(> .biz-hx-on),.article:has(> .biz-hx-on) + *{margin-bottom:0}
@media (max-width:1239px){.biz-hx-on{padding-top:24px}.biz-related{padding:44px 16px 52px}.biz-cta{padding:48px 20px}.biz-related .arrows{display:none}}

/* ===== Technical article, one column (LAT-4520 academic incrementality article). Same header, tokens, related carousel and closing
   band as the business article; no checklist or ad rails, because a reader who wants the method wants the method. Wrapper: .biz-solo ===== */
.article:has(> .biz-solo){max-width:none;padding:0}
.biz-solo{max-width:780px;margin:0 auto;padding:40px 24px 64px;box-sizing:border-box}
.biz-solo>main.article-content{padding:0;margin:0;max-width:none}
.biz-solo>main .container{padding-left:0;padding-right:0;max-width:none;width:auto}
.biz-solo>main .article-body{padding-left:0;padding-right:0;margin-top:8px}
.biz-solo .biz-hx{padding:0 0 8px}
.biz-solo .article-body h2{margin:2.2rem 0 .6rem;font-size:1.5rem;line-height:1.25;color:#1a1a2e}
.biz-solo .article-body li{margin-bottom:.4rem}
.biz-solo .article-body code{font-family:'Geist Mono',ui-monospace,monospace;font-size:.9em;background:#f3f4f6;border-radius:4px;padding:1px 5px}
.biz-solo .inc-credit{font-size:.85rem;color:#636b74}
.tbl-wrap{overflow-x:auto;margin:20px 0;border:1px solid #e3e5ea;border-radius:10px}
.tbl-wrap table.inc-table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem;line-height:1.45}
.tbl-wrap .inc-table th,.tbl-wrap .inc-table td{padding:9px 12px;border-bottom:1px solid #e3e5ea;text-align:left;vertical-align:top}
.tbl-wrap .inc-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#636b74;background:#fafbfc}
.tbl-wrap .inc-table tr:last-child td{border-bottom:0}
.tbl-wrap .inc-table td:first-child{font-weight:600;color:#1a1a2e}
@media (max-width:1239px){.biz-solo{padding:24px 16px 48px}}

/* L2b: "Show me an example of the dataset" link and its native dialog (operator 10-23). The dialog sits in the top layer, so no column or sticky rail clips it. */
.biz-card .exl{list-style:none}
.biz-exlink{background:none;border:0;padding:0;margin:0 0 2px;font:inherit;font-size:.86rem;font-weight:650;color:#c65000;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.biz-exlink:hover{color:#a84300}
.biz-dlg{margin:auto;inset:0;width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;border:0;border-radius:14px;padding:20px 22px 22px;box-shadow:0 24px 60px rgba(20,20,40,.35);color:#374151;box-sizing:border-box}
.biz-dlg::backdrop{background:rgba(20,20,40,.55)}
.biz-dlg .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.biz-dlg h3{margin:0;font-size:1.05rem;color:#1a1a2e}
.biz-dlg .x{background:none;border:0;font-size:1.6rem;line-height:1;color:#636b74;cursor:pointer;padding:0 4px}
.biz-dlg .in{margin:0 0 12px;font-size:.88rem;line-height:1.5}
.biz-dlg .cr{margin:6px 0 14px;font-size:.84rem;color:#636b74}
.biz-dlg .tw{overflow-x:auto;border:1px solid #e3e5ea;border-radius:8px}
.biz-dlg table{border-collapse:collapse;width:100%;font-size:.84rem;margin:0}
.biz-dlg th,.biz-dlg td{padding:7px 10px;text-align:left;border-bottom:1px solid #eef0f3;vertical-align:top;overflow-wrap:anywhere}
.biz-dlg td:last-child,.biz-dlg th:last-child{white-space:nowrap}
.biz-dlg th{background:#f9fafb;color:#1a1a2e;font-weight:700}
.biz-dlg .cols{margin:14px 0 0;display:grid;gap:8px;font-size:.86rem;line-height:1.45}
.biz-dlg dt{font-weight:700;color:#1a1a2e;font-family:ui-monospace,Menlo,monospace;font-size:.82rem}
.biz-dlg dd{margin:0 0 0 0}
.biz-dlg dd i{color:#636b74}
.biz-dlg .dl{margin:16px 0 0}
.biz-dlg .dl a{font-weight:650;color:#c65000}

/* Rail video modal (strategy/operator 10-23): the player opens centred, about min(1100px, 92vw) wide, 16:9, so YouTube serves HD instead of the ~260 px rail size. */
.biz-vdlg{margin:auto;inset:0;width:min(1100px,92vw);max-width:92vw;padding:0;border:0;background:#000;border-radius:12px;overflow:visible;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.biz-vdlg::backdrop{background:rgba(8,8,16,.82)}
.biz-vdlg .frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.biz-vdlg iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.biz-vdlg .x{position:absolute;right:0;top:-44px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.biz-vdlg .x:hover{background:rgba(255,255,255,.28)}
@media (max-width:600px){.biz-vdlg{border-radius:8px}.biz-vdlg .frame{border-radius:8px}}

/* Article figures from the video or the analysis (LAT-4490 / LAT-4571): width and height are on the img so the page does not jump. */
.biz-fig{margin:28px 0;padding:0}
.biz-fig img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;border:1px solid #e3e5ea;border-radius:12px;background:#fff}
.biz-fig figcaption{max-width:720px;margin:10px auto 0;font-size:.82rem;line-height:1.5;color:#636b74}

/* METHOD VARIANT (LAT-4586, for LAT-4581; method track of binders/sets/sets.book.md). Every rule below is scoped to .biz-method,
   which qa/apply-biz-layout.py writes only when layout.json says "variant": "method", so a business or academic page renders
   exactly as before. Rhythm: the 10-24 render crowded each H2 against the paragraph above and ran list items and FAQ questions
   together. Figures are concept diagrams (media's, chart style D), always captioned "Illustration, not data". */
.biz-method>main h2{margin:2.4em 0 .55em;line-height:1.2}
.biz-method>main h3{margin:1.7em 0 .4em;line-height:1.3}
.biz-method>main p{margin:0 0 1.05em;line-height:1.65}
.biz-method>main ul,.biz-method>main ol{margin:.9em 0 1.3em;padding-left:1.4em}
.biz-method>main li{margin:0 0 .65em;line-height:1.6}
.biz-method>main .biz-mfig{margin:1.9em 0}
.biz-method>main .biz-mfig img{display:block;width:100%;max-width:100%;height:auto;margin:0;border-radius:8px;border:1px solid #e3e5ea;background:#f6f7f9}
.biz-method>main .biz-mfig figcaption{margin-top:.6em;font-size:.8rem;line-height:1.4;color:#636b74;font-style:italic}
.biz-method>main .biz-mfig figcaption .biz-mnote{font-style:normal;color:#3f4650}
/* main.css gives every <section> 80px of padding top and bottom; on the FAQ and References sections that stacked on the H2's own space into a 273px band (marketing 10-24, measured at 1440) */
.biz-method>main .biz-faq,.biz-method>main .biz-refs{padding:0;margin:0}
.biz-method>main .biz-faq h3{margin:1.5em 0 .4em;padding-top:1.1em;border-top:1px solid #e3e5ea}
.biz-method>main .biz-faq h3:first-of-type{border-top:0;padding-top:0}
.biz-method>main .table-wrap{margin:1.2em 0 1.8em}   /* marketing 10-24: the next paragraph touched the table */
.biz-method>main .table-wrap table{margin:0}
/* A phone shows a method table as one labelled card per row (a 4-column table was 920 px tall at 390): the first cell is the card's
   title, the others carry their column header from data-label (written by qa/apply-biz-layout.py). The header row stays for screen
   readers, clipped out of sight. Desktop and tablet keep the table. */
@media (max-width:600px){
  .biz-method>main .table-wrap{overflow:visible}
  .biz-method>main table,.biz-method>main tbody,.biz-method>main tr,.biz-method>main td{display:block;width:100%;min-width:0;box-sizing:border-box}
  .biz-method>main thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .biz-method>main tr{margin:0 0 .9em;padding:.8em .95em;border:1px solid #e3e5ea;border-radius:8px;background:#fff}
  .biz-method>main td{padding:0;border:0;margin:0 0 .4em;text-align:left;font-size:.92rem;line-height:1.5}
  .biz-method>main td:first-child{font-weight:700;font-size:1rem;margin-bottom:.5em}
  .biz-method>main td:last-child{margin-bottom:0}
  .biz-method>main td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";font-weight:600;color:#1a1a2e}
}
.biz-method>main .biz-refs ol{font-size:.92rem;line-height:1.5}
.biz-method>main .biz-refs li{margin-bottom:.5em;overflow-wrap:anywhere}