/* FORSIDE C - TILLEGG OG LYS MODUS (Sverre 8.-9. okt, regel 23: alt skal fungere i lys og
   mørk). /forside/c.css er generert fra designfila og redigeres ikke for hånd; det
   designfila ikke har (lys modus, avgjørelser fra prompten) står her.

   LYS: designets variabler (--c-*) peker på forsidens tokens (public/forside/tokens.css,
   én kilde - regel 11). Fotoflatene (heroens bilde, #testimonials, #signup) har mørkt slør
   og hvit tekst i begge moduser og står derfor ikke her. */
[data-tema="lys"] .fc,
/* B-seksjonene (.bb: film, øktbyggeren, bento, sammenligningen, FAQ) setter de mørke verdiene
   på nytt i designfila - lys gjelder dem også. */
[data-tema="lys"] .fc .bb{
  color-scheme:light;
  --c-bg:var(--bg); --c-bg2:var(--surface);
  --c-kort:var(--a-card); --c-kort2:var(--a-card2); --c-kort3:var(--a-felt);
  --c-linje:rgb(var(--paper-rgb) / .10); --c-linje2:rgb(var(--paper-rgb) / .18);
  --c-ink:var(--paper); --c-tx:var(--a-ink3); --c-dim:#5C5C66; --c-dim2:var(--mute2);
  --c-bl-l:var(--blue);
  --flate:var(--a-card);
}
[data-tema="lys"] .fc .bb{--c-kort:var(--a-card2);--c-kort2:var(--a-felt)}

/* ── Synk-raden ──
   «Compatible with Strava» er den hvite varianten (aldri omfarget) - den står i en mørk
   brikke, så den synes på lys bunn også. Ikke større enn låsen i topplinja. */
:where(.fc) .strava-brikke{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;padding:8px 12px;border-radius:10px;
  background:#15151B;border:1px solid rgba(255,255,255,.08)}
:where(.fc) .strava-brikke .strava-merke{grid-column:auto;margin:0;opacity:1}
[data-tema="lys"] .fc .klokke{background:rgb(var(--paper-rgb) / .03)}

/* ── #problem i lys (bolk C). Designfila har hvite titler, mørkt glass og mørke «verktøy»-
   illustrasjoner hardkodet; her får de lyse utgaver med forsidens tokens. ── */
[data-tema="lys"] .fc #problem .vondt{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  border-color:rgb(var(--paper-rgb) / .12);box-shadow:0 18px 40px -24px rgba(20,20,30,.35),inset 0 1px 0 rgba(255,255,255,.8)}
[data-tema="lys"] .fc #problem .samle.inne .vondt{border-color:rgb(var(--paper-rgb) / .16)}
[data-tema="lys"] .fc #problem .vondt-vis{background:rgb(var(--paper-rgb) / .04);border-color:rgb(var(--paper-rgb) / .10)}
[data-tema="lys"] .fc #problem .vondt h3,
[data-tema="lys"] .fc #problem .vondt .losning b{color:var(--paper)}
[data-tema="lys"] .fc #problem .vondt .hva{color:var(--a-mut)}
[data-tema="lys"] .fc #problem .vondt .losning{background:rgba(40,168,110,.10);border-color:rgba(40,168,110,.34)}
[data-tema="lys"] .fc #problem .vondt .losning p{color:var(--a-ink3)}
[data-tema="lys"] .fc #problem .ark{background:var(--a-line);border-color:var(--a-line)}
[data-tema="lys"] .fc #problem .ark i{background:var(--a-card);color:var(--a-mut)}
[data-tema="lys"] .fc #problem .ark i.h{background:var(--a-card2);color:var(--a-ink3)}
[data-tema="lys"] .fc #problem .ark i.g{background:rgba(40,168,110,.16);color:#1E7A50}
[data-tema="lys"] .fc #problem .papir{background:repeating-linear-gradient(var(--a-card) 0 17px,var(--a-line) 17px 18px);color:var(--a-ink3)}
[data-tema="lys"] .fc #problem .papir span{color:#C2283F}
[data-tema="lys"] .fc #problem .ur circle:first-child{stroke:var(--a-line)}
[data-tema="lys"] .fc #problem .ur circle:nth-child(2){stroke:var(--a-mut)}
[data-tema="lys"] .fc #problem .ur text{fill:var(--a-mut)}
[data-tema="lys"] .fc #problem .ur text:first-of-type{fill:var(--a-ink3)}

/* ── #problem: gjennomstrekingen følger teksten linje for linje (Sverre 9. okt, mobil).
   Designets ::after-strek ligger over hele boksen og havner mellom linjene når tittelen
   brekker. Her er streken bakgrunnen til teksten, klonet per linje, og tegnes inn når
   kortene har samlet seg (.samle.inne), som før. ── */
:where(.fc) #problem .vondt h3::after{content:none}
:where(.fc) #problem .vondt h3 .gjennom{background:linear-gradient(var(--c-or),var(--c-or)) no-repeat 0 56% / 0 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s var(--c-ease) .15s}
:where(.fc) #problem .samle.inne .vondt h3 .gjennom{background-size:100% 2px}
@media (prefers-reduced-motion:reduce){:where(.fc) #problem .vondt h3 .gjennom{transition:none}}

/* ── #ski (bolk E): demoene ligger på foto og har mørke verdier i begge moduser, som heroens
   glasskort. Teksten og punktene rundt følger temaet. ── */
[data-tema="lys"] .fc #ski .demo-vis{color-scheme:dark;--c-ink:#F2F2F0;--c-tx:#B7B7C0;--c-dim:#8B8B95;--c-dim2:#5C5C66;
  --c-linje:rgba(255,255,255,.08);--c-linje2:rgba(255,255,255,.14);--c-kort:#121216;--c-bl-l:#4C93EC;color:#F2F2F0}

/* ── #bygger (bolk F) ── */
/* «Merk økta» som i appen (app/globals.css .sf17-chips / .sf17-chip): to linjer til venstre,
   Høyde og Varme stablet til høyre som ikon-knapper. Ikonet bærer fargen også når chipen er av. */
.fc #bygger .sf-chips{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:10px;margin-top:8px}
.fc #bygger .sf-venstre{min-width:0;display:flex;flex-direction:column;gap:6px}
.fc #bygger .sf-linje{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.fc #bygger .sf-forhold{margin-left:auto;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.fc #bygger .sf-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:999px;background:transparent;
  border:1px solid var(--c-linje2);color:var(--c-dim);font-family:var(--c-f-kond);font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;transition:color .15s,background-color .15s,border-color .15s}
.fc #bygger .sf-chip .ik{width:14px;height:14px;fill:var(--c);stroke:none;flex:none}
.fc #bygger .sf-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 13%,transparent);border-color:var(--c);color:var(--c)}
.fc #bygger .sf-chip.sf-ikon{width:44px;padding:0;justify-content:center}
.fc #bygger .sf-chip:focus-visible{outline:2px solid var(--c-or);outline-offset:2px}
/* «Lagre som mal»: nøytral og liten, en kantknapp - ikke fylt oransje (Sverre 9. okt). */
.fc #bygger .mal-rad{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.fc #bygger .mal-knapp{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:999px;background:transparent;
  border:1px solid var(--c-linje2);color:var(--c-tx);font-family:var(--c-f-kond);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:none}
