/* Publika ytan: startsida + redaktionella sidor. Kräver system.css. */

/* ---------- Header-beteende ---------- */
.site-header{
  position:sticky;
  top:0;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.site-header.is-quiet{
  border-bottom:1px solid transparent;
  background:transparent;
}
.site-header.is-quiet.is-scrolled{
  border-bottom-color:color-mix(in srgb, var(--ink) 10%, transparent);
  background:color-mix(in srgb, var(--mineral) 92%, transparent);
}
@supports((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header.is-quiet.is-scrolled{
    -webkit-backdrop-filter:blur(16px) saturate(1.05);
    backdrop-filter:blur(16px) saturate(1.05);
    background:color-mix(in srgb, var(--mineral) 74%, transparent);
  }
}

/* ---------- Hero: trappan ---------- */
.hero-band{
  position:relative;
  min-height:min(780px,88svh);
  display:grid;
  align-items:center;
  overflow:hidden;
  background:var(--mineral);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  gap:72px;
  align-items:center;
  padding-top:var(--header-height);
  padding-bottom:40px;
}
.hero-copy{max-width:580px}
.hero-title{
  margin:0;
  font-size:clamp(56px,7.4vw,96px);
  font-weight:600;
  line-height:1.02;
}
.line-mask{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.26em}
.js .line-mask>span{
  display:block;
  transform:translateY(130%);
  animation:line-rise .68s var(--ease) forwards;
}
.js .line-mask:nth-of-type(2)>span{animation-delay:.1s}
.dot-ochre{color:var(--ochre)}
.hero-lead{
  max-width:52ch;
  margin:26px 0 0;
  color:var(--ink);
  font-size:18px;
  line-height:1.75;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 30px;
  margin-top:34px;
}
.hero-actions .inline-link{color:var(--petrol);font-weight:600}
.js .hero-lead,
.js .hero-actions{
  opacity:0;
  transform:translateY(14px);
  animation:soft-rise .6s var(--ease) forwards;
}
.js .hero-lead{animation-delay:.3s}
.js .hero-actions{animation-delay:.42s}

.hero-stair{max-width:560px;justify-self:end;width:100%}
.hero-stair svg{width:100%;height:auto;overflow:visible}
.stair-path{
  stroke:var(--petrol);
  stroke-width:3;
  stroke-linejoin:miter;
}
.js .stair-path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:stair-draw 1.15s .18s var(--ease) forwards;
}
.stair-dot{fill:var(--ochre)}
.js .stair-dot{
  opacity:0;
  transform:translateY(9px);
  transform-box:fill-box;
  transform-origin:center;
  animation:dot-land .5s 1.12s var(--ease) forwards;
}

@keyframes line-rise{to{transform:none}}
@keyframes soft-rise{to{opacity:1;transform:none}}
@keyframes stair-draw{to{stroke-dashoffset:0}}
@keyframes dot-land{to{opacity:1;transform:none}}

/* ---------- Scrollavslöjanden ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .ascent [data-reveal]:nth-child(2){transition-delay:.12s}
.js .ascent [data-reveal]:nth-child(3){transition-delay:.24s}
.js .stat-row [data-reveal]:nth-child(2){transition-delay:.12s}

/* ---------- Varför: pressen ---------- */
.why-band{padding:118px 0 126px;background:var(--paper)}
.why-band .section-title{max-width:14ch;margin-bottom:64px}
.why-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:96px;
  align-items:start;
}
.stat-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  padding-top:30px;
  border-top:1px solid var(--line-strong);
}
.stat-figure{
  display:flex;
  align-items:baseline;
  margin:0;
  color:var(--petrol);
  font-size:clamp(68px,7.2vw,108px);
  font-weight:600;
  line-height:1;
}
.stat-num{min-width:2ch}
.stat-figure .unit{margin-left:4px;font-size:.36em;font-weight:600}
.stat-label{margin:14px 0 0;color:var(--muted);font-size:15px;font-weight:500}
.stat-caption{
  grid-column:1/-1;
  max-width:34ch;
  margin:8px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
}
.why-copy p{
  max-width:52ch;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
}
.why-copy p+p{margin-top:20px}
.why-statement{
  max-width:22ch;
  margin-top:38px !important;
  color:var(--petrol) !important;
  font-size:27px !important;
  font-weight:500;
  line-height:1.4 !important;
}
.why-source{margin-top:42px !important;font-size:12px !important;line-height:1.6 !important}

