/* ============================================================
   Lomia — Startsida (C, polished) · stylesheet
   Warm, human, mockup-led. Tokens + components + motion layer.
   ============================================================ */

/* Locally hosted variable fonts. Latin covers Swedish and English. */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond"; font-style:italic; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --cream:#FBF5EE; --paper:#FFFBF6; --mist:#F4EADD; --linen:#EFE3D2;
  --ink:#1E2A1E; --graphite:#5A6258; --mist-text:#8A8E84;
  --sage:#5F7A5A; --sage-deep:#3F5239; --sage-rich:#6B8266; --sage-soft:#E6EBE0; --sage-glow:rgba(95,122,90,.22);
  --clay:#5F7A5A;
  --peach:#F4A988; --peach-soft:#FCE4D6;
  --butter:#F2D58B; --butter-soft:#FAEDC8;
  --moss:#8FA88A; --moss-soft:#DEE6DA;
  --lavender:#B5A8C9; --lavender-soft:#E8E2EF;
  --hairline:rgba(30,42,30,.08); --hairline-strong:rgba(30,42,30,.16);
  --shadow-soft:0 1px 3px rgba(30,42,30,.04),0 12px 32px -10px rgba(63,82,57,.10);
  --shadow-lift:0 2px 8px rgba(30,42,30,.05),0 30px 60px -20px rgba(63,82,57,.16);
  --shadow-deep:0 40px 90px -30px rgba(30,42,30,.32);
  --font-display:"Cormorant Garamond","Georgia",serif;
  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --e-soft:cubic-bezier(0.2,0.8,0.2,1);
  --e-expo:cubic-bezier(0.16,1,0.3,1);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-sans); font-weight:420; line-height:1.6;
  font-feature-settings:"ss01","kern","liga","calt"; overflow-x:clip;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; color:var(--ink); margin:0; line-height:1.04; }
p{ margin:0; color:var(--graphite); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--sage); color:var(--cream); }

/* ---------- layout ---------- */
.wrap{ max-width:1320px; margin-inline:auto; padding-inline:1.4rem; }
@media(min-width:768px){ .wrap{ padding-inline:2.5rem; } }
.wrap-wide{ max-width:1560px; margin-inline:auto; padding-inline:1.4rem; }
@media(min-width:768px){ .wrap-wide{ padding-inline:2.5rem; } }

/* ---------- type ---------- */
.t-mega{ font-family:var(--font-display); font-weight:500; line-height:.93; letter-spacing:-0.035em; font-size:clamp(52px,8.2vw,138px); }
.t-display{ font-family:var(--font-display); font-weight:500; line-height:.98; letter-spacing:-0.025em; font-size:clamp(40px,6.4vw,104px); }
.t-h2{ font-family:var(--font-display); font-weight:500; line-height:1.02; letter-spacing:-0.02em; font-size:clamp(32px,4.6vw,72px); }
.t-h3{ font-family:var(--font-display); font-weight:500; line-height:1.06; letter-spacing:-0.015em; font-size:clamp(24px,2.4vw,36px); }
.t-italic{ font-style:italic; font-weight:500; color:var(--clay); }
.serif{ font-family:var(--font-display); }
.mono{ font-family:var(--font-mono); }
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--graphite); font-weight:500; }
.lede{ font-size:clamp(17px,1.5vw,21px); line-height:1.66; color:var(--graphite); }

/* gradient ink text accent (sparingly) */
.grad{ background:linear-gradient(100deg,var(--sage-deep),var(--sage) 55%,var(--moss)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border-radius:9999px; font-family:var(--font-sans); font-weight:500; font-size:.95rem; cursor:pointer; border:none; position:relative; }
.btn-warm{ color:var(--cream); padding:1.05rem 1.9rem; background:linear-gradient(180deg,#6B8266 0%,#5F7A5A 55%,#4F6A4A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(255,255,255,.06) inset,0 12px 30px -10px rgba(63,82,57,.5);
  transition:box-shadow .3s var(--e-soft),background .3s ease,transform .3s var(--e-soft); }
.btn-warm:hover{ background:linear-gradient(180deg,#738E6E 0%,#5F7A5A 55%,#3F5239 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 16px 40px -12px rgba(63,82,57,.6),0 0 0 1px color-mix(in oklab,var(--peach) 45%,transparent),0 0 54px -8px color-mix(in oklab,var(--peach) 70%,transparent); }
.btn-warm svg{ transition:transform .3s var(--e-soft); }
.btn-warm:hover svg{ transform:translateX(4px); }
.btn-soft{ color:var(--ink); padding:1.05rem 1.8rem; background:rgba(255,251,246,.55); border:1px solid var(--hairline-strong); backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s,transform .3s var(--e-soft); }
.btn-soft:hover{ background:var(--mist); border-color:var(--clay); }
.link-line{ position:relative; display:inline-block; }
.link-line::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .55s cubic-bezier(.7,0,.2,1); }
.link-line:hover::after{ transform:scaleX(1); transform-origin:left; }

/* chips / pills */
.pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; border-radius:9999px; background:var(--sage-soft); border:1px solid color-mix(in oklab,var(--sage) 18%,transparent); font-size:12.5px; font-weight:500; color:var(--sage-deep); }
.pill-glass{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border-radius:9999px; background:rgba(255,251,246,.7); border:1px solid var(--hairline); backdrop-filter:blur(10px); font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite); }
.dotping{ position:relative; display:inline-flex; width:7px; height:7px; }
.dotping i{ position:absolute; inset:0; border-radius:9999px; background:var(--peach); }
.dotping i:first-child{ animation:ping 1.8s var(--e-soft) infinite; }
@keyframes ping{ 75%,100%{ transform:scale(2.4); opacity:0; } }

/* ---------- header ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:50; transition:transform .5s var(--e-soft); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; height:72px; margin-inline:auto; max-width:1560px; padding-inline:1.4rem; transition:padding .3s; }
@media(min-width:768px){ .hdr__in{ padding-inline:2.5rem; } }
.hdr__bar{ position:absolute; inset:0; background:color-mix(in oklab,var(--cream) 78%,transparent); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--hairline); opacity:0; transition:opacity .4s; }
.hdr.scrolled .hdr__bar{ opacity:1; }
.hdr.hide{ transform:translateY(-100%); }
.brand{ font-family:var(--font-display); font-weight:500; font-size:30px; letter-spacing:-0.02em; color:var(--ink); position:relative; z-index:1; }
.brand i{ font-style:italic; color:var(--clay); }
.nav{ display:none; align-items:center; gap:.2rem; padding:.35rem; border-radius:9999px; border:1px solid var(--hairline); background:rgba(255,251,246,.6); backdrop-filter:blur(10px); position:relative; z-index:1; }
@media(min-width:920px){ .nav{ display:inline-flex; } }
.nav a{ padding:.45rem 1rem; border-radius:9999px; font-size:14px; font-weight:500; color:var(--graphite); transition:color .2s,background .2s; }
.nav a:hover{ color:var(--ink); background:var(--paper); }
.hdr__cta{ display:flex; align-items:center; gap:1rem; position:relative; z-index:1; }
.hdr__login{ display:none; font-size:14px; font-weight:500; color:var(--graphite); }
@media(min-width:560px){ .hdr__login{ display:inline; } }
.hdr__login:hover{ color:var(--clay); }

/* ---------- language switch ---------- */
.lang-switch{
  display:inline-flex; align-items:center; color:var(--mist-text);
}
.lang-switch a{
  display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 .3rem;
  position:relative; border-radius:4px; font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; line-height:1; color:var(--mist-text); transition:color .2s;
}
.lang-switch a:hover{ color:var(--ink); }
.lang-switch a[aria-current="page"]{ color:var(--ink); }
.lang-switch a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:8px; width:12px; height:1px;
  background:var(--clay); transform:translateX(-50%);
}
.lang-switch a:focus-visible{ outline:2px solid var(--clay); outline-offset:1px; }
.lang-switch__sep{ font-family:var(--font-mono); font-size:10px; color:var(--hairline-strong); }
.hdr__cta > .lang-switch{ display:none; }
@media(min-width:920px){ .hdr__cta > .lang-switch{ display:inline-flex; } }

