/* ==== styles/tokens.css ==== */
/* tokens.css: portalens fargbibliotek och typskala.
   De forsta blocken ar en kopia av prototyp/styles/tokens.css, varde for
   varde: portalen ska se ut som samma hus, och grinden P3b faller om ett
   delat token glider isar fran panelens. Portalens egna tokens star i det
   sista blocket. Den enda filen i portal/ med hexkoder. */

:root {
  /* Arbetsro: separata ytor for navigation, arbete och semantisk status.
     Panelens nav-tokens speglas har for P3b. Portalen har ingen sidomeny och
     laser dem inte an. */
  --canvas: #F7F3EC;
  --accent: #A34730;
  --sage-wash: #E8F0E8;
  --blue-wash: #E8EFF5;
  --nav-bg: #EEEAE2;
  --nav-text: #302820;
  --nav-muted: #746C60;
  --nav-line: #DAD4C9;
  --nav-active: #FFFCF7;
  --nav-hover: #F7F3EC;
  --nav-badge: #E3DCD0;
  --nav-brand-bg: #EEEAE2;
  --nav-expanded: 240px;
  --nav-collapsed: 76px;

  /* De atta tokens */
  --ink: #302820;
  --paper: #FFFFFF;
  --surface: #F3EFE8;
  --coral: #E2714E;
  --coral-wash: #FBEDE8;
  --umber: #31201B;
  --muted: #686157;
  --rule: #E2DCD2;

  /* Tva semantiska farger: bara som prick eller text, aldrig som yta */
  --gron: #3F6B4F;
  --rod: #A8402F;

  /* Knapptillstand ur artboard 12. Den avstangda ytan foljer prickskalans
     tredje steg: artboardens #A9A9A9 var panelens enda kalla gra och stack ut
     som en platta i den varma paletten. Prickskalan star langre ner i filen;
     egenskaper loses vid anvandning, sa ordningen spelar ingen roll. */
  --ink-hover: #3A3A3A;
  --avstangd: var(--prick-3);

  /* Prickarna i tillstandspillret. De morknar genom pipelinen; sex ar ink
     eftersom det da ar manniskans tur, sju ar muted. */
  --prick-1: #D9D6CF;
  --prick-2: #BDB9B0;
  --prick-3: #A8A49B;
  --prick-4: #8F8B83;
  --prick-5: #6E6A63;
  --prick-6: var(--ink);
  --prick-7: var(--muted);

  /* Overlaget bakom modalen. Ingen skugga finns i sprakat, men en modal
     behover skilja sig fran sidan under. */
  --overlay: rgba(26, 26, 26, 0.28);

  /* Tva familjer */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radier */
  --radie-kort: 10px;
  --radie-yta: 8px;
  --radie-pill: 6px;

  /* Avstand */
  --steg-1: 4px;
  --steg-2: 8px;
  --steg-3: 12px;
  --steg-4: 16px;
  --steg-5: 20px;
  --steg-6: 24px;
  --steg-7: 28px;

  /* Halvskalan: de matt som redan star som raa pixlar i komponenterna, sa
     att hantverkssvepet kan byta dem mot tokens utan att en pixel flyttar. */
  --steg-h1: 2px;
  --steg-h2: 6px;
  --steg-h3: 10px;
  --steg-h4: 14px;
  --steg-h5: 18px;

  /* Minsta tapyta pa 390, och den enda overgangen: kort nog att inte
     hinna uppfattas som en rorelse, lang nog att ta udden av ett byte. */
  --tapyta: 44px;
  --overgang: var(--rorelse-snabb) ease;

  /* Rorelsen: panelens tre tider in, en ut och tva kurvor, speglade har for
     P3b. Portalen laser dem inte an; introt gar pa --ease-ut i sista blocket. */
  --rorelse-snabb: 120ms;
  --rorelse-mjuk: 260ms;
  --rorelse-lugn: 480ms;
  --rorelse-ut: 180ms;
  --kurva-ut: cubic-bezier(0.22, 1, 0.36, 1);
  --kurva-in: cubic-bezier(0.55, 0, 1, 0.45);

  /* Skalets matt */
  --sidomeny: 240px;
  --sidmarginal: 48px;
  --radhojd: 44px;

  /* WhatsApp-forhandsvisningen har ett eget namnrum. Ingenting har kommer
     fran Meta: tapeten ar ett SVG-monster och bubblorna ar var egen palett.
     Vardena ar utgangslaget for task 3, som ager wa.css. */
  --wa-tapet: #EDE7DF;
  --wa-tapet-monster: #E3DCD2;
  --wa-in: #FFFFFF;
  --wa-ut: #F1EFE9;
  --wa-text: #1A1A1A;
  --wa-meta: #7C776E;
  --wa-rule: #DCD6CC;
  --wa-knapp: #1A1A1A;
  --wa-bredd: 380px;
}

/* ---- Portalen. Panelens tokens ovanfor star oforandrade. ----------------
   Kommentaren om --wa-* ovanfor ar panelens: dar ags de av wa.css och en
   task 3. I portalen finns ingen wa.css; samma tokens lases av telefon.css
   och telefon.js, som ritar telefonramen. */

