/* Page furniture: nav, hero, section shells, footer. */
.nav{position:sticky;top:0;z-index:20;background:rgba(251,250,246,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:14px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px;}
/* The wordmark is the one place the sans is asked to carry display weight:
   tight tracking and 700 keep it distinct from the serif headings. */
/* Lowercase as a wordmark treatment, not as content: the markup keeps the name
   properly cased for the accessible name, copy-paste and the translations. */
.brand{font-family:var(--sans);font-size:var(--t-xl);font-weight:700;letter-spacing:-0.022em;white-space:nowrap;color:var(--ink);text-transform:lowercase;}
.nav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:13px;padding:6px 10px;border-radius:100px;white-space:nowrap;}
.nav-links a:hover{background:var(--panel);color:var(--ink);}
.nav-links a.active{background:var(--emerald-pale);color:var(--emerald);font-weight:600;}
.navmenu{position:relative;}
.navmenu-btn{display:inline-flex;align-items:center;gap:4px;}
.navmenu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:0 8px 28px rgba(19,45,40,.14);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:210px;}
.navmenu-panel label{font-size:11.5px;color:var(--muted);letter-spacing:var(--track-label);}
.navmenu-panel select,.navmenu-panel button{width:100%;}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.viewseg,.seg{display:inline-flex;border:1px solid var(--hair);border-radius:100px;padding:3px;gap:2px;background:#fff;}
.viewseg button,.seg button{font-size:13px;font-weight:600;color:var(--ink-2);background:transparent;border:none;border-radius:100px;padding:6px 14px;cursor:pointer;}
.viewseg button{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;}
.viewseg button.active{background:var(--ink);color:#fff;}
.segicon{width:13px;height:13px;flex:none;fill:currentColor;opacity:.75;}
.viewseg button.active .segicon{opacity:1;}
.seg button.active{background:var(--emerald);color:#fff;}
.tourbtn,.mini{border:1px solid var(--hair);background:#fff;color:var(--ink);border-radius:100px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.tourbtn{border-color:var(--gold-ink);}
.tourbtn:hover{background:var(--gold-soft);}
.mini:hover{background:var(--panel);}
select.mini{padding:6px 10px;}
body.story-mode #dashboardView, body.story-mode .hero{display:none;}
body:not(.story-mode) #storyView{display:none;}
section{scroll-margin-top:calc(var(--navh) + 14px);padding:60px 0 20px;}
.stamp{font-size:var(--t-xs);color:var(--muted);text-align:center;padding:10px 0 0;}
.stamp button{background:none;border:none;color:var(--emerald);cursor:pointer;font-size:inherit;text-decoration:underline;padding:0;}

/* HERO */
.hero{padding:60px 0 40px;position:relative;overflow:hidden;}
.hero-pattern{position:absolute;right:-70px;top:-56px;width:560px;height:460px;opacity:.6;pointer-events:none;}
/* Mirrored, so the dense corner stays outboard and the faded side stays under the copy. */
html[dir=rtl] .hero-pattern{right:auto;left:-70px;transform:scaleX(-1);}
.hero h1{font-weight:500;font-size:clamp(var(--t-3xl),4.6vw,var(--t-4xl));line-height:1.06;margin:0 0 18px;max-width:18ch;position:relative;}
.hero .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:60ch;margin:0 0 30px;position:relative;}
.audience{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;margin-bottom:36px;}
.audience span{font-size:var(--t-sm);color:var(--muted);}
.chip{border:1px solid var(--hair);background:#fff;color:var(--ink-2);font-size:var(--t-sm);font-weight:500;border-radius:100px;padding:8px 16px;cursor:pointer;transition:all .2s;}
.chip:hover{border-color:var(--emerald-soft);}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden;position:relative;}
.kpi{background:#fff;padding:24px 22px;}
.kpi .num{font-size:clamp(30px,3.6vw,44px);font-weight:600;line-height:1;}
.kpi .num .unit{color:var(--gold-ink);}
.kpi .lbl{margin-top:10px;font-size:var(--t-sm);color:var(--muted);}
.kpi .delta{margin-top:8px;font-size:var(--t-xs);color:var(--emerald);font-weight:600;}
.compare-row{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.cmpbox{background:var(--panel);border-radius:14px;padding:16px 18px;font-size:var(--t-sm);color:var(--ink-2);}
.cmpbox b{display:block;font-family:var(--serif);font-size:var(--t-xl);color:var(--ink);font-weight:600;margin-bottom:4px;}

/* SECTIONS */
h2{font-weight:500;font-size:clamp(var(--t-2xl),3.2vw,var(--t-3xl));margin:0 0 8px;line-height:1.15;}
.section-note{color:var(--ink-2);font-size:var(--t-lg);max-width:66ch;margin:0 0 26px;line-height:1.5;}
.forwho{display:inline-flex;gap:6px;margin:0 0 14px;flex-wrap:wrap;}
.forwho span{font-size:11.5px;color:var(--muted);border:1px solid var(--hair);border-radius:100px;padding:3px 10px;}
.forwho span.on{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink);}
.card{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:22px;position:relative;}
.card h3{font-weight:500;font-size:var(--t-xl);margin:0 0 4px;line-height:1.25;padding-right:var(--exports-clear);}
html[dir=rtl] .card h3{padding-right:0;padding-left:var(--exports-clear);}
.card .sub{font-size:var(--t-sm);color:var(--muted);margin:0 0 16px;}
/* A grid item will not shrink below its content minimum unless told to, so a
   card holding a wide table or chart would stretch the page instead of letting
   the table scroll inside it. */
.grid-2>*,.grid-3>*,.grid-map>*,.kpis>*,.takeaways>*,.compare-row>*,.helper>*,.dir>*,.scrolly>*,.movers>*{min-width:0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-map{display:grid;grid-template-columns:1fr 320px;gap:20px;}
.sowhat{margin-top:16px;padding:14px 16px;border-left:3px solid var(--gold);background:var(--panel);border-radius:0 10px 10px 0;font-size:14px;color:var(--ink-2);}
html[dir=rtl] .sowhat{border-left:none;border-right:3px solid var(--gold);border-radius:10px 0 0 10px;}
.sowhat b{color:var(--ink);font-weight:600;}
/* The controls row is the first thing in a card, so it runs under .exports
   unless it reserves the same room a heading does. */
.controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px;padding-right:var(--exports-clear);}
html[dir=rtl] .controls{padding-right:0;padding-left:var(--exports-clear);}
.exports{position:absolute;top:18px;right:18px;display:flex;gap:6px;}
html[dir=rtl] .exports{right:auto;left:18px;}
.exports button{border:1px solid var(--hair);background:#fff;color:var(--muted);border-radius:100px;padding:3px 10px;font-size:11.5px;cursor:pointer;}
.exports button:hover{color:var(--ink);border-color:var(--emerald-soft);}
.tablewrap{display:none;margin-top:12px;max-height:260px;overflow:auto;border:1px solid var(--hair);border-radius:10px;}
.tablewrap.show{display:block;}
.tablewrap table{font-size:12.5px;}
.src{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--hair);background:#fff;color:var(--muted);font-size:9.5px;font-weight:600;cursor:help;vertical-align:middle;margin-left:4px;padding:0;line-height:1;}
/* Once a marker carries an icon the circle chrome is the icon's job, not the button's. */
.src.has-icon{width:17px;height:17px;border:none;background:none;padding:0;}
.src.has-icon svg{width:100%;height:100%;display:block;}
.src.v-ok{color:var(--verified);}
.src.v-part{color:var(--gold-ink);}
.src.v-no{color:var(--warn);}
.src.has-icon:hover,.src.has-icon:focus-visible{filter:brightness(1.12);}
.gl{border-bottom:1px dotted var(--gold-ink);cursor:help;text-decoration:none;color:inherit;}

/* MAP */