.fc #bygger .mal-knapp:hover{border-color:var(--c-dim);color:var(--c-ink)}
.fc #bygger .mal-knapp .ik{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc #bygger #mal-hint{margin:0;font-size:13px;color:var(--c-dim)}
/* Grafen: aksen, gulvet, høyden og kortintervall-hullene følger temaet. */
.fc #bygger .graf-gulv{stroke:var(--c-linje2)}
.fc #bygger .graf-akse{fill:var(--c-dim)}
.fc #bygger .hoyde-flate{fill:rgb(var(--paper-rgb) / .08);stroke:rgb(var(--paper-rgb) / .35);stroke-width:1}
.fc #bygger .kort-av{fill:var(--c-bg);fill-opacity:.85}
.fc #bygger .lak-tall{fill:var(--c-ink)}


/* Øktbyggeren i lys: bryterne (av) og ikonene som var hardkodet mørke/lyse. */
[data-tema="lys"] .fc #bygger .skbr input:not(:checked)+i,[data-tema="lys"] .fc #bygger .mini-br input:not(:checked)+i{background:rgb(var(--paper-rgb) / .18)}
[data-tema="lys"] .fc #bygger .synkk .ik{color:var(--blue)}

/* ═══ #inni (bolk G): telefonen med appens EKTE lag. Designfilas tegnede bunnmeny og
   bildeholder (.tlf-nav, .tlf-bilder) er erstattet: hver skjerm (.skj) har innholdet som et
   høyt bilde (.skj-rull) som blar, og topplinja og bunnmenyen som egne, gjennomsiktige lag
   (.skj-lag) over det. Glasset i lagene blurer det som står bak: blur-flata er maskert med
   lagets eget bilde, så den følger pillene og ikke hele stripa. Lys/mørk: to bilder per lag. ═══ */