/* ---------- mobile menu ---------- */
.menubtn{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; flex:none; border-radius:9999px; border:1px solid var(--hairline-strong); background:rgba(255,251,246,.7); backdrop-filter:blur(8px); cursor:pointer; position:relative; z-index:1; padding:0; }
.menubtn span{ width:16px; height:1.7px; background:var(--ink); border-radius:2px; transition:transform .3s var(--e-soft); }
.menubtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.4px) rotate(45deg); }
.menubtn[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.4px) rotate(-45deg); }
@media(min-width:920px){ .menubtn{ display:none; } }
.mnav{ position:absolute; top:calc(100% - 6px); left:1rem; right:1rem; background:var(--paper); border:1px solid var(--hairline-strong); border-radius:24px; box-shadow:var(--shadow-deep); padding:.6rem; z-index:2; }
.mnav[hidden]{ display:none; }
.mnav a{ display:block; padding:.95rem 1.1rem; border-radius:16px; font-size:17px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--hairline); }
.mnav a:last-of-type{ border-bottom:none; }
.mnav a:active{ background:var(--mist); }
.mnav .mnav__login{ color:var(--graphite); }
.mnav .btn{ display:flex; justify-content:center; margin-top:.5rem; border-radius:18px; border-bottom:none; color:var(--cream); }
.mnav .lang-switch--menu{
  display:flex; align-items:center; align-self:flex-start; width:max-content; margin:.1rem .5rem .45rem;
}
.mnav .lang-switch--menu a{
  display:grid; min-width:44px; min-height:44px; padding:0 .55rem; border:0; border-radius:4px;
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.05em;
  color:var(--mist-text);
}
.mnav .lang-switch--menu a:hover,.mnav .lang-switch--menu a[aria-current="page"]{ color:var(--ink); background:transparent; }
.mnav .lang-switch--menu a[aria-current="page"]::after{ bottom:7px; width:18px; }
@media(min-width:920px){ .mnav{ display:none; } }

/* ---------- background atmosphere ---------- */
.atmos{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; will-change:transform; }
.grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px; }

/* ---------- surfaces ---------- */
.card{ background:var(--paper); border:1px solid var(--hairline); border-radius:28px; box-shadow:var(--shadow-soft); }
.tilt{ transform-style:preserve-3d; transition:transform .4s var(--e-soft), box-shadow .4s var(--e-soft); will-change:transform; }
.tilt:hover{ box-shadow:var(--shadow-lift); }
.tilt__g{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.5),transparent 45%); }
.tilt:hover .tilt__g{ opacity:1; }

/* ---------- phone mockup ---------- */
.phone{ position:relative; width:300px; max-width:78vw; border-radius:46px; padding:11px;
  background:linear-gradient(160deg,#26331F,#161E13); box-shadow:var(--shadow-deep),0 0 0 1px rgba(255,255,255,.04) inset;
}
.phone::after{ content:""; position:absolute; left:50%; top:9px; width:42%; height:24px; transform:translateX(-50%); background:#0d130b; border-radius:0 0 16px 16px; z-index:3; }
.phone__s{ position:relative; border-radius:36px; overflow:hidden; background:var(--paper); aspect-ratio:9/19.2; }
.phone__status{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px 4px; font-family:var(--font-mono); font-size:11px; color:var(--ink); font-weight:500; }
.phone__status .r{ display:flex; gap:4px; align-items:center; }
.sweep{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; mix-blend-mode:soft-light; }
.sweep::after{ content:""; position:absolute; top:-10%; left:0; width:42%; height:120%; filter:blur(7px);
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5) 50%,rgba(255,255,255,0)); animation:sweep 6.5s ease-in-out infinite; }
@keyframes sweep{ 0%{transform:translateX(-140%) skewX(-16deg);opacity:0} 18%{opacity:.7} 60%{opacity:.7} 100%{transform:translateX(240%) skewX(-16deg);opacity:0} }

/* in-app screen primitives */
.scr{ padding:8px 16px 18px; }
.scr__day{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); }
.scr__h{ font-family:var(--font-display); font-size:30px; line-height:1; color:var(--ink); margin-top:4px; }
.scr__lead{ font-family:var(--font-display); font-size:19px; line-height:1.18; color:var(--ink); margin-top:12px; }
.scr-card{ border:1px solid var(--hairline); background:var(--cream); border-radius:14px; padding:11px 12px; }
.scr-card .k{ font-size:12px; color:var(--graphite); }
.scr-card .v{ font-size:13px; color:var(--ink); margin-top:3px; }
.scr-row{ display:flex; align-items:center; gap:9px; }
.scr-row .k, .scr-banner .k, .scr-act .k{ font-size:12px; color:var(--graphite); letter-spacing:0; text-transform:none; }
.scr-row .v, .scr-banner .v, .scr-act .v{ font-size:13px; color:var(--ink); }
.scr-ava{ display:grid; place-items:center; width:30px; height:30px; border-radius:9999px; font-family:var(--font-display); font-size:15px; color:var(--ink); flex:none; }
.scr-tab{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in oklab,var(--paper) 92%,transparent); border-top:1px solid var(--hairline); backdrop-filter:blur(6px); }
.scr-tab span{ width:20px; height:20px; border-radius:6px; background:var(--hairline); }
.scr-tab span.on{ background:var(--sage); }

/* real-app primitives (hero v2) */
.scr-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.scr-banner{ display:flex; align-items:center; gap:11px; margin-top:16px; padding:13px 14px; border-radius:18px;
  background:color-mix(in oklab,var(--sage-soft) 72%,var(--paper)); border:1px solid color-mix(in oklab,var(--sage) 32%,transparent); }
.scr-sec{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite); margin-top:18px; }
.scr-act{ display:flex; align-items:center; gap:11px; border:1px solid var(--hairline); background:var(--paper); border-radius:16px; padding:12px 13px; box-shadow:0 1px 2px rgba(31,36,26,.05); }
.scr-btn{ flex:none; font-size:12px; font-weight:600; line-height:1; color:var(--cream); background:var(--ink); border-radius:9999px; padding:8px 14px; }
.scr-btn--ghost{ color:var(--ink); background:transparent; border:1px solid var(--hairline-strong); }
.scr-tabbar{ position:absolute; left:0; right:0; bottom:0; display:flex; padding:9px 10px 20px; background:color-mix(in oklab,var(--paper) 92%,transparent); backdrop-filter:blur(8px); border-top:1px solid var(--hairline); }
.scr-tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; letter-spacing:.02em; color:var(--graphite); text-decoration:none; }
.scr-tabbar a svg{ width:22px; height:22px; }
.scr-tabbar a.on{ color:var(--ink); font-weight:600; }
.scr-homebar{ position:absolute; left:50%; bottom:7px; transform:translateX(-50%); width:118px; height:4px; border-radius:4px; background:var(--ink); opacity:.8; }
/* on narrow screens the phone is uncropped and smaller — drop the last feed section so content fits */
@media(max-width:899px){ .scr-fam{ display:none !important; } }
/* views-phone is narrower (300px) — family screen drops the feed section there */
#viewScreens .scr-fam{ display:none !important; }
/* tighter rhythm in the narrower views-phone so family screen clears the tab bar */
#viewScreens .scr-banner{ margin-top:11px; padding:11px 12px; }
#viewScreens .scr-sec{ margin-top:12px; }
#viewScreens .scr-act{ padding:10px 12px; }
.scr-tab{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in oklab,var(--paper) 92%,transparent); border-top:1px solid var(--hairline); backdrop-filter:blur(8px); }
.scr-tab span{ width:20px; height:20px; border-radius:6px; background:var(--hairline); }
.scr-tab span.on{ background:var(--sage); }

/* day-sequence stacked screens (sticky scrollytelling) */
.dayscreens{ position:relative; }
.dayscreen{ position:absolute; inset:0; opacity:0; transform:translateY(18px) scale(.98); transition:opacity .6s var(--e-soft),transform .6s var(--e-soft); }
.dayscreen.on{ opacity:1; transform:none; }
.dayscreen.first{ position:relative; height:100%; }