/* ---------- Programmet: trappsekvensen ---------- */
.program-band{padding:112px 0 136px;background:var(--mineral)}
.program-intro{max-width:var(--reading);margin-bottom:72px}
.program-intro .section-title{margin-bottom:14px}
.program-purpose{
  margin:0;
  color:var(--ink);
  font-size:22px;
  font-weight:500;
  line-height:1.5;
}
.ascent{list-style:none;margin:0;padding:0;position:relative;z-index:0}
.ascent-trail{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}
.ascent-trail polyline{
  fill:none;
  stroke:color-mix(in srgb, var(--petrol) 34%, transparent);
  stroke-width:2;
  stroke-linejoin:miter;
}
.js .ascent-trail polyline{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.25s var(--ease) .12s;
}
.js .ascent.is-drawn .ascent-trail polyline{stroke-dashoffset:0}
.ascent-step{
  position:relative;
  max-width:660px;
  padding:36px 0 40px 96px;
  border-top:1px solid var(--line);
}
.ascent-step:last-child{border-bottom:1px solid var(--line)}
.ascent-step:nth-child(2){margin-left:104px}
.ascent-step:nth-child(3){margin-left:208px}
.ascent-mark{
  position:absolute;
  left:0;
  top:38px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--paper);
  color:var(--petrol);
  font-size:17px;
  font-weight:600;
}
.ascent-step h3{
  margin:0;
  color:var(--ink);
  font-size:38px;
  font-weight:500;
  line-height:1.12;
}
.ascent-step p{
  max-width:52ch;
  margin:12px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}

/* ---------- För skolor ---------- */
.school-band{padding:124px 0;background:var(--green-soft)}
.school-stack{max-width:var(--reading)}
.school-stack .section-title{margin-bottom:16px}
.school-copy p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
}
.school-copy p+p{margin-top:20px}
.school-copy strong{color:var(--ink);font-weight:600}
.format-line{
  min-height:72px;
  margin:64px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  color:var(--ink);
  font-size:14px;
  font-weight:500;
}
.format-line span{display:flex;align-items:baseline;gap:8px}
.format-line b{
  color:var(--petrol);
  font-size:26px;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.format-line span+span{
  padding-left:20px;
  border-left:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}

/* ---------- Kunskapsgrund ---------- */
.knowledge-band{padding:124px 0 132px;background:var(--paper)}
.knowledge-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:96px;
  align-items:end;
}
.knowledge-grid>*{min-width:0}
.knowledge-copy .section-title{margin-bottom:16px}
.knowledge-copy p{
  max-width:52ch;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
}
.knowledge-copy p+p{margin-top:20px}
.knowledge-copy strong{color:var(--ink);font-weight:600}
.research-link{margin-top:34px}

/* ---------- Gratisverktyg ---------- */
.home-tools-band{padding:96px 0;background:var(--mineral)}
.home-tools-stack{
  padding-top:34px;
  border-top:1px solid var(--line-strong);
}
.home-tools-stack h2{
  max-width:16ch;
  margin:0;
  font-size:44px;
  font-weight:500;
  line-height:1.16;
}
.home-tools-lead{
  max-width:46ch;
  margin:16px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.72;
}
.home-tool-links{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.home-tool-links a{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 20px 16px 0;
  color:var(--ink);
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
}
.home-tool-links .arrow{
  color:var(--petrol);
  transition:transform .2s var(--ease);
}
.home-tool-links a:active{transform:scale(.98)}
.home-tool-links li+li a{
  padding-left:20px;
  border-left:1px solid var(--line);
}

/* ---------- Enskilt, under utarbetande ---------- */
.enskilt-band{padding:118px 0;background:var(--paper)}
.enskilt-room{
  max-width:860px;
  padding:60px 64px 52px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-surface);
  background:var(--mineral);
  box-shadow:0 20px 42px -32px color-mix(in srgb, var(--ink) 28%, transparent);
}
.enskilt-room .section-title{margin-bottom:16px;text-wrap:balance}
.enskilt-copy p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
}
.enskilt-copy p+p{margin-top:20px}
.enskilt-copy strong{color:var(--ink);font-weight:600}

/* ---------- Kontakt ---------- */
.contact-band{
  padding:106px 0 112px;
  background:var(--petrol);
  color:var(--cream-cover);
}
.contact-stack{max-width:var(--reading)}
.contact-band .section-title{
  margin:0;
  color:var(--cream-cover);
}
.contact-byline{
  margin:18px 0 0;
  color:var(--cream-cover);
  font-size:17px;
  font-weight:500;
}
.contact-lead{
  max-width:42ch;
  margin:8px 0 0;
  color:var(--cream-stroke);
  font-size:17px;
  line-height:1.78;
}
.contact-band .button{
  margin-top:28px;
  background:var(--cream-stroke);
  color:var(--ink);
  border-color:var(--cream-stroke);
}

