/* ═══════════════════════════════════════════════════════════════════════
   ORANGE ALERT — sektions-CSS (kompletterar inline-tokens i orange-alert.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* Centrala, stora Trump-floaters (Klaus 2026-07-10): större och mer mitt på
   sidan, kikar upp BAKOM textboxarna. Ligger bakom .wrap (z-index 2) med en
   mjuk maskering i nederkant så de smälter in i sidan i st f att sväva löst. */
.floater.center-peek{z-index:0;opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
/* Den som kikar upp underifrån maskeras i TOPP istället */
.floater.center-peek[style*="bottom"]{
  -webkit-mask-image:linear-gradient(0deg,#000 70%,transparent 99%);
  mask-image:linear-gradient(0deg,#000 70%,transparent 99%)}
/* Den som sitter HÖGT UPP (top) maskeras i NEDERKANT så den smälter neråt */
.floater.center-peek.top-in{
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 66%,transparent 98%)}
@media (max-width:820px){.floater.center-peek{display:block;opacity:.4}}

/* STOR Trump (tummen upp) till HÖGER om taco-texten, BAKOM rubrikerna
   (Klaus 2026-07-10). #taco är positioneringskontext; nederkanten hamnar en bit
   upp så den linjerar med taco-triggarnas överkant. Maskad i botten. */
#taco{position:relative;overflow:hidden}
#taco .wrap{position:relative;z-index:2}
/* Höger kant linjerar med trigger-listans högerkant (samma padding som .wrap). */
/* Högerställd i spalten: bildens högra kant vid .wrap:ens högra kant, men
   smalare så den sitter till HÖGER om texten (inte tvärs över hela spalten).
   På smala skärmar faller den tillbaka mot kanten. */
.floater.taco-trump{position:absolute;right:max(24px,calc((100% - 1180px)/2 + 24px));
  top:clamp(30px,6vw,80px);
  width:min(860px,64vw);z-index:0;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
/* Bakom ALLT i sektionen (även flygande tacos, z-index 1). */
#taco .taco-float{z-index:3}
@media (max-width:820px){.floater.taco-trump{display:block;width:90vw;opacity:.4;right:-20px}}
@media (max-width:520px){.floater.taco-trump{display:none}}

/* STOR Trump bakom "Fyra steg"-stegen (Klaus 2026-07-10): ~3x, bakom korten
   (z-index 0 < .wrap 2). ANSIKTET FÅR ALDRIG BESKÄRAS: masken börjar först en
   bra bit ner (under ansiktet) och bilden ligger längre ner så hela huvudet syns.
   Subtil mask bara i botten. */
#hur{position:relative;overflow:hidden}
.floater.hur-trump{z-index:0;opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
@media (max-width:820px){.floater.hur-trump{display:block;opacity:.32}}

/* ═══ VRID PÅ MOBILEN (Klaus 2026-07-10) ═══════════════════════════════
   Visas BARA i porträtt-läge på liten skärm. Mörkad + blurrad bakgrund,
   roterande Trump-ansikten + en telefon som vrids 90°. */
.rotate-gate{display:none}
@media (max-width:820px) and (orientation:portrait){
  .rotate-gate{
    display:flex;position:fixed;inset:0;z-index:9999;
    flex-direction:column;align-items:center;justify-content:center;gap:22px;
    background:rgba(10,11,13,.82);backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
    text-align:center;padding:32px;overflow:hidden;
  }
  /* Roterande ansikten, utspridda, olika takt + fas */
  .rg-faces{position:absolute;inset:0;pointer-events:none}
  .rg-face{position:absolute;width:34vw;max-width:200px;opacity:.5;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));
    animation:rgspin 5.5s ease-in-out infinite}
  .rg-f1{top:9%;left:-4%;animation-duration:6s}
  .rg-f2{top:18%;right:-6%;width:38vw;animation-duration:4.6s;animation-direction:reverse}
  .rg-f3{bottom:8%;left:6%;width:30vw;animation-duration:5.2s}
  .rg-f4{bottom:14%;right:2%;width:32vw;animation-duration:6.4s;animation-direction:reverse}
  @keyframes rgspin{
    0%{transform:rotate(0deg) scale(1)}
    50%{transform:rotate(90deg) scale(1.08)}
    100%{transform:rotate(0deg) scale(1)}
  }
  /* Telefon-ikon som vrids 90° fram och tillbaka */
  .rg-phone{position:relative;z-index:2;width:64px;height:112px;
    animation:rgphone 2.4s ease-in-out infinite}
  .rg-phone-body{position:absolute;inset:0;border:3px solid var(--gold);
    border-radius:14px;background:rgba(224,185,79,.08)}
  .rg-phone-body::before{content:"";position:absolute;left:50%;bottom:7px;
    width:20px;height:3px;border-radius:2px;background:var(--gold);transform:translateX(-50%)}
  @keyframes rgphone{
    0%,15%{transform:rotate(0deg)}
    55%,100%{transform:rotate(90deg)}
  }
  .rg-text{position:relative;z-index:2;font-size:clamp(40px,13vw,72px);
    line-height:1.06;color:var(--ink);text-transform:uppercase;
    text-shadow:0 4px 24px rgba(0,0,0,.7)}
  .rg-text .alert{color:var(--alert-bright)}
  .rg-sub{position:relative;z-index:2;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold)}
}
@media (prefers-reduced-motion:reduce){
  .rg-face,.rg-phone{animation:none!important}
}

/* Reveal-animation (scroll) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

.sec-head-h2,.gauge-card h2,section h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:1.06}

/* ── MÄTAREN ─────────────────────────────────────────────────── */
.gauge-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.gauge-grid h2{font-size:clamp(30px,4.4vw,56px);margin:12px 0 20px}
.topic-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.topic-chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  padding:7px 12px;border-radius:100px;background:var(--panel2);
  border:1px solid var(--line-soft);color:var(--muted)}
.topic-chip b{color:var(--gold);margin-right:7px;font-weight:600}
.gauge-card{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:22px;padding:34px 30px 26px;
  box-shadow:0 30px 80px -30px #000, 0 0 0 1px rgba(255,255,255,.02) inset}
.gauge-face{position:relative;text-align:center}
.gauge-svg{width:100%;max-width:300px;margin:0 auto;display:block;overflow:visible}
.gauge-needle{transform:rotate(-90deg)}
.gauge-read{margin-top:-14px}
.gauge-score{font-size:64px;font-weight:600;color:var(--ink);line-height:1}
.gauge-level{font-family:var(--font-mono);font-size:16px;letter-spacing:.18em;
  font-weight:600;margin-top:4px}
.gauge-level[data-level="NUCLEAR"]{color:#ef4444}
.gauge-level[data-level="SPICY"]{color:#f97316}
.gauge-level[data-level="ELEVATED"]{color:#fbbf24}
.gauge-level[data-level="CALM"]{color:#10b981}
.gauge-level[data-level="COOL"]{color:#3b82f6}
.gauge-desc{text-align:center;color:var(--muted);font-size:14px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.gauge-scale{display:flex;justify-content:space-between;margin-top:16px;
  font-size:10px;letter-spacing:.1em;color:var(--muted2);text-transform:uppercase}

/* ── DEN STORA GRAFEN ────────────────────────────────────────── */
.chart-wrap{position:relative;border:1px solid var(--line);border-radius:18px;
  background:var(--panel);padding:22px 20px 18px}
/* Trump (blå slips) STOR, uppe till HÖGER, BAKOM grafboxen. .chart-stack är
   positioneringskontext; Trump ligger under .chart-wrap (z-index 2) men över
   sidbakgrunden, så han sticker upp bakom boxens övre högra hörn. */
.chart-stack{position:relative}
.chart-stack .chart-wrap{position:relative;z-index:2}
/* Bildens NEDERKANT linjerar med grafboxens ÖVERKANT (bottom:100% = bilden
   slutar precis där boxen börjar). */
/* Trump (blå slips, pekar upp) STOR (~halva sidan), uppe till HÖGER, BAKOM
   rubriken + grafen (z-index 0 < .wrap 2). Positioneras relativt #grafen-
   sektionen; nederkanten hamnar vid grafboxens överkant. Klaus 2026-07-10. */
#grafen{position:relative;overflow:hidden}
#grafen .wrap{position:relative;z-index:2}
/* Höger kant linjerar med grafens/wrappens högerkant: bilden ankras mot den
   CENTRERADE .wrap-kanten (inte full-bredds-bandet), annars sticker den ut till
   höger på breda skärmar. Nederkanten linjerar med grafboxens överkant via
   .chart-stack-ankaret nedan (bilden får ligga lite BAKOM rubriken). */
.chart-trump{position:absolute;right:0;
  bottom:100%;margin-bottom:-2px;top:auto;
  width:min(720px,50vw);z-index:0;pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));opacity:.92}
/* Rubriken (.sec-head) ska ALLTID ligga över Trump-bilden i Z-led (Klaus
   2026-07-10). Explicit z-index så det inte beror på DOM-ordning. */
#grafen .sec-head{position:relative;z-index:1}
/* Ankra bildens nederkant mot grafboxens överkant: bilden flyttas in i
   .chart-stack som positioneringskontext (se JS-flytt) och växer uppåt. */
.chart-stack{position:relative}
@media (max-width:820px){.chart-trump{width:380px;right:0;opacity:.55;bottom:100%}}
@media (max-width:520px){.chart-trump{display:none}}
/* Tidsintervall-väljare LÄNGST NER i grafen, centrerad (Klaus 2026-07-10) */
.chart-toolbar{display:flex;justify-content:center;margin:16px 0 4px}
.chart-periods{position:relative;display:inline-flex;flex-wrap:wrap;justify-content:center;
  gap:4px;padding:4px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line-soft)}
.chart-period{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  font-weight:600;color:var(--muted);background:transparent;border:0;cursor:pointer;
  padding:7px 13px;border-radius:8px;transition:background .16s,color .16s}
.chart-period:hover{color:var(--ink)}
.chart-period.is-active{background:var(--gold);color:#160a02}
/* Eget-spann-knapp: avgränsad med en tunn linje till vänster, guld-accentuerad */
.chart-range-btn{margin-left:6px;padding-left:15px;position:relative;color:var(--gold)}
.chart-range-btn::before{content:"";position:absolute;left:0;top:18%;height:64%;
  width:1px;background:var(--line-soft)}
.chart-range-btn:hover{color:var(--gold-bright)}
@media (max-width:520px){.chart-period{padding:6px 9px;font-size:11px}}

/* ── Datumspann-kalender (popover) ────────────────────────────── */
/* Öppnas UPPÅT, ovanpå grafen (bottom istället för top) så hela kalendern
   syns utan att man måste scrolla förbi grafens nederkant. */
.range-pop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  z-index:40;width:min(320px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px;box-shadow:0 -24px 60px -18px rgba(0,0,0,.75);
  text-align:left}
.range-pop[hidden]{display:none}
/* Liten pil nedåt mot knappen */
.range-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--panel)}
.rp-head{display:flex;gap:8px;margin-bottom:10px}
.rp-field{flex:1;padding:8px 10px;border:1px solid var(--line-soft);border-radius:9px;
  font-size:11px;color:var(--muted);background:var(--panel2)}
.rp-field .rp-lab{letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);
  display:block;font-size:9px;margin-bottom:2px}
.rp-field .rp-val{color:var(--ink);font-size:12px}
.rp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rp-title{font-size:12px;letter-spacing:.06em;text-transform:capitalize;color:var(--ink)}
.rp-arrow{background:transparent;border:1px solid var(--line-soft);border-radius:8px;
  color:var(--gold);width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1;
  transition:background .15s}
.rp-arrow:hover:not(:disabled){background:rgba(224,185,79,.12)}
.rp-arrow:disabled{opacity:.3;cursor:default}
.rp-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.rp-wk span{text-align:center;font-size:10px;color:var(--muted2);text-transform:uppercase;
  letter-spacing:.04em}
.rp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.rp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:var(--ink);background:transparent;
  border:0;border-radius:8px;cursor:pointer;transition:background .12s,color .12s}
.rp-cell:hover:not(:disabled):not(.rp-empty){background:rgba(255,255,255,.07)}
.rp-empty{cursor:default}
.rp-off{color:var(--muted2);opacity:.35;cursor:default}
.rp-in{background:rgba(224,185,79,.14)}
.rp-start,.rp-end{background:var(--gold);color:#160a02;font-weight:700}
.rp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.rp-clear{background:transparent;border:0;color:var(--muted);font-size:12px;cursor:pointer;
  letter-spacing:.04em}
.rp-clear:hover{color:var(--ink)}
.rp-apply{background:var(--gold);color:#160a02;border:0;border-radius:9px;
  padding:9px 18px;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  text-transform:uppercase;transition:background .15s,opacity .15s}
.rp-apply:hover:not(:disabled){background:var(--gold-bright)}
.rp-apply:disabled{opacity:.4;cursor:default}

.chart-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}
.chart-legend .lg{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:12px;color:var(--muted)}
.chart-legend .lg i{width:14px;height:3px;border-radius:2px;display:inline-block}
.chart-hold{position:relative;width:100%}
.big-chart{width:100%;height:min(52vh,440px);display:block;overflow:visible}
.big-chart .c-line{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.big-chart .c-ylab{fill:var(--muted2);font-family:var(--font-mono);font-size:11px}
.big-chart .c-mark{cursor:pointer;transition:transform .12s}
.big-chart .c-mark:hover,.big-chart .c-mark:focus{outline:none;
  filter:drop-shadow(0 0 8px currentColor);transform-box:fill-box;transform-origin:center;transform:scale(1.35)}
.chart-x{display:flex;justify-content:space-between;margin-top:8px;
  font-size:11px;color:var(--muted2)}
.chart-tip{position:absolute;z-index:20;width:230px;pointer-events:none;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;box-shadow:0 20px 50px -18px #000;font-size:12.5px}
.chart-tip .tt-h{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:7px}
.chart-tip .tt-h b{color:var(--gold)}
.chart-tip .tt-q{font-style:italic;color:var(--ink);line-height:1.45;margin-bottom:9px}
.chart-tip .tt-r{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:11px}
.chart-tip .tt-r .pos{color:var(--green)}.chart-tip .tt-r .neg{color:var(--red)}
@media (prefers-reduced-motion:reduce){.big-chart .c-pulse{display:none}}

/* Trump (pekar/skriker) BAKOM tema×index-rubriken. Nederkanten mot rubrikens
   överkant, bakom .wrap (z-index 0 < 2). Maskad i botten. (Klaus 2026-07-10) */
#topics{position:relative;overflow:hidden}
#topics .wrap{position:relative;z-index:2}
/* Victory-hand STORRE + hogerstalld mot tabellboxens hogerkant (Klaus 2026-07-10).
   right foljer den centrerade .wrap-kanten (samma som tabellen) i stallet for
   full-bredds-6% som stack ut. top satt sa bildens nedre del linjerar mot
   tabellens ovre kant. */
.floater.topics-trump{position:absolute;
  right:max(24px,calc((100% - 1180px)/2 + 24px));bottom:auto;top:clamp(48px,9vw,128px);
  width:min(640px,54vw);z-index:0;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
@media (max-width:820px){.floater.topics-trump{display:block;width:62vw;opacity:.4;right:-12px}}

/* Trump (boxning) fyller utrymmet till HOGER om rubriken i #bounce, far ligga
   lite under rubrikerna (Klaus 2026-07-10). Hogerstalld mot .wrap-kanten. */
#bounce{position:relative;overflow:hidden}
#bounce .wrap{position:relative;z-index:2}
.floater.bounce-trump{position:absolute;
  right:max(24px,calc((100% - 1180px)/2 + 24px));bottom:auto;top:clamp(40px,7vw,110px);
  width:min(520px,44vw);z-index:0;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
@media (max-width:820px){.floater.bounce-trump{display:block;width:60vw;opacity:.4;right:-12px}}
@media (max-width:520px){.floater.bounce-trump{display:none}}
@media (max-width:520px){.floater.topics-trump{display:none}}

/* ── HEATMAPS (tema×index, temporal) ─────────────────────────── */
.hm-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);
  border-radius:16px;background:var(--panel);-webkit-overflow-scrolling:touch}
.hm-table{width:100%;border-collapse:collapse;min-width:680px}
.hm-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--muted2);text-align:center;padding:14px 12px;font-weight:500;
  border-bottom:1px solid var(--line);white-space:nowrap}
.hm-table th:first-child,.hm-table th:nth-child(2){text-align:left}
.hm-cell{text-align:center;padding:12px 10px;border-bottom:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);transition:filter .12s;cursor:default}
.hm-cell:hover{filter:brightness(1.25)}
.hm-empty{background:transparent!important;color:var(--muted2)}
.hm-v{display:block;font-family:var(--font-mono);font-size:14px;font-weight:600}
.hm-v.pos{color:#8fe6c0}.hm-v.neg{color:#f2a09a}
.hm-n{display:block;font-size:10px;color:var(--muted2);margin-top:2px}
.hm-topic{text-align:left!important;font-weight:600;color:var(--ink);white-space:nowrap;padding:12px 14px}
.hm-count{text-align:left!important;color:var(--muted);padding-left:14px}
.hm-tight .hm-cell{padding:10px 8px}
.hm-tip{position:absolute;z-index:20;width:260px;pointer-events:none;
  background:var(--panel2);border:1px solid var(--gold);border-radius:10px;
  padding:10px 12px;font-size:11.5px;line-height:1.5;color:var(--ink);
  box-shadow:0 16px 40px -16px #000}

/* Temporal-insikter */
.tp-insights{list-style:none;display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tp-insights li{font-size:14px;color:var(--muted);padding:12px 15px;
  border:1px solid var(--line-soft);border-radius:11px;background:var(--panel);
  border-left:2px solid var(--gold)}

/* Trump (pekar) i #temporal (Klaus 2026-07-10): till HOGER om texten, hogerstalld
   mot .wrap-kanten, nederkanten linjerar med tabellens (.hm-wrap) overkant, ligger
   BAKOM insikts-raderna. #temporal ar positioneringskontext. */
#temporal{position:relative;overflow:hidden}
#temporal .wrap{position:relative;z-index:2}
.floater.temporal-trump{position:absolute;
  right:max(24px,calc((100% - 1180px)/2 + 24px));bottom:auto;top:clamp(-140px,-2vw,-60px);
  width:min(720px,60vw);z-index:0;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
/* Halvtransparent svart platta bakom insikts-raderna sa texten las mot bilden. */
#temporal .tp-insights li{background:rgba(10,11,13,.72);backdrop-filter:blur(2px)}
@media (max-width:820px){.floater.temporal-trump{display:block;width:56vw;opacity:.4;right:-12px}}
@media (max-width:520px){.floater.temporal-trump{display:none}}

/* ── OMX-BOUNCE BACKTEST ──────────────────────────────────────── */
.bt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.bt-stat{text-align:center;padding:24px 14px;border:1px solid var(--line-soft);
  border-radius:16px;background:var(--panel)}
.bt-big{font-size:clamp(28px,4vw,42px);font-weight:600;line-height:1}
.bt-big.pos{color:var(--green)}.bt-big.neg{color:var(--red)}.bt-big.gold{color:var(--gold)}
.bt-lab{font-size:12px;color:var(--muted);margin-top:8px}
.bt-config{text-align:center;font-size:13px;color:var(--muted);margin:18px 0 24px}
.bt-config b{color:var(--gold)}
.bt-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.bt-topic{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border:1px solid var(--line-soft);border-radius:12px;background:var(--panel);font-size:14px}
.bt-topic .bt-t{font-weight:600;color:var(--ink);flex:1}
.bt-topic .pos{color:var(--green);font-weight:600}.bt-topic .neg{color:var(--red);font-weight:600}
.bt-win{font-size:11px;color:var(--muted2);width:100%;flex-basis:100%}
.bt-disc{margin-top:26px;font-size:11px;color:var(--muted2);line-height:1.6;max-width:70ch}
@media (max-width:640px){.bt-grid{grid-template-columns:repeat(2,1fr)}}

/* ── STEG ────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{padding:28px 22px;border:1px solid var(--line-soft);border-radius:16px;
  background:var(--panel);position:relative;overflow:hidden;transition:.25s}
.step:hover{border-color:var(--line);transform:translateY(-3px)}
.step-n{font-size:13px;color:var(--alert);letter-spacing:.2em;font-weight:600}
.step h3{font-family:var(--font-body);font-weight:700;font-size:19px;margin:12px 0 8px;color:var(--gold)}
.step p{font-size:14.5px;color:var(--muted)}

/* Bevis-rubriken: betydligt större + luftigare radavstånd (Klaus 2026-07-10) */
.proof-h2{font-size:clamp(46px,8vw,104px)!important;line-height:1.16!important}

/* FULLBRETT bevis-band (Klaus 2026-07-10): Trump med tull-skylten fyller HELA
   sidbredden och man ska SE honom. Texten ligger ovanpå med en gradient bara i
   nederkant + en mjuk vänster-vinjett, så bilden aldrig döljs, bara texten säkras. */
.band-noptop{padding-top:0}
.proof-hero{position:relative;width:100%;min-height:min(72vh,720px);
  display:flex;align-items:flex-end;
  background:url("/assets/orange-alert/proof-trump.jpg") no-repeat center top;
  background-size:cover;
  margin-bottom:clamp(40px,7vw,80px);overflow:hidden}
/* Gradient: mörk i topp (under sticky-menyn) + kraftig i botten (bär texten),
   samt en svag vänster-vinjett. Trump/skylten syns i det ljusa mitten-partiet. */
.proof-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,11,13,.72) 0%,transparent 26%,transparent 46%,rgba(10,11,13,.86) 90%,var(--bg) 100%),
    linear-gradient(90deg,rgba(10,11,13,.55),transparent 55%)}
.proof-hero-inner{position:relative;z-index:2;padding-bottom:clamp(28px,5vw,56px);padding-top:60px}
.proof-hero-inner .lead{color:var(--ink);text-shadow:0 2px 18px rgba(0,0,0,.8)}
.proof-hero .proof-h2{text-shadow:0 4px 30px rgba(0,0,0,.7)}
@media (max-width:640px){
  .proof-hero{min-height:64vh;background-position:60% top}
}

/* ── BEVIS-TABELL ────────────────────────────────────────────── */
.proof-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);-webkit-overflow-scrolling:touch}
.proof-table{width:100%;border-collapse:collapse;min-width:640px}
.proof-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted2);text-align:right;padding:16px 18px;
  border-bottom:1px solid var(--line);font-weight:500}