/* day-step timeline rail + active-state focus (desktop pinned mode) */
.day-step__in{ position:relative; }
.day-step__time{ display:flex; align-items:center; gap:.7rem; }
.day-step__dot{ width:11px; height:11px; border-radius:9999px; background:var(--paper); border:1.5px solid var(--sage); flex:none; transition:background .45s var(--e-soft),transform .45s var(--e-soft); }
@media(min-width:900px){
  .day-text{ position:relative; padding-left:30px; }
  .day-text::before{ content:""; position:absolute; left:5px; top:9vh; bottom:9vh; width:1.5px; background:linear-gradient(var(--hairline),var(--hairline-strong),var(--hairline)); }
  .day-step__dot{ position:absolute; left:-30px; top:3px; }
  .day-step{ transition:opacity .5s var(--e-soft); }
  .day-step:not(.on){ opacity:.34; }
  .day-step.on .day-step__dot{ background:var(--sage); transform:scale(1.18); box-shadow:0 0 0 4px color-mix(in oklab,var(--sage) 16%,transparent); }
}

/* small treated UI panel (used in cards) */
.uipanel{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--hairline); background:var(--paper); box-shadow:var(--shadow-soft); }

/* ---------- thread (timeline) ---------- */
.thread{ position:absolute; left:0; top:0; height:100%; width:2px; }
.thread svg{ height:100%; width:100%; overflow:visible; }
.thread path{ fill:none; stroke:var(--sage); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:var(--len,1); stroke-dashoffset:var(--len,1); }
.tl-node{ position:relative; }
/* dot centred on the line: left = -(padding-left 34px) - half-dot 7px + half-line 1px = -40px */
.tl-dot{ position:absolute; left:-40px; top:6px; width:14px; height:14px; border-radius:9999px; background:var(--paper); border:1.5px solid var(--sage); }
.tl-dot::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:9999px; background:var(--sage); transform:translate(-50%,-50%) scale(0); transition:transform .5s var(--e-soft); }
.tl-node.in .tl-dot::after{ transform:translate(-50%,-50%) scale(1); }

/* ---------- horizontal track (kap. 5 — Hela resan) ---------- */
.track{ margin-top:clamp(3rem,7vh,5.5rem); }
.track__cols{ display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
.track__cols::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--sage),var(--butter),var(--peach),var(--lavender)); opacity:.85;
  transform:scaleX(0); transform-origin:left; transition:transform 1.15s var(--e-soft) .12s; }
.track.in .track__cols::before{ transform:scaleX(1); }
.track__col{ display:flex; flex-direction:column; }
.track__node{ height:30px; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
.track__dot{ width:30px; height:30px; border-radius:9999px; background:var(--paper); border:2px solid var(--dot,var(--sage));
  display:grid; place-items:center; box-shadow:0 0 0 5px var(--cream); transform:scale(0); transition:transform .5s var(--e-soft); }
.track__dot::after{ content:""; width:10px; height:10px; border-radius:9999px; background:var(--dot,var(--sage)); }
.track.in .track__dot{ transform:scale(1); }
.track.in .track__col:nth-child(1) .track__dot{ transition-delay:.20s; }
.track.in .track__col:nth-child(2) .track__dot{ transition-delay:.42s; }
.track.in .track__col:nth-child(3) .track__dot{ transition-delay:.64s; }
.track.in .track__col:nth-child(4) .track__dot{ transition-delay:.86s; }
.track__card{ margin:1.45rem 8px 0; background:var(--paper); border:1px solid var(--hairline); border-top:3px solid var(--dot,var(--sage));
  border-radius:20px; padding:1.3rem 1.3rem 1.5rem; opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--e-soft),transform .7s var(--e-soft),box-shadow .35s var(--e-soft); }
.track.in .track__card{ opacity:1; transform:none; }
.track.in .track__col:nth-child(1) .track__card{ transition-delay:.28s; }
.track.in .track__col:nth-child(2) .track__card{ transition-delay:.50s; }
.track.in .track__col:nth-child(3) .track__card{ transition-delay:.72s; }
.track.in .track__col:nth-child(4) .track__card{ transition-delay:.94s; }
.track__card:hover{ box-shadow:var(--shadow-lift); }
@media(max-width:759px){
  .track__cols{ grid-template-columns:1fr; }
  .track__cols::before{ left:14px; right:auto; top:0; bottom:0; width:2px; height:auto;
    transform:scaleY(0); transform-origin:top; transition:transform 1.15s var(--e-soft) .12s; }
  .track.in .track__cols::before{ transform:scaleY(1); }
  .track__col{ flex-direction:row; align-items:flex-start; }
  .track__node{ flex:none; width:30px; height:auto; padding-top:1.45rem; }
  .track__card{ flex:1; margin:1.45rem 0 0 1.1rem; }
}
@media(prefers-reduced-motion:reduce){
  .track__cols::before, .track__dot, .track__card{ transition:none !important; transform:none !important; opacity:1 !important; }
}

/* ---------- hero A — "Förstasidan" (tidningskänsla) ---------- */
.heroA{ display:flex; flex-direction:column; min-height:100svh; padding-top:clamp(88px,12vh,140px); overflow:clip; }
.heroA__top{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem;
  border-bottom:1px solid var(--hairline-strong); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); }
.heroA .fl{ color:var(--clay); }
.heroA__stage{ position:relative; flex:1; width:100%; }
.heroA__wash{ position:absolute; right:-220px; top:-120px; bottom:-160px; width:min(900px,70vw); z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 38% at 62% 72%, color-mix(in oklab,var(--sage) 30%,transparent) 0%, transparent 70%),
    radial-gradient(40% 34% at 48% 38%, color-mix(in oklab,var(--butter) 26%,transparent) 0%, transparent 72%),
    radial-gradient(34% 30% at 76% 34%, color-mix(in oklab,var(--peach) 18%,transparent) 0%, transparent 70%);
  filter:blur(2px); }
.heroA .phone{ width:360px; }
.heroA__h1{ position:relative; z-index:1; margin:0; padding-top:clamp(1.8rem,4.5vh,3.2rem);
  font-family:var(--font-display); font-weight:500; line-height:.92; letter-spacing:-0.035em;
  font-size:clamp(52px,8.6vw,128px); color:var(--ink); }
.heroA__row{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.6rem 4rem;
  margin-top:clamp(1.6rem,4vh,2.8rem); max-width:880px; padding-bottom:clamp(2rem,5vh,3rem); }
.heroA .heroA__phone{ position:absolute; right:max(48px,6%); bottom:-96px; z-index:2; }
.heroA .heroA__phone.scale-in{ opacity:0; transform:scale(.96); }
.heroA .heroA__phone.scale-in.in{ opacity:1; transform:none; }
.heroA__facts{ position:relative; z-index:3; background:var(--cream); width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0 1.3rem; border-top:1px solid var(--hairline-strong);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite); }
@media(max-width:899px){
  .heroA{ min-height:0; }
  .heroA__top-mid{ display:none; }
  .heroA__wash{ right:-30vw; top:auto; bottom:-120px; height:70vh; }
  .heroA .heroA__phone, .heroA .heroA__phone.scale-in, .heroA .heroA__phone.scale-in.in{ position:relative; right:auto; bottom:auto; transform:none; margin:2.8rem auto 0; width:max-content; }
  .heroA .heroA__phone.scale-in{ opacity:0; transform:scale(.94); }
  .heroA .heroA__phone.scale-in.in{ opacity:1; transform:none; }
  .heroA__phone::before{ content:""; position:absolute; left:50%; bottom:-3rem; transform:translateX(-50%); z-index:-1;
    width:160%; height:120%; pointer-events:none;
    background:radial-gradient(50% 50% at 50% 60%, color-mix(in oklab,var(--sage) 26%,transparent) 0%, transparent 72%);
    filter:blur(4px); }
  .heroA__facts{ flex-wrap:wrap; justify-content:flex-start; gap:.7rem 1.1rem; margin-top:2.8rem; }
  .heroA__facts .fl{ display:none; }
}

/* ---------- fem områden (kompakt band — kap. 6) ---------- */
.omr{ border-block:1px solid var(--hairline); padding-block:clamp(1.8rem,3.5vh,2.6rem); display:grid; gap:1.6rem; }
.omr__right{ display:flex; flex-direction:column; gap:1.3rem; align-items:flex-start; }
.omr__chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.omr-chip{ display:inline-flex; align-items:center; gap:.6rem; padding:.68rem 1.1rem; border-radius:9999px;
  border:1px solid var(--hairline-strong); background:var(--paper); font:inherit; font-size:14.5px; color:var(--ink);
  cursor:pointer; transition:border-color .25s,box-shadow .25s,transform .25s var(--e-soft); }