:root {
  /* Bandet: umber som halo over ink, ordagrant artboard 12:s "dark band".
     Ett per sida, hogst. Texten pa bandet ar paper. Halons plats star i
     --band-x och --band-y: start.js flyttar dem mot pekaren pa roten, dar
     --band laser dem, och start.css later dem glida. 15 % 0 % ar artboardens.
     --band-muted ar reserverad for en sekundarrad pa bandet (muted mot ink
     ger bara 1,9:1) och anvands inte an. */
  --band-x: 15%;
  --band-y: 0%;
  --band: radial-gradient(ellipse at var(--band-x) var(--band-y), #31201B 0%, #1A1A1A 65%);
  --band-text: var(--paper);
  --band-muted: #B7B0AA;

  /* Portalens typskala: storre an panelens, samma tva familjer. */
  --t-hero: clamp(38px, 5.2vw, 64px);
  --t-vision: clamp(26px, 3vw, 40px);
  --t-sektion: 32px;
  --t-ingress: 18px;
  --t-brod: 16px;
  --t-liten: 13px;

  /* Kolumnen: en, vansterstalld, med luft som ravara. */
  --kolumn: 1120px;
  --textmatt: 620px;
  --kant: clamp(20px, 7vw, 112px);

  /* Introt: ease-out cubic, presentationsvideons standard. */
  --ease-ut: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Loginens egna toner. Delade tokens ovanfor andras inte. */
  --login-bg: #1A1A1A;
  --login-surface: #242221;
  --login-text: #FFFFFF;
  --login-muted: #B7B0AA;
  --login-soft: #D2C4B9;
  --login-rule: #81766E;
  --login-divider: #393431;
  --login-error: #F49C87;
  --login-success: #9DC5A7;
}

/* ==== styles/bas.css ==== */
/* bas.css: reset, fonter, typografi, fokusring, reduced motion.
   Byggd pa prototyp/styles/bas.css med tva skillnader: fonterna ligger
   lokalt (portalen gor inga anrop utanfor sig sjalv) och brodtexten ar
   16 px eftersom det har ar en sida som lases, inte ett verktyg som skannas. */

/* Fonterna: variabla woff2 for latin, hamtade fran Google Fonts och lagda
   har sa att ett besok inte lamnar nagot spar hos en tredje part. Inter bar
   vikterna 400 till 600, Newsreader 600 med optisk storlek 6 till 72. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-brod);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

/* hidden-attributet vinner over varje display-regel i klasserna, annars
   slar .knapp { display: inline-flex } ut det och en dold knapp syns. */
[hidden] {
  display: none !important;
}

/* Lankar ar ink aven vid hover: coral finns bara i markets punkt, tva
   ganger per sida, och aldrig pa nagot som gar att klicka pa. */
a {
  color: var(--ink);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button[disabled] {
  cursor: default;
}

/* Rubrikerna: Newsreader 600 med optisk storlek fran fonten sjalv. */
.serif {
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

/* Fokusringen: 2 px ink, 2 px offset, pa allt som gar att na med tangentbord. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Webblasare utan :focus-visible far samma ring pa :focus. */
:focus:not(:focus-visible) {
  outline: none;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* Bara for skarmlasare. */
.dold {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hoppa till innehallet: forsta elementet pa sidan, dolt tills det far
   fokus. Da star det som en inkknapp i ovre vanstra hornet. */
.hoppa:focus,
.hoppa:focus-visible {
  position: fixed;
  top: var(--steg-3);
  left: var(--steg-3);
  z-index: 40;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--steg-2) 14px;
  overflow: visible;
  clip: auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radie-yta);
  font-size: 13px;
  font-weight: 500;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==== styles/portal.css ==== */
/* portal.css: det bada sidorna delar: kolumnen, sidhuvudet, sidfoten,
   knapparna, falten och market. Sidornas egna regler ligger i start.css,
   bank.css och login.css. Inga hexkoder, ingen skugga, ingen coral pa en
   knapp: coral finns bara i markets punkt. */

/* --- Kolumnen ------------------------------------------------------------ */
/* En vansterstalld kolumn med luft som ravara: 1120 px som tak, kanten
   vaxer med fonstret upp till 112 px. */

.kolumn {
  width: min(100% - 2 * var(--kant), var(--kolumn));
  margin-inline: auto;
}

/* --- Market -------------------------------------------------------------- */
/* Logotypen ur prototyp/assets: fyra staplar som faller och en liggande
   punkt i coral. Staplarna ar en inline-SVG i currentColor, sa att raden
   far sin farg av ytan den star pa. Ordmarket ar det ritade Ghostwriter,
   beskuret till assets/ghostwriter-wordmark-ink.png och lagt som bakgrund;
   den morka inloggningen och startsidans fot byter till -paper. Bada byggs
   av assets/bygg_ordmarke.py ur logotypfilen. En mask over currentColor
   hade gett en fil, men Chrome hamtar mask-image med CORS och nekar den
   over file://, som portalen oppnas. Hela raden skalas med --marke-h:
   staplarnas hojd, ordmarkets hojd och luften foljer logotypens lockup. */

.markesrad {
  --marke-h: 22px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--marke-h) * 0.45);
  min-height: var(--tapyta);
  color: var(--ink);
}

.markesrad:hover {
  color: var(--ink);
}

.marke {
  display: block;
  flex: none;
  height: var(--marke-h);
  width: auto;
}

.marke path {
  fill: currentColor;
}

.marke-punkt {
  fill: var(--coral);
}

.ordmarke {
  display: block;
  flex: none;
  height: calc(var(--marke-h) * 0.78);
  aspect-ratio: 1355 / 185;
  background: url("../assets/ghostwriter-wordmark-ink.png") center / contain no-repeat;
}

/* --- Sidhuvudet ---------------------------------------------------------- */

.sidhuvud-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--steg-4);
  min-height: 72px;
}

.avsandare {
  font-size: var(--t-liten);
  color: var(--muted);
  white-space: nowrap;
}

.sidhuvud-linje {
  height: 1px;
  background: var(--rule);
}

/* --- Knapparna ----------------------------------------------------------- */
/* Primar ar ink, sekundar ar paper med rule. Hover byter bara farg. */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--steg-2);
  min-height: var(--tapyta);
  padding: 0 18px;
  border-radius: var(--radie-yta);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}