.proof-table th:first-child{text-align:left}
.proof-table td{padding:15px 18px;text-align:right;font-size:15px;
  border-bottom:1px solid var(--line-soft)}
.proof-table td.ix{text-align:left;font-weight:600;color:var(--ink)}
.proof-table tr:last-child td{border-bottom:none}
.proof-table .pos{color:var(--green)}.proof-table .neg{color:var(--red)}
.table-note{font-size:11px;color:var(--muted2);padding:14px 18px;line-height:1.5}
.proof-takeaway{display:flex;align-items:center;justify-content:center;gap:34px;
  margin-top:44px;flex-wrap:wrap}
.tk{text-align:center}
.tk-big{font-size:clamp(26px,4vw,40px);font-weight:600;line-height:1}
.tk-big.alert{color:var(--alert)}.tk-big.gold{color:var(--gold)}
.tk-sub{font-size:13px;color:var(--muted);margin-top:8px}
.tk-arrow{font-size:34px;color:var(--muted2)}

/* ── SKAKNINGAR ──────────────────────────────────────────────── */
.shock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.shock{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;
  padding:22px;transition:.25s;position:relative}
.shock:hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 20px 50px -24px #000}
.shock-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;margin-bottom:14px}
.shock-rank{color:var(--gold);font-weight:600;font-size:14px}
.shock-topic{font-weight:700;color:var(--ink)}
.shock-dir{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
.shock-dir.pos{color:var(--green)}.shock-dir.neg{color:var(--red)}
.shock-date{margin-left:auto;color:var(--muted2);font-size:11px}
.shock-quote{font-size:15.5px;line-height:1.5;color:var(--ink);font-style:italic;
  border-left:2px solid var(--alert);padding-left:14px;margin:0 0 16px}
.shock-reacts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.react{font-family:var(--font-mono);font-size:12px;padding:5px 9px;border-radius:7px;
  background:var(--panel2);border:1px solid var(--line-soft)}
.react i{font-style:normal;color:var(--muted);margin-right:7px}
.react.pos{color:var(--green)}.react.neg{color:var(--red)}
.shock-src{font-size:11px;color:var(--gold);letter-spacing:.05em}
.shock-src:hover{text-decoration:underline}

/* ── TACO ────────────────────────────────────────────────────── */
.taco-banner{display:flex;align-items:center;gap:18px;padding:20px 24px;
  border-radius:16px;border:1px solid var(--line-soft);background:var(--panel);max-width:560px}
.taco-banner.on{border-color:var(--alert);
  box-shadow:0 0 0 1px var(--alert) inset,0 16px 44px -20px var(--alert-glow)}
.taco-emoji{font-size:42px;line-height:1}
.taco-title{font-family:var(--font-mono);font-weight:600;letter-spacing:.12em;font-size:16px;color:var(--ink)}
.taco-title .mono{color:var(--alert);font-size:13px}
.taco-sub{font-size:13px;color:var(--muted);margin-top:4px}
.taco-sub b{color:var(--gold)}
.taco-badge{margin-left:auto;font-size:12px;letter-spacing:.14em;font-weight:600;
  color:var(--alert);border:1px solid var(--alert);border-radius:8px;padding:6px 12px}
.taco-trigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:30px}
.taco-trig{padding:18px;border:1px solid var(--line-soft);border-radius:14px;background:var(--panel)}
.tt-date{font-size:12px;color:var(--muted2)}
.tt-phase{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;margin-left:10px;
  padding:3px 9px;border-radius:6px}