.omr-chip:hover{ border-color:var(--sage); box-shadow:var(--shadow-soft); transform:translateY(-1px); }
.omr-chip__ic{ width:19px; height:19px; color:var(--sage-deep); display:inline-flex; flex:none; }
.omr-chip__ic svg{ width:100%; height:100%; }
@media(min-width:1000px){
  .omr{ grid-template-columns:minmax(300px,.85fr) 1.6fr; align-items:center; column-gap:clamp(2rem,4vw,4rem); }
}

/* ---------- fem områden — koncept D: lista + levande panel ---------- */
.fyr{ display:grid; gap:2.2rem; align-items:start; }
@media(min-width:1000px){ .fyr{ grid-template-columns:1.05fr .95fr; column-gap:clamp(2rem,4vw,4.5rem); } }
.fyr__rows{ display:flex; flex-direction:column; margin-top:2.2rem; }
.fyr-row{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; background:none;
  border:0; border-top:1px solid var(--hairline); padding:.8rem .2rem; cursor:pointer; color:var(--graphite); transition:color .25s; }
.fyr-row:last-of-type{ border-bottom:1px solid var(--hairline); }
.fyr-row.on, .fyr-row:hover{ color:var(--ink); }
.fyr-row__n{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--clay); width:1.8rem; flex:none; transition:color .25s; }
.fyr-row.on .fyr-row__n{ color:var(--rdeep,var(--sage-deep)); }
.fyr-row__t{ font-family:var(--font-display); font-weight:500; font-size:clamp(20px,1.9vw,25px); line-height:1.05; flex:1; }
.fyr-row__dot{ width:8px; height:8px; border-radius:9999px; flex:none; opacity:0; transform:scale(.5); transition:opacity .25s, transform .35s var(--e-soft); }
.fyr-row.on .fyr-row__dot{ opacity:1; transform:none; }
.fyr__panel{ position:relative; border-radius:22px; border:1px solid var(--hairline-strong); overflow:hidden; transition:background .5s; display:grid; }
.fyr-pane{ grid-area:1/1; padding:1.5rem 1.45rem 1.4rem; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .35s, transform .45s var(--e-soft); display:flex; flex-direction:column; align-items:flex-start; }
.fyr-pane.on{ opacity:1; pointer-events:auto; transform:none; }
.fyr-pane__hd{ display:flex; align-items:center; gap:10px; }
.fyr-pane__hd .mod-ic{ width:22px; height:22px; margin:0; }
.fyr-pane__lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; }
.fyr-pane__d{ font-size:14.5px; line-height:1.55; color:var(--ink); margin:.9rem 0 0; max-width:38ch; }
.fyr-pane .mini{ margin-top:1.1rem; width:100%; box-shadow:var(--shadow-soft); }
.fyr-pane .mod-tags{ margin-top:1.1rem; }
.fyr-pane .mod-tag{ background:rgba(255,251,246,.7); }
@media(max-width:999px){ .fyr-pane{ position:static; } .fyr-pane:not(.on){ display:none; } }

/* hero proof chips: CSS-driven (hidden on small screens) */
@media(max-width:899px){ [data-floatchip]{ display:none !important; } }

/* ---------- livets båge (kap. 6 — Hela vägen, koncept B) ---------- */
.bow{ position:relative; height:300px; margin-top:clamp(1.6rem,3.5vh,2.8rem); }
.bow svg path{ stroke-dashoffset:0; }
.bow__node{ position:absolute; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:9999px;
  background:var(--paper); border:2.5px solid var(--sage); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:500; font-size:16px; box-shadow:0 0 0 6px var(--cream),var(--shadow-soft);
  transition:transform .4s var(--e-soft),box-shadow .4s var(--e-soft); }
.bow__node:hover{ transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 0 6px var(--cream),var(--shadow-lift); }
.bow__legend{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:.6rem; }
@media(max-width:759px){
  .bow{ height:auto; display:flex; flex-direction:column; gap:.2rem; margin-top:1.4rem; }
  .bow svg{ position:relative !important; height:120px !important; }
  .bow__node{ display:none; }
  .bow__legend{ grid-template-columns:1fr 1fr; gap:2rem 1.2rem; margin-top:1.6rem; }
}

/* ---------- minnesboken: fotoväggen (kap. 7) ---------- */
.minne-wrap{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.4rem); align-items:center; }
@media(min-width:900px){ .minne-wrap{ grid-template-columns:.82fr 1.18fr; } }
.minne-wall{ position:relative; }
@media(min-width:900px){ .minne-wall{ height:444px; } }
.memf{ margin:0; background:var(--paper); padding:8px 8px 9px; border-radius:5px;
  box-shadow:0 16px 38px -16px rgba(63,82,57,.45),0 2px 6px rgba(30,42,30,.06);
  transform:rotate(var(--rot,0deg)); transition:transform .5s var(--e-soft),box-shadow .5s var(--e-soft); }
.memf__ph{ position:relative; line-height:0; }
.memf__cap{ font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--graphite); text-align:center; margin-top:7px; line-height:1.2; }
.memf__date{ position:absolute; right:7px; bottom:7px; font-family:var(--font-mono); font-size:10px; color:#F2D58B; background:rgba(30,20,10,.5); padding:2px 6px; border-radius:4px; letter-spacing:.04em; }
.memf__voice{ position:absolute; left:7px; bottom:7px; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--ink); background:rgba(255,251,246,.94); padding:3px 9px; border-radius:9999px; box-shadow:0 3px 10px rgba(0,0,0,.14); }
/* reveal: photos drift + fade in, keeping their tilt */
.minne-wall .memf{ opacity:0; transform:rotate(var(--rot,0deg)) translateY(18px); }
.minne-wall.in .memf{ opacity:1; transform:rotate(var(--rot,0deg)); transition:opacity .75s var(--e-soft),transform .75s var(--e-soft),box-shadow .5s var(--e-soft); }
.minne-wall.in .memf:nth-child(1){ transition-delay:.05s; }
.minne-wall.in .memf:nth-child(2){ transition-delay:.13s; }
.minne-wall.in .memf:nth-child(3){ transition-delay:.21s; }
.minne-wall.in .memf:nth-child(4){ transition-delay:.29s; }
.minne-wall.in .memf:nth-child(5){ transition-delay:.37s; }
.minne-wall.in .memf:nth-child(6){ transition-delay:.45s; }
@media(min-width:900px){
  .memf{ position:absolute; }
  .minne-wall.in .memf:hover{ transform:rotate(0deg) scale(1.04); box-shadow:var(--shadow-deep); z-index:5; }
}
@media(max-width:899px){
  .minne-wall{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-content:start; }
  .memf{ position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:auto !important; align-self:start; }
}
html.no-anim .minne-wall .memf{ opacity:1 !important; transform:rotate(var(--rot,0deg)) !important; transition:none !important; }