.knapp-primar {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.knapp-primar:hover:not([disabled]) {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  color: var(--paper);
}

/* Avstangd primar: muted i stallet for avstangd-gratt, sa att texten
   ("Checking") klarar 4,5:1 mot paper. */
.knapp-primar[disabled] {
  background: var(--muted);
  border-color: var(--muted);
  color: var(--paper);
}

.knapp-sekundar {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
}

.knapp-sekundar:hover:not([disabled]) {
  background: var(--surface);
  color: var(--ink);
}

.knapp-sekundar[disabled] {
  color: var(--avstangd);
}

/* Lankknappen: ser ut som en lank, ar en knapp. */
.knapp-lank {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  border-radius: 2px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.knapp-lank:hover:not([disabled]) {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.knapp-lank[disabled] {
  color: var(--avstangd);
  text-decoration: none;
}

/* Ett block av knappar pa en rad, staplade pa smal skarm. */
.knapprad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--steg-3);
}

/* --- Falten -------------------------------------------------------------- */

.falt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.falt-etikett {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.falt-inmatning {
  width: 100%;
  min-height: var(--tapyta);
  border: 1px solid var(--rule);
  border-radius: var(--radie-yta);
  padding: 10px var(--steg-3);
  background: var(--paper);
  font-size: 16px;
  color: var(--ink);
}

.falt-inmatning::placeholder {
  color: var(--muted);
}

.falt-inmatning:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

.falt-hjalp {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.falt-fel {
  font-size: 14px;
  color: var(--rod);
  line-height: 1.45;
}

/* --- Sidfoten ------------------------------------------------------------ */

.sidfot {
  padding: 56px 0 48px;
}

.sidfot-yta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--steg-6) 32px;
  align-items: end;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
}

.sidfot-vanster {
  display: flex;
  align-items: flex-start;
  gap: var(--steg-5);
}

/* Sigillet: djup ur skillnaden mellan surface och paper, aldrig ur skugga. */
.sigill {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.sidfot-rader {
  font-size: var(--t-liten);
  line-height: 1.85;
  color: var(--ink);
  text-wrap: pretty;
}

/* Lanken ar 16 px text men tapytan ar 44: vertikal padding som tas
   tillbaka med negativ marginal, sa att raden inte flyttar sig. */
.sidfot-rader a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.sidfot-rader a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.referens {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 899px) {
  .sidfot-yta {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 599px) {
  .knapprad {
    flex-direction: column;
    align-items: stretch;
  }

  .knapprad .knapp {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knapp {
    transition: none;
  }
}

/* ==== styles/telefon.css ==== */
/* telefon.css: telefonramen (.tel-*). Allt inne i ramen ritas ur --wa-*,
   aldrig ur sidans egna tokens, sa att de tva kan andras var for sig. Ingen
   skugga, ingen hexkod, ingen bild. */

.tel-ram {
  width: 100%;
  max-width: var(--wa-bredd);
  border: 1px solid var(--wa-rule);
  border-radius: var(--radie-kort);
  overflow: hidden;
  background: var(--wa-tapet);
  color: var(--wa-text);
  font-family: var(--sans);
}

/* --- Chattrubriken ------------------------------------------------------- */

.tel-rubrik {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--steg-3);
  background: var(--wa-in);
  border-bottom: 1px solid var(--wa-rule);
}

.tel-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-ut);
  color: var(--wa-meta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tel-namnblock {
  min-width: 0;
}

.tel-namn {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.tel-underrad {
  font-size: 11px;
  color: var(--wa-meta);
  line-height: 1.3;
  margin-top: 1px;
}

/* --- Chattytan ----------------------------------------------------------- */

.tel-yta {
  position: relative;
  min-height: 180px;
  background: var(--wa-tapet);
}

.tel-tapet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--wa-tapet-monster);
  pointer-events: none;
}

.tel-flod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--steg-2);
  padding: var(--steg-3) 10px var(--steg-4);
  min-height: 180px;
}

/* --- Bubblorna ----------------------------------------------------------- */

.tel-bubbla {
  max-width: 86%;
  padding: var(--steg-2) 10px 6px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: var(--radie-yta);
  overflow-wrap: anywhere;
}

.tel-in {
  align-self: flex-start;
  background: var(--wa-in);
  border-top-left-radius: var(--steg-1);
}

.tel-ut {
  align-self: flex-end;
  background: var(--wa-ut);
  border-top-right-radius: var(--steg-1);
}

.tel-stycke + .tel-stycke {
  margin-top: var(--steg-2);
}

.tel-meta {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--wa-meta);
  margin-top: var(--steg-1);
}

/* Punkten personen satt: coral, som i rosten. */
.tel-punkt {
  color: var(--coral);
}

/* Metaraden pa en utgaende bubbla: --wa-meta pa --wa-ut ger 3,9:1, under
   4,5. Tonen morknas med en femtedel --wa-text, fortfarande helt ur ramens
   egna tokens och utan ny hexkod (5,2:1 pa wa-ut). */
.tel-ut .tel-meta,
.tel-ut .tel-memo-tid {
  color: color-mix(in srgb, var(--wa-meta) 78%, var(--wa-text));
}

/* --- Rostmemot ----------------------------------------------------------- */
/* En spelknapp som bara ar en bild, staplar i fasta hojder och langden.
   Allt i bubblans text- och metafarg. */

.tel-memo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  padding: 2px 0 4px;
}

.tel-memo-spela {
  width: 22px;
  height: 22px;
  color: var(--wa-text);
}

.tel-memo-vag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
}

.tel-memo-stapel {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--wa-meta);
  transform: scaleY(var(--h));
}

.tel-memo-tid {
  font-size: 11px;
  color: var(--wa-meta);
}

/* --- Svarsknapparna ------------------------------------------------------ */
/* Bilder av WhatsApps svarsknappar under en bubbla: paper-rader i samma
   bredd som bubblan, inte klickbara. Gruppen haller ihop bubbla och rader. */

.tel-grupp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 86%;
}

.tel-grupp-in {
  align-self: flex-start;
}

.tel-grupp-ut {
  align-self: flex-end;
}

.tel-grupp .tel-bubbla {
  max-width: none;
}