.tt-phase.reb{color:var(--green);background:rgba(63,185,138,.12)}
.tt-phase.warn{color:var(--alert);background:rgba(255,106,26,.12)}
.taco-trig blockquote{font-size:14px;font-style:italic;color:var(--ink);margin-top:12px;line-height:1.5}

/* ── CITAT-VÄGG ──────────────────────────────────────────────── */
.quotewall{overflow:hidden;position:relative}
.quotewall .wrap{position:relative;z-index:2}
/* STOR Trump (~3x), nederkanten linjerar med bandets nederkant = orange
   siluett-bandets överkant nedanför (Klaus 2026-07-10). Bakom citat-kortet. */
.floater.qw-trump{position:absolute;right:-40px;bottom:0;
  width:min(867px,61vw);z-index:0;opacity:.85;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
@media (max-width:820px){.floater.qw-trump{display:block;width:80vw;opacity:.4}}
@media (max-width:520px){.floater.qw-trump{display:none}}
.qw-card{max-width:820px;margin:0 auto;text-align:center;position:relative;padding:20px}
.qw-mark{font-family:var(--font-display);font-size:120px;color:var(--gold);
  opacity:.32;line-height:.4;height:60px}
.qw-quote{font-size:clamp(30px,6vw,72px);color:var(--ink);margin:10px 0 26px;
  text-transform:none;line-height:1.02}
.qw-attr{font-size:15px;color:var(--muted)}
.qw-attr b{color:var(--ink)}
.qw-note{font-size:15px;margin-top:12px}
.qw-note .gold{color:var(--gold);font-weight:700}

/* ── SILUETT-BAND (Klaus 2026-07-10): orange Trump-siluett, fullbredd ─── */
.silhouette-band{position:relative;width:100%;min-height:min(64vh,620px);
  display:flex;align-items:center;
  background:url("/assets/orange-alert/proof-silhouette.jpg") no-repeat center center;
  background-size:cover}
/* Mörka kanterna så den smälter in i sidan uppe/nere */
.silhouette-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg),transparent 22%,transparent 74%,var(--bg))}
.silhouette-inner{position:relative;z-index:2}
/* VIT + ORANGE text (Klaus 2026-07-10): vit huvudtext, orange accent-rad, med
   mörk skugga så den läses BÅDE mot den orange ytan och mot den svarta siluetten. */