/* ---------- marquee ---------- */
.mq{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq__t{ display:flex; width:max-content; align-items:center; animation:mq 42s linear infinite; }
.mq:hover .mq__t{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ---------- custom cursor ---------- */
@media(pointer:fine){ .has-cursor, .has-cursor *{ cursor:none; } }
.cur{ position:fixed; top:0; left:0; z-index:9999; width:9px; height:9px; border-radius:9999px; background:var(--ink); pointer-events:none; mix-blend-mode:multiply; transform:translate(-50%,-50%); transition:width .25s var(--e-soft),height .25s var(--e-soft),background .25s,opacity .25s; will-change:transform; }
.cur.hot{ width:46px; height:46px; background:color-mix(in oklab,var(--sage) 22%,transparent); mix-blend-mode:normal; border:1px solid var(--sage); }
.cur.lab{ width:auto; height:auto; padding:9px 14px; border-radius:9999px; background:var(--ink); mix-blend-mode:normal; }
.cur__t{ display:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); white-space:nowrap; }
.cur.lab .cur__t{ display:block; }

/* ---------- reveal / motion ---------- */
.r{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--e-soft),transform 1s var(--e-soft); }
.r.in{ opacity:1; transform:none; }
.r-1{transition-delay:.06s}.r-2{transition-delay:.14s}.r-3{transition-delay:.22s}.r-4{transition-delay:.3s}.r-5{transition-delay:.38s}.r-6{transition-delay:.46s}
.mask{ overflow:hidden; display:block; }
.mask > *{ display:block; transform:translateY(115%); transition:transform 1.05s var(--e-expo); }
.mask.in > *{ transform:none; }
.mask-2 > *{ transition-delay:.12s } .mask-3 > *{ transition-delay:.24s }
.scale-in{ opacity:0; transform:scale(.94); transition:opacity 1.1s var(--e-soft),transform 1.1s var(--e-soft); }
.scale-in.in{ opacity:1; transform:none; }
.par{ will-change:transform; }
.float{ animation:floaty 7s ease-in-out infinite; }
.float-2{ animation:floaty 9s ease-in-out infinite; animation-delay:-2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* fallback: never leave content hidden if animation can't run */
html.no-anim .r,
html.no-anim .scale-in{ opacity:1 !important; transform:none !important; transition:none !important; }
html.no-anim .mask > *{ transform:none !important; transition:none !important; }
html.no-anim .float,html.no-anim .float-2,html.no-anim .sweep::after,html.no-anim .blob{ animation:none !important; }
html.no-anim .thread path{ stroke-dashoffset:0 !important; transition:none !important; }
html.no-anim .dayscreen{ transition:none !important; }
html.no-anim .tl-dot::after{ transition:none !important; transform:translate(-50%,-50%) scale(1) !important; }
html.no-anim .track__cols::before{ transform:none !important; transition:none !important; }
html.no-anim .track__dot{ transform:scale(1) !important; transition:none !important; }
html.no-anim .track__card{ opacity:1 !important; transform:none !important; transition:none !important; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .r,.scale-in{ opacity:1 !important; transform:none !important; }
  .mask > *{ transform:none !important; }
  .thread path{ stroke-dashoffset:0 !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- footer ---------- */
.foot{ position:relative; border-top:1px solid var(--hairline); background:var(--paper); margin-top:7rem; }
.wordmark{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.04em; line-height:.8; color:var(--ink); font-size:clamp(84px,20vw,300px); }
.foot a.fl{ color:var(--graphite); transition:color .2s; }
.foot a.fl:hover{ color:var(--ink); }

/* ---------- compact footer (koncept E) ---------- */
.footc__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 2rem; }
.footc__brand{ display:flex; align-items:center; gap:1.3rem; }
.footc__tag{ font-size:13.5px; color:var(--graphite); max-width:30ch; line-height:1.5; }
.footc__nav{ display:flex; flex-wrap:wrap; gap:1.1rem 1.3rem; font-size:14px; }
.footc__nav a{ color:var(--graphite); transition:color .2s; }
.footc__nav a:hover{ color:var(--ink); }
.footc__legal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1rem;
  border-top:1px solid var(--hairline); margin-top:1.8rem; padding-top:1.3rem; font-size:12px; color:var(--graphite); }
.footc__legal-links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.footc__legal-links a{ color:var(--graphite); transition:color .2s; }
.footc__legal-links a:hover{ color:var(--ink); }
@media(max-width:760px){
  .footc__brand{ flex-direction:column; align-items:flex-start; gap:.6rem; flex-basis:100%; }
}

/* utility */
.u-peach{ background-image:linear-gradient(transparent 62%,color-mix(in oklab,var(--peach-soft) 92%,transparent) 62%); background-repeat:no-repeat; }
.hr{ height:1px; background:var(--hairline); border:0; }
.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; }

/* ============================================================
   RESPONSIVE LAYOUT (mobile-first; enhance upward)
   ============================================================ */
@media(min-width:600px){
  .promise-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .mod-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .trust-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .minne-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .foot-cta{ grid-template-columns:auto auto !important; }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr !important; }
}
@media(min-width:900px){
  .hero-grid{ grid-template-columns:1.05fr .95fr !important; }
  .prob-grid{ grid-template-columns:1.3fr 1fr !important; align-items:end; }
  .promise-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .mod-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .trust-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .views-grid{ grid-template-columns:1.1fr .9fr !important; }
  /* sticky day: text column beside sticky phone */
  .day-wrap{ grid-template-columns:1fr 1fr !important; column-gap:clamp(2rem,5vw,5rem); }
}
@media(max-width:899px){
  /* day sequence: stack the phone above a simple vertical timeline */
  .day-wrap{ display:flex !important; flex-direction:column; }
  .day-sticky{ position:static !important; order:-1; height:auto !important; padding:1rem 0 2rem; }
  .day-text .day-step{ min-height:auto !important; padding:1.6rem 0 !important; border-top:1px solid var(--hairline); }
  .day-text .day-step:first-child{ border-top:0; }
  #dag .dayscreens{ position:relative; }
  #dag .dayscreen{ position:absolute; }
  #dag .dayscreen.first{ position:relative; }
}
@media(min-width:1100px){
  .hero-mock{ transform:translateX(-8px); }
}

/* phone sizing down on small screens */
@media(max-width:420px){ .phone{ width:260px; padding:9px; border-radius:40px; } .phone__s{ border-radius:31px; } }

/* ============================================================
   DARK CHAPTER — Trygghet
   ============================================================ */
.dark-sec{ position:relative; isolation:isolate; background:#13190F; color:var(--cream); overflow:hidden; }
.dark-sec h2,.dark-sec h3{ color:var(--cream); }
.dark-sec .eyebrow{ color:color-mix(in oklab,var(--cream) 52%,transparent); }
.dark-sec .lede{ color:color-mix(in oklab,var(--cream) 76%,transparent); }
.dark-sec__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.dark-sec__bg::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(70% 80% at 82% -5%, color-mix(in oklab,var(--sage) 55%,transparent) 0%, transparent 52%),
             radial-gradient(60% 70% at 6% 108%, color-mix(in oklab,#3FA06A 32%,transparent) 0%, transparent 48%);
  opacity:.55; }
.dark-sec__bg::after{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(251,245,238,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(251,245,238,.045) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 38%, #000 0%, transparent 72%); }
/* glowing thread callback running down the left */
.dark-thread{ position:absolute; left:max(1.4rem,calc((100vw - 1320px)/2 + 2.5rem)); top:0; bottom:0; width:1px; z-index:0;
  background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--sage) 70%,transparent) 14%,color-mix(in oklab,var(--moss) 80%,transparent) 86%,transparent);
  box-shadow:0 0 18px 1px color-mix(in oklab,var(--sage) 45%,transparent); opacity:.5; }
@media(max-width:1100px){ .dark-thread{ display:none; } }
/* dawn fade into the warm CTA below */
.dark-sec__dawn{ position:absolute; left:0; right:0; bottom:0; height:150px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--cream)); }

/* ============================================================
   KAPITEL 1 — Igenkänning · "3 på natten" (dark, emotional)
   ============================================================ */
.night{ position:relative; isolation:isolate; overflow:hidden; color:#E9E4DA;
  background:radial-gradient(86% 92% at 50% 34%, #2C382A 0%, #1B241A 70%, #161E15 100%);
  padding-block:clamp(86px,15vh,170px); }
.night__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 60% at 14% 4%, color-mix(in oklab,var(--moss) 30%,transparent) 0%, transparent 55%),
             radial-gradient(56% 60% at 90% 96%, color-mix(in oklab,var(--sage) 38%,transparent) 0%, transparent 52%); }
.night__bg::after{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(251,245,238,.5) 0.6px, transparent 0.7px);
  background-size:46px 46px; opacity:.10;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 70%); }
.night__in{ position:relative; z-index:1; }
.night__head{ text-align:center; max-width:780px; margin-inline:auto; }
.night .eyebrow{ color:var(--moss); }
.night__head h2{ color:#FBF5EE; margin-top:1rem; max-width:none; }
.night__head .t-italic{ color:var(--butter); }
.night__stage{ position:relative; margin-top:clamp(2rem,5vh,3.6rem); min-height:340px;
  display:flex; align-items:center; justify-content:center; }
.worry{ position:absolute; max-width:230px; margin:0; z-index:1;
  font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(18px,1.9vw,22px);
  line-height:1.3; color:rgba(233,228,218,.6); }
.night__phone{ position:relative; z-index:2; width:188px; background:#10160F;
  border:1px solid rgba(233,228,218,.14); border-radius:28px; padding:1.5rem 1.2rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(233,228,218,.03); }
.night__clock{ text-align:center; }
.night__clock b{ display:block; font-family:var(--font-display); font-weight:500; font-size:52px; line-height:1; color:#FBF5EE; letter-spacing:-0.02em; }
.night__clock span{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(233,228,218,.4); margin-top:6px; }
.night__noti{ margin-top:1.2rem; padding:.75rem; border-radius:13px; background:rgba(233,228,218,.05);
  border:1px solid rgba(233,228,218,.06); text-align:center; font-size:12px; color:rgba(233,228,218,.66); }
.night__punch{ text-align:center; max-width:26ch; margin:clamp(1.4rem,3vh,2.4rem) auto 0;
  font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,34px); line-height:1.18; color:#FBF5EE; }
.night__punch .t-italic{ color:var(--butter); }
.night__dawn{ position:absolute; left:0; right:0; bottom:0; height:140px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--cream)); }
@media(max-width:899px){
  .night__stage{ flex-direction:column; gap:1.4rem; min-height:0; }
  .worry{ position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    max-width:34ch; text-align:center; transform:none !important; }
}