.tel-val {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tel-valrad {
  padding: 7px 10px;
  border-radius: var(--radie-yta);
  background: var(--wa-in);
  color: var(--wa-text);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* Den svarsknapp som gar att trycka pa: samma utseende, riktig knapp. */
.tel-valrad-knapp {
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 34px;
  cursor: pointer;
  transition: background-color var(--overgang);
}

.tel-valrad-knapp:hover {
  background: var(--wa-ut);
}

/* --- Systemraden --------------------------------------------------------- */
/* Som WhatsApps datumremsa: liten, mitt i flodet, utan avsandare. */

.tel-system {
  align-self: center;
  margin: var(--steg-1) 0;
  padding: 4px 10px;
  border-radius: var(--radie-pill);
  background: var(--wa-ut);
  color: var(--wa-text);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

/* Tomraden: nar ingenting hant an. Ritas som en liten paper-ruta i ink,
   inte som gra text direkt pa tapeten: dar landar kontrasten under 4,5:1. */
.tel-tom {
  align-self: center;
  margin: auto;
  padding: var(--steg-2) var(--steg-3);
  border-radius: var(--radie-yta);
  background: var(--wa-in);
  color: var(--wa-text);
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

/* --- Skrivindikatorn ----------------------------------------------------- */

.tel-skriver {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 11px 12px;
  min-height: 34px;
}

.tel-prick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wa-meta);
  animation: tel-puls 900ms ease-in-out infinite;
}

.tel-prick:nth-child(2) { animation-delay: 150ms; }
.tel-prick:nth-child(3) { animation-delay: 300ms; }

@keyframes tel-puls {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .tel-prick {
    animation: none;
    opacity: 0.7;
  }

  .tel-valrad-knapp {
    transition: none;
  }
}

/* ==== styles/bank.css ==== */
/* Feedback ar en delad dokumentyta. Detaljer om regler ar en frivillig lasning. */
.bank { background: var(--surface); padding: 96px 0; }
.bank-ingress { margin-top: 24px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.bank-yta { margin-top: 40px; display: grid; grid-template-columns: 1.08fr 1fr; align-items: stretch; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.bank-vanster, .bank-hoger { min-width: 0; padding: 32px; }
.bank-hoger { border-left: 1px solid var(--rule); }
.bank-falthuvud { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bank-falthuvud > span { font-size: 11px; color: var(--muted); }
.bank-etikett, .bank-svarrubrik { font-size: 14px; font-weight: 500; }
.bank-text { margin-top: 22px; width: 100%; min-height: 330px; max-height: 650px; padding: 16px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.7; resize: vertical; }
.bank-text:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bank-rad { margin-top: 18px; }
.bank-notis { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.bank-perspektiv { counter-reset: perspektiv; margin-top: 24px; }
.bank-perspektiv li { counter-increment: perspektiv; position: relative; padding: 24px 0 24px 62px; border-bottom: 1px solid var(--rule); }
.bank-perspektiv li:last-child { border-bottom: 0; }
.bank-perspektiv li::before { content: counter(perspektiv, decimal-leading-zero); position: absolute; top: 22px; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%; font: 17px var(--start-display); }
.bank-perspektiv h3, .bank-resultat h3 { font-size: 14px; font-weight: 500; line-height: 1.5; }
.bank-perspektiv p, .bank-resultat p { margin-top: 9px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.bank-resultat-rubrik { font: 26px/1.3 var(--start-display); letter-spacing: -.03em; margin-top: 26px; }
.bank-resultat { margin-top: 18px; }
.bank-resultat li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bank-resultat-fot { margin-top: 22px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.bank-vantar { margin-top: 40px; color: var(--muted); font-size: 14px; }
.bank-vantar::after { content: ""; display: block; margin-top: 18px; width: 64px; height: 1px; background: var(--coral); animation: bank-vanta 450ms ease-in-out infinite alternate; transform-origin: left; }
.bank-regelbok { margin-top: 16px; border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); }
.bank-regelbok summary { min-height: 58px; padding: 16px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; list-style: none; }
.bank-regelbok summary::-webkit-details-marker { display: none; }
.bank-regelbok[open] summary .pil { transform: rotate(45deg); }
.bank-regelbok-innehall { padding: 8px 24px 24px; }
.bank-regler-rubrik { font-size: 13px; color: var(--muted); line-height: 1.6; }
.bank-regler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bank-regel { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px; color: var(--muted); font-size: 12px; }
.bank-regel-niva { font-size: 10px; font-family: var(--mono); font-weight: 500; }
.bank-regel.traff { color: var(--ink); background: var(--coral-wash); border-color: var(--coral); }
.bank-fot { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.bank-rad-fynd { animation: bank-stig 200ms var(--ease-ut) backwards; }
@keyframes bank-stig { from { transform: translateY(4px); } to { transform: none; } }
@keyframes bank-vanta { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
@media (max-width: 1050px) { .bank-vanster, .bank-hoger { padding: 24px; } }
@media (max-width: 800px) {
  .bank { padding-block: 64px; }
  .bank-yta { grid-template-columns: 1fr; margin-top: 28px; }
  .bank-hoger { border-left: 0; border-top: 1px solid var(--rule); }
  .bank-text { min-height: 365px; font-size: 16px; }
  .bank-ingress { font-size: 16px; }
}
@media (max-width: 599px) {
  .bank-vanster, .bank-hoger { padding: 22px 18px; }
  .bank-perspektiv li { padding-left: 52px; }
  .bank-regelbok summary { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { .bank-rad-fynd, .bank-vantar::after { animation: none; } }

/* ==== styles/rost.css ==== */
/* rost.css: heron hall for att svara (.rost-*). Kortet ligger pa surface med
   rule, som bankens falt; utkastet ar paper pa surface, som en lapp pa bordet.
   Heron ager start.css (kolumnerna, introt, halon bakom kortet), knapparna
   ager portal.css. Inga hexkoder, ingen skugga. Coral ar personens ogonblick
   (D17): vagen och ringen sa lange hon haller, och punkten hon satter genom
   att godkanna. */

.rost {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 34px 32px;
}

.rost-etikett {
  font-size: 12px;
  color: var(--paper);
}

.rost-fraga {
  margin-top: 26px;
  font-size: clamp(32px, 3vw, 45px);
  line-height: 1.25;
  text-wrap: balance;
}

/* --- Raden: knappen, vagen, tiden ---------------------------------------- */

.rost-rad {
  margin-top: 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--steg-4);
}

/* Mikrofonen ar en primarknapp: ink, paper pa. touch-action none sa att ett
   hall med tummen inte blir en sidrullning, och ingen langtrycksmeny. */
.rost-knapp {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform var(--overgang), background-color var(--overgang);
}

.rost-knapp:hover {
  background: var(--paper);
}

[data-rost="haller"] .rost-knapp {
  transform: scale(1.08);
}

/* Ringen: en coral rand som vidgas ur knappen sa lange den halls, D17.
   En ram, ingen skugga. */
.rost-knapp::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  opacity: 0;
  pointer-events: none;
}

[data-rost="haller"] .rost-knapp::after {
  animation: rost-ring 1200ms var(--ease-ut) infinite;
}

@keyframes rost-ring {
  from { transform: scale(0.85); opacity: 0.9; }
  to { transform: scale(1.4); opacity: 0; }
}

.rost-knapp svg {
  width: 24px;
  height: 24px;
}

.rost-vag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

/* Staplarna: fasta hojder i --h, egen takt i --d och fas i --f, satta av
   rost.js. I vila ligger de nere i prick-2; under ett hall svanger de i ink;
   efter slappet star de kvar i sina fulla hojder, som ett skickat memo. */
.rost-stapel {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--rule);
  transform: scaleY(var(--h));
  transform-origin: center;
  transition: background-color var(--overgang), transform 240ms var(--ease-ut);
}

[data-rost="vila"] .rost-stapel,
[data-rost="andra"] .rost-stapel {
  transform: scaleY(var(--h));
  background: var(--prick-2);
}

/* Under hallet svanger vagen i coral: det ar personens ogonblick (D17).
   Efter slappet star den kvar i ink, som ett skickat memo. */
[data-rost="haller"] .rost-stapel {
  background: var(--coral);
  animation: rost-vag var(--d) ease-in-out infinite alternate;
  animation-delay: var(--f);
}

[data-rost="skriver"] .rost-stapel,
[data-rost="utkast"] .rost-stapel,
[data-rost="klar"] .rost-stapel {
  background: var(--paper);
}

@keyframes rost-vag {
  from { transform: scaleY(0.15); }
  to { transform: scaleY(var(--h)); }
}

.rost-tid {
  font-size: var(--t-liten);
  color: var(--band-muted);
  min-width: 34px;
  text-align: right;
}

.rost-hint {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  font-size: var(--t-liten);
  color: var(--paper);
  line-height: 1.5;
  min-height: 20px;
}

/* --- Utkastet ------------------------------------------------------------ */

.rost-demo { margin-top: 5px; font-size: 12px; color: var(--band-muted); line-height: 1.6; }

.rost-utkast {
  color: var(--ink);
  margin-top: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radie-yta);
  padding: 18px 20px 20px;
}

.rost-utkast-etikett {
  font-size: var(--t-liten);
  color: var(--muted);
}

.rost-text {
  margin-top: var(--steg-2);
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Orden tonar in med 42 ms mellan sig, samma tal som ORD_MS i rost.js. */
.rost-ord {
  animation: rost-ord 260ms var(--ease-ut) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

@keyframes rost-ord {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Punkten finns bara nar personen satt den. Vaxer in som markets punkt i introt. */
.rost-punkt {
  display: inline-block;
  color: var(--coral);
  animation: rost-punkt 200ms var(--ease-ut) both;
}

@keyframes rost-punkt {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.rost-val {
  margin-top: var(--steg-4);
  animation: rost-tona 240ms var(--ease-ut) both;
}

@keyframes rost-tona {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rost-val .knapp {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.rost-kvitto {
  margin-top: var(--steg-3);
  font-size: var(--t-liten);
  color: var(--muted);
  line-height: 1.5;
}

/* --- Smal skarm ---------------------------------------------------------- */

@media (max-width: 599px) {
  .rost {
    padding: 30px 24px 26px;
  }

  .rost-fraga {
    font-size: 31px;
  }

  .rost-rad {
    gap: var(--steg-3);
  }

  .rost-knapp {
    width: 56px;
    height: 56px;
  }

  .rost-vag {
    height: 32px;
  }

  .rost-val .knapp {
    min-height: var(--tapyta);
  }
}

/* --- Reducerad rorelse --------------------------------------------------- */
/* Vagen star stilla i sina fulla hojder under hallet, orden och punkten star
   pa plats direkt, knappen vaxer inte. */

@media (prefers-reduced-motion: reduce) {
  .rost-ord,
  .rost-punkt,
  .rost-val {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .rost-stapel,
  .rost-knapp,
  .rost-knapp::after {
    animation: none;
    transition: none;
  }

  [data-rost="haller"] .rost-knapp {
    transform: none;
  }

  /* Ringen star stilla som en rand runt knappen sa lange den halls. */
  [data-rost="haller"] .rost-knapp::after {
    opacity: 1;
    transform: scale(1.1);
  }

  [data-rost="haller"] .rost-stapel {
    transform: scaleY(var(--h));
  }
}

/* ==== styles/vecka.css ==== */
/* En oppen stegrails och en chatt. Ingen automatisk uppspelning. */
.vecka { padding: 104px 0; scroll-margin-top: 32px; }
.vecka-ingress { max-width: 330px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.vecka-panel { margin-top: 48px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.vecka-vanster, .vecka-hoger, .vecka-chatt { min-width: 0; }
.vecka-topp { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.vecka-etikett { font-size: 13px; color: var(--muted); }
.vecka-spela { padding: 0 16px; min-height: 44px; min-width: 70px; border: 1px solid var(--rule); border-radius: 3px; font-size: 13px; text-decoration: none; }
.vecka-spela:hover { background: var(--surface); }
.vecka-knapp { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 22px; align-items: start; width: 100%; text-align: left; padding: 22px 8px 22px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); border-radius: 0; transition: background-color 180ms; }
.vecka-knapp:hover { background: var(--surface); }
.vecka-knapp[aria-current="step"]::before { content: ""; position: absolute; left: 46px; top: 31px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.vecka-nr { font: 26px/1 var(--start-display); color: var(--muted); letter-spacing: -.04em; }
.vecka-titel { display: block; font-size: 16px; line-height: 1.4; font-weight: 400; }
.vecka-detalj { display: none; font-size: 13px; line-height: 1.65; margin-top: 10px; color: var(--muted); }
.vecka-knapp[aria-current="step"] .vecka-detalj { display: block; }
.vecka-knapp::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--coral); transform: scaleX(0); transform-origin: left; }
[data-spelar="ja"] .vecka-knapp[aria-current="step"]::after { animation: vecka-linje var(--vecka-ms, 3600ms) linear both; }
.vecka .tel-ram { max-width: none; background: var(--surface); border-color: var(--rule); border-radius: 12px; }
.vecka .tel-rubrik { padding: 24px; background: var(--surface); border-color: var(--rule); }
.vecka .tel-namn { font-size: 15px; }
.vecka .tel-underrad { color: var(--muted); }
.vecka .tel-yta { height: 475px; background: var(--surface); }
.vecka .tel-tapet { display: none; }
.vecka .tel-flod { height: 100%; overflow-y: auto; padding: 24px; gap: 16px; }
.vecka .tel-flod > :first-child { margin-top: auto; }
.vecka .tel-bubbla { padding: 16px 18px 10px; font-size: 14px; line-height: 1.65; border: 1px solid var(--rule); max-width: 92%; }
.vecka .tel-in { background: var(--paper); }
.vecka .tel-ut { background: var(--wa-ut); }
.vecka .tel-valrad { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.vecka-fot { font: 14px/1.5 var(--start-display); color: var(--muted); margin-top: 16px; }
.vecka-ny { animation: vecka-stig 280ms var(--ease-ut) backwards; }
@keyframes vecka-stig { from { transform: translateY(6px); } to { transform: none; } }
@keyframes vecka-linje { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1050px) { .vecka-panel { gap: 36px; } }
@media (max-width: 800px) {
  .vecka { padding-block: 64px; }
  .vecka-panel { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .vecka-ingress { max-width: 430px; }
  .vecka-steg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vecka-knapp { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 12px 8px; border: 1px solid var(--rule); border-radius: 3px; }
  .vecka-knapp[aria-current="step"] { border-color: var(--ink); background: var(--surface); }
  .vecka-knapp[aria-current="step"]::before { top: 18px; left: auto; right: 10px; }
  .vecka-detalj, .vecka-knapp[aria-current="step"] .vecka-detalj { display: none; }
  .vecka-titel { font-size: 12px; line-height: 1.5; }
  .vecka-nr { font-size: 21px; }
  .vecka .tel-yta { height: 390px; }
  .vecka .tel-flod { padding: 16px; }
  .vecka .tel-rubrik { padding: 18px; }
  .vecka .tel-bubbla { font-size: 13px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vecka-ny, [data-spelar="ja"] .vecka-knapp[aria-current="step"]::after { animation: none; }
  .vecka-knapp { transition: none; }
}

/* ==== styles/start.css ==== */
/* Startsidan har eget layout- och typografilager. Delade tokens och login
   berors inte. Alla farger kommer ur portalens befintliga palett. */
.sida-start { --kolumn: 1280px; --kant: clamp(24px, 6.7vw, 112px); --start-display: Georgia, "Times New Roman", serif; }
.sida-start .serif { font-family: var(--start-display); font-weight: 400; letter-spacing: -.052em; }
.sida-start .pil { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sida-start .knapp { min-height: 48px; padding: 0 23px; border-radius: 3px; font-size: 14px; }
.sida-start .knapp:hover .pil, .start-login:hover .pil { transform: translate(2px, -2px); }
.sida-start .pil { transition: transform 180ms ease; }
.sida-start .knapp:active:not([disabled]) { transform: translateY(1px); }
.sida-start :focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
.sida-start .sidhuvud-rad { min-height: 100px; }
.sida-start .markesrad { --marke-h: 24px; }
.start-nav { display: flex; align-items: center; gap: 30px; }
.start-nav .avsandare { font-size: 13px; color: var(--ink); }
.start-login { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding-left: 30px; border-left: 1px solid var(--rule); font-size: 13px; }
.hero { padding: 84px 0 78px; }
.hero > .kolumn { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-text, .hero-visual { min-width: 0; }
.hero-rubrik { font-size: clamp(58px, 6.3vw, 96px); line-height: 1.06; }
.hero-rubrik > span { display: block; white-space: nowrap; }
.hero-rubrik em { font-weight: 400; }
.hero-under { max-width: 410px; margin-top: 34px; font-size: 18px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.hero-knappar { margin-top: 38px; gap: 16px; align-items: center; }
.sida-start .start-textknapp { padding-inline: 8px; gap: 13px; background: none; border: 0; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 6px; }
.sida-start .start-textknapp:hover { text-decoration-color: var(--ink); }
.hero-forbigaende { display: grid; gap: 10px; margin-top: 24px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.kontakt-adress { color: var(--ink); user-select: all; }
.hero-visual { border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; align-self: center; }
.rost-signatur { padding: 23px 34px; background: var(--surface); font: 18px/1.4 var(--start-display); letter-spacing: -.025em; }
.hero-efter { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 25px; border-block: 1px solid var(--rule); }
.hero-efter p { font: 18px/1.5 var(--start-display); letter-spacing: -.02em; }
.hero-efter a { display: inline-flex; align-items: center; min-height: 44px; gap: 20px; font-size: 13px; }
.hero-efter a:hover .pil { transform: translateY(3px); }
.sektion-huvud { display: flex; justify-content: space-between; align-items: end; gap: 64px; padding-bottom: 42px; border-bottom: 1px solid var(--rule); }
.sida-start h2 { font-size: clamp(38px, 4.2vw, 62px); line-height: 1.12; }
.forklaring { padding: 110px 0; }
.forklaring-yta { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: start; }
.forklaring-text { font-size: 17px; line-height: 1.7; margin-top: 28px; color: var(--muted); }
.loften { display: grid; }
.lofte { border-top: 1px solid var(--rule); padding: 24px 0 30px; }
.sida-start .lofte-titel { font-size: 29px; line-height: 1.25; letter-spacing: -.035em; }
.lofte-text { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.band { padding: 86px 0 90px; background: var(--umber); color: var(--paper); }
.band-yta { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.sida-start .band-vision { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.16; }
.band-kontakt .knapp { min-width: 240px; min-height: 62px; justify-content: space-between; gap: 48px; background: var(--surface); border-color: var(--surface); font: 21px/1.2 var(--start-display); }
.band-kontakt p { margin-top: 18px; font-size: 12px; color: var(--band-muted); }
.band-kontakt .kontakt-adress { color: var(--paper); overflow-wrap: anywhere; }
.sida-start .sidfot { padding: 0 0 32px; background: var(--umber); color: var(--paper); }
.sida-start .sidfot-yta { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-color: color-mix(in srgb, var(--paper) 22%, transparent); }
.sida-start .sidfot .markesrad { color: var(--paper); }
.sida-start .sidfot .ordmarke { background-image: url("../assets/ghostwriter-wordmark-paper.png"); }
.start-fotnav { display: flex; align-items: center; gap: 44px; font-size: 12px; color: var(--band-muted); }
.start-fotnav a { color: var(--paper); padding-block: 14px; }
.start-fotnav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.info { border: 1px solid var(--rule); border-radius: 9px; background: var(--paper); color: var(--ink); padding: 36px; width: min(100% - 40px, 560px); max-height: calc(100% - 40px); margin: auto; overflow: auto; }
.info::backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.sida-start .info-rubrik { font-size: 36px; }
.info-punkter { margin-top: 24px; display: grid; gap: 16px; font-size: 14px; line-height: 1.65; }
.info-kontakt { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.info-knappar { position: sticky; bottom: -36px; margin: 24px -36px -36px; padding: 20px 36px; background: var(--paper); border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 12px; }
.utan-skript { padding-block: 16px; font-size: 14px; }

/* Innehall forblir synligt under hela laddningen, aven om JS avbryts.
   Endast transform animeras: ingen loader och inga osynliga sektioner. */
@keyframes start-in { from { transform: translateY(12px); } to { transform: none; } }
.hero-rubrik, .hero-under, .hero-knappar { animation: start-in 540ms var(--kurva-ut) backwards; }
.hero-under { animation-delay: 50ms; }
.hero-knappar { animation-delay: 100ms; }
.hero-visual { animation: start-in 640ms 60ms var(--kurva-ut) backwards; }
.avslojar .avslojas.inne { animation: start-in 520ms var(--kurva-ut); }
@media (max-width: 1050px) {
  .sida-start { --kant: 40px; }
  .hero > .kolumn { gap: 32px; }
  .hero-rubrik { font-size: 6.2vw; }
  .forklaring-yta { gap: 48px; }
}
@media (max-width: 800px) {
  .hero { padding: 58px 0 48px; }
  .hero > .kolumn { grid-template-columns: 1fr; gap: 40px; }
  .hero-rubrik { font-size: clamp(52px, 9.3vw, 76px); }
  .hero-under { max-width: 460px; margin-top: 24px; }
  .hero-visual { width: 100%; }
  .sektion-huvud { display: grid; gap: 24px; padding-bottom: 28px; }
  .forklaring { padding-block: 72px; }
  .forklaring-yta { grid-template-columns: 1fr; gap: 40px; }
  .band-yta { grid-template-columns: 1fr; gap: 32px; }
  .band { padding-block: 60px; }
}
@media (max-width: 599px) {
  .sida-start { --kant: 24px; }
  .sida-start .sidhuvud-rad { min-height: 80px; }
  .sida-start .markesrad { --marke-h: 20px; }
  .start-nav .avsandare { display: none; }
  .start-login { padding-left: 16px; gap: 10px; }
  .hero { padding-top: 46px; }
  .hero-rubrik { font-size: clamp(44px, 12.8vw, 72px); }
  .hero-under { font-size: 16px; line-height: 1.65; max-width: 33ch; }
  .hero-knappar { flex-direction: row; gap: 12px; margin-top: 28px; }
  .hero-knappar .knapp { width: auto; padding-inline: 18px; }
  .hero-knappar .start-textknapp { padding-inline: 4px; }
  .hero-forbigaende { margin-top: 20px; font-size: 11px; }
  .rost-signatur { padding: 20px 24px; font-size: 16px; }
  .hero-efter { align-items: start; gap: 8px; flex-direction: column; padding-block: 18px; }
  .hero-efter p { font-size: 17px; }
  .hero-efter a { font-size: 12px; }
  .sida-start h2 { font-size: 39px; }
  .sida-start .lofte-titel { font-size: 26px; }
  .sida-start .band-vision { font-size: clamp(34px, 9.2vw, 50px); }
  .sida-start .sidfot-yta { align-items: start; gap: 20px; flex-direction: column; }
  .start-fotnav { justify-content: space-between; gap: 20px; width: 100%; }
  .info { padding: 24px; }
  .info-knappar { bottom: -24px; margin: 24px -24px -24px; padding: 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rubrik, .hero-under, .hero-knappar, .hero-visual, .avslojar .avslojas.inne { animation: none; }
  .sida-start .pil { transition: none; }
  .sida-start .knapp:active:not([disabled]), .sida-start .knapp:hover .pil, .start-login:hover .pil, .hero-efter a:hover .pil { transform: none; }
}

/* ==== styles/start-rorelse.css ==== */
/* Startsidan: ljus, djup och respons. Fristaende fran login och demomotorerna.
   Allt innehall ar synligt utan JS. Automatiska dekorrorelser tar slut inom
   fem sekunder; pekaren och lasningen driver resten. */
.sida-start {
  --start-kurva: cubic-bezier(.2, .8, .2, 1);
}

/* Ljuset ligger bakom innehallet och tar aldrig emot ett klick. */
.sida-start .hero,
.sida-start .band,
.sida-start .rost { position: relative; isolation: isolate; }
.sida-start .hero,
.sida-start .band { overflow: clip; }
.sida-start .hero::before,
.sida-start .band::before,
.sida-start .rost::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
}
.sida-start .hero::before {
  width: min(880px, 110vw);
  height: 760px;
  left: 52%;
  top: -140px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--coral) 11%, transparent), transparent 68%);
  transform: translate(var(--ljus-dx, 0px), var(--ljus-dy, 0px));
  transition: transform 900ms var(--start-kurva);
}
.sida-start .band::before {
  inset: 0;
  background: radial-gradient(ellipse 65% 130% at var(--ljus-x, 78%) var(--ljus-y, 60%), color-mix(in srgb, var(--coral) 22%, transparent), transparent 80%);
}
.sida-start .rost::before {
  inset: 0;
  background: radial-gradient(ellipse 85% 90% at var(--ljus-x, 85%) var(--ljus-y, 10%), color-mix(in srgb, var(--coral) 21%, transparent), transparent 80%);
  opacity: .55;
  transition: opacity 500ms ease;
}
.sida-start .rost:is(:hover, :focus-within)::before { opacity: 1; }

/* Ett pennstreck pa nyckelordet, sedan stilla. */
.sida-start .hero-rubrik em { position: relative; display: inline-block; }
.sida-start .hero-rubrik em::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -.015em;
  height: 3px;
  border-radius: 50%;
  background: var(--coral);
  transform: rotate(-2deg) scaleX(1);
  transform-origin: left;
  animation: start-penna 950ms 320ms var(--start-kurva) backwards;
}
.sida-start .hero-rubrik > span { animation: start-rad 860ms var(--start-kurva) backwards; }
.sida-start .hero-rubrik > span + span { animation-delay: 100ms; }
.sida-start .hero-under { animation-duration: 820ms; animation-delay: 130ms; }
.sida-start .hero-knappar { animation-duration: 820ms; animation-delay: 210ms; }
.sida-start .hero-visual {
  rotate: var(--kort-vinkel, 0deg);
  translate: 0 var(--kort-y, 0px);
  transition: rotate 650ms var(--start-kurva), translate 650ms var(--start-kurva), border-color 300ms;
}
/* Formularet och mikrofonens traffyta stannar nar man arbetar i kortet. */
.sida-start .hero-visual:has(:focus-visible),
.sida-start .hero-visual:has([data-rost="haller"]),
.sida-start .hero-visual:has([data-rost="skriver"]) { rotate: 0deg; translate: 0 0; }
.sida-start .rost-etikett { display: flex; align-items: center; gap: 10px; }
.sida-start .rost-etikett::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  animation: start-prick 1800ms ease-in-out 2;
}
.sida-start .rost-signatur { position: relative; }
.sida-start .rost-signatur::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--start-kurva);
}
.sida-start .hero-visual:is(:hover, :focus-within) .rost-signatur::before { transform: scaleX(1); }
.sida-start [data-rost="vila"] .rost-stapel,
.sida-start [data-rost="andra"] .rost-stapel {
  transform: scaleY(calc(var(--h) * var(--rost-narhet, 1)));
  transition: transform 240ms var(--start-kurva), background-color 240ms;
}
.sida-start .rost-knapp::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  scale: .85;
  transition: opacity 250ms, scale 400ms var(--start-kurva);
}
.sida-start .rost-knapp:is(:hover, :focus-visible)::before { opacity: 1; scale: 1; }

/* Ljuset flyttar sig inne i knappen; traffytan foljer aldrig efter musen. */
.sida-start .knapp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color 240ms, border-color 240ms, translate 240ms var(--start-kurva);
}
.sida-start .knapp:not(.start-textknapp)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 110px at var(--knapp-x, 50%) var(--knapp-y, 50%), color-mix(in srgb, var(--ink) 8%, transparent), transparent 100%);
  opacity: 0;
  transition: opacity 250ms;
}
.sida-start .knapp.knapp-primar::before {
  background: radial-gradient(circle 100px at var(--knapp-x, 50%) var(--knapp-y, 50%), color-mix(in srgb, var(--paper) 23%, transparent), transparent 100%);
}
.sida-start .knapp:is(:hover, :focus-visible):not(:disabled)::before { opacity: 1; }
.sida-start .knapp:active:not(:disabled) { translate: 0 1px; }
.sida-start .knapp:focus-visible .pil, .sida-start .start-login:focus-visible .pil { transform: translate(2px, -2px); }
.sida-start .hero-efter a:focus-visible .pil { transform: translateY(3px); }
.sida-start .marke { transition: rotate 400ms var(--start-kurva); }
.sida-start .markesrad:is(:hover, :focus-visible) .marke { rotate: -12deg; }
.sida-start .start-login, .sida-start .hero-efter a { position: relative; }
.sida-start .start-login::after, .sida-start .hero-efter a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--start-kurva);
}
.sida-start .start-login::after { left: 30px; }
.sida-start .start-login:is(:hover, :focus-visible)::after,
.sida-start .hero-efter a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }

/* Veckans val, feedback och loften far samma korta, fysiska respons. */
.sida-start .vecka-knapp { transition: background-color 260ms, border-color 260ms; }
.sida-start .vecka-nr, .sida-start .vecka-titel { transition: translate 300ms var(--start-kurva), color 250ms; }
.sida-start .vecka-knapp[aria-current="step"] .vecka-nr { color: var(--ink); animation: start-val 420ms var(--start-kurva); }
.sida-start .vecka-knapp[aria-current="step"] .vecka-detalj { animation: start-rad 400ms var(--start-kurva); }
.sida-start .vecka .tel-ram { transition: border-color 350ms; }
.sida-start .bank-yta { transition: border-color 300ms; }
.sida-start .bank-yta:focus-within { border-color: var(--muted); }
.sida-start .bank-text { transition: border-color 250ms, background-color 250ms; }
.sida-start .bank-text:focus { background: var(--surface); }
.sida-start .bank-perspektiv li::before { transition: background-color 300ms, rotate 400ms var(--start-kurva); }
.sida-start .bank[data-bank="svar"] .bank-hoger { animation: start-svar 1100ms ease-out; }
.sida-start .bank-regel.traff { animation: start-val 420ms var(--start-kurva) backwards; }
.sida-start .bank-regelbok summary { transition: background-color 250ms; }
.sida-start .bank-regelbok summary:is(:hover, :focus-visible) { background: var(--surface); }
.sida-start .bank-regelbok[open] .bank-regelbok-innehall { animation: start-rad 420ms var(--start-kurva); }
.sida-start .lofte { position: relative; }
.sida-start .lofte::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--start-kurva);
}
.sida-start .lofte-titel { transition: translate 400ms var(--start-kurva); }
.sida-start .avslojas.inne .lofte { animation: start-rad 650ms var(--start-kurva) backwards; }
.sida-start .avslojas.inne .lofte:nth-child(2) { animation-delay: 100ms; }
.sida-start .avslojas.inne .lofte:nth-child(3) { animation-delay: 200ms; }
.sida-start .info[open] { animation: start-dialog 300ms var(--start-kurva); }
.sida-start .info[open]::backdrop { animation: start-overlag 250ms ease-out; }
.start-laslinje {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--coral);
  transform: scaleX(var(--last, 0));
  transform-origin: left;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .sida-start .knapp:hover:not(:disabled):not(.start-textknapp) { translate: 0 -2px; }
  .sida-start .knapp:active:not(:disabled) { translate: 0 1px; }
  .sida-start .vecka-knapp:hover .vecka-titel { translate: 4px 0; }
  .sida-start .vecka .tel-ram:hover { border-color: var(--prick-2); }
  .sida-start .bank-perspektiv li:hover::before { background: var(--coral-wash); rotate: -8deg; }
  .sida-start .lofte:hover::before { transform: scaleX(1); }
  .sida-start .lofte:hover .lofte-titel { translate: 6px 0; }
}
@keyframes start-penna { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }
@keyframes start-rad { from { transform: translateY(16px); } to { transform: none; } }
@keyframes start-prick { 0%, 100% { opacity: .65; scale: 1; } 50% { opacity: 1; scale: 1.45; } }
@keyframes start-val { from { transform: translateY(4px) scale(.96); } to { transform: none; } }
@keyframes start-svar { from { background-color: var(--coral-wash); } to { background-color: transparent; } }
@keyframes start-dialog { from { opacity: .6; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes start-overlag { from { opacity: 0; } to { opacity: 1; } }

/* Galler aven om installningen andras medan sidan redan ar oppen. */
@media (prefers-reduced-motion: reduce) {
  .sida-start *, .sida-start *::before, .sida-start *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    rotate: none !important;
    translate: none !important;
  }
  .sida-start .hero::before { transform: none; }
  .sida-start .rost-knapp::before { scale: 1; }
  .start-laslinje { display: none; }
}