.silhouette-line{font-size:clamp(30px,5.5vw,70px);color:#ffffff;line-height:1.05;
  max-width:14ch;font-weight:400;text-shadow:0 3px 24px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5)}
.silhouette-line .alert{color:var(--alert-bright)}
.silhouette-band{background-position:78% center}
@media (max-width:640px){.silhouette-band{min-height:52vh;background-position:88% center}}

/* ── CTA ─────────────────────────────────────────────────────── */
.cta-band{text-align:center;overflow:hidden}
.cta-inner{max-width:680px;margin:0 auto}
.cta-inner h2{font-size:clamp(38px,7vw,84px);margin:16px 0 22px}
.cta-form{display:flex;gap:12px;max-width:520px;margin:34px auto 0;flex-wrap:wrap}
.cta-form input[type=email]{flex:1;min-width:220px;font-family:var(--font-mono);
  font-size:15px;padding:16px 18px;border-radius:11px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);outline:none}
.cta-form input[type=email]:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,185,79,.15)}
.cta-form .btn{white-space:nowrap}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cta-msg{margin-top:16px;font-size:13px;min-height:18px}
.cta-msg.ok{color:var(--green)}.cta-msg.err{color:var(--red)}
.cta-fine{margin-top:30px;font-size:11px;color:var(--muted2);max-width:52ch;
  margin-left:auto;margin-right:auto;line-height:1.6}

/* ── FOOT ────────────────────────────────────────────────────── */
.foot{margin-top:clamp(60px,10vw,110px);padding-top:28px;border-top:1px solid var(--line)}
.foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-links{font-size:12px;color:var(--muted)}
.foot-links a{color:var(--gold)}.foot-links a:hover{text-decoration:underline}

/* ── RESPONSIVT ──────────────────────────────────────────────── */
@media (max-width:900px){
  .gauge-grid{grid-template-columns:1fr;gap:38px}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .proof-takeaway{gap:16px}.tk-arrow{transform:rotate(90deg)}
  .cta-form{flex-direction:column}.cta-form .btn{width:100%}
}