.trust-head{ display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:end; }
@media(min-width:860px){ .trust-head{ grid-template-columns:1.2fr .8fr; gap:3rem; } }

.trust-rows{ margin-top:clamp(2.6rem,6vh,4.5rem); border-top:1px solid rgba(251,245,238,.16); }
.trust-row{ position:relative; display:grid; grid-template-columns:46px 1fr; column-gap:1.1rem; row-gap:.35rem;
  padding:clamp(1.4rem,3.4vh,2.3rem) 0; border-bottom:1px solid rgba(251,245,238,.16); }
.trust-row__ic{ grid-column:1; grid-row:1/4; display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  border:1px solid rgba(251,245,238,.18); background:rgba(251,245,238,.04); color:color-mix(in oklab,var(--sage) 78%,var(--cream)); transition:.3s var(--e-soft); }
.trust-row__n{ grid-column:2; grid-row:1; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:color-mix(in oklab,var(--cream) 46%,transparent); }
.trust-row__t{ grid-column:2; grid-row:2; font-family:var(--font-display); font-weight:500; font-size:clamp(23px,2.6vw,34px); line-height:1.05; }
.trust-row__d{ grid-column:2; grid-row:3; font-size:14.5px; line-height:1.6; color:color-mix(in oklab,var(--cream) 72%,transparent); max-width:46ch; }
@media(min-width:860px){
  .trust-row{ grid-template-columns:58px 66px minmax(210px,1fr) 1.4fr; align-items:center; column-gap:1.5rem; }
  .trust-row__ic{ grid-column:1; grid-row:auto; }
  .trust-row__n{ grid-column:2; grid-row:auto; padding-top:0; }
  .trust-row__t{ grid-column:3; grid-row:auto; }
  .trust-row__d{ grid-column:4; grid-row:auto; }
}
.trust-row:hover .trust-row__ic{ border-color:color-mix(in oklab,var(--sage) 60%,transparent); background:color-mix(in oklab,var(--sage) 16%,transparent); }
.trust-kicker{ margin-top:clamp(2.2rem,5vh,3.4rem); font-family:var(--font-display); font-size:clamp(22px,2.8vw,40px); line-height:1.16; max-width:24ch; color:var(--cream); }

/* ============================================================
   PROBLEM — "the old way" chaos cluster
   ============================================================ */
.chaos{ position:relative; height:380px; }
@media(max-width:899px){ .chaos{ height:330px; margin-top:1.5rem; } }
.chaos-note{ position:absolute; background:var(--paper); border:1px solid var(--hairline-strong);
  box-shadow:0 1px 2px rgba(30,42,30,.06),0 18px 36px -22px rgba(30,42,30,.4);
  padding:.85rem 1rem; max-width:230px; transition:transform .45s var(--e-soft), box-shadow .45s var(--e-soft); will-change:transform; }
.chaos-note .who{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-text); }
.chaos-note .msg{ font-size:14px; line-height:1.4; color:color-mix(in oklab,var(--ink) 78%,transparent); margin-top:.3rem; }
.chaos:hover .chaos-note{ transform:rotate(0deg) !important; }
.chaos-bubble{ position:absolute; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:9999px;
  background:color-mix(in oklab,var(--peach-soft) 80%,var(--paper)); border:1px solid color-mix(in oklab,var(--peach) 30%,transparent);
  font-size:12.5px; color:#8a4a2c; box-shadow:0 14px 30px -20px rgba(30,42,30,.4); }
.chaos-bubble .d{ width:6px; height:6px; border-radius:9999px; background:var(--peach); }
.chaos-tag{ position:absolute; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-text);
  display:inline-flex; align-items:center; gap:.45rem; }

/* ============================================================
   INTRO CURTAIN (first load)
   ============================================================ */
.intro{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; overflow:hidden;
  background:#13190F; }
.intro__panel{ position:absolute; inset:0;
  background:radial-gradient(75% 90% at 50% 36%, color-mix(in oklab,var(--sage) 40%,#13190F) 0%, #13190F 62%); }
.intro__inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.intro__mark{ display:flex; align-items:baseline; font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em;
  color:var(--cream); font-size:clamp(56px,11vw,128px); line-height:.9; }
.intro__dot{ color:var(--sage-soft); font-style:italic; }
/* per-letter rise */
.intro__word{ display:inline-flex; }
.intro__word span{ display:inline-block; transform:translateY(120%); opacity:0;
  animation:introRise .9s var(--e-expo) forwards; }
@keyframes introRise{ to{ transform:none; opacity:1; } }
.intro__thread{ width:2px; height:clamp(40px,8vh,76px); margin-top:14px; overflow:visible; }
.intro__thread path{ fill:none; stroke:color-mix(in oklab,var(--sage) 80%,var(--cream)); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:120; stroke-dashoffset:120; animation:introDraw .8s var(--e-soft) .5s forwards; }
@keyframes introDraw{ to{ stroke-dashoffset:0; } }
.intro__tag{ margin-top:14px; font-family:var(--font-mono); font-size:clamp(10px,1.4vw,12px); letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in oklab,var(--cream) 60%,transparent); opacity:0; animation:introFade .7s var(--e-soft) .8s forwards; }
@keyframes introFade{ to{ opacity:1; } }
/* exit: lift the whole curtain like a stage rising */
.intro.exit{ animation:introExit 1s var(--e-expo) forwards; }
@keyframes introExit{ to{ transform:translateY(-101%); } }
/* if JS/animation can't run, never trap the page behind the curtain */
html.no-anim .intro{ display:none !important; }
@media(prefers-reduced-motion:reduce){
  .intro{ display:none !important; }
}
/* prevent scroll while intro is up */
body.intro-lock{ overflow:hidden; height:100vh; }

/* ============================================================
   HELD-BREATH interlude (tonal break in the middle run)
   ============================================================ */
.breath{ position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(170deg,#243121 0%, #1B2618 60%, #18211557 100%), var(--sage-deep);
  color:var(--cream); }
.breath__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 80% at 18% 0%, color-mix(in oklab,var(--moss) 42%,transparent) 0%, transparent 55%),
             radial-gradient(50% 70% at 92% 100%, color-mix(in oklab,var(--sage) 50%,transparent) 0%, transparent 50%);
  opacity:.6; }
.breath__inner{ position:relative; z-index:1; max-width:1000px; margin-inline:auto; text-align:center;
  padding-block:clamp(76px,14vh,156px); padding-inline:1.4rem; }
.breath__ey{ font-family:var(--font-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:color-mix(in oklab,var(--cream) 56%,transparent); }
.breath__q{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; line-height:1.1;
  font-size:clamp(30px,5vw,68px); color:var(--cream); margin-top:1.6rem; }
.breath__q .t-italic{ color:var(--sage-soft); }
.breath__sub{ margin-top:1.6rem; font-size:clamp(15px,1.5vw,18px); line-height:1.6; color:color-mix(in oklab,var(--cream) 74%,transparent);
  max-width:52ch; margin-inline:auto; }
.breath__rule{ width:1px; height:clamp(34px,6vh,60px); margin:2.2rem auto 0;
  background:linear-gradient(180deg,color-mix(in oklab,var(--sage) 75%,transparent),transparent); }

/* ============================================================
   MODULES — "Allt på ett ställe" (catalog + drawer)
   ============================================================ */
.mods{ padding-block:clamp(60px,9vh,120px); background:color-mix(in oklab,var(--mist) 50%,var(--cream)); }
.mod-stack{ display:flex; flex-direction:column; gap:1.1rem; }
.mod-grid2{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media(min-width:760px){ .mod-grid2{ grid-template-columns:1fr 1fr; } }

/* shared card chrome */
.mod-hero,.mod-card{ position:relative; border-radius:26px; cursor:pointer; text-align:left;
  transition:transform .4s var(--e-soft),box-shadow .4s var(--e-soft),border-color .3s; will-change:transform; outline:none; }
.mod-hero:focus-visible,.mod-card:focus-visible{ box-shadow:0 0 0 2px var(--sage),0 0 0 6px color-mix(in oklab,var(--sage) 25%,transparent); }
.mod-card{ background:var(--paper); border:1px solid var(--hairline); padding:clamp(1.5rem,2.4vw,2.2rem); box-shadow:var(--shadow-soft); }
.mod-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--hairline-strong); }
.mod-hero{ background:var(--sage-soft); padding:clamp(1.6rem,2.6vw,2.6rem); overflow:hidden;
  display:grid; grid-template-columns:1fr; gap:1.6rem; align-items:center; box-shadow:var(--shadow-soft); }
@media(min-width:840px){ .mod-hero{ grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); } }
.mod-hero:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }

