/* studio-dash.css — the SCREEN-ONLY dashboard layer for a completed Climate Design Studio run.
 *
 * SCOPING & PRINT SAFETY (the non-negotiable):
 *   - Linked ONLY by render.js's studioShell (extraCss), so it never reaches a marketing page.
 *   - The whole dashboard is `display:none` in print; the report (`.rpt`, styled by
 *     studio-report.css) prints EXACTLY as before. `.dash-report-body` is forced visible in print
 *     so an on-screen collapse can never hide the print document.
 *   - It styles ONLY classes this feature emits (studio-dash.js / the render.js disclosure) plus a
 *     couple of shared hooks (.cr-chart) inside `.studio-dash`. It never restyles the report body.
 *
 * PALETTE/TYPE: the site's own tokens (--dg-forest / --dg-green / --dg-mist / --dg-sky / --dg-sun)
 * and the display font already used by h1/h2. Dark-first — the contrast against the light report
 * below is the rhythm.
 */

/* ===================================================================== *
 * 0. Tokens & the container
 * ===================================================================== */
.studio-dash{
  --dash-ink:#eaf1ec;
  --dash-dim:#9db3a6;
  --dash-line:rgba(255,255,255,.10);
  --dash-panel:#0a2417;
  --dash-panel-2:#0c2a1b;
  --dash-accent:var(--dg-green);
  background:var(--dg-forest);
  color:var(--dash-ink);
  font-family:"Poppins",sans-serif;
  /* pull the dashboard up under the fixed site header so the hero is truly full-bleed */
  margin-top:-1px;
  overflow:hidden;
}
.studio-dash h2{font-family:"ABCFavorit","Poppins",sans-serif;color:#fff;font-weight:400}
.studio-dash .dash-eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dg-green);margin-bottom:14px}
.studio-dash .dash-lead{color:var(--dash-dim);max-width:62ch;font-size:16px;line-height:1.6}
.studio-dash .form-note{color:var(--dash-dim);font-size:12.5px}

.dash-sec{padding:clamp(56px,7vw,120px) clamp(20px,5vw,40px)}
.dash-sec-head{max-width:1280px;margin:0 auto clamp(28px,4vw,52px)}
.dash-sec-head h2{font-size:clamp(28px,3.4vw,48px);margin:0 0 14px;line-height:1.08}

/* ===================================================================== *
 * 1. HERO — full-viewport dark opening moment
 * ===================================================================== */
.dash-hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(120px,14vh,200px) clamp(20px,5vw,40px) clamp(60px,8vh,90px);
  position:relative;
  background:
    radial-gradient(1200px 700px at 78% 12%, rgba(113,155,80,.20), transparent 60%),
    radial-gradient(900px 600px at 12% 88%, rgba(123,176,226,.14), transparent 60%),
    var(--dg-forest);
}
.dash-hero-inner{max-width:1280px;margin:0 auto;width:100%}
.dash-title{
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:400;
  font-size:clamp(38px,5.2vw,78px);line-height:1.04;margin:0 0 22px;
  letter-spacing:-.01em;color:#fff;overflow-wrap:break-word;text-wrap:balance;
}
/* Geocoded place names run long ("Town, Municipality, Province, Country") — step the
   display size down rather than letting the name own the whole fold. Server adds the
   class when the place string passes ~26 characters. */
.dash-title--long{font-size:clamp(32px,3.9vw,58px)}
.dash-provenance{color:var(--dash-dim);font-size:clamp(13px,1.4vw,16px);letter-spacing:.02em;
  border-top:1px solid var(--dash-line);padding-top:16px;max-width:70ch;margin:0 0 26px}
