/* STARKAST kontrollcenter: Idag. Cinematisk, nästan svart, sprucken betongtextur, STARKAST-rött som varumärke, färg som informationsspråk:
   röd = kräver åtgärd, grön = följer plan, orange = uppmärksamhet, blå = information, lila = sekundär statistik. Inga externa resurser. */
body.dash {
  --red: #e5391d; --red-hot: #ff4d2d; --green: #3ddc97; --orange: #f5a524; --blue: #5aa2ff; --purple: #a98bff;
  --num: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  background: radial-gradient(1200px 500px at 85% -5%, rgba(229, 57, 29, .10), transparent 60%), radial-gradient(900px 500px at -10% 40%, rgba(90, 162, 255, .05), transparent 60%), #08080a;
}
.dash .top { background: linear-gradient(180deg, rgba(8, 8, 10, .96), rgba(8, 8, 10, .85)); border-bottom: 1px solid #1d1d22; }
.dmain { max-width: 1480px; margin: 0 auto; padding: 18px 28px 70px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid #2a1612; min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 38px;
  background: radial-gradient(800px 320px at 92% 10%, rgba(229, 57, 29, .55), rgba(229, 57, 29, 0) 62%), linear-gradient(115deg, #17090a 0%, #0c0a0a 55%, #120808 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05); }
.hero::before { content: ""; position: absolute; inset: 0; background: url(/starkast-texture.jpg) center / cover; opacity: .75; mix-blend-mode: screen; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 4px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .8; }
.hero > * { position: relative; z-index: 1; }
.eyebrow { font-size: 12px; letter-spacing: .34em; font-weight: 700; color: var(--red-hot); text-transform: uppercase; }
.hero-h { font: 400 clamp(64px, 9vw, 128px)/.9 var(--num); letter-spacing: .015em; margin: 8px 0 10px; text-transform: uppercase; color: #f3ecd8; text-shadow: 0 4px 40px rgba(229, 57, 29, .35); }
.hero-h small { font-size: .26em; letter-spacing: .12em; color: var(--dim); margin-left: 14px; vertical-align: .55em; }
.hero-p { margin: 0; font-size: 16px; color: #d2cbb8; max-width: 640px; line-height: 1.45; }
.hero-p b { color: #fff; }
.hero-cta { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; font-size: 14px;
  background: linear-gradient(180deg, var(--red-hot), #c32a12); color: #fff; box-shadow: 0 8px 30px rgba(229, 57, 29, .45), inset 0 1px 0 rgba(255, 255, 255, .25); border: 0; }
.cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cta.ghost { background: rgba(255, 255, 255, .06); box-shadow: none; border: 1px solid rgba(255, 255, 255, .15); color: #efe9d6; }
.hero-mark { height: clamp(90px, 14vw, 170px); width: auto; transform: none; filter: drop-shadow(0 12px 40px rgba(229, 57, 29, .55)); flex: none; animation: rise .8s both .2s; }

/* ---------- KPI-rad ---------- */
.kpis5 { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 14px; }
.kcard { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 20px 16px; text-decoration: none; display: block; min-height: 150px; border: 1px solid #25252b; background: linear-gradient(180deg, #151518, #0e0e11); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); transition: transform .15s, border-color .15s; }
.kcard:hover { transform: translateY(-2px); border-color: var(--c, #3a3a42); }
.kcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 24px var(--c); }
.kcard::after { content: ""; position: absolute; right: -30%; top: -50%; width: 90%; height: 160%; background: radial-gradient(closest-side, var(--c), transparent); opacity: .10; pointer-events: none; }
.kcard.big { background: linear-gradient(135deg, rgba(229, 57, 29, .32), rgba(229, 57, 29, .06) 60%), #120b0b; border-color: rgba(229, 57, 29, .55); }
.klabel { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #a9a392; }
.knum { font: 400 64px/1 var(--num); letter-spacing: .01em; margin: 10px 0 4px; color: var(--c); text-shadow: 0 0 36px color-mix(in srgb, var(--c) 45%, transparent); display: flex; align-items: baseline; gap: 8px; }
.kcard.big .knum { font-size: 92px; color: #fff; }
.knum small { font: 600 15px var(--f); color: #a9a392; letter-spacing: 0; text-shadow: none; }
.ksub { font-size: 13px; color: #b9b3a2; }
.kspark { position: absolute; right: 14px; top: 14px; opacity: .95; }

/* ---------- kort ---------- */
.dc { border-radius: 16px; border: 1px solid #25252b; background: linear-gradient(180deg, #131316, #0d0d10); box-shadow: 0 10px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); padding: 20px 22px 22px; min-width: 0; }
.dc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.dc h2 { margin: 0; font: 400 24px/1.1 var(--num); letter-spacing: .06em; text-transform: uppercase; color: #f3ecd8; }
.dc-sub { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.grid3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: #b9b3a2; flex-wrap: wrap; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }

/* ---------- stor graf ---------- */
.actchart { position: relative; }
.actchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.actchart .grid { stroke: #23232a; stroke-width: 1; } .actchart text { fill: #8c8778; font: 600 12px var(--f); }
.actchart .bar { transition: filter .15s; } .actchart .bar:hover { filter: brightness(1.25); }
.actchart .now text { fill: #fff; }
.chart-tip { position: absolute; pointer-events: none; background: #000; border: 1px solid #3a3a42; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; z-index: 5; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.chart-tip b { font: 400 22px var(--num); display: block; letter-spacing: .04em; }

/* ---------- ring + per klient ---------- */
.ringwrap { display: flex; justify-content: center; margin: 4px 0 14px; position: relative; }
.ringwrap svg { width: 190px; height: 190px; }
.ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num b { font: 400 54px/1 var(--num); letter-spacing: .02em; } .ring-num span { font-size: 12px; color: #a9a392; margin-top: 4px; }
.perclient { display: flex; flex-direction: column; gap: 9px; }
.pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; text-decoration: none; }
.pc .n { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc .v { font: 400 17px var(--num); letter-spacing: .04em; }
.segs { grid-column: 1 / -1; display: flex; gap: 4px; } .seg1 { flex: 1; height: 8px; border-radius: 4px; background: #202026; } .seg1.on { background: var(--c, var(--green)); box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--green)) 55%, transparent); }

/* ---------- uppmärksamhet ---------- */
.tasklist, .proglist, .feed { list-style: none; margin: 0; padding: 0; }
.task { display: grid; grid-template-columns: 5px 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 14px 13px 0; margin-bottom: 8px; border-radius: 12px; text-decoration: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, #111114), #101013 55%); border: 1px solid color-mix(in srgb, var(--c) 28%, #1d1d22); overflow: hidden; transition: transform .12s; }
.task:hover { transform: translateX(3px); border-color: var(--c); }
.task .sev { align-self: stretch; background: var(--c); box-shadow: 0 0 18px var(--c); }
.av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; font: 400 17px var(--num); letter-spacing: .05em; background: radial-gradient(circle at 30% 25%, #2b2b32, #141417); border: 2px solid var(--c, #34343b); color: #f3ecd8; flex: none; }
.task .who { font-weight: 700; font-size: 15px; } .task .why { font-size: 13px; color: #cfc8b4; margin-top: 2px; } .task .why i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 7px; box-shadow: 0 0 10px var(--c); }
.task .prev { font-size: 12.5px; color: #8f8978; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38ch; }
.task .go { padding: 9px 16px; border-radius: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px; background: color-mix(in srgb, var(--c) 22%, #18181b); color: #fff; border: 1px solid var(--c); white-space: nowrap; }
.task.hot .go { background: linear-gradient(180deg, var(--red-hot), #c32a12); border-color: var(--red-hot); box-shadow: 0 6px 20px rgba(229, 57, 29, .4); }
.more { margin-top: 6px; } .more button { background: transparent; border: 1px dashed #3a3a42; color: #b9b3a2; border-radius: 9px; padding: 8px 14px; }
.allgood { padding: 34px 10px; text-align: center; color: #b9b3a2; } .allgood b { display: block; font: 400 30px var(--num); letter-spacing: .06em; color: var(--green); margin-bottom: 6px; }

/* ---------- progression ---------- */
.prog { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #1c1c21; text-decoration: none; }
.prog:last-child { border-bottom: 0; } .prog .nm { font-weight: 700; } .prog .ex { font-size: 12.5px; color: #8f8978; }
.prog .pct { font: 400 28px var(--num); letter-spacing: .03em; color: var(--green); text-align: right; min-width: 78px; } .prog .pct.flat { color: #9d98a8; } .prog .pct.down { color: var(--orange); }
.prog svg { display: block; }

/* ---------- aktivitetsflöde ---------- */
.feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 34px; }
.ev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #1a1a1f; text-decoration: none; }
.ev .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-content: center; background: color-mix(in srgb, var(--c) 18%, #121215); border: 1px solid color-mix(in srgb, var(--c) 50%, #1d1d22); color: var(--c); }
.ev .ic svg { width: 17px; height: 17px; } .ev .t { font-size: 13.5px; } .ev .t b { color: #fff; } .ev .t span { color: var(--c); font-weight: 700; } .ev .w { font-size: 12px; color: #7d7869; white-space: nowrap; }

/* ---------- responsivt ---------- */
@media (max-width: 1180px) { .kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kcard.big { grid-column: span 3; } .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .dmain { padding: 12px 14px 60px; } .hero { padding: 22px 20px; min-height: 0; flex-direction: column; align-items: flex-start; } .hero-mark { height: 84px; position: absolute; right: 12px; top: 14px; opacity: .85; }
  .kpis5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kcard.big { grid-column: span 2; } .knum { font-size: 50px; } .kcard.big .knum { font-size: 72px; }
  .feed { grid-template-columns: minmax(0, 1fr); } .prog { grid-template-columns: 40px minmax(0, 1fr) auto; } .prog svg { display: none; } .task { grid-template-columns: 5px 40px minmax(0, 1fr); } .task .go { grid-column: 3; justify-self: start; margin-top: 6px; }
}


/* ---------- wow: rörelse, ljus, nya paneler ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { background-position: -120% 0; } to { background-position: 220% 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 45, .55); } 50% { box-shadow: 0 0 0 9px rgba(255, 77, 45, 0); } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.hero { animation: rise .7s both; }
.hero .shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .09) 47%, rgba(255, 120, 80, .16) 50%, transparent 62%) -120% 0 / 60% 100% no-repeat; animation: sweep 5.5s ease-in-out 1s infinite; pointer-events: none; mix-blend-mode: screen; }
.hero::after { height: 5px; box-shadow: 0 0 40px 6px rgba(229, 57, 29, .7); }
.hero-h { text-shadow: 0 4px 40px rgba(229, 57, 29, .5), 0 0 2px rgba(255, 255, 255, .4); }
.hero-live { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); font-size: 11.5px; letter-spacing: .18em; font-weight: 700; color: #d9d2bf; text-transform: uppercase; }
.hero-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--red-hot); animation: pulse 1.8s infinite; }
.kcard { animation: rise .6s both; animation-delay: var(--d, 0ms); }
.kcard .kbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .05); }
.kcard .kbar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c)); box-shadow: 0 0 16px var(--c); border-radius: 0 3px 3px 0; transform-origin: left; animation: sweepbar 1.1s cubic-bezier(.2, .8, .2, 1) both .3s; }
@keyframes sweepbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kcard .knum { font-size: 72px; } .kcard.big .knum { font-size: 112px; line-height: .95; text-shadow: 0 0 60px rgba(255, 77, 45, .65); }
.kcard.big { box-shadow: 0 20px 60px rgba(229, 57, 29, .28), 0 10px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08); }
.dc { animation: rise .7s both .15s; position: relative; }
.dc::before { content: ""; position: absolute; left: 22px; top: 0; width: 46px; height: 3px; background: var(--red); box-shadow: 0 0 14px var(--red); border-radius: 0 0 3px 3px; }
.actchart .bar { transform-box: fill-box; transform-origin: bottom; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.actchart g[data-i]:nth-of-type(2) .bar { animation-delay: .06s; } .actchart g[data-i]:nth-of-type(3) .bar { animation-delay: .12s; } .actchart g[data-i]:nth-of-type(4) .bar { animation-delay: .18s; } .actchart g[data-i]:nth-of-type(5) .bar { animation-delay: .24s; } .actchart g[data-i]:nth-of-type(6) .bar { animation-delay: .3s; } .actchart g[data-i]:nth-of-type(7) .bar { animation-delay: .36s; } .actchart g[data-i]:nth-of-type(8) .bar { animation-delay: .42s; }
.task, .prog, .ev { animation: rise .5s both; }
.task:hover { box-shadow: 0 8px 30px color-mix(in srgb, var(--c) 30%, transparent); }
.grid2b { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* träningsrytm */
.heat { overflow-x: auto; padding-bottom: 4px; }
.hrow { display: flex; gap: 8px; align-items: flex-start; min-width: 520px; }
.hdays { display: grid; grid-template-rows: auto repeat(7, 1fr); gap: 6px; padding-top: 0; } .hdays::before { content: ""; height: 14px; } .hdays span { height: 40px; display: grid; place-content: center; font: 700 11px var(--f); color: #6e6a5d; }
.hcol { flex: 1; display: flex; flex-direction: column; gap: 6px; } .hw { height: 14px; text-align: center; font: 700 11px var(--f); color: #7d7869; }
.hc { height: 40px; border-radius: 9px; background: #17171b; border: 1px solid #1f1f25; display: grid; place-content: center; animation: pop .5s both; }
.hc b { font: 400 17px var(--num); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hc.h1, .heatleg .h1 { background: #3a1812; border-color: #5a2218; } .hc.h2, .heatleg .h2 { background: #6e2012; border-color: #8f2c19; } .hc.h3, .heatleg .h3 { background: #b02a14; border-color: #d3391e; } .hc.h4, .heatleg .h4 { background: linear-gradient(180deg, #ff5a36, #d02f14); border-color: #ff7a5a; box-shadow: 0 0 18px rgba(255, 77, 45, .65); }
.hc.fut { opacity: .28; } .hc.today { outline: 2px solid #fff; outline-offset: 1px; }
.heatleg { align-items: center; } .heatleg i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #25252b; margin: 0; background: #17171b; } .heatleg .h0 { background: #17171b; }

/* PB-vägg */
.pbwall { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pbwall li { animation: rise .6s both; }
.pb { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kg txt up"; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(100deg, rgba(255, 194, 71, .20), rgba(255, 194, 71, .04) 55%), #121110; border: 1px solid rgba(255, 194, 71, .45); box-shadow: 0 8px 28px rgba(255, 170, 40, .12); transition: transform .15s; }
.pb:hover { transform: translateY(-2px); border-color: #ffc247; }
.pbtag { position: absolute; right: -26px; top: 8px; transform: rotate(35deg); background: #ffc247; color: #1a1200; font: 400 13px var(--num); letter-spacing: .12em; padding: 2px 34px; }
.pbkg { grid-area: kg; font: 400 46px/1 var(--num); letter-spacing: .01em; color: #ffd27a; text-shadow: 0 0 30px rgba(255, 194, 71, .55); } .pbkg small { font: 700 13px var(--f); color: #cfa653; margin-left: 4px; text-shadow: none; }
.pbtxt { grid-area: txt; display: flex; flex-direction: column; min-width: 0; } .pbtxt b { font-size: 15px; } .pbtxt span { color: #a8a190; font-size: 12.5px; }
.pbup { grid-area: up; font: 400 17px var(--num); letter-spacing: .05em; color: var(--green); margin-right: 24px; white-space: nowrap; }
@media (max-width: 1180px) { .grid2b { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .kcard .knum { font-size: 56px; } .kcard.big .knum { font-size: 84px; } .hc, .hdays span { height: 32px; } .pbup { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ---------- tillväxt / founder ---------- */
.grid2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-h #heroNum { color: #fff; text-shadow: 0 0 60px rgba(61, 220, 151, .45), 0 4px 40px rgba(229, 57, 29, .4); }
.chips2 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gchip { display: inline-flex; align-items: baseline; gap: 9px; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.gchip em { font-style: normal; color: #b9b3a2; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; font-weight: 700; } .gchip b { font: 400 22px var(--num); letter-spacing: .03em; } .gchip i { font-style: normal; font-weight: 800; }
.gauges { display: grid; gap: 4px; } .gauge { display: grid; grid-template-columns: 120px auto; grid-template-areas: "svg b" "svg s" "svg e"; align-items: center; column-gap: 14px; padding: 6px 0; border-bottom: 1px solid #1c1c21; }
.gauge:last-child { border-bottom: 0; } .gauge svg { grid-area: svg; width: 120px; } .gauge b { grid-area: b; font: 400 40px/1 var(--num); letter-spacing: .02em; align-self: end; } .gauge span { grid-area: s; font-weight: 700; font-size: 13px; } .gauge em { grid-area: e; font-style: normal; color: #8f8978; font-size: 12px; align-self: start; }
.donutwrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; } .dring { position: relative; width: 190px; height: 190px; } .dring svg { width: 190px; height: 190px; } .dring .ring-num b { color: #fff; }
.dleg { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; min-width: 190px; flex: 1; } .dleg li { display: grid; grid-template-columns: 14px 1fr auto 46px; gap: 10px; align-items: center; font-size: 13.5px; } .dleg i { width: 12px; height: 12px; border-radius: 4px; } .dleg b { font: 400 20px var(--num); letter-spacing: .03em; } .dleg em { font-style: normal; color: #8f8978; text-align: right; font-size: 12px; }
.hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .hlist li { display: grid; grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto; gap: 14px; align-items: center; animation: rise .5s both; } .hlist .hl { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb { height: 14px; border-radius: 7px; background: #1c1c21; position: relative; overflow: hidden; } .hb i { display: block; height: 100%; border-radius: 7px; box-shadow: 0 0 14px rgba(229, 57, 29, .45); animation: sweepbar 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; } .hlist b { font: 400 20px var(--num); letter-spacing: .03em; }
.cohort li { grid-template-columns: 70px minmax(0, 1fr) 60px 56px; } .hb.tall { height: 22px; border-radius: 6px; } .hb.tall i { position: absolute; left: 0; top: 0; } .hb.tall .all { background: #2c2c33; box-shadow: none; } .hb.tall .act { background: linear-gradient(90deg, #1b9e6a, #3ddc97); box-shadow: 0 0 14px rgba(61, 220, 151, .5); } .cohort em { font: 400 20px var(--num); font-style: normal; text-align: right; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .funnel li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; gap: 14px; align-items: center; animation: rise .5s both; font-size: 13.5px; font-weight: 600; } .fb { height: 30px; background: #17171b; border-radius: 8px; overflow: hidden; } .fb i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, #111), var(--c)); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 55%, transparent); border-radius: 8px; transform-origin: left; animation: sweepbar 1.1s cubic-bezier(.2, .8, .2, 1) both; } .funnel b { font: 400 24px var(--num); text-align: right; }
.stiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .stile { padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #121215), #0f0f12); border: 1px solid color-mix(in srgb, var(--c) 40%, #1d1d22); display: grid; gap: 4px; } .stile span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #a9a392; } .stile b { font: 400 48px/1 var(--num); color: var(--c); text-shadow: 0 0 30px color-mix(in srgb, var(--c) 45%, transparent); } .stile em { font-style: normal; color: #8f8978; font-size: 12.5px; }
.hrow.slim { min-width: 0; } .hrow.slim .hc { height: 24px; border-radius: 6px; } .hrow.slim .hdays span { height: 24px; }
@media (max-width: 1180px) { .grid2.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .funnel li { grid-template-columns: 110px minmax(0, 1fr) 52px; } .hlist li { grid-template-columns: 90px minmax(0, 1fr) auto; } .stiles { grid-template-columns: minmax(0, 1fr); } .gauge { grid-template-columns: 96px auto; } .gauge svg { width: 96px; } }

/* ---------- mål, insikter, rekord ---------- */
.goalnum { display: flex; align-items: baseline; gap: 12px; } .goalnum b { font: 400 84px/1 var(--num); color: #fff; text-shadow: 0 0 40px rgba(61, 220, 151, .45); } .goalnum span { font: 400 40px var(--num); color: #6e6a5d; }
.goalnum input { width: 150px; font: 400 64px/1 var(--num); letter-spacing: .02em; color: var(--gold, #ffc247); background: transparent; border: 0; border-bottom: 2px dashed rgba(255, 194, 71, .5); padding: 0 4px; } .goalnum input:focus { outline: none; border-bottom-style: solid; }
.goalbar { position: relative; height: 22px; border-radius: 11px; background: #1b1b20; margin: 16px 0 14px; overflow: hidden; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); } .goalbar i { display: block; height: 100%; border-radius: 11px; background: linear-gradient(90deg, #1b9e6a, #3ddc97 70%, #b6ffe0); box-shadow: 0 0 24px rgba(61, 220, 151, .7); transform-origin: left; animation: sweepbar 1.4s cubic-bezier(.2, .8, .2, 1) both .3s; } .goalbar span { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .5); }
.goaleta { font-size: 15px; color: #cfc8b4; line-height: 1.5; }
.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .insights li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, #111114), #101013 70%); border: 1px solid color-mix(in srgb, var(--c) 30%, #1d1d22); font-size: 14px; line-height: 1.45; animation: rise .5s both; } .insights li b { color: #fff; }
.insights .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, #121215); border: 1px solid color-mix(in srgb, var(--c) 45%, #1d1d22); } .insights .ic svg { width: 20px; height: 20px; }
.records { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .rec { position: relative; padding: 16px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 16%, #121215), #0e0e11); border: 1px solid color-mix(in srgb, var(--c) 40%, #1d1d22); display: grid; gap: 4px; overflow: hidden; }
.rec svg { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; color: var(--c); opacity: .85; filter: drop-shadow(0 0 10px var(--c)); } .rec span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #a9a392; padding-right: 40px; } .rec b { font: 400 42px/1 var(--num); letter-spacing: .02em; color: var(--c); text-shadow: 0 0 26px color-mix(in srgb, var(--c) 50%, transparent); } .rec em { font-style: normal; color: #8f8978; font-size: 12.5px; }

/* ---------- logotyp-växlare ---------- */
.logo-toggle { position: absolute; right: 16px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .18); color: #d9d2bf; font: 700 11.5px var(--f); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.logo-toggle:hover { border-color: var(--red-hot); color: #fff; } .logo-toggle svg { width: 16px; height: 16px; }
.hero.flip { flex-direction: row-reverse; } .hero.flip .logo-toggle { right: auto; left: 16px; }
@media (max-width: 820px) { .hero.flip { flex-direction: column; } .hero.flip .hero-mark { right: auto; left: 12px; } .hero.flip .hero-txt { padding-top: 70px; } .logo-toggle { right: 12px; bottom: 10px; } .hero.flip .logo-toggle { left: auto; right: 12px; } }

/* ---------- aktivitet ---------- */
.act2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.actbig b { font: 400 88px/1 var(--num); color: #fff; letter-spacing: .01em; text-shadow: 0 0 40px rgba(255, 255, 255, .15); } .actbig span { display: block; color: #a9a392; margin: 4px 0 10px; } .pill { font-style: normal; display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, #141417); border: 1px solid color-mix(in srgb, var(--c) 45%, #1d1d22); }
.abars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; align-items: end; } .abar { display: grid; gap: 6px; justify-items: center; text-align: center; } .abar b { font: 400 20px var(--num); height: 22px; color: #e9e3cf; } .abar span { font: 700 12px var(--f); color: #8c8778; } .abar.today span { color: #fff; }
.astack { width: 100%; max-width: 46px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 8px; overflow: hidden; background: #17171b; } .astack i { display: block; width: 100%; } .astack .bl { background: linear-gradient(180deg, #ffb44d, #e07c10); } .astack .ex { background: linear-gradient(180deg, #b79cff, #7a56e0); } .abar.today .astack { box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(255, 180, 77, .5); } .abar.fut { opacity: .35; }
.alegend { display: flex; gap: 16px; font-size: 12px; color: #b9b3a2; margin-bottom: 8px; } .alegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.mile { margin-top: 18px; } .mt { font: 700 12px var(--f); letter-spacing: .14em; color: #a9a392; } .mbar { height: 12px; border-radius: 6px; background: #1b1b20; margin: 8px 0 6px; overflow: hidden; } .mbar i { display: block; height: 100%; background: linear-gradient(90deg, #7a56e0, #3ad0ff); box-shadow: 0 0 18px rgba(90, 162, 255, .6); border-radius: 6px; transform-origin: left; animation: sweepbar 1.3s cubic-bezier(.2, .8, .2, 1) both; } .ms { color: #8f8978; font-size: 13px; }
.atiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .at { padding: 14px 16px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 13%, #121215), #0e0e11); border: 1px solid color-mix(in srgb, var(--c) 32%, #1d1d22); display: grid; gap: 3px; } .at b { font: 400 40px/1 var(--num); letter-spacing: .02em; color: var(--c); text-shadow: 0 0 24px color-mix(in srgb, var(--c) 45%, transparent); } .at b small { font-size: 22px; color: #8c8778; text-shadow: none; } .at span { font-size: 13px; color: #d4cdb9; line-height: 1.35; } .at em { font-style: normal; color: #8f8978; font-size: 12px; }
.alists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; } .alist h3 { margin: 0 0 8px; font: 700 12px var(--f); letter-spacing: .14em; text-transform: uppercase; color: #a9a392; } .alist > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1c1c21; align-items: baseline; } .alist span { font-weight: 600; } .alist b { font: 400 20px var(--num); letter-spacing: .03em; } .alist em { font-style: normal; color: #8f8978; font-size: 12px; }
@media (max-width: 1180px) { .act2 { grid-template-columns: minmax(0, 1fr); } }

/* logotyp vänster: all info går ut till högerkanten och jobbar sig inåt mot mitten (spegelbild av logotyp höger) */
@media (min-width: 821px) {
  .hero.flip .hero-txt { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
  .hero.flip .hero-p { margin-left: auto; }
  .hero.flip .chips2, .hero.flip .hero-cta { justify-content: flex-end; }
  .hero.flip .hero-h { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; }
  .hero.flip .hero-h small { margin: 0 0 0 14px; order: 2; }
}

/* ---------- träningsrytm: tydligare ---------- */
.hdays span { width: 34px; justify-content: start; font: 700 11.5px var(--f); color: #8c8778; }
.hrow.slim .hc { height: 36px; border-radius: 8px; } .hrow.slim .hdays span { height: 36px; display: grid; place-content: center start; }
.hrow.slim .hc b { font: 400 14px var(--num); letter-spacing: .03em; color: #fff; }
.hrow .hc.h1 b { color: #e7b8ac; } .hrow .hc.h0 b { color: #6e6a5d; }
.hrow .hw { font-weight: 700; }
.hc.best { outline: 2px solid #ffc247; outline-offset: 1px; box-shadow: 0 0 20px rgba(255, 194, 71, .65); }
.heatleg { gap: 8px; align-items: center; flex-wrap: wrap; } .heatleg .lgt, .heatleg span { font-size: 12px; color: #b9b3a2; } .heatleg i { width: 18px; height: 18px; border-radius: 5px; margin: 0 2px 0 8px; }
.heatfacts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #1c1c21; font-size: 13px; color: #b9b3a2; } .heatfacts b { color: #fff; }

/* logotyp: mörk platta bakom så att den röda ramen inte försvinner mot hero-glöden */
.hero-mark { padding: 20px 30px; background: radial-gradient(120% 140% at 50% 0%, #121214, #050506); border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; box-sizing: content-box; filter: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 22px 60px rgba(0, 0, 0, .75), 0 0 70px rgba(229, 57, 29, .28); height: clamp(70px, 11vw, 140px); }
@media (max-width: 820px) { .hero-mark { padding: 10px 16px; height: 58px; } }

/* ny logotyp (egen svart bakgrund och röd ram): ingen extra platta */
.hero-mark { padding: 0; background: none; border: 0; border-radius: 10px; box-sizing: border-box; height: clamp(80px, 12.5vw, 150px); width: auto; box-shadow: 0 22px 60px rgba(0, 0, 0, .7), 0 0 80px rgba(229, 57, 29, .35); }
@media (max-width: 820px) { .hero-mark { padding: 0; height: 56px; } }


/* ================= FOUNDER COMMAND CENTER ================= */
body.founder .dmain { max-width: 1560px; gap: 26px; }
.hero-note { margin: 10px 0 0; font-size: 12.5px; color: #9a9484; }
.fnav { position: sticky; top: 57px; z-index: 20; display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px; background: rgba(12, 12, 14, .88); border: 1px solid #25252b; backdrop-filter: blur(8px); }
.fnav a { padding: 6px 12px; border-radius: 8px; font: 700 12.5px var(--f); letter-spacing: .06em; text-transform: uppercase; color: #a9a392; text-decoration: none; } .fnav a:hover { color: #fff; background: var(--red-dim); }
.fsec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 120px; }
.fhead { display: flex; gap: 18px; align-items: flex-start; padding: 6px 4px 2px; border-bottom: 1px solid #1f1f25; padding-bottom: 14px; }
.fnum { font: 400 64px/.9 var(--num); color: var(--c, var(--red-hot)); text-shadow: 0 0 30px color-mix(in srgb, var(--c, var(--red-hot)) 50%, transparent); min-width: 78px; }
.fhead h2 { margin: 0; font: 400 36px/1 var(--num); letter-spacing: .06em; text-transform: uppercase; color: #f3ecd8; }
.fdef { margin: 8px 0 0; max-width: 980px; color: #a9a392; font-size: 13.5px; line-height: 1.5; } .fdef b { color: #e9e3cf; }
.ftiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .ftiles.slim { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ftile { position: relative; padding: 16px 18px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 14%, #131316), #0e0e11); border: 1px solid color-mix(in srgb, var(--c) 34%, #1d1d22); display: grid; gap: 5px; align-content: start; animation: rise .5s both; }
.ftile::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); box-shadow: 0 0 14px var(--c); }
.ftile .fl { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: #a9a392; }
.ftile b { font: 400 46px/1 var(--num); letter-spacing: .02em; color: var(--c); text-shadow: 0 0 26px color-mix(in srgb, var(--c) 45%, transparent); } .ftile b small { font-size: 22px; color: #8c8778; text-shadow: none; margin-left: 2px; } .ftile em { font-style: normal; color: #9a9484; font-size: 12.5px; line-height: 1.4; }
.nchip { display: inline-block; justify-self: start; padding: 2px 9px; border-radius: 999px; font: 700 11px var(--f); letter-spacing: .04em; color: #ffd27a; background: rgba(255, 194, 71, .10); border: 1px solid rgba(255, 194, 71, .4); }
.signals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sig { position: relative; padding: 18px 18px 16px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 15%, #131316), #0d0d10); border: 1px solid color-mix(in srgb, var(--c) 38%, #1d1d22); display: grid; gap: 8px; animation: rise .6s both; overflow: hidden; }
.sig::after { content: ""; position: absolute; right: -20%; top: -40%; width: 80%; height: 140%; background: radial-gradient(closest-side, var(--c), transparent); opacity: .10; pointer-events: none; }
.sig .sn { font: 700 11.5px var(--f); letter-spacing: .13em; color: #a9a392; } .sig .sr { display: flex; align-items: baseline; gap: 10px; } .sig .sr i { font: 400 54px/1 var(--num); font-style: normal; text-shadow: 0 0 24px currentColor; } .sig .sr b { font: 400 40px/1 var(--num); color: #fff; letter-spacing: .02em; } .sig em { font-style: normal; font-size: 12.5px; color: #9a9484; line-height: 1.4; }
.finsights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.finsights li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 14px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 13%, #111114), #101013 70%); border: 1px solid color-mix(in srgb, var(--c) 30%, #1d1d22); font-size: 14px; line-height: 1.45; } .finsights li b { color: #fff; }
.finsights .tg { font: 700 11px var(--f); letter-spacing: .14em; color: var(--c); }
.rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .rpair { display: grid; gap: 10px; } .rpair .rh { font: 400 20px var(--num); letter-spacing: .08em; color: #e9e3cf; text-transform: uppercase; }
.rpair .ftile b { font-size: 38px; }
.cowrap { overflow-x: auto; } .cotab { width: 100%; border-collapse: separate; border-spacing: 6px; min-width: 640px; } .cotab th { font: 700 11.5px var(--f); letter-spacing: .12em; text-transform: uppercase; color: #8c8778; text-align: left; padding: 4px 8px; } .cotab td { padding: 0; height: 40px; position: relative; border-radius: 8px; background: #17171b; overflow: hidden; font-size: 13px; } .cotab td:first-child, .cotab td:nth-child(2) { background: none; padding: 0 8px; font-weight: 700; }
.cotab td i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 40%, #17171b); border-right: 2px solid var(--c); } .cotab td span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 10px; font-weight: 800; color: #fff; } .cotab td span em { font-style: normal; font-weight: 500; color: #cfc8b4; margin-left: 6px; font-size: 11.5px; } .cotab td.na { color: #5d5a50; padding: 0 10px; display: table-cell; vertical-align: middle; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: 9px 0; border-bottom: 1px solid #1c1c21; align-items: baseline; } .plist span { font-weight: 600; } .plist em { font-style: normal; color: #9a9484; font-size: 12.5px; } .plist b { font: 700 12px var(--f); color: var(--orange, #f5a524); }
.srcbox { display: grid; gap: 12px; } .srcbar { height: 22px; border-radius: 11px; background: #1b1b20; overflow: hidden; } .srcbar i { display: block; height: 100%; background: repeating-linear-gradient(135deg, #3a3a42 0 10px, #2a2a31 10px 20px); } .srcbox > b { font: 400 26px var(--num); letter-spacing: .04em; } .srcbox p { margin: 0; color: #b9b3a2; font-size: 13.5px; line-height: 1.5; } .srcbox .need { padding: 12px 14px; border-radius: 12px; background: rgba(245, 165, 36, .08); border: 1px solid rgba(245, 165, 36, .35); }
.nodata .gaps { margin: 0; padding-left: 18px; display: grid; gap: 9px; color: #b9b3a2; font-size: 13.5px; line-height: 1.45; } .nodata .gaps b { color: #fff; }
.defs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 24px; margin: 0; } .defs dt { padding: 12px 0; border-bottom: 1px solid #1c1c21; font-weight: 800; color: #f3ecd8; } .defs dd { margin: 0; padding: 12px 0; border-bottom: 1px solid #1c1c21; color: #b9b3a2; font-size: 13.5px; line-height: 1.5; }
.seg button { cursor: pointer; }
@media (max-width: 1180px) { .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fnav { top: 0; position: static; } }
@media (max-width: 820px) { .signals, .rgrid { grid-template-columns: minmax(0, 1fr); } .defs { grid-template-columns: minmax(0, 1fr); } .defs dt { border-bottom: 0; padding-bottom: 0; } .finsights li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .fnum { font-size: 44px; min-width: 52px; } .fhead h2 { font-size: 28px; } }


/* ================= PT: Idag, action först ================= */
.secttl { margin: 10px 4px -4px; font: 400 30px/1 var(--num); letter-spacing: .08em; text-transform: uppercase; color: #f3ecd8; display: flex; align-items: center; gap: 14px; }
.secttl::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #34343b, transparent); }
.defnote { margin: 10px 2px 0; font-size: 12.5px; color: #8f8978; line-height: 1.45; }
.attn { border-color: rgba(229, 57, 29, .45); background: linear-gradient(180deg, #181112, #0f0d0e); box-shadow: 0 20px 60px rgba(229, 57, 29, .14), 0 10px 34px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05); padding: 24px 26px 26px; }
.attn .dc-h h2 { font-size: 34px; }
.attn .tasklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.attn .task { margin: 0; padding: 16px 16px 16px 0; min-height: 76px; } .attn .task .who { font-size: 16.5px; } .attn .task .why { font-size: 14px; } .attn .task .go { padding: 12px 20px; font-size: 13.5px; min-height: 44px; display: inline-flex; align-items: center; }
.feed.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) { .attn .tasklist { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .attn { padding: 18px 16px 20px; } .attn .dc-h h2 { font-size: 28px; } .attn .task { grid-template-columns: 5px 46px minmax(0, 1fr) auto; } .attn .task .go { grid-column: auto; margin-top: 0; } .secttl { font-size: 24px; } }
@media (max-width: 620px) { .attn .task { grid-template-columns: 5px 40px minmax(0, 1fr); } .attn .task .go { grid-column: 3; justify-self: start; margin-top: 6px; } }

.gatebox { padding: 18px 20px; border-radius: 12px; border: 1px dashed #4a4a52; background: rgba(255, 255, 255, .02); color: #b9b3a2; font-size: 13.5px; line-height: 1.5; } .gatebox b { color: #ffd27a; display: block; margin-bottom: 4px; } .gatebox p { margin: 0; }

/* Founder: tät översikt (allt syns utan att klicka runt) */
body.founder .fnav { display: none; }
body.founder .dmain { max-width: none; padding: 10px 16px 40px; gap: 12px; }
body.founder .hero { min-height: 0; padding: 12px 22px; gap: 16px; border-radius: 14px; }
body.founder .hero-live { margin-bottom: 4px; padding: 3px 10px; font-size: 10.5px; }
body.founder .hero .eyebrow { font-size: 11px; }
body.founder .hero-h { font-size: clamp(44px, 5vw, 64px); margin: 2px 0 2px; }
body.founder .hero-p { font-size: 13px; max-width: none; } body.founder .hero-note { margin: 4px 0 0; font-size: 11.5px; }
body.founder .hero-mark { height: clamp(48px, 6vw, 70px); }
body.founder .fsec { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; align-items: start; }
body.founder .fsec > .fhead, body.founder .fsec > .ftiles, body.founder .fsec > .signals, body.founder .fsec > .rgrid, body.founder .fsec > .dc:has(.cowrap), body.founder .fsec > .defs { grid-column: 1 / -1; }
body.founder .fsec > .grid2 { display: contents; }
body.founder .fhead { gap: 10px; padding: 2px 2px 6px; align-items: baseline; }
body.founder .fnum { font-size: 26px; min-width: 34px; }
body.founder .fhead h2 { font-size: 20px; flex: none; }
body.founder .fhead > div { display: flex; gap: 14px; align-items: baseline; min-width: 0; }
body.founder .fdef { margin: 0; font-size: 11px; line-height: 1.35; max-width: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } body.founder .fdef:hover { -webkit-line-clamp: unset; }
body.founder .dc { padding: 10px 12px 12px; border-radius: 12px; } body.founder .dc::before { left: 12px; width: 30px; height: 2px; }
body.founder .dc-h { margin-bottom: 6px; gap: 8px; } body.founder .dc h2 { font-size: 15px; } body.founder .dc-sub { font-size: 10.5px; margin-top: 2px; line-height: 1.3; }
body.founder .actchart svg { max-height: 150px; } body.founder .actchart text { font-size: 15px; }
body.founder .ftiles, body.founder .ftiles.slim { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
body.founder .ftile { padding: 8px 10px 8px 12px; gap: 2px; border-radius: 10px; } body.founder .ftile b { font-size: 28px; } body.founder .ftile b small { font-size: 14px; } body.founder .ftile .fl { font-size: 10px; } body.founder .ftile em { font-size: 10.5px; line-height: 1.25; }
body.founder .signals { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } body.founder .sig { padding: 9px 12px; gap: 3px; border-radius: 12px; } body.founder .sig .sr i { font-size: 30px; } body.founder .sig .sr b { font-size: 26px; } body.founder .sig em { font-size: 10.5px; }
body.founder .finsights { gap: 5px; } body.founder .finsights li { padding: 6px 10px; font-size: 12px; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
body.founder .rgrid { gap: 8px; } body.founder .rpair { gap: 6px; } body.founder .rpair .rh { font-size: 14px; } body.founder .rpair .ftile b { font-size: 24px; }
body.founder .dring, body.founder .dring svg { width: 110px; height: 110px; } body.founder .donutwrap { gap: 10px; }
body.founder .gauge svg { width: 80px; } body.founder .gauge { grid-template-columns: 80px auto; }
body.founder .hlist { gap: 6px; } body.founder .hb { height: 9px; } body.founder .hlist li { gap: 8px; font-size: 12px; }
body.founder .plist li { padding: 5px 0; font-size: 12px; } body.founder .cotab td { height: 28px; } body.founder .cotab { min-width: 0; border-spacing: 4px; }
body.founder .hrow.slim .hc, body.founder .hrow.slim .hdays span { height: 22px; } body.founder .hrow.slim .hc b { font-size: 11px; }
body.founder .gatebox { padding: 8px 10px; } body.founder .gatebox p { font-size: 11px; margin: 2px 0 0; }
body.founder .nodata .gaps, body.founder .srcbox p { font-size: 11.5px; gap: 5px; }
body.founder .defs { grid-template-columns: 160px minmax(0, 1fr); } body.founder .defs dt, body.founder .defs dd { padding: 5px 0; font-size: 11.5px; }
@media (max-width: 820px) { body.founder .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.founder .fhead > div { display: block; } }
body.founder .fsec { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-auto-flow: dense; align-items: stretch; }
body.founder .fsec > .dc:has(.finsights) { grid-column: 1 / -1; } body.founder .finsights { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
body.founder .fsec > .dc:has(.cotab) { grid-column: span 2; }
body.founder .defs { grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr); } body.founder .defs dt, body.founder .defs dd { border-bottom: 1px solid #1c1c21; }
body.founder .actchart svg { max-height: 130px; } body.founder .ftile b { font-size: 24px; }
body.founder .fsec > .dc:has(.rgrid), body.founder .fsec > .rgrid { grid-column: 1 / -1; }

/* Founder: kundtabell + hopfälld definitionslista */
[hidden] { display: none !important; }
body.founder .fsec > .dc:has(.ctab), body.founder .fsec > .dc:has(.cchips) { grid-column: 1 / -1; }
.cchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .cchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 999px; font: 700 11.5px var(--f); letter-spacing: .05em; text-transform: uppercase; color: #cfc8b4; background: color-mix(in srgb, var(--c) 12%, #121215); border: 1px solid color-mix(in srgb, var(--c) 40%, #1d1d22); } .cchip b { font: 400 18px var(--num); color: var(--c); }
.cwrap { overflow-x: auto; } .ctab { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ctab th { text-align: left; font: 700 10px var(--f); letter-spacing: .12em; text-transform: uppercase; color: #8c8778; padding: 4px 8px; border-bottom: 1px solid #25252b; white-space: nowrap; }
.ctab td { padding: 3px 8px; border-bottom: 1px solid #1a1a1f; white-space: nowrap; color: #b9b3a2; } .ctab tr:hover td { background: rgba(255, 255, 255, .03); } .ctab .cn { font-weight: 700; color: #f3ecd8; } .ctab .cb { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.stchip { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 700 10.5px var(--f); letter-spacing: .04em; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #121215); border: 1px solid color-mix(in srgb, var(--c) 45%, #1d1d22); } .spk { width: 48px; height: 18px; display: block; }
.fdefs > summary { cursor: pointer; padding: 8px 4px; font: 700 12px var(--f); letter-spacing: .1em; text-transform: uppercase; color: #8c8778; } .fdefs[open] > summary { color: #e9e3cf; } body.founder .fsec.fdefs { display: block; }

body.founder .fsec > .dc.nwide { grid-column: span 2; } .mlp { margin: 8px 0 0; font-size: 12px; color: #b9b3a2; } .cwarn { color: #f5a524; }

/* Founder: överblickslayout som i tränardashboarden (tydliga nivåer, större text) */
body.founder .ptop { display: flex; flex-direction: column; gap: 14px; }
body.founder .ptop .ftiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
body.founder .ptop .ftile { padding: 14px 16px 14px 18px; gap: 4px; border-radius: 14px; } body.founder .ptop .ftile b { font-size: 38px; } body.founder .ptop .ftile .fl { font-size: 11.5px; } body.founder .ptop .ftile em { font-size: 12px; line-height: 1.3; }
body.founder .pgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
body.founder .ptop .dc { padding: 18px 20px 20px; } body.founder .ptop .dc h2 { font-size: 20px; } body.founder .ptop .dc-sub { font-size: 12px; }
body.founder .ptop .actchart svg { max-height: none; } body.founder .ptop .actchart text { font-size: 12px; }
body.founder .ptop h3 { margin: 18px 0 8px; font: 700 11px var(--f); letter-spacing: .14em; text-transform: uppercase; color: #8c8778; }
body.founder .pcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-top: 6px; }
body.founder .ptop .hlist { gap: 9px; } body.founder .ptop .hlist li { font-size: 14px; grid-template-columns: minmax(80px, 170px) minmax(0, 1fr) auto; } body.founder .ptop .hb { height: 11px; }
body.founder .abig b { font: 400 76px/1 var(--num); color: #fff; letter-spacing: .02em; } body.founder .abig span { display: block; color: #a9a392; font-size: 13px; margin-top: 2px; } body.founder .abig .chg { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--f); font-style: normal; background: rgba(255, 255, 255, .05); border: 1px solid #2a2a31; }
body.founder .ptop .ftiles.slim { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } body.founder .ptop .ftiles.slim .ftile b { font-size: 30px; }
body.founder .ptop .plist li { font-size: 13.5px; padding: 7px 0; }
body.founder .fdiv { font: 400 14px var(--num); letter-spacing: .3em; text-transform: uppercase; color: #8c8778; padding: 14px 4px 0; border-top: 1px solid #1f1f25; margin-top: 6px; }
@media (max-width: 1100px) { body.founder .pgrid { grid-template-columns: minmax(0, 1fr); } body.founder .pcols { grid-template-columns: minmax(0, 1fr); } }
body.founder .dc h2 { font-size: 17px; } body.founder .dc-sub { font-size: 11.5px; } body.founder .ftile em { font-size: 11.5px; } body.founder .ctab { font-size: 13.5px; } body.founder .ctab th { font-size: 11px; }

/* klickbara nyckeltal och filterchips */
body.founder [data-go] { cursor: pointer; transition: filter .15s, box-shadow .15s; } body.founder [data-go]:hover, body.founder [data-go]:focus-visible { filter: brightness(1.2); box-shadow: 0 0 0 1px var(--c), 0 10px 26px rgba(0, 0, 0, .45); outline: none; }
body.founder .cchip { cursor: pointer; font-family: inherit; transition: filter .15s; } body.founder .cchip:hover { filter: brightness(1.25); } body.founder .cchip.on { box-shadow: 0 0 0 2px var(--c); }
body.founder .cfil { margin-left: auto; align-self: center; font-size: 12.5px; color: #b9b3a2; } body.founder .cfil b { color: #fff; } body.founder .cfil button { margin-left: 8px; padding: 3px 10px; border-radius: 8px; border: 1px solid #3a3a42; background: #17171b; color: #e9e3cf; font: 700 11.5px var(--f); cursor: pointer; } body.founder .cfil button:hover { background: var(--red-dim); }

body.founder .cbtn { display: inline-block; padding: 2px 10px; border-radius: 8px; background: var(--red-dim); border: 1px solid #5a2118; color: #ffd9d0; font: 700 11.5px var(--f); text-decoration: none; white-space: nowrap; } body.founder .cbtn:hover { background: var(--red); color: #fff; }