/* r8.23 layout layer (3 Nov 2026). Loaded last on every page. Wide desktop containers, multi column grids, article reading rail, share links, phone type scale. Brand Lock v2.3: ink #2C2B30, paper #F7F4EF, magenta #E3008C. */
:root{--l23-max:1760px;--l23-gut:clamp(20px,4vw,72px)}
/* 1. Wide containers from 1280 px. Sections and heroes are already full bleed, the inner wrap now fills the screen with fluid gutters. */
@media (min-width:1280px){
 .wrap,body.ovh .wrap{max-width:var(--l23-max);padding-left:var(--l23-gut);padding-right:var(--l23-gut);box-sizing:border-box}
 body.ovh .hero-copy,body.ovh .hero-xl .hero-copy{max-width:1120px}
 body.ovh .hero h1{font-size:clamp(64px,5.4vw,104px)}
 body.ovh main p,body.ovh main li,body.ovh main dd{max-width:68ch}
 body.ovh dl.facts dd{max-width:68ch}
 body.ovh section.cta-band p{max-width:68ch}
 body.ovh main .svc-list li{max-width:none}
 body.ovh .split{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(72px,6vw,120px)}
 body.ovh section.stats .stat-list li{padding-right:clamp(28px,3vw,64px)}
 body.ovh .svc-list li{grid-template-columns:140px minmax(0,1fr) auto;gap:8px 40px}
 body.ovh .svc-list li p{max-width:68ch}
 /* hub: shorter desktop hero so cards show sooner (device review F8) */
 body.ovh:has(.ih-x) .hero-photo{min-height:clamp(480px,62vh,680px)}
 /* Insight cards: 3 columns, 4 at 1440 px and up */
 .ih-grid,.ih-grid[data-ih]{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
 .ih-featured{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
 .ih-featured .ih-media{min-height:420px}
 .ih-featured .ih-body{padding:40px 44px}
 /* footer spreads across the wider bar */
 .site-foot .cols{gap:40px}
}
@media (min-width:1440px){
 .ih-grid,.ih-grid[data-ih]{grid-template-columns:repeat(4,minmax(0,1fr))}
 .home-ins.ih-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 2. Insight article: text kept to about 75 characters, reading rail with the contents list from 1280 px */
.art-rail{display:none}
@media (min-width:1280px){
 .article-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:0 clamp(48px,5vw,96px);align-items:start}
 .article-wrap .article{max-width:1180px;min-width:0}
 .article-wrap .article p,.article-wrap .article li{max-width:66ch}
 .hero:not(.hero-photo) .hero-copy{max-width:1120px}
 .hero:not(.hero-photo) h1{max-width:16em}
 .art-rail{display:block;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;padding:8px 0 8px 24px;border-left:4px solid #E3008C;font-size:16px;line-height:1.35}
 .art-rail .rail-h{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2C2B30;margin:0 0 12px}
 .art-rail ol{list-style:none;margin:0;padding:0}
 .art-rail li{margin:0;max-width:none}
 .art-rail a{display:block;padding:7px 0;color:#2C2B30;text-decoration:none;font-weight:600}
 .art-rail a:hover,.art-rail a:focus-visible{color:#CC007E;text-decoration:underline}
 .art-rail .rail-share{margin-top:20px;padding-top:16px;border-top:1px solid #CFCBC4}
}
/* 3. Share links (plain links, no scripts, no trackers) */
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:20px 0 24px}
.share-bar .share-l{font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#2C2B30;margin:0 4px 0 0}
.share-bar a.sh{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 16px;box-sizing:border-box;border:2px solid #2C2B30;background:#F7F4EF;color:#2C2B30;font-weight:700;font-size:17px;line-height:1;text-decoration:none}
.share-bar a.sh svg{width:20px;height:20px;flex:none;fill:currentColor}
.share-bar a.sh:hover,.share-bar a.sh:focus-visible{background:#2C2B30;color:#F7F4EF;border-color:#2C2B30}
.share-bar a.sh:hover svg{fill:#E3008C}
.share-bar a.follow{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#2C2B30}
.share-bar .share-l{flex-basis:auto}
@media (max-width:600px){.share-bar .share-l{flex-basis:100%}}
.share-bar.share-end{border-top:4px solid #2C2B30;padding-top:20px;margin-top:40px}
/* 4. Phone type scale: h1 always the largest heading (device review F9) */
@media (max-width:480px){
 body.ovh h1,body.ovh .hero h1{font-size:clamp(34px,9.6vw,40px)}
 body.ovh main h2,body.ovh section.cta-band h2,body.ovh main section.cta-band h2{font-size:clamp(26px,7.2vw,30px)}
}
@media (max-width:480px){
 body.ovh main h2.display,body.ovh main .band h2,body.ovh main .founder-body h2{font-size:clamp(26px,7.2vw,30px)!important}
 body.ovh .feature,body.ovh .wrap.split{grid-template-columns:minmax(0,1fr)}
 body.ovh .feature>*,body.ovh .wrap.split>*{min-width:0}
 .article h2.i2-h{font-size:clamp(26px,8vw,32px);overflow-wrap:break-word}
}
@media (max-width:380px){
 body.ovh .feature{max-width:100%}
 body.ovh .feature-body{padding:24px 20px}
 body.ovh .feature-title{font-size:22px;overflow-wrap:break-word}
 body.ovh .hb-card{grid-template-columns:88px minmax(0,1fr)}
 body.ovh .hb-card p,body.ovh .hb-card a,body.ovh .hb-card h3{overflow-wrap:anywhere}
}
/* Insight article h1 always larger than its section headings (device review F9) */
.hero:not(.hero-photo) h1{font-size:clamp(38px,7vw,76px);line-height:1.04}

/* check1 F5: text spacing reflow at 320 */
@media (max-width:400px){.svc-list li>div{min-width:0}.svc-list h3{overflow-wrap:anywhere}
 h1,h2,h3,main p,main li,main a,main td,main th,main dd,main dt{overflow-wrap:anywhere}
 main table{table-layout:fixed;width:100%}
}
/* r8.23.1 stats row with the Insights and visit counters: 3 columns from 721 px (3 then 3, or 3 then 2 while the visit count is hidden), 2 columns on phones with each counter full width. Counter numbers in OTAS magenta, bold display size (on paper 4.12 to 1, AA large text). */
body.ovh section.stats .stat-list li.stat-ins .stat-n,body.ovh section.stats .stat-list li.stat-net .stat-n{color:#2C2B30}
body.ovh section.stats .stat-list li[hidden]{display:none}
@media (min-width:721px){body.ovh section.stats .stat-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}}
@media (max-width:720px){body.ovh section.stats .stat-list li.stat-ins,body.ovh section.stats .stat-list li.stat-net{grid-column:1/-1}}
/* r8.23.1 OTAS Network page: ink map, thin light outlines, magenta dots sized by visits. Nothing animates. */
body.ovh section.net{background:#2C2B30;color:#F7F4EF}
body.ovh .net-fig{margin:0 0 32px;max-width:none}
body.ovh .net-map{display:block;width:100%;height:auto;max-height:78vh}
body.ovh .net-land{fill:#2C2B30;stroke:rgba(247,244,239,.6);stroke-width:.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* r8.23.3 map: small pin dots and tight halos scaled by visits, countries tinted by visits, view controls */
body.ovh #net-dots path,body.ovh #net-glows path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}body.ovh #net-dots path{stroke:#E3008C;stroke-opacity:1}body.ovh #net-dots .net-kl{stroke:#F7F4EF}
body.ovh #net-dots .t1,body.ovh #net-dots .t2,body.ovh #net-dots .t3,body.ovh #net-dots .t4,body.ovh #net-dots .t5{stroke-opacity:1}
body.ovh #net-glows path{stroke:#E3008C;stroke-opacity:.3;mix-blend-mode:screen}
body.ovh #net-glows .g1{opacity:.45}body.ovh #net-glows .g2{opacity:.6}body.ovh #net-glows .g3{opacity:.72}body.ovh #net-glows .g4{opacity:.86}body.ovh #net-glows .g5{opacity:1}
body.ovh .net-land path{vector-effect:non-scaling-stroke}body.ovh .net-land .k1{fill:#42263B}body.ovh .net-land .k2{fill:#512242}body.ovh .net-land .k3{fill:#5F1F4A}body.ovh .net-land .k4{fill:#6E1C51}body.ovh .net-land .k5{fill:#80175A}
body.ovh .net-zoom{margin:0 0 8px}body.ovh .net-views{list-style:none;margin:0;padding:0;display:inline;max-width:none}body.ovh .net-views li{display:inline-block;margin:0 8px 8px 0;padding:0}body.ovh .net-zbtn{margin:0;display:inline}body.ovh .net-zbtn a{margin:0 4px 8px 0}
body.ovh .net-zoom a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid rgba(247,244,239,.6);border-radius:999px;font-weight:600;text-decoration:none;color:#F7F4EF}
body.ovh .net-zoom a[href]:hover{border-color:#E3008C}body.ovh .net-zoom a[aria-current="true"]{background:#F7F4EF;color:#2C2B30;border-color:#F7F4EF}body.ovh .net-zoom a:not([href]){opacity:.45}
body.ovh .net-zoom a:focus-visible{outline:3px solid #E3008C;outline-offset:2px}
@media (max-width:399px){body.ovh .net-zoom a{padding:8px 12px}}
@media (max-width:599px){body.ovh #net-map{display:flex;flex-direction:column}body.ovh #net-map .net-fig{order:-1;margin-bottom:16px}}
body.ovh .net-total{font-size:22px;margin:0 0 8px}
body.ovh .net-n{display:block;font-size:clamp(56px,7vw,112px);font-weight:700;line-height:1;color:#2C2B30;margin-bottom:6px}
body.ovh section.net h2{color:#F7F4EF}
body.ovh .net-top{list-style:decimal;padding-left:1.4em;columns:2 16em;column-gap:48px;max-width:none}
body.ovh .net-top li{break-inside:avoid;padding:4px 0}
body.ovh .net-v{color:#F7F4EF}
body.ovh .net-note,body.ovh .net-empty{color:#F7F4EF;max-width:68ch}
body.ovh section.net a{color:#F7F4EF}
/* r8.23.1 opt out links, choice state and visit count image kept out of the page flow */
.net-px{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.net-opt{font-weight:600}
.net-state{font-weight:600}