.fc .t-l{display:none}
[data-tema="lys"] .fc .t-m{display:none}
[data-tema="lys"] .fc .t-l{display:block}
.fc .tlf-skjermer{position:absolute;inset:44px 0 0;overflow:hidden;background:#0A0A0A}
.fc .skj{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.fc .skj.on{opacity:1}
.fc .skj-rull{position:absolute;left:0;right:0;top:0;will-change:transform}
.fc .skj-rull img,.fc .skj-lag img{width:100%;height:auto}
.fc .skj-lag{position:absolute;left:0;right:0;z-index:2}
.fc .skj-topp{top:0}
.fc .skj-bunn{bottom:0}
.fc .skj-lag img{position:relative}
.fc .skj-lag::before{content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
[data-tema="lys"] .fc .tlf-skjermer{background:#F5F5F5}
[data-tema="lys"] .fc .tlf-status{background:linear-gradient(#F5F5F5 70%,rgba(245,245,245,0));color:#0A0A0B}
[data-tema="lys"] .fc .tlf-status i b{border-color:rgba(10,10,11,.55)}
[data-tema="lys"] .fc .tlf-status i b::after{background:#0A0A0B}
/* Dagbokas periodestripe i appens belastningsfarge (medium = #D4A017, lib/periodization-overlay.ts). */
.fc .a-striper .s-m{flex:1;background:#D4A017;color:#1A1405}
.fc .a5.on .a-striper .s-m{animation:fc-aMal .55s cubic-bezier(.2,.7,.2,1) .1s forwards}
/* Keyframen bor her: c.css tar bare med designets .s-g/.s-r-regler, og uten den sto stripa klippet
   bort (Sverre 10. okt: «litt tom der»). */
@keyframes fc-aMal{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .fc .skj{transition:none}
  .fc .a5.on .a-striper .s-m{animation:none}
}
/* Uten JS: alle stegene står lesbare (dempingen er bare for aktivt steg). */
html:not(.js) .fc .steg{opacity:1}

/* ── Steg 01: årsplanen er TEGNET i telefonen (Sverre 9. okt: «eget design» som viser hva man
   gjør der), i appens stil (årsplan-miniatyren i SeasonCanvas) med Olas fiktive sesong. Topp-
   og bunnlaget er appens ekte. Mål i appens px (390 bred): --u = én app-px i telefonen.
   Når telefonen kommer i syne (.vist) maler penselen «Intensitet og form» over U43-U46. ── */
.fc .tlf-skjermer{container-type:inline-size}
.fc .ap{--u:calc(100cqi / 390);--ap-bg:#0A0A0A;--ap-kort:#141417;--ap-kort2:#1C1C21;--ap-linje:rgba(255,255,255,.08);--ap-ink:#F2F2EF;--ap-dim:#8E8E98;
  --ap-g:#D4A017;--ap-r:#E11D48;--ap-gr:#28A86E;
  background:var(--ap-bg);color:var(--ap-ink);padding:calc(78*var(--u)) calc(12*var(--u)) calc(180*var(--u));
  font-family:var(--c-f-kond);display:flex;flex-direction:column;gap:calc(12*var(--u))}
[data-tema="lys"] .fc .ap{--ap-bg:#F5F5F5;--ap-kort:#FFFFFF;--ap-kort2:#F0F0F2;--ap-linje:rgba(10,10,11,.10);--ap-ink:#0A0A0B;--ap-dim:#6B6B73}
.fc .ap svg{width:calc(13*var(--u));height:calc(13*var(--u));fill:currentColor;flex:none}
.fc .ap-tittel{display:flex;align-items:center;gap:calc(10*var(--u));font-family:var(--c-f-disp);font-size:calc(30*var(--u));line-height:1;letter-spacing:.02em;
  text-transform:uppercase;margin:calc(6*var(--u)) 0 calc(4*var(--u))}
.fc .ap-tittel i{width:calc(22*var(--u));height:calc(3*var(--u));border-radius:2px;background:#FF4500}
.fc .ap-kort{background:var(--ap-kort);border:1px solid var(--ap-linje);border-radius:calc(14*var(--u));padding:calc(12*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.fc .ap-lbl{font-weight:600;font-size:calc(11*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--ap-dim)}
.fc .ap-lbl b{color:var(--ap-ink);font-weight:700;letter-spacing:.06em}
.fc .ap-stor{font-family:var(--c-f-disp);font-weight:400;font-size:calc(28*var(--u));line-height:1}
.fc .ap-tall{display:flex;gap:calc(18*var(--u));font-size:calc(20*var(--u));font-weight:700}
.fc .ap-tall span{display:flex;flex-direction:column}
.fc .ap-tall em{font-style:normal;font-weight:600;font-size:calc(10*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--ap-dim)}
.fc .ap-formtopp{display:flex;align-items:center;flex-wrap:wrap;gap:calc(6*var(--u));font-size:calc(11*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--ap-dim)}
.fc .ap-formtopp svg{color:var(--ap-g)}
.fc .ap-formtopp b{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ap-g);border:1px solid var(--ap-g);border-radius:4px;padding:1px calc(6*var(--u))}
/* Miniatyren: periodebånd, 8 uker, volumsøyler, nøkkeldatoer og penselen. */
.fc .ap-band,.fc .ap-uker,.fc .ap-vol{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(3*var(--u))}
.fc .ap-band i{position:relative;font-style:normal;height:calc(17*var(--u));border-radius:4px;font-weight:700;font-size:calc(9.5*var(--u));letter-spacing:.08em;
  text-transform:uppercase;line-height:calc(15*var(--u));padding:0 calc(5*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .ap-band .g{background:color-mix(in srgb,var(--ap-g) 20%,transparent);border:1px solid color-mix(in srgb,var(--ap-g) 55%,transparent);color:var(--ap-g)}
.fc .ap-band .r{background:color-mix(in srgb,var(--ap-r) 20%,transparent);border:1px solid color-mix(in srgb,var(--ap-r) 55%,transparent);color:var(--ap-r)}
.fc .ap-uker span{position:relative;height:calc(30*var(--u));border-radius:6px;display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:calc(11*var(--u));letter-spacing:.04em;color:var(--ap-dim);background:var(--ap-kort2);border:1px solid var(--ap-linje);
  transition:background-color .35s,border-color .35s}
.fc .ap-uker .g{background:color-mix(in srgb,var(--ap-g) 18%,transparent);border-color:color-mix(in srgb,var(--ap-g) 55%,transparent)}
.fc .ap-uker .r,.fc .ap-uker .mal{background:color-mix(in srgb,var(--ap-r) 18%,transparent);border-color:color-mix(in srgb,var(--ap-r) 55%,transparent)}
.fc .ap-uker .idag{outline:2px solid #FF4500;outline-offset:1px;color:#FF4500;font-weight:700}
.fc .ap-uker .peak{box-shadow:0 0 8px rgba(212,160,23,.6)}
.fc .ap-vol{align-items:end;height:calc(40*var(--u))}
.fc .ap-vol i{height:var(--h);border-radius:3px 3px 0 0;border:1px dashed color-mix(in srgb,var(--ap-gr) 70%,transparent);border-bottom:0;transform-origin:bottom}
.fc .ap-vol i.ferdig{background:var(--ap-gr);border-style:solid;border-color:var(--ap-gr)}
.fc .ap-chips{display:flex;flex-wrap:wrap;gap:calc(5*var(--u))}
.fc .ap-chips b{display:inline-flex;align-items:center;gap:calc(4*var(--u));border:1px solid var(--ap-linje);border-radius:999px;padding:calc(3*var(--u)) calc(9*var(--u));
  background:var(--ap-kort2);font-weight:600;font-size:calc(11.5*var(--u));letter-spacing:.04em;color:var(--ap-ink)}
.fc .ap-pensel{display:flex;align-items:center;gap:calc(8*var(--u));font-size:calc(11*var(--u));color:var(--ap-dim);letter-spacing:.04em}
.fc .ap-pensel b{display:inline-flex;align-items:center;gap:calc(6*var(--u));border:1px solid var(--ap-linje);border-radius:999px;padding:calc(5*var(--u)) calc(11*var(--u));
  background:var(--ap-kort2);font-weight:700;font-size:calc(12*var(--u));letter-spacing:.06em;color:var(--ap-ink)}
.fc .ap-pensel b i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:2px;background:var(--ap-r)}
.fc .ap-mnd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(4*var(--u));height:calc(70*var(--u));align-items:end}
.fc .ap-mnd i{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:calc(3*var(--u));font-style:normal}
.fc .ap-mnd b{display:block;width:100%;height:var(--h);border-radius:3px 3px 0 0;background:color-mix(in srgb,#FF4500 70%,transparent);transform-origin:bottom}
.fc .ap-mnd em{font-style:normal;font-size:calc(10*var(--u));color:var(--ap-dim)}
/* Penselen: båndet males fra venstre, ukene farges etter hvert som prikken passerer, søylene vokser. */
.fc .ap-prikk{position:absolute;top:50%;left:100%;width:calc(12*var(--u));height:calc(12*var(--u));margin:calc(-6*var(--u)) 0 0 calc(-6*var(--u));border-radius:50%;
  background:var(--ap-r);box-shadow:0 0 0 3px color-mix(in srgb,var(--ap-r) 30%,transparent);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .js .fc .ap-males{clip-path:inset(0 100% 0 0)}
  .js .fc .ap-uker .mal{background:var(--ap-kort2);border-color:var(--ap-linje)}
  .js .fc .ap-vol i,.js .fc .ap-mnd b{transform:scaleY(0)}
  .js .fc .vist .skj.on .ap-males{animation:fc-apMal 1.5s cubic-bezier(.4,.1,.3,1) .35s forwards}
  .js .fc .vist .skj.on .ap-prikk{animation:fc-apPrikk 1.5s cubic-bezier(.4,.1,.3,1) .35s forwards}
  .js .fc .vist .skj.on .ap-uker .mal{animation:fc-apUke .3s ease var(--d) forwards}
  .js .fc .vist .skj.on .ap-vol i,.js .fc .vist .skj.on .ap-mnd b{animation:fc-apVoks .5s cubic-bezier(.2,.7,.2,1) var(--d) forwards}
}
@keyframes fc-apMal{to{clip-path:inset(0 0 0 0)}}
@keyframes fc-apPrikk{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fc-apUke{to{background:color-mix(in srgb,var(--ap-r) 18%,transparent);border-color:color-mix(in srgb,var(--ap-r) 55%,transparent)}}
@keyframes fc-apVoks{to{transform:scaleY(1)}}
/* Telefonrammen: i lys er designets mørke skygge en grå flate på sida - mykere der. Skjermen
   bak statuslinja følger temaet, og notchen skalerer med telefonen (på mobil er den smalere
   enn 320 px, og en fast 96 px notch dekket klokka). */
[data-tema="lys"] .fc .tlf{box-shadow:0 0 0 1px rgba(10,10,11,.10),0 30px 60px -28px rgba(10,10,11,.35)}
[data-tema="lys"] .fc .tlf-skjerm{background:#F5F5F5}
.fc .tlf-status::after{width:32%;margin-left:-16%}
@media (max-width:999px){
  .fc .tlf-feste .tlf-status{padding:0 9% 0 11%;font-size:11px}
  .fc .tlf-feste .tlf-status::after{top:8px;height:22px}
}
/* Glassboksene inni den klebrige mobiltelefonen: telefonen er ~220 px bred på en 390-skjerm,
   så boksene strammes inn (mindre tall, ingen sparkline, én linje per tekst). */
@media (max-width:999px){
  .fc .tlf-feste .tlf-callout.anim{padding:9px 11px;gap:9px;border-radius:14px}
  .fc .tlf-feste .anim .a-lbl{font-size:9.5px;letter-spacing:.12em}
  .fc .tlf-feste .anim b{font-size:13px}
  .fc .tlf-feste .anim .a-sub,.fc .tlf-feste .anim .a-pr,.fc .tlf-feste .anim .a-uke span{font-size:10.5px}
  .fc .tlf-feste .anim .a-lbl,.fc .tlf-feste .anim b,.fc .tlf-feste .anim .a-sub,.fc .tlf-feste .anim .a-pr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fc .tlf-feste .a-tid,.fc .tlf-feste .anim.a3 b{font-size:20px!important}
  .fc .tlf-feste .a-ring{width:34px!important;height:34px!important}
  .fc .tlf-feste .a-spark{display:none}
  .fc .tlf-feste .a-uke b{font-size:17px!important}
}

/* ═══ #ski strammet inn (Sverre 9. okt: «de kortene må ta mindre plass på mobil og pc»).
   Ingenting er fjernet: parallelltestens rangering kommer først når testen er kjørt (før det
   var den grå plassholdere - uten JS står den), og marger, overskrifter og punktlista er
   mindre. Da er panelene nesten like høye, og fotoet rundt skyte-demoen fyller bare litt. «Les mer» og «Alt om …» står på én linje. ═══ */
.fc #ski .ski-par .ski-panel{gap:14px;padding:clamp(16px,2vw,24px)}
.fc #ski .ski-par .ski-tekst h3{font-size:clamp(32px,2.9vw,46px)}
.fc #ski .ski-par .ski-tekst > p{margin-top:10px;font-size:15px;line-height:1.5}
.fc #ski .ski-par .demo-vis{padding:clamp(10px,1.4vw,16px)}
.js .fc #ski .rang:not(.vis){display:none}
.fc #ski .ski-punkter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.fc #ski .ski-punkter > .hake-liste,.fc #ski .ski-punkter > .flere[open]{flex-basis:100%}
.fc #ski .ski-punkter .hake-liste{margin-top:0}
.fc #ski .ski-punkter .hake-liste li{padding:9px 0;font-size:15px;line-height:1.4}
.fc #ski .ski-punkter .lenke-pil{margin-top:0}

/* #bygger på mobil: «Flere valg» (Sverre 9. okt). Antall, dragtid, pause, sone, skyting, grafen og
   Synk står; kortintervall, malene og «Merk økta» ligger bak knappen. Bare med JS (knappen er
   hidden uten), og bare under 640 px. */
.fc #bygger .flere-valg{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;border-radius:999px;
  border:1px solid var(--c-linje2);background:transparent;color:var(--c-ink);font-family:var(--c-f-kond);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.fc #bygger .flere-valg .ik{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .2s}
.fc #bygger .flere-valg[aria-expanded="true"] .ik{transform:rotate(45deg)}
.fc #bygger .flere-valg[hidden]{display:none}
@media (min-width:641px){ .fc #bygger .flere-valg{display:none} }
@media (max-width:640px){ .js .fc #bygger .mob-ekstra:not(.vis){display:none} }
@media (prefers-reduced-motion:reduce){ .fc #bygger .flere-valg .ik{transition:none} }

/* ═══ #inni: «Mobil | PC» (Sverre 9. okt). Samme fem steg; i PC-modus blir telefonen et
   nettleservindu med appens PC-skjermer (PC-linja som eget lag). Mobil er standard. Bryteren
   står under overskriften (på 360 er det ikke plass ved siden av den klebrige telefonen). ═══ */
.fc .vis-bryter{display:inline-flex;gap:2px;margin-top:22px;padding:3px;border-radius:999px;border:1px solid var(--c-linje2);background:var(--c-kort)}
.fc .vis-bryter[hidden]{display:none}
.fc .vis-bryter button{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--c-dim);
  font-family:var(--c-f-kond);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:background-color .15s,color .15s}
.fc .vis-bryter button[aria-pressed="true"]{background:var(--c-or);color:#fff}
.fc .vis-bryter button:focus-visible{outline:2px solid var(--c-or);outline-offset:2px}
.fc .pc-krom{display:none}
.fc .tlf-skjermer.pcs{display:none}
.fc .tlf.pc-modus{width:100%;max-width:660px;height:auto;aspect-ratio:1440/1040;border-radius:16px;padding:6px}
.fc .tlf.pc-modus .tlf-skjerm{border-radius:11px}
.fc .tlf.pc-modus .tlf-status,.fc .tlf.pc-modus .tlf-skjermer.mob{display:none}
.fc .tlf.pc-modus .tlf-skjermer.pcs{display:block;inset:26px 0 0}
.fc .tlf.pc-modus .pc-krom{display:flex;align-items:center;gap:6px;position:absolute;inset:0 0 auto;height:26px;padding:0 10px;
  background:#1A1B20;border-bottom:1px solid rgba(255,255,255,.08)}
.fc .tlf.pc-modus .pc-krom i{width:8px;height:8px;border-radius:50%;background:#E2584B}
.fc .tlf.pc-modus .pc-krom i:nth-child(2){background:#E8B93C}
.fc .tlf.pc-modus .pc-krom i:nth-child(3){background:#3FBF83}
.fc .tlf.pc-modus .pc-krom span{margin-left:10px;font:11px/1 var(--c-f-tekst);color:#8E8E98;background:#0F1013;border-radius:6px;padding:3px 10px}
[data-tema="lys"] .fc .tlf.pc-modus .pc-krom{background:#E9E9EC;border-bottom-color:rgba(10,10,11,.1)}
[data-tema="lys"] .fc .tlf.pc-modus .pc-krom span{background:#fff;color:#6B6B73}
@media (min-width:1000px){
  /* Vinduet midt i det klebrige feltet; glassboksen på vinduets venstre kant. */
  .fc .tlf-feste:has(.tlf.pc-modus){display:flex;flex-direction:column;justify-content:center}
  .fc .tlf.pc-modus .tlf-callout.anim{left:-40px;bottom:28px}
}
@media (max-width:999px){
  /* Mobil i PC-modus: vinduet er lite (~360 × 260), så glassboksen står UNDER vinduet i stedet
     for over innholdet, og det klebrige feltet får plass til den. */
  .fc .inni .tlf-feste:has(.tlf.pc-modus){height:auto!important;padding-bottom:104px}
  .fc .tlf-feste .tlf.pc-modus{height:auto;width:100%}
  .fc .tlf-feste .tlf.pc-modus .tlf-callout.anim{top:calc(100% + 10px);bottom:auto}
}

/* #hvorfor uten JS: alle 22 punktene står, og «Vis alle» (som trenger JS) er borte. */
html:not(.js) .fc .mer-rad[hidden]{display:table-row!important}
html:not(.js) .fc .vis-alle{display:none}

/* Lys modus, liten tekst i aksentfarger (kontrastkravet 4,5:1, målt 9. okt): gull og oransje er
   for lyse på lys bunn i små størrelser - mørkere toner av de samme fargene. Store overskrifter
   og flater beholder merkefargene. */
[data-tema="lys"] .fc .ins-nytt,[data-tema="lys"] .fc .ins-chips .kommer em,[data-tema="lys"] .fc .fk .tag{color:#7F5C00}
[data-tema="lys"] .fc .sml th.xp{color:#B83200}
/* «Der vi går dypest»: gull på mørkere glass, så den leses også over snø (kontrast målt 3,6 -> over 7). */
.fc .ik-hjem{background:rgba(10,10,11,.8)}
/* #trener i lys: avatarbokstavene og «sist»-fargene i mørkere toner (små tekster, 4,5:1). */
[data-tema="lys"] .fc .tropp .avatar{color:#1556A8}
[data-tema="lys"] .fc .tropp .sist.rod{color:#B4233A}
[data-tema="lys"] .fc .tropp .sist.gul{color:#7F5C00}

/* #features: Analyse-ruta strammet inn (Sverre 9. okt: «litt mindre uten å fjerne noe»). Ikonet og
   tittelen (og «Fiktive data») på én linje, lavere grafer (viewBox 520 × 64, teksten beholder
   størrelsen), tettere
   tallbokser, og «Og mye mer» + «Les mer» på samme linje. Rutene ved siden av deler høyden med
   Analyse (to rader), så de blir like mye lavere. */
.fc #features .an-hode{display:flex;align-items:center;gap:12px}
.fc #features .an-hode .ik{margin:0}
.fc #features .fk.analyse .an-hode h3{margin:0}
.fc #features .fk.analyse{gap:6px}
.fc #features .an-graf{margin-top:6px}
.fc #features .an-graf figcaption{margin-top:2px}
.fc #features .an-hode .an-fikt{margin:0 0 0 auto!important;align-self:center}
.fc #features .an-tall{margin-top:4px}
.fc #features .an-tall div{padding:6px 10px}
.fc #features .an-tall b{font-size:20px}
.fc #features .an-fot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:6px}
.fc #features .an-fot .an-mer{flex:1 1 260px;margin:0;font-size:13.5px}
.fc #features .an-fot .mer{margin:0}
/* Grafene side om side i Analyse-ruta (Sverre 9. okt), hver tegnet i 260 × 124 så aksene leses
   også i halv bredde. Under 560 px under hverandre. */
.fc #features .an-grafer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:4px}
.fc #features .an-grafer .an-graf{margin:0}
.fc #features .an-graf svg{max-height:none}
@media (max-width:560px){
  .fc #features .an-grafer{grid-template-columns:minmax(0,1fr);gap:10px}
  .fc #features .an-graf svg{max-height:118px}
  .fc #features .an-y text,.fc #features .an-x text{font-size:12px}
}

/* Lys modus: den oransje enden av gradienten i overskriftene (h2 em og de andre gradientordene) er
   #E63E00 i stedet for #FF4500, så den når minst 3:1 også på de tonede lyse flatene (målt 9. okt:
   #FF4500 2,75:1 mot #ECE4E4, #E63E00 3,32:1; mot hvitt 4,16:1). Mørk modus er urørt. */
[data-tema="lys"] .fc .h2 em,[data-tema="lys"] .fc .ski-tekst h3 em,[data-tema="lys"] .fc .ik-tekst h3 em,
[data-tema="lys"] .fc .omtale .stort em,[data-tema="lys"] .fc .steg h3 em{
  background-image:linear-gradient(100deg,#E63E00 0%,#C0455A 52%,#1A6FD4 100%)}

/* #priser står «som i dag» (prompten, bolk J) med sin gamle CSS, men inne i <main class="fc"> i
   C-rekkefølgen. Grunnstilen fra .fc (skrift, linjehøyde, farge, svg som blokk) nullstilles her
   til body-verdiene sida hadde, så seksjonen ser ut som før. */
.fc #priser{font:16px/1.6 'Inter',-apple-system,sans-serif;color:var(--paper)}
.fc #priser svg{display:inline-block}

/* Bunnteksten: låsen er appens C2-lås (data-xp-laas). Designets gamle .logo span-regel (gradient i
   PULSE, color:transparent) traff låsens spans og gjorde armene usynlige - låsereglene vinner:
   armene og PULSE i låsfargen (.xp-laas: hvit / #0A0A0B i lys), gradienten bare på diagonalen.
   Størrelsen som i designfila (34 px ikon). */
.fc .fot .logo .xp-laas,.fc .fot .logo .xp-laas span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;-webkit-text-fill-color:currentColor}
.fc .fot .logo .xp-laas{color:#FFFFFF;font-size:18px!important;gap:10px!important}
[data-tema="lys"] .fc .fot .logo .xp-laas{color:#0A0A0B}
.fc .fot .logo .xp-laas svg{width:34px;height:34px}

/* #signup: bildet er skiløperen i solnedgang på fjellet (Sverre 9. okt, i stedet for Lofoten).
   Løperen står lavt i bildet, så det står 50% 70% på alle bredder - designfilas CSS hadde
   46% !important over 900 px og 40% på mobil (laget for Lofoten-bildet). */
.fc #signup .slutt-kort > img{object-position:50% 70%!important}
/* PC: bildet dekker hele kortet (Sverre 10. okt: «bildet i hele bakgrunnen, ikke sånn sort del»),
   under designets mørke slør fra venstre. Løperen står midt i et stående bilde; bildet er 145 %
   bredt fra venstre kant, så løperen havner på ~72 % av kortet - til høyre for stegene. */
@media (min-width:900px){
  .fc #signup .slutt-kort > img{left:0!important;width:145%!important;object-position:50% 60%!important}
}
/* Smal PC (900-1180): løperen står nærmere teksten, så trener-lenka går under knappen i stedet
   for ved siden av (ellers ligger den over staven). */
@media (min-width:900px) and (max-width:1180px){
  .fc #signup .hero-cta{flex-direction:column;align-items:flex-start}
}
/* #signup-kortet er en fotoflate med mørkt slør i begge temaer (som heroens bildekort og #ski):
   i lys modus beholder det de mørke fargene - hvit tekst i stegene, lys blå trener-lenke
   (Sverre 10. okt: «teksten på kortene her må være hvit»). */
[data-tema="lys"] .fc #signup .slutt-kort{color-scheme:dark;--c-ink:#F2F2F0;--c-tx:#D2D2D8;--c-dim:#B7B7C0;--c-dim2:#8B8B95;
  --c-linje:rgba(255,255,255,.10);--c-linje2:rgba(255,255,255,.18);--c-bl-l:#6FA8FF;color:#F2F2F0}
/* #signup: stegene er glass-PILLER (pille-regelen, Sverre 10. okt: «la stilen være slik… og bruk
   den pill designet»). Tallsirkelen sitter konsentrisk i venstre ende; ellers samme glass og tekst.
   Tre i en rad ble 180 × 123 px - for smalt for en pille - så de står under hverandre i alle
   bredder (som på mobil), og løperen står fritt til høyre på PC. */
.fc #signup .tre-steg{grid-template-columns:1fr;max-width:440px}
.fc #signup .tre-steg li{border-radius:999px;padding:10px 24px 10px 10px}
/* #problem, regnearket i det vonde kortet: 10 px celletekst #6d6d77 på #141418 var 3,59:1
   (Lighthouse, sluttryddingen). #8B8B95 gir 5,4:1. Lys modus har egne farger over. */
.fc #problem .ark i:not(.h):not(.g){color:#8B8B95}
/* Den tegnede årsplanen: små tekster på fargede felt nådde ikke 4,5:1 (Lighthouse, sluttryddingen:
   rødt bånd 3,34, ukenumre på gull 4,17, «i dag» 3,93). Egne tekstfarger per tema; feltene er like. */
.fc .ap{--ap-r-tx:#FF8099;--ap-g-tx:#C8C8D0;--ap-idag:#FF7A45}
[data-tema="lys"] .fc .ap{--ap-r-tx:#B3123A;--ap-g-tx:#45454D;--ap-idag:#C23400}
.fc .ap-band .r{color:var(--ap-r-tx)}
.fc .ap-uker .g{color:var(--ap-g-tx)}
.fc .ap-uker .idag{color:var(--ap-idag)}
/* ── #inni: DE TEGNEDE SKJERMENE (Sverre 10. okt) - live styrke, helse og formkartet ──────────
   Skjermbildene viste for lite («nå ser man så lite der», «litt kjedelig»). Som årsplanen tegnes de
   i appens stil med Olas fiktive tall, generert av scripts/forside-c-tegnet.ts (fargene fra appens
   kilder). Appens ekte topp- og bunnlag ligger fortsatt over. Animasjonen spiller når steget blir
   aktivt; uten JS og med redusert bevegelse står sluttbildet (settet logget, rekorden, alle baner). */
.fc .tg{--u:calc(100cqi / 390);--tg-bg:#0A0A0A;--tg-kort:#141417;--tg-kort2:#1C1C21;--tg-linje:rgba(255,255,255,.09);--tg-ink:#F2F2EF;
  --tg-dim:#9A9AA4;--fm-ink:#F2F2EF;--tg-gull:#E0B341;--tg-blaa:#6FA8FF;
  background:var(--tg-bg);color:var(--tg-ink);padding:calc(78*var(--u)) calc(12*var(--u)) calc(180*var(--u));
  font-family:var(--c-f-kond);display:flex;flex-direction:column;gap:calc(12*var(--u))}
[data-tema="lys"] .fc .tg{--tg-bg:#F5F5F5;--tg-kort:#FFFFFF;--tg-kort2:#F0F0F2;--tg-linje:rgba(10,10,11,.11);--tg-ink:#0A0A0B;--tg-dim:#5E5E66;
  --fm-ink:#0A0A0B;--tg-gull:#8A6500;--tg-blaa:#1A6FD4}
.fc .tg-ls{padding-top:calc(200*var(--u));padding-bottom:calc(96*var(--u))}
.fc .tg-kort{background:var(--tg-kort);border:1px solid var(--tg-linje);border-radius:calc(14*var(--u));padding:calc(12*var(--u));display:flex;flex-direction:column;gap:calc(8*var(--u))}
.fc .tg-tittel{display:flex;align-items:center;gap:calc(10*var(--u));font-family:var(--c-f-disp);font-size:calc(26*var(--u));line-height:1;letter-spacing:.06em;text-transform:uppercase;margin-top:calc(4*var(--u))}
.fc .tg-tittel i{width:calc(22*var(--u));height:calc(3*var(--u));border-radius:2px;background:#FF4500}
.fc .tg-tittel small{font-family:var(--c-f-kond);font-weight:600;font-size:calc(11*var(--u));letter-spacing:.06em;text-transform:none;color:var(--tg-dim);margin-left:auto}
.fc .tg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6*var(--u))}
.fc .tg-chips b{font-weight:700;font-size:calc(11*var(--u));letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--tg-linje);border-radius:999px;
  padding:calc(6*var(--u)) calc(12*var(--u));color:var(--tg-dim)}
.fc .tg-chips b.on{background:#FF4500;border-color:#FF4500;color:#fff}
.fc .tg-lbl{font-weight:700;font-size:calc(11*var(--u));letter-spacing:.18em;text-transform:uppercase;color:var(--tg-dim)}
.fc .tg-sub{font-family:var(--c-f-tekst);font-size:calc(11*var(--u));color:var(--tg-dim);margin-top:calc(-6*var(--u))}
.fc .tg-leg{display:flex;flex-wrap:wrap;gap:calc(4*var(--u)) calc(10*var(--u));font-family:var(--c-f-tekst);font-size:calc(11*var(--u));color:var(--tg-dim)}
.fc .tg-leg span{display:inline-flex;align-items:center;gap:calc(5*var(--u))}
.fc .tg-leg i{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:2px}
.fc .tg-leg .strek i{height:calc(3*var(--u));width:calc(12*var(--u))}
/* Live styrke */
.fc .ls-ovelse{border-left:calc(3*var(--u)) solid #FF4500}
.fc .ls-hode{display:flex;align-items:center;gap:calc(10*var(--u))}
.fc .ls-nr{width:calc(24*var(--u));height:calc(24*var(--u));border-radius:50%;background:var(--tg-kort2);display:grid;place-items:center;font-weight:700;font-size:calc(11*var(--u));color:var(--tg-dim)}
.fc .ls-navn{display:flex;flex-direction:column}
.fc .ls-navn b{font-family:var(--c-f-disp);font-weight:400;font-size:calc(22*var(--u));letter-spacing:.04em;text-transform:uppercase;line-height:1}
.fc .ls-navn small{font-family:var(--c-f-tekst);font-size:calc(11*var(--u));color:var(--tg-dim)}
.fc .ls-mer{margin-left:auto;color:var(--tg-dim);letter-spacing:.1em}
.fc .ls-chips{display:flex;flex-wrap:wrap;gap:calc(6*var(--u))}
.fc .ls-chips span{border-radius:999px;padding:calc(4*var(--u)) calc(10*var(--u));font-weight:700;font-size:calc(11*var(--u));letter-spacing:.04em}
.fc .ls-best{border:1px solid color-mix(in srgb,#D4A017 60%,transparent);color:var(--tg-gull)}
.fc .ls-plan{border:1px solid color-mix(in srgb,#1A6FD4 60%,transparent);color:var(--tg-blaa)}
.fc .ls-rad{display:grid;grid-template-columns:calc(18*var(--u)) 1fr 1fr calc(34*var(--u)) calc(66*var(--u));align-items:center;gap:calc(6*var(--u));
  border-top:1px solid var(--tg-linje);padding-top:calc(8*var(--u))}
.fc .ls-rad>i{position:relative;font-style:normal;color:#28A86E;font-weight:700;font-size:calc(12*var(--u));text-align:center}
.fc .ls-rad b{position:relative;background:var(--tg-kort2);border:1px solid var(--tg-linje);border-radius:calc(10*var(--u));text-align:center;
  font-family:var(--c-f-disp);font-weight:400;font-size:calc(22*var(--u));padding:calc(5*var(--u)) 0;color:var(--tg-ink)}
.fc .ls-rad b em{position:absolute;right:calc(6*var(--u));bottom:calc(3*var(--u));font-style:normal;font-family:var(--c-f-kond);font-weight:700;font-size:calc(8*var(--u));color:var(--tg-gull)}
.fc .ls-rad span{grid-column:4;border:1px solid var(--tg-linje);border-radius:999px;text-align:center;font-weight:600;font-size:calc(11*var(--u));padding:calc(6*var(--u)) 0;color:var(--tg-dim)}
.fc .ls-rad .ls-ok,.fc .ls-rad .ls-start{grid-column:5;grid-row:1;padding:calc(8*var(--u)) 0}
.fc .ls-ok{background:rgba(40,168,110,.18);border-color:rgba(40,168,110,.5)!important;color:#28A86E!important;font-weight:700}
.fc .ls-start{background:#FF4500;border-color:#FF4500!important;color:#fff!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:0}
.fc .ls-rad>.ls-i{color:transparent}
.fc .ls-i::after{content:"✓";position:absolute;inset:0;color:#28A86E}
.fc .ls-sett-hode{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8*var(--u))}
.fc .ls-sett-hode b{font-family:var(--c-f-disp);font-weight:400;font-size:calc(20*var(--u));letter-spacing:.04em;text-transform:uppercase}
.fc .ls-sett-hode small{font-family:var(--c-f-tekst);font-size:calc(11*var(--u));color:var(--tg-dim)}
.fc .ls-steg{display:grid;grid-template-columns:calc(54*var(--u)) 1fr calc(54*var(--u));gap:calc(8*var(--u))}
.fc .ls-steg>*{background:var(--tg-kort2);border:1px solid var(--tg-linje);border-radius:calc(12*var(--u));display:grid;place-items:center;
  height:calc(54*var(--u));font-weight:600;font-size:calc(18*var(--u))}
.fc .ls-steg b{display:flex;align-items:baseline;justify-content:center;gap:calc(6*var(--u));font-family:var(--c-f-disp);font-weight:400;font-size:calc(34*var(--u))}
.fc .ls-steg b em{font-style:normal;font-family:var(--c-f-kond);font-weight:700;font-size:calc(12*var(--u));letter-spacing:.14em;color:var(--tg-dim);text-transform:uppercase}
.fc .ls-valg{display:flex;flex-wrap:wrap;gap:calc(6*var(--u))}
.fc .ls-valg span{border:1px solid var(--tg-linje);border-radius:999px;padding:calc(7*var(--u)) calc(12*var(--u));font-weight:700;font-size:calc(11*var(--u));letter-spacing:.12em;text-transform:uppercase}
.fc .ls-logg{background:#28A86E;color:#fff;border-radius:999px;text-align:center;padding:calc(14*var(--u));font-weight:700;font-size:calc(15*var(--u));letter-spacing:.16em;text-transform:uppercase}
.fc .ls-pr{display:flex;align-items:center;gap:calc(8*var(--u));border:1px solid color-mix(in srgb,#D4A017 55%,transparent);background:color-mix(in srgb,#D4A017 12%,transparent);
  border-radius:calc(14*var(--u));padding:calc(12*var(--u));font-family:var(--c-f-tekst);font-size:calc(13*var(--u))}
.fc .ls-pr span{color:var(--tg-gull);font-size:calc(18*var(--u))}
.fc .ls-pr b{font-family:var(--c-f-kond);color:var(--tg-gull);text-transform:uppercase;letter-spacing:.12em;font-size:calc(12*var(--u))}
/* Helse */
.fc .hs-ruter{display:grid;grid-template-columns:1fr 1fr;background:var(--tg-kort);border:1px solid var(--tg-linje);border-radius:calc(14*var(--u));overflow:hidden}
.fc .hs-ruter>div{padding:calc(12*var(--u));box-shadow:inset -1px -1px 0 var(--tg-linje);display:flex;flex-direction:column;gap:calc(3*var(--u))}
.fc .hs-ruter span{font-weight:700;font-size:calc(10.5*var(--u));letter-spacing:.18em;text-transform:uppercase;color:var(--tg-dim)}
.fc .hs-ruter b{display:flex;align-items:baseline;gap:calc(4*var(--u));font-family:var(--c-f-disp);font-weight:400;font-size:calc(40*var(--u));line-height:1}
.fc .hs-ruter b em{font-style:normal;font-size:calc(16*var(--u));color:var(--tg-dim);letter-spacing:.06em;text-transform:uppercase}
.fc .hs-ruter small{font-family:var(--c-f-tekst);font-size:calc(12*var(--u));color:var(--tg-dim)}
.fc .hs-bra{font-style:normal;color:#28A86E}
.fc .hs-sovn{display:block;width:100%;height:calc(124*var(--u));overflow:visible}
.fc .hs-sovn text{font-family:var(--c-f-tekst);font-size:8px;fill:var(--tg-dim)}
.fc .hs-sovn g{transform-box:fill-box;transform-origin:50% 100%}
.fc .hs-trender{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(6*var(--u))}
.fc .hs-trender>span{border:1px solid var(--tg-linje);border-radius:calc(10*var(--u));padding:calc(8*var(--u));display:flex;flex-direction:column;gap:calc(2*var(--u))}
.fc .hs-trender small{font-weight:700;font-size:calc(9.5*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--tg-dim)}
.fc .hs-trender b{font-weight:700;font-size:calc(14*var(--u))}
.fc .hs-spark{display:block;width:100%;height:calc(34*var(--u))}
.fc .hs-spark path,.fc .fm-l{stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.fc .hs-fol{display:flex;flex-wrap:wrap;gap:calc(6*var(--u))}
.fc .hs-fol i{width:calc(28*var(--u));height:calc(28*var(--u));border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:calc(12*var(--u));
  border:1px solid var(--tg-linje);color:var(--tg-dim)}
.fc .hs-fol i.f{background:#28A86E;border-color:#28A86E;color:#fff}
/* Formkartet */
.fc .fm-tittel{font-size:calc(21*var(--u));letter-spacing:.03em}
.fc .fm-hake{font-family:var(--c-f-tekst);font-size:calc(12*var(--u));color:var(--tg-ink);margin-left:calc(4*var(--u))}
.fc .fm-leg{font-size:calc(10.5*var(--u))}
.fc .fm-baner{position:relative;display:flex;flex-direction:column;gap:calc(5*var(--u));background:var(--tg-kort);border:1px solid var(--tg-linje);
  border-radius:calc(14*var(--u));padding:calc(10*var(--u))}
.fc .fm-bane{display:flex;flex-direction:column;gap:calc(2*var(--u))}
.fc .fm-navn{font-weight:700;font-size:calc(9*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--tg-dim)}
.fc .fm-bane svg{display:block;width:100%;height:auto;overflow:visible}
.fc .fm-dag{fill:var(--tg-kort2)}
.fc .fm-hvile{fill:var(--tg-linje)}
.fc .fm-null{stroke:var(--tg-linje);stroke-width:1}
.fc .fm-band{fill:var(--tg-linje)}
.fc .fm-fol{fill:var(--fm-ink)}
.fc .fm-akse{display:flex;justify-content:space-between;font-family:var(--c-f-tekst);font-size:calc(9*var(--u));color:var(--tg-dim)}
.fc .fm-mark{position:absolute;top:calc(10*var(--u));bottom:calc(26*var(--u));left:calc(10*var(--u));width:2px;background:#FF4500;opacity:0;pointer-events:none}
/* Dagbok-kortet over telefonen: timer per uke i måneden mot plan (Sverre 10. okt: «litt tom der»). */
.fc .a-ukebar{display:flex;align-items:stretch;gap:6px;height:56px}
.fc .a-ukebar>span{position:relative;flex:1}
.fc .a-ukebar i{position:absolute;left:14%;right:14%;bottom:14px;height:calc((100% - 14px) * var(--h));border-radius:3px 3px 0 0;transform-origin:bottom}
.fc .a-ukebar i.plan{border:1px dashed rgba(255,255,255,.35);border-bottom:0}
.fc .a-ukebar i.fakt{left:24%;right:24%;background:#8E8E98}
.fc .a-ukebar .naa i.fakt{background:#FF4500}
.fc .a-ukebar em{position:absolute;left:0;right:0;bottom:0;text-align:center;font-style:normal;font-weight:700;font-size:9.5px;letter-spacing:.08em;color:#B9B9C2}
.fc .a-ukebar .naa em{color:#F2F2F0}
@media (prefers-reduced-motion:no-preference){
  .js .fc .vist .skj.on .ls-trykk1{animation:fc-tgTrykk .35s ease .55s both}
  .js .fc .vist .skj.on .ls-logg{animation:fc-tgTrykk .4s ease 1.15s both}
  .js .fc .vist .skj.on .ls-n .ls-start{animation:fc-tgUt .25s ease 1.45s both}
  .js .fc .vist .skj.on .ls-n .ls-ok,.js .fc .vist .skj.on .ls-n .ls-i::after,.js .fc .vist .skj.on .ls-n b em{animation:fc-tgInn .3s ease 1.5s both}
  .js .fc .vist .skj.on .ls-n b{animation:fc-tgFarge .3s ease 1.5s both}
  .js .fc .vist .skj.on .ls-n .ls-i{animation:fc-tgSiffer .2s ease 1.5s both}
  .js .fc .vist .skj.on .ls-pr{animation:fc-tgPop .5s cubic-bezier(.2,.9,.3,1.3) 1.8s both}
  .js .fc .vist .skj.on .hs-sovn g{animation:fc-tgVoks .55s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--d)) both}
  .js .fc .vist .skj.on .hs-spark path{animation:fc-tgTegn 1.1s ease .9s both}
  .js .fc .vist .skj.on .hs-fol i{animation:fc-tgPop .35s cubic-bezier(.2,.9,.3,1.3) calc(.6s + var(--d)) both}
  .js .fc .vist .skj.on .fm-bane svg{animation:fc-tgAvdekk .9s cubic-bezier(.4,.1,.3,1) var(--d) both}
  .js .fc .vist .skj.on .fm-mark{animation:fc-tgSveip 2.4s cubic-bezier(.4,.1,.3,1) .2s both}
  .fc .a5.on .a-ukebar i.fakt{animation:fc-tgVoks .5s cubic-bezier(.2,.7,.2,1) var(--d) both}
}
.fc .a-ukebar i.fakt,.fc .hs-sovn g{transform:scaleY(1)}
@keyframes fc-tgTrykk{0%,100%{transform:scale(1);filter:none}45%{transform:scale(.94);filter:brightness(1.2)}}
@keyframes fc-tgUt{from{opacity:1}to{opacity:0}}
@keyframes fc-tgVoks{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fc-tgSiffer{from{color:var(--tg-dim)}to{color:transparent}}
@keyframes fc-tgInn{from{opacity:0}to{opacity:1}}
@keyframes fc-tgFarge{from{color:var(--tg-dim)}to{color:var(--tg-ink)}}
@keyframes fc-tgPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes fc-tgTegn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fc-tgAvdekk{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fc-tgSveip{0%{left:calc(10*var(--u));opacity:0}10%{opacity:.9}85%{opacity:.9}100%{left:calc(100% - 10*var(--u));opacity:0}}
/* #signup på mobil: lysere slør (Sverre 10. okt: «bildet trenger ikke være så mørkt her»). Designets
   0,55-0,86 ble 0,34-0,62; teksten rett på bildet får en myk skygge, stegene og knappen har egen flate. */
@media (max-width:899px){
  .fc #signup .slutt-kort::before{background:linear-gradient(180deg,rgba(10,10,11,.40) 0%,rgba(10,10,11,.30) 38%,rgba(10,10,11,.42) 70%,rgba(10,10,11,.62) 100%)!important}
  .fc #signup .kicker,.fc #signup .h2,.fc #signup .ingress,.fc #signup .trygg,.fc #signup .lenke-pil{text-shadow:0 1px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
}