/* ---------- Redaktionella sidor (kunskapsgrund, integritet) ---------- */
.editorial-hero{
  padding:92px 0 104px;
  background:var(--mineral);
}
.editorial-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:96px;
  align-items:end;
}
.editorial-hero-grid>*{min-width:0}
.editorial-hero .page-title{max-width:12ch}
.editorial-summary{
  padding:8px 0 4px;
  border-top:1px solid var(--line-strong);
}
.editorial-summary-row{
  min-height:62px;
  display:grid;
  grid-template-columns:120px 1fr;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--line);
}
.editorial-summary-row dt{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.editorial-summary-row dd{
  margin:0;
  color:var(--ink);
  font-size:14px;
  font-weight:500;
}

.evidence-band{padding:116px 0 126px}
.evidence-intro{
  max-width:780px;
  margin-bottom:74px;
}
.evidence-ladder{border-top:1px solid var(--line)}
.evidence-step{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(320px,1fr);
  gap:38px;
  align-items:start;
  padding:42px 0 46px;
  border-bottom:1px solid var(--line);
}
.evidence-step h3{
  margin:0;
  font-size:26px;
  font-weight:600;
  line-height:1.25;
}
.evidence-step p{
  max-width:670px;
  margin:0;
  color:var(--muted);
  line-height:1.76;
}

.study-band{padding:112px 0;background:var(--green-soft)}
.study-stack{max-width:var(--reading)}
.study-stack .section-title{margin-bottom:30px}
.study-summary{
  max-width:680px;
  padding-top:22px;
  border-top:1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.study-summary p{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.78;
}
.study-summary p+p{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.study-assurance strong{color:var(--ink);font-weight:600}

.methods-band{padding:116px 0 124px}
.methods-brief{max-width:var(--reading)}
.methods-brief .section-title{margin-bottom:18px}
.methods-brief p{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.78;
}
.methods-brief p+p{margin-top:22px}
.methods-brief strong{color:var(--ink);font-weight:600}

.editorial-hero--policy .page-title{max-width:16ch}
.editorial-hero--policy .lead{max-width:46ch}
.policy-band{padding:96px 0}
.policy-band--soft{background:var(--green-soft)}
.policy-stack{max-width:760px}
.policy-stack .section-title{margin-bottom:18px;max-width:18ch}
.policy-stack p{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.78;
}
.policy-stack p+p,
.policy-stack p+.method-list{margin-top:22px}
.policy-stack .method-list{margin-top:28px}
.method-list{border-top:1px solid var(--line)}
.method-row{
  min-height:78px;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:28px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.method-row strong{font-size:15px}
.method-row span{color:var(--muted);font-size:14px}
.policy-stack .method-row{
  min-height:88px;
  grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);
  align-items:start;
  padding:18px 0;
}
.policy-stack .method-row span{line-height:1.65}
.policy-stack code{
  font-family:inherit;
  font-size:.92em;
  color:var(--ink);
}
.policy-band--soft .method-row{border-bottom-color:color-mix(in srgb, var(--ink) 18%, transparent)}
.policy-band--soft .method-list{border-top-color:color-mix(in srgb, var(--ink) 18%, transparent)}

/* ---------- Brytpunkter ---------- */
@media(max-width:1040px){
  .hero-grid{gap:48px}
  .hero-title{font-size:clamp(52px,6.8vw,76px)}
  .ascent-step:nth-child(2){margin-left:64px}
  .ascent-step:nth-child(3){margin-left:128px}
}

@media(max-width:960px){
  .editorial-hero-grid,.methods-grid{gap:58px}
  .knowledge-grid{gap:58px}
  .why-grid{gap:56px}
  .editorial-hero--policy .page-title{max-width:18ch}
}

@media(max-width:820px){
  .hero-band{min-height:0}
  .hero-grid{
    grid-template-columns:1fr;
    gap:52px;
    padding-top:calc(var(--header-height) + 44px);
    padding-bottom:64px;
  }
  .hero-title{font-size:clamp(48px,10vw,64px)}
  .hero-stair{max-width:420px;justify-self:start}
  .why-band{padding:94px 0}
  .why-band .section-title{margin-bottom:44px}
  .why-grid{grid-template-columns:1fr;gap:48px}
  .program-band{padding:94px 0 112px}
  .program-intro{margin-bottom:52px}
  .program-purpose{font-size:20px}
  .ascent-step{padding:30px 0 34px 84px}
  .ascent-step:nth-child(2){margin-left:40px}
  .ascent-step:nth-child(3){margin-left:80px}
  .ascent-step h3{font-size:32px}
  .school-band,.knowledge-band,.enskilt-band,.contact-band,.evidence-band,.study-band,.methods-band{padding:94px 0}
  .format-line{margin-top:48px;flex-wrap:wrap;justify-content:flex-start;padding:16px 0 0}
  .home-tools-stack h2{font-size:38px}
  .home-tool-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-tool-links li+li a{
    padding-left:0;
    border-left:0;
  }
  .home-tool-links li:nth-child(even) a{
    padding-left:20px;
    border-left:1px solid var(--line);
  }
  .home-tool-links li:nth-child(n+3){border-top:1px solid var(--line)}
  .editorial-hero-grid,.methods-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .knowledge-grid{grid-template-columns:1fr;gap:44px}
  .knowledge-summary{max-width:560px}
  .enskilt-room{padding:46px 40px 42px}
  .editorial-hero{padding:72px 0 86px}
  .editorial-hero .page-title{max-width:16ch}
  .evidence-step{grid-template-columns:220px 1fr;gap:24px}
}

@media(max-width:600px){
  .hero-grid{padding-top:calc(var(--header-height) + 30px);padding-bottom:56px;gap:44px}
  .hero-title{font-size:clamp(40px,11.4vw,48px)}
  .hero-lead{margin-top:18px;font-size:16px;line-height:1.68}
  .hero-actions{margin-top:26px}
  .hero-stair{max-width:330px}
  .why-band{padding:78px 0}
  .why-band .section-title{margin-bottom:36px}
  .stat-row{gap:28px;padding-top:24px}
  .stat-figure{font-size:clamp(56px,15vw,68px)}
  .stat-caption{font-size:15px}
  .why-copy p{font-size:16px}
  .why-statement{font-size:23px !important;margin-top:30px !important}
  .program-band{padding:80px 0 92px}
  .program-intro{margin-bottom:40px}
  .program-purpose{font-size:18px;line-height:1.5}
  .ascent-step,
  .ascent-step:nth-child(2),
  .ascent-step:nth-child(3){margin-left:0;padding:26px 0 30px 68px}
  .ascent-mark{top:28px;width:46px;height:46px;font-size:15px}
  .ascent-step h3{font-size:28px}
  .ascent-step p{font-size:16px}
  .school-band,.knowledge-band,.enskilt-band,.contact-band,.evidence-band,.study-band,.methods-band{padding:78px 0}
  .school-copy p,.knowledge-copy p,.enskilt-copy p,.contact-lead,.contact-byline{font-size:16px}
  .format-line{
    min-height:0;
    margin-top:40px;
    display:grid;
    grid-template-columns:1fr;
    padding:6px 0 0;
  }
  .format-line span,
  .format-line span+span{
    width:100%;
    min-height:52px;
    align-items:center;
    padding-left:0;
    border-left:0;
    border-bottom:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .format-line b{font-size:22px}
  .editorial-hero{padding:58px 0 70px}
  .editorial-summary-row{grid-template-columns:100px 1fr}
  .evidence-intro{margin-bottom:42px}
  .evidence-step{
    grid-template-columns:1fr;
    gap:12px;
    padding:30px 0 34px;
  }
  .enskilt-room{padding:38px 24px 34px}
  .method-row{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .methods-brief p{font-size:16px}
  .home-tools-band{padding:68px 0}
  .home-tools-stack h2{font-size:32px}
  .home-tool-links{grid-template-columns:1fr}
  .home-tool-links a{
    padding:0;
    white-space:normal;
  }
  .home-tool-links li+li a,
  .home-tool-links li:nth-child(even) a{
    padding-left:0;
    border-left:0;
  }
  .home-tool-links li:nth-child(n+3){border-top:0}
  .home-tool-links li+li{
    border-top:1px solid var(--line);
  }
}

@media(max-width:360px){
  .hero-grid{padding-top:calc(var(--header-height) + 22px)}
  .hero-title{font-size:38px}
  .hero-stair{max-width:280px}
  .program-band{padding-top:64px}
}

@media(hover:hover) and (pointer:fine){
  .home-tool-links a:hover{color:var(--petrol)}
  .home-tool-links a:hover .arrow{transform:translateX(5px)}
  .hero-actions .inline-link:hover .arrow{transform:translateX(5px)}
  .hero-actions .inline-link .arrow{transition:transform .2s var(--ease)}
  .contact-band .button:hover{
    background:var(--paper);
    border-color:var(--paper);
    color:var(--ink);
  }
}

/* ---------- Reducerad rörelse ---------- */
@media(prefers-reduced-motion:reduce){
  .js .line-mask>span,
  .js .hero-lead,
  .js .hero-actions,
  .js .stair-path,
  .js .stair-dot{animation:none;opacity:1;transform:none}
  .js .stair-path{stroke-dasharray:none;stroke-dashoffset:0}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .ascent-trail polyline{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .site-header{transition:none}
}