.dash-verdict{font-size:clamp(18px,2vw,26px);line-height:1.45;max-width:40ch;margin:0 0 clamp(34px,5vh,56px);color:#dfeae2}
.dash-verdict strong{color:#fff;font-weight:500}

.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,2.4vw,40px);max-width:1080px}
.dash-kpi{border-top:2px solid rgba(113,155,80,.5);padding-top:16px}
.dash-kpi-num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dash-kpi-val{font-family:"ABCFavorit","Poppins",sans-serif;font-size:clamp(34px,4.4vw,60px);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.dash-kpi-unit{font-size:clamp(12px,1.2vw,15px);color:var(--dash-dim)}
.dash-kpi-lbl{margin-top:10px;font-size:14px;color:#cfe0d5;font-weight:500;letter-spacing:.02em}
.dash-kpi-sub{margin-top:3px;font-size:12px;color:var(--dash-dim)}

.dash-scrollcue{margin:clamp(34px,6vh,64px) auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--dash-dim);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.dash-scrollcue i{width:1px;height:34px;background:linear-gradient(var(--dg-green),transparent);animation:dashCue 1.9s ease-in-out infinite}
@keyframes dashCue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ===================================================================== *
 * 2. THE CLIMATE RING
 * ===================================================================== */
.dash-sec-ring{background:linear-gradient(180deg,#061f13,#082a1a)}
.dash-ring{max-width:820px;margin:0 auto;text-align:center;position:relative}
.dash-ring::before{content:"";position:absolute;left:50%;top:46%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(113,155,80,.16),rgba(123,176,226,.06) 45%,transparent 70%);pointer-events:none;z-index:0}
.dash-ring>*{position:relative;z-index:1}
/* touch-action:pan-y — a vertical swipe over the ring still scrolls the page (the ring is a tall
   full-width graphic on mobile; trapping it would strand the reader). studio-dash.js only
   preventDefault()s once a touch drag is clearly ANGULAR, so day-scrubbing and page-scrolling
   coexist. On a fine pointer (mouse) the crosshair + hover readout are unchanged. */
.dash-ring-svg{width:100%;height:auto;overflow:visible;cursor:crosshair;touch-action:pan-y}
/* The selected-day spoke: a subtle persistent highlight under the white cursor line, so a touch
   selection stays legible after the finger lifts (touch has no hover to hold the state). */
.dash-ring-sel line{stroke:var(--dg-green);stroke-width:5;opacity:.5;stroke-linecap:round}
.dash-ring-place{font-family:"ABCFavorit","Poppins",sans-serif;font-size:34px;fill:#fff}
.dash-ring-metric{font-family:"ABCFavorit","Poppins",sans-serif;font-size:44px;fill:var(--dg-green)}
.dash-ring-sub{font-size:17px;fill:var(--dash-dim)}
.dash-ring-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:26px;font-size:13px;color:var(--dash-dim)}
.dash-ring-legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:8px;vertical-align:middle}
.dash-ring-legend i.lg-spoke{background:linear-gradient(90deg,hsl(236 60% 40%),hsl(140 70% 46%),hsl(40 84% 60%))}
.dash-ring-legend i.lg-heat{background:linear-gradient(90deg,hsl(208 58% 48%),hsl(12 84% 51%))}
.dash-ring-legend i.lg-stress{background:#ff8a5c}
.dash-ring-legend i.lg-def{background:#8fb3ff}
.dash-ring-cursor line{stroke:#fff;stroke-width:2.5;opacity:.9}

/* ===================================================================== *
 * 3. THE LIVING GREENHOUSE
 * ===================================================================== */
.dash-sec-scene{background:#071e12}
.dash-scene{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.dash-scene-stage{background:#04160d;border:1px solid var(--dash-line);border-radius:20px;overflow:hidden}
.dash-scene-svg{width:100%;height:auto;display:block}
.dash-scene-controls{align-self:center}
.dash-scene-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.dash-scene-month{font-family:"ABCFavorit","Poppins",sans-serif;font-size:clamp(26px,3vw,40px);color:#fff}
.dash-scene-play{background:transparent;border:1px solid rgba(255,255,255,.24);color:#dfeae2;font:inherit;font-size:13px;padding:8px 16px;border-radius:100px;cursor:pointer;transition:.2s}
.dash-scene-play:hover{border-color:var(--dg-green);color:#fff}
.dash-scene-play.is-playing{background:var(--dg-green);border-color:var(--dg-green);color:#fff}
.dash-scene-range{width:100%;margin:8px 0 4px;accent-color:var(--dg-green);cursor:pointer}
.dash-scene-caption{font-size:15px;color:#dfeae2;min-height:2.6em;margin:12px 0 4px;line-height:1.5}
.dash-scene-sub{margin-top:6px}

/* scene layers driven by CSS vars (--heatT 0..1, --vents 0..1, --sun 0..1) + data-lamps.
   The sun stays at solar noon (x=400, the arc's peak) and only RISES with the season: low on the
   arc in a dark month, high near the peak in a bright one. */
.scene-sun{transform:translate(400px,300px);transition:transform .5s ease}
.dash-scene[style] .scene-sun{transform:translate(400px, calc(300px - var(--sun,.5) * 236px))}
.scene-pipes .pipe{stroke:#5a2a1e;stroke-width:6;stroke-linecap:round;transition:stroke .4s,filter .4s;
  stroke:color-mix(in srgb, #3a2018, hsl(14 90% 55%) calc(var(--heatT,0) * 100%));
  filter:drop-shadow(0 0 calc(var(--heatT,0) * 10px) rgba(255,110,60,calc(var(--heatT,0) * .9)))}
.scene-screen{transition:stroke-dashoffset .5s ease,opacity .4s;stroke-dasharray:500;stroke-dashoffset:calc(500 - var(--heatT,0) * 500);opacity:calc(.25 + var(--heatT,0) * .6)}
.scene-vents .vent{transform-box:fill-box;transform-origin:left center;transition:transform .5s ease;transform:rotate(calc(var(--vents,0) * -46deg))}
.scene-lamps .lamp-glow{opacity:0;transition:opacity .4s}
.dash-scene[data-lamps="1"] .scene-lamps .lamp-glow{opacity:.85;filter:blur(2px)}
.dash-scene[data-lamps="1"] .scene-lamps .lamp rect{fill:#ffd873}

/* ===================================================================== *
 * 4. INSIGHT CARDS
 * ===================================================================== */
.dash-sec-insights{background:#082a1a}
.dash-insights-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.dash-card{background:var(--dash-panel);border:1px solid var(--dash-line);border-left:3px solid var(--dg-green);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:8px}
.dash-card.sev-mid{border-left-color:var(--dg-sun)}
.dash-card.sev-high{border-left-color:#ff7a55}
.dash-card-kicker{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dash-dim);font-weight:500}
.dash-card-figure{font-family:"ABCFavorit","Poppins",sans-serif;font-size:clamp(27px,2.6vw,36px);color:#fff;line-height:1.08;letter-spacing:-.01em}
.dash-card-body{font-size:14px;color:#cfe0d5;line-height:1.5;margin:2px 0 6px;flex:1}
.dash-card-more{align-self:flex-start;background:transparent;border:0;color:var(--dg-green);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;padding:0}
.dash-card-more:hover{text-decoration:underline}

/* ===================================================================== *
 * 5. IMMERSIVE HEATMAPS
 * ===================================================================== */
.dash-sec-maps{background:#061f13}
.dash-hm{max-width:1280px;margin:0 auto}
.dash-hm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.dash-hm-tab{background:transparent;border:1px solid rgba(255,255,255,.18);color:#cfe0d5;font:inherit;font-size:14px;padding:9px 18px;border-radius:100px;cursor:pointer;transition:.2s}
.dash-hm-tab:hover{border-color:var(--dg-green);color:#fff}
.dash-hm-tab.is-on{background:var(--dg-green);border-color:var(--dg-green);color:#fff}
.dash-hm-panel{display:none}
.dash-hm-panel.is-on{display:block}
.dash-hm-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--dash-dim);margin-bottom:14px}
.dash-hm-legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:7px;vertical-align:middle}
.dash-hm .hm-plot{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px}
.dash-hm .hm-hours{position:relative;font-size:11px;color:var(--dash-dim);font-variant-numeric:tabular-nums}
.dash-hm .hm-hours span{position:absolute;right:0;transform:translateY(-50%)}
.dash-hm .hm-months{grid-column:2;position:relative;height:16px;font-size:11px;color:var(--dash-dim);margin-top:8px}
.dash-hm .hm-months span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
/* Immersive: stretch the 24-row raster tall (pixelated, so the zone bands read as bold ribbons).
   The month/hour axes are positioned in %, so they track the stretched image exactly. */
.dash-hm img.hm{width:100%;height:clamp(180px,30vh,340px);display:block;border-radius:10px;image-rendering:pixelated;cursor:crosshair;box-shadow:0 20px 60px -30px rgba(0,0,0,.9)}

/* ===================================================================== *
 * 6. MONTHLY RHYTHM (reused report charts, restyled into the flow)
 * ===================================================================== */
.dash-sec-rhythm{background:#082a1a}
.dash-rhythm-charts{max-width:1120px;margin:0 auto;display:grid;gap:22px}
.dash-rhythm-charts .cr-chart{margin:0;border-radius:18px;max-width:1120px}
@media(min-width:1024px){.dash-rhythm-charts{grid-template-columns:1fr 1fr}}

/* --- Brand re-theme of the report charts, DASHBOARD SCOPE ONLY ---------------
 * studio-charts.js emits every stroke/fill/axis colour as a `--chart-*` var (defaulted to the
 * original orange/blue report palette in main.css :root). Overriding them here re-themes every
 * .cr-chart inside .studio-dash into the brand green/lime language without touching a byte of the
 * server geometry. PRINT SAFETY: the A4 report (`.rpt`) is a SIBLING of `.studio-dash`, never a
 * descendant, so it keeps the root defaults and prints byte-identically.
 * Primary data reads brand lime; the secondary line is a cool teal with real luminance separation
 * (worst case: the wind chart draws lime bars + a teal line + ember markers on one dark card);
 * `--chart-flag` reuses the ring's own heat-stress ember (#ff8a5c) for consistency; axis text stays
 * high-contrast light on the dark forest card. */
.studio-dash{
  --chart-solar:#a6e057;
  --chart-solar-band:rgba(166,224,87,.22);
  --chart-temp:#3fc4d6;
  --chart-temp-band:rgba(63,196,214,.24);
  --chart-green:#cfe8a0;
  --chart-ref:rgba(233,244,231,.82);
  --chart-axis:rgba(205,224,213,.30);
  --chart-axis-text:rgba(221,235,226,.92);
  --chart-flag:#ff8a5c;
}

/* --- Mobile chart legibility (screen-only, dashboard scope) ------------------
 * The 720x220 viewBox scales to ~0.45x at 390px, so 10px tick text renders ~4-5px. CSS font-size
 * beats the SVG font-size attribute and is expressed in the SAME user units, so it scales with the
 * chart — bumping it makes the labels survive the shrink. The alternate-month `minor` x-ticks are
 * dropped so the six survivors (Jan, Mar, May, …) don't overlap. Trim the card padding so the SVG
 * keeps as much width as possible. None of this reaches print or the report (both out of scope). */
@media(max-width:900px){
  .studio-dash .cr-svg .cr-tick,.studio-dash .cr-svg .cr-ref{font-size:15px}
  .studio-dash .cr-svg .cr-tick-x.cr-tick-minor{display:none}
}
@media(max-width:560px){
  .studio-dash .cr-svg .cr-tick,.studio-dash .cr-svg .cr-ref{font-size:22px}
  .studio-dash .dash-rhythm-charts .cr-chart{padding:18px 14px}
  /* The report tables carry min-width:560px (main.css) so they scroll on a phone. Inside the
     dashboard that reads as clipped values, so drop the floor, shrink the type and let the long
     unit headers WRAP — the short numeric cells then fit a 390px card without a horizontal scroll.
     `.cr-table-scroll` stays overflow-x:auto as the page-safe fallback, and report/print keep the
     original 560px floor (this rule is dashboard-scoped + screen-only). */
  .studio-dash .cr-table{padding:16px 12px}
  .studio-dash .cr-table table{min-width:0;font-size:11.5px;table-layout:fixed;width:100%}
  .studio-dash .cr-table th,.studio-dash .cr-table td{padding:6px 4px;white-space:normal;word-break:normal}
  .studio-dash .cr-table th{font-size:9.5px;letter-spacing:.02em}
  .studio-dash .cr-table th:first-child,.studio-dash .cr-table td:first-child{width:26%}
}

/* ===================================================================== *
 * 7. THE REPORT DISCLOSURE (render.js) — collapses on screen, always prints
 * ===================================================================== */
.dash-report{background:var(--dg-mist)}
.dash-report-bar{background:var(--dg-forest);color:#fff;padding:22px 0;border-top:1px solid var(--dash-line)}
.dash-report-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dash-report-bar-txt{display:flex;flex-direction:column;gap:3px}
.dash-report-bar-txt strong{font-size:16px}
.dash-report-bar-txt .form-note{color:var(--dash-dim)}
.dash-report-toggle{background:var(--dg-green);border:0;color:#fff;font:inherit;font-weight:500;font-size:14.5px;padding:12px 24px;border-radius:100px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.dash-report-toggle:hover{background:var(--dg-green-dark)}
.dash-report-toggle .chev{transition:transform .25s}
.dash-report.is-collapsed .dash-report-toggle .chev{transform:rotate(-90deg)}
.dash-report.is-collapsed .dash-report-body{display:none}

/* ===================================================================== *
 * 8. REVEAL MOTION (IntersectionObserver adds .is-in); ring draws itself in
 * ===================================================================== */
/* Reveal-on-scroll is gated behind `.dash-js` (added synchronously by studio-dash.js). WITHOUT JS
   the class is never added, so `.reveal` keeps its natural full visibility — the dashboard is
   complete with JS off. WITH JS, sections start hidden and IntersectionObserver reveals them. */
.dash-js .studio-dash .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.dash-js .studio-dash .reveal.is-in{opacity:1;transform:none}
.dash-ring-spokes line,.dash-ring-heat path,.dash-ring-stress line,.dash-ring-def line{transition:opacity .5s ease}
.dash-ring.is-drawing .dash-ring-spokes line,.dash-ring.is-drawing .dash-ring-heat path,.dash-ring.is-drawing .dash-ring-stress line,.dash-ring.is-drawing .dash-ring-def line{opacity:0}

@media(prefers-reduced-motion:reduce){
  .dash-js .studio-dash .reveal{opacity:1;transform:none;transition:none}
  .dash-scrollcue i{animation:none}
  .dash-ring.is-drawing *{opacity:1!important;transition:none!important}
  .scene-sun,.scene-pipes .pipe,.scene-screen,.scene-vents .vent,.scene-lamps .lamp-glow{transition:none!important}
}

/* ===================================================================== *
 * 8b. THE TEASER (06-13) — the signed-out lead magnet.
 *   A real demo dashboard: hero + ring + two cards fully visible; the rest
 *   real-but-veiled behind CSS blur/scrim with the repeated Google CTA.
 *   Everything here lives inside .studio-dash, so PRINT (section 10) still
 *   hides the whole thing — the print report is unaffected.
 * ===================================================================== */
/* Teaser "visible" sections must never wait on the scroll-reveal observer. */
.dash-js .studio-dash-teaser .reveal.is-shown{opacity:1;transform:none;transition:none}

/* Teaser hero: shorter than the run dashboard's full-viewport moment, and a smaller title, so the
   verdict + count-up KPIs (the proof) land IN the fold and the ring sits just a short scroll away —
   a conversion page must not hide its hook a full screen down. */
.studio-dash-teaser .dash-hero{min-height:auto;padding-top:clamp(84px,11vh,140px);padding-bottom:clamp(44px,6vh,74px)}
.studio-dash-teaser .dash-title{font-size:clamp(38px,5.4vw,82px);margin-bottom:18px}
.studio-dash-teaser .dash-verdict{margin-bottom:clamp(26px,4vh,40px)}
.studio-dash-teaser .dash-scrollcue{margin-top:clamp(26px,4vh,44px)}

/* DEMO badge in the hero eyebrow. */
.dash-eyebrow-demo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-demo-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:rgba(113,155,80,.16);border:1px solid rgba(113,155,80,.5);color:#dff0d3;
  font-weight:600;letter-spacing:.12em;font-size:11px}
.dash-demo-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dg-green);
  box-shadow:0 0 0 0 rgba(113,155,80,.6);animation:dashPulse 2.2s ease-out infinite}
@keyframes dashPulse{0%{box-shadow:0 0 0 0 rgba(113,155,80,.55)}70%{box-shadow:0 0 0 9px rgba(113,155,80,0)}100%{box-shadow:0 0 0 0 rgba(113,155,80,0)}}

/* The single repeated lock CTA. */
.dash-sec-cta-lead,.dash-sec-cta-final{display:flex;justify-content:center}
.dash-sec-cta-final{background:linear-gradient(180deg,#061f13,#04160d)}
.dash-lock-cta{max-width:640px;text-align:center;margin:0 auto;
  background:linear-gradient(180deg,rgba(12,42,27,.9),rgba(8,32,20,.9));
  border:1px solid rgba(113,155,80,.35);border-radius:22px;padding:clamp(28px,4vw,44px) clamp(22px,4vw,40px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.8)}
.dash-lock-cta.is-compact{padding:26px 24px}
.dash-lock-mark{width:52px;height:52px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(113,155,80,.15);border:1px solid rgba(113,155,80,.4);color:var(--dg-green)}
.dash-lock-head{font-family:"ABCFavorit","Poppins",sans-serif;color:#fff;font-size:clamp(22px,2.6vw,32px);
  line-height:1.12;margin:0 0 12px;font-weight:400}
.dash-lock-sub{color:var(--dash-dim);font-size:15.5px;line-height:1.6;margin:0 auto 22px;max-width:52ch}
.dash-lock-btn{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:12px}
.dash-lock-g{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:#fff;color:#4285f4;font-family:"ABCFavorit","Poppins",sans-serif;font-weight:700;font-size:15px}
.dash-lock-note{margin:16px 0 0;font-size:12.5px;color:var(--dash-dim);letter-spacing:.02em}

/* The veil: real content rendered, then blurred + faded, with the CTA floated over it. */
.dash-veil{position:relative;isolation:isolate}
.dash-veil-inner{filter:blur(7px) saturate(1.04);opacity:.5;pointer-events:none;user-select:none;
  max-height:760px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.25) 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.25) 76%,transparent 100%)}
.dash-veil-inner .dash-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:0}
.dash-veil-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:2;
  background:radial-gradient(120% 80% at 50% 40%,rgba(6,31,19,.35),rgba(6,31,19,.86) 78%)}
.dash-veil-cover .dash-lock-cta{backdrop-filter:blur(2px)}

/* ===================================================================== *
 * 9. RESPONSIVE
 * ===================================================================== */
@media(max-width:820px){
  .dash-scene{grid-template-columns:1fr}
  .dash-report-bar .wrap{padding-left:20px;padding-right:20px}
}
@media(max-width:520px){
  .dash-kpis{grid-template-columns:1fr 1fr;gap:20px}
  .dash-ring-legend{gap:8px 16px;font-size:12px}
}
/* Very wide: keep the composition deliberate rather than letting a single column sprawl. */
@media(min-width:1700px){
  .dash-sec-head,.dash-insights-grid,.dash-hm,.studio-dash .dash-hero-inner{max-width:1480px}
}

/* ===================================================================== *
 * 10. PRINT — the dashboard vanishes; the report body is forced visible.
 * ===================================================================== */
@media print{
  .studio-dash{display:none!important}
  /* An on-screen collapse must never suppress the print document. */
  .dash-report-bar{display:none!important}
  .dash-report.is-collapsed .dash-report-body,.dash-report-body{display:block!important}
}