.mod-ic{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:var(--paper); border:1px solid var(--hairline); color:var(--ink); }
.mod-ic svg{ width:22px; height:22px; }
.mod-hero .mod-ic{ background:rgba(255,251,246,.7); }

.mod-hero__t,.mod-card__t{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.015em; color:var(--ink); margin-top:1.1rem; }
.mod-hero__t{ font-size:clamp(26px,3.2vw,40px); line-height:1.02; }
.mod-card__t{ font-size:clamp(22px,2.4vw,30px); line-height:1.04; }
.mod-hero__d,.mod-card__d{ color:var(--graphite); margin-top:.7rem; line-height:1.6; }
.mod-hero__d{ font-size:clamp(15px,1.4vw,17px); max-width:42ch; }
.mod-card__d{ font-size:14.5px; max-width:46ch; }

.mod-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.mod-tag{ font-family:var(--font-sans); font-size:13px; color:var(--ink); cursor:pointer;
  border:1px solid var(--hairline); background:var(--paper); border-radius:9999px; padding:.36rem .85rem;
  transition:background .2s,border-color .2s,transform .2s var(--e-soft); }
.mod-card .mod-tag{ background:var(--cream); }
.mod-tag:hover{ background:var(--sage-soft); border-color:color-mix(in oklab,var(--sage) 35%,transparent); transform:translateY(-1px); }

.mod-more{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1.3rem;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep);
  opacity:.0; transform:translateY(4px); transition:opacity .3s,transform .3s var(--e-soft); }
.mod-hero:hover .mod-more,.mod-card:hover .mod-more,.mod-hero:focus-visible .mod-more,.mod-card:focus-visible .mod-more{ opacity:1; transform:none; }
@media(hover:none){ .mod-more{ opacity:1; transform:none; } }
.mod-more svg{ transition:transform .3s var(--e-soft); }
.mod-hero:hover .mod-more svg,.mod-card:hover .mod-more svg{ transform:translateX(3px); }

/* ---- mini mockup panel ---- */
.mini{ background:var(--paper); border:1px solid var(--hairline); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 1px 2px rgba(30,42,30,.04),0 20px 40px -28px rgba(30,42,30,.4); }
.mod-hero__mock{ position:relative; }
.mini__h{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mist-text); }
.mini__rows{ margin-top:.55rem; }
.mini__row{ display:flex; align-items:center; gap:.6rem; padding:.6rem 0; border-top:1px solid var(--hairline); }
.mini__row:first-child{ border-top:0; }
.mini__dot{ width:8px; height:8px; border-radius:9999px; flex:none; }
.mini__file{ width:13px; height:15px; border-radius:2px; border:1.4px solid var(--graphite); flex:none; position:relative; }
.mini__file::after{ content:""; position:absolute; top:2px; left:2px; right:4px; height:1.4px; background:var(--graphite); box-shadow:0 3px 0 var(--graphite),0 6px 0 var(--graphite); }
.mini__lbl{ font-size:14px; color:var(--ink); flex:1; }
.mini__who{ font-size:13px; color:var(--graphite); }
.mini__status{ display:flex; align-items:baseline; gap:.6rem; margin-top:.5rem; }
.mini__big{ font-family:var(--font-display); font-size:30px; color:var(--ink); line-height:1; }
.mini__sub{ font-size:12px; color:var(--mist-text); }
.mini__q{ font-family:var(--font-display); font-size:19px; line-height:1.2; color:var(--ink); margin-top:.5rem; }
.mini__vote{ display:flex; align-items:center; gap:.4rem; margin-top:.7rem; }
.mini__ava{ display:grid; place-items:center; width:28px; height:28px; border-radius:9999px; font-family:var(--font-display); font-size:14px; color:var(--ink); }
.mini__votetag{ margin-left:.3rem; font-size:12px; color:var(--sage-deep); background:var(--sage-soft); border-radius:9999px; padding:.2rem .6rem; }
.mini__lockrow{ margin-top:.7rem; font-size:11.5px; color:var(--graphite); }
.mini__tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:.6rem; }
.mini__tile{ aspect-ratio:1; border-radius:8px; position:relative; overflow:hidden; }
.mini__tile em{ position:absolute; left:4px; bottom:3px; font-style:normal; font-family:var(--font-mono); font-size:8px; color:var(--ink); }

/* ---- drawer ---- */
body.dwr-lock{ overflow:hidden; }
.dwr{ position:fixed; inset:0; z-index:120; visibility:hidden; }
.dwr.open{ visibility:visible; }
.dwr__bk{ position:absolute; inset:0; background:color-mix(in oklab,#0d130b 60%,transparent); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .4s var(--e-soft); }
.dwr.open .dwr__bk{ opacity:1; }
.dwr__panel{ position:absolute; top:0; right:0; height:100%; width:min(540px,94vw); background:var(--paper);
  box-shadow:-30px 0 80px -30px rgba(13,19,11,.5); transform:translateX(102%); transition:transform .55s var(--e-expo);
  display:flex; flex-direction:column; outline:none; }
.dwr.open .dwr__panel{ transform:none; }
.dwr__scroll{ overflow-y:auto; height:100%; }
.dwr__close{ position:absolute; top:14px; right:14px; z-index:3; display:grid; place-items:center; width:40px; height:40px;
  border-radius:9999px; border:1px solid var(--hairline); background:rgba(255,251,246,.85); color:var(--ink); cursor:pointer; backdrop-filter:blur(8px);
  transition:background .2s,transform .2s var(--e-soft); }
.dwr__close:hover{ background:var(--mist); transform:rotate(90deg); }
.dwr__head{ padding:clamp(2.2rem,4vw,3rem) clamp(1.5rem,3vw,2.4rem) clamp(1.6rem,3vw,2.2rem); }
.dwr__head .mod-ic{ background:rgba(255,251,246,.8); }
.dwr__ey{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); margin-top:1rem; }
.dwr__title{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; font-size:clamp(30px,4vw,46px); line-height:1.02; color:var(--ink); margin-top:.5rem; }
.dwr__intro{ font-size:16px; line-height:1.55; color:var(--graphite); margin-top:.8rem; max-width:42ch; }
.dwr__body{ padding:clamp(1.4rem,3vw,2.2rem); }
.dwr__mock{ margin-bottom:1.8rem; }
.dwr__mock .mini{ box-shadow:var(--shadow-soft); }
.dwr__featlabel{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); margin-bottom:.4rem; }
.dwr__feat{ list-style:none; margin:0; padding:0; }
.feat-row{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--hairline); border-radius:8px; transition:background .4s; }
.feat-row.hot{ background:var(--sage-soft); padding-inline:.8rem; margin-inline:-.8rem; }
.feat-dot{ width:9px; height:9px; border-radius:9999px; margin-top:.45rem; flex:none; }
.feat-name{ font-family:var(--font-display); font-size:21px; color:var(--ink); line-height:1.1; }
.feat-desc{ font-size:14px; line-height:1.55; color:var(--graphite); margin-top:.25rem; max-width:44ch; }
.dwr__cta{ width:100%; justify-content:center; margin-top:1.8rem; }
.dwr__seemore{ display:inline-flex; align-items:center; gap:.5rem; width:100%; justify-content:center; margin-top:.9rem;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-deep); }
.dwr__seemore svg{ transition:transform .3s var(--e-soft); }
.dwr__seemore:hover{ color:var(--ink); }
.dwr__seemore:hover svg{ transform:translateX(3px); }
.dwr__foot{ font-size:12.5px; color:var(--mist-text); margin-top:1rem; text-align:center; line-height:1.5; }

@media(max-width:560px){
  .dwr__panel{ width:100%; top:auto; bottom:0; height:92vh; border-radius:24px 24px 0 0; transform:translateY(102%); }
  .dwr.open .dwr__panel{ transform:none; }
}

/* fallbacks */
html.no-anim .mod-more{ opacity:1 !important; transform:none !important; }
html.no-anim .dwr__bk{ transition:none !important; }
html.no-anim .dwr__panel{ transition:none !important; }
@media(prefers-reduced-motion:reduce){
  .dwr__panel{ transition:none !important; }
  .dwr__close:hover{ transform:none; }
}

/* ============================================================
   SÅ FUNKAR DET — uppstartskortet (kap. 3)
   ============================================================ */
.howto__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.6rem); align-items:center; }
@media(min-width:900px){ .howto__grid{ grid-template-columns:1fr auto; } }
.howto__reassure{ margin-top:1.2rem; max-width:46ch; }
.howto__card{ width:100%; max-width:430px; justify-self:center; background:var(--paper); border:1px solid var(--hairline);
  border-radius:24px; box-shadow:var(--shadow-lift); overflow:hidden; }
@media(min-width:900px){ .howto__card{ width:430px; } }
.howto__cardhead{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.5rem; border-bottom:1px solid var(--hairline); }
.howto__cardtitle{ font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--ink); white-space:nowrap; }
.howto__badge{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sage-deep); background:var(--sage-soft); border-radius:9999px; padding:.32rem .8rem; }
.howto__steps{ list-style:none; margin:0; padding:.4rem 1.5rem 1.3rem; }
.howto__step{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-top:1px solid var(--hairline); }
.howto__step:first-child{ border-top:0; }
.howto__num{ width:30px; height:30px; flex:none; border-radius:9999px; display:grid; place-items:center;
  background:var(--sage-soft); color:var(--sage-deep); font-family:var(--font-display); font-weight:500; font-size:16px; }
.howto__st{ font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--ink); line-height:1.1; }
.howto__sd{ font-size:13.5px; line-height:1.55; color:var(--graphite); margin-top:.3rem; }
.howto__fine{ display:flex; align-items:center; gap:.6rem; margin:0 1.5rem 1.4rem; padding-top:1.1rem;
  border-top:1px dashed var(--hairline-strong); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); }
.howto__fine .d{ width:8px; height:8px; border-radius:9999px; background:var(--sage); flex:none; }

/* ============================================================
   PRIS — lugnt löfte + länk vidare (kap. 10)
   ============================================================ */
.pris__in{ max-width:780px; margin-inline:auto; text-align:center; }
.pris__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1.4rem; margin-top:1.8rem; }
.pris__chip{ display:inline-flex; align-items:center; gap:.5rem; font-size:14px; color:var(--ink); }
.pris__chip .d{ width:7px; height:7px; border-radius:9999px; background:var(--sage); flex:none; }
.pris__cta{ display:flex; flex-direction:column; align-items:center; gap:.9rem; margin-top:2.2rem; }
.pris__note{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); }

/* ============================================================
   PROMISE — "Kaoset sorterar sig" (chat -> 6 områden)
   ============================================================ */
.sortsec{ padding-block:clamp(60px,9vh,120px); }
.sort-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.sort-head .replay{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--hairline-strong); background:var(--paper);
  border-radius:9999px; padding:.6rem 1.1rem; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; transition:background .2s,border-color .2s,transform .3s var(--e-soft); }
.sort-head .replay:hover{ background:var(--mist); border-color:var(--clay); }
.sort-head .replay svg{ transition:transform .5s var(--e-soft); }
.sort-head .replay.spin svg{ transform:rotate(-360deg); }

.tboard{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin-top:2.4rem; align-items:start; }
@media(min-width:920px){ .tboard{ grid-template-columns:minmax(330px,0.82fr) 1.18fr; gap:1.4rem; } }

.colcap{ display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); }
.colcap .n{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9999px; font-size:9px; }
.colcap .n.chaos{ background:var(--peach-soft); color:#9a5232; }
.colcap .n.calm{ background:var(--sage-soft); color:var(--sage-deep); }

/* chat */
.chat{ background:linear-gradient(180deg,#FFFDFA,#FBF1E6); border:1px solid var(--hairline); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-soft); }
.chat__top{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--hairline); background:rgba(255,251,246,.7); }
.chat__ava{ display:grid; place-items:center; width:34px; height:34px; border-radius:9999px; background:var(--mist); font-size:16px; }
.chat__name{ font-weight:600; font-size:14px; color:var(--ink); line-height:1.1; }
.chat__meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--graphite); }
.chat__unread{ margin-left:auto; font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--cream); background:var(--peach); border-radius:9999px; padding:.2rem .5rem; transition:opacity .4s,transform .4s; }
.chat.solved .chat__unread{ opacity:0; transform:scale(.6); }
.chat__msgs{ padding:1rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; max-height:560px; overflow:hidden; position:relative; }

.msg{ display:flex; gap:.55rem; align-items:flex-start; max-width:90%; transition:opacity .5s var(--e-soft),transform .5s var(--e-soft),filter .5s; }
.msg.me{ flex-direction:row-reverse; align-self:flex-end; text-align:right; }
.msg__a{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:9999px; font-family:var(--font-display); font-size:13px; color:var(--ink); margin-top:.15rem; }
.msg__b{ position:relative; background:var(--paper); border:1px solid var(--hairline); border-radius:14px; padding:.5rem .7rem; }
.msg.me .msg__b{ background:var(--sage-soft); border-color:color-mix(in oklab,var(--sage) 18%,transparent); }
.msg__who{ font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); margin-bottom:.2rem; }
.msg__t{ font-size:13.5px; line-height:1.4; color:var(--ink); }
.msg__time{ font-family:var(--font-mono); font-size:9px; color:var(--mist-text); margin-top:.25rem; }
.msg__check{ position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:9999px; background:var(--sage); color:var(--cream); display:grid; place-items:center; font-size:10px; opacity:0; transform:scale(0); transition:opacity .35s var(--e-soft),transform .35s var(--e-soft); }
.msg.me .msg__check{ right:auto; left:-7px; }
.msg.done{ opacity:.42; filter:saturate(.7); }
.msg.done .msg__check{ opacity:1; transform:none; }
.msg.flash .msg__b{ box-shadow:0 0 0 2px var(--sage),0 8px 22px -10px var(--sage-glow); }
.msg.tension .msg__b{ background:color-mix(in oklab,var(--peach-soft) 55%,var(--paper)); border-color:color-mix(in oklab,var(--peach) 28%,transparent); }

/* board */
.board__grid{ display:grid; grid-template-columns:1fr; gap:.9rem; }
@media(min-width:560px){ .board__grid{ grid-template-columns:1fr 1fr; } }
.bcard{ position:relative; background:var(--paper); border:1px solid var(--hairline); border-radius:18px; padding:1.05rem 1.1rem; box-shadow:var(--shadow-soft);
  transition:box-shadow .4s var(--e-soft),border-color .3s,transform .4s var(--e-soft); }
.bcard.flash{ border-color:color-mix(in oklab,var(--sage) 45%,transparent); box-shadow:0 0 0 2px color-mix(in oklab,var(--sage) 30%,transparent),var(--shadow-lift); transform:translateY(-2px); }
.bcard__h{ display:flex; align-items:center; gap:.55rem; }
.bcard__ic{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--ink); }
.bcard__ic svg{ width:17px; height:17px; }
.bcard__t{ font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--ink); line-height:1; }
.bcard__empty{ font-size:12.5px; color:var(--mist-text); margin-top:.7rem; font-style:italic; transition:opacity .4s,height .4s; }
.bcard.filled .bcard__empty{ display:none; }
.bcard__rows{ margin-top:.7rem; display:flex; flex-direction:column; gap:.5rem; }
.brow{ opacity:0; transform:translateY(8px); transition:opacity .55s var(--e-soft),transform .55s var(--e-soft); }
.brow.in{ opacity:1; transform:none; }
.brow__main{ font-size:13.5px; color:var(--ink); line-height:1.3; font-weight:500; }
.brow__sub{ font-size:12px; color:var(--graphite); margin-top:.1rem; }
.brow__who{ display:inline-flex; align-items:center; gap:.35rem; ma