/* ---------------------------------------------------------------------------
   Psykedelisk terapi — sajtlager ovanpå Aednans designsystem.

   Ordningen är: fonts.css → aednan-core.css → psykedelisk-theme.css →
   den här filen. Core ger struktur och komponenter, temat ger färg och
   typsnitt, och här ligger bara det som är sajtens eget: räckesrutnätet,
   tidslinjen, terapeutkatalogen och kontaktformuläret.

   Två snitt, inget mer. Figtree bär rubriker och sidhuvudets meny, Inter bär
   brödtext och gränssnittet i övrigt. Mätvärden — veckor, dygn, månader —
   bärs inte längre av ett tredje snitt utan av terracotta, temats varma
   accent. Djupblå är för det du kan klicka på, terracotta för det som är en
   mängd eller en tid.
   --------------------------------------------------------------------------- */

:root {
  /* Loggans vilohöjd. Stor när man kommer in — det första man ser ska vara
     avsändaren, inte menyn — och högre än sidhuvudets rad, så den hänger ned
     en bit nedanför det. Se .wordmark.

     Det här är måttet för bred skärm, där loggan delar rad med hela menyn och
     inte får bli så stor att menyn radbryts. Små skärmar har menyn bakom en
     knapp och därmed plats över; de sätter om måttet i mediefrågan längst ned
     i filen. */
  --logga-vila: clamp(82px, 11vw, 167px);

  /* Var ingressbilden möter loggan, i andelar av loggans höjd räknat från
     bildfilens överkant. Måtten är avlästa ur psykedelisk-logo.svg genom att
     rita den och scanna raderna efter bläck:

       0,013  märkets överkant        0,250  ordbildens överkant
       0,787  underkanten på p:et i ”terapi”
       0,986  märkets underkant

     Bilden börjar strax under p:et, och luften däremellan — 0,058 — är ett
     mått i loggans egen skala, så mellanrummet ser likadant ut oavsett hur
     stor loggan är. Märket fortsätter till 0,986 och skjuter alltså ut i
     bilden med sin nedersta bit, vilket är hela poängen: loggan står på
     sidan, inte i en list ovanför den.

     Ordbilden sitter högre i filen sedan den centrerades mot märket, och då
     flyttar bildkanten upp lika mycket: luften under p:et är måttet som ska
     hålla, inte hur långt märket sticker ned. Märkets snibb i bilden blev
     därmed längre än förut, och det är följden av att välja luften. */
  --logga-bildkant: 0.845;         /* 0,787 + 0,058 */

  /* Sidhuvudets höjd i vila, och den plats main måste reservera åt det
     fixerade sidhuvudet. Underkanten ligger exakt där bilden börjar — vore
     den lägre skulle den ogenomskinliga listen klippa bildens överkant.
     Måttet behövs på flera ställen och får därför bara skrivas en gång. */
  --huvud-vila: calc(var(--space-5) + var(--logga-bildkant) * var(--logga-vila));

  /* Det som blir kvar av loggan nedanför sidhuvudet. Följer ur måtten ovan
     och är inget eget val. */
  --logga-dopp: calc((1 - var(--logga-bildkant)) * var(--logga-vila));

  --max-width: 68rem;
  --rail: 9.5rem;        /* etikettspalten till vänster */
  --gap: 2.5rem;
  --measure: 36rem;      /* brödtext går aldrig bredare */
}

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

body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Core lägger in vertikal padding i .wrap. Här sköts luften av sektionerna,
   så .wrap får bara hålla bredden och sidomarginalen. */
.wrap { padding: 0 var(--space-5); width: 100%; }

main { flex: 1 0 auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--space-4); top: var(--space-4); z-index: 30;
  background: var(--ink); color: var(--on-accent);
  padding: 0.5rem 0.875rem; border-radius: var(--radius);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Typografi ----------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.display {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 17ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin-bottom: 0.85rem;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 40rem;
}

a { text-underline-offset: 0.18em; }

/* Etiketter följer designsystemets .eyebrow: Inter, versaler, spärrat. */
.eyebrow { font-family: var(--font-ui); font-weight: 500; }
.rail > .eyebrow { margin-bottom: 0; padding-top: 0.5rem; }

/* Ett mätvärde — vecka, dygn, månad, belopp — sätts i terracotta med
   tabellsiffror, så att kolumner av siffror ställer sig under varandra. */
.measure {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent-warm);
  letter-spacing: 0.01em;
}

.todo {
  font-size: 0.875rem;
  color: var(--muted-3);
  border-bottom: 1px dotted var(--border-strong);
}

.nowrap { white-space: nowrap; }

/* --- Sidhuvud ------------------------------------------------------------ */

/* Sidhuvudet ligger kvar överst medan sidan rullar, och det är fixerat och
   inte klistrat — skillnaden är hela poängen.

   Ett klistrat sidhuvud står kvar i flödet. När det då krymper från 143 px
   till 79 px dras allt innehåll under det uppåt 64 px, webbläsarens
   scroll-ankring kompenserar genom att flytta scrollY, och därmed hamnar
   vakten på andra sidan tröskeln igen: sidhuvudet växer, innehållet flyttas
   tillbaka, och det studsar. Det syntes som ett hack när man rullade sakta
   uppåt förbi tröskeln.

   Fixerat ligger sidhuvudet utanför flödet och kan byta storlek utan att
   flytta en enda pixel under sig. Platsen det annars hade tagit reserveras
   av main nedan. */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  padding-block: var(--space-5);
}

/* Platsen sidhuvudet hade tagit i flödet. Fast höjd, oberoende av om
   sidhuvudet är krympt — annars är vi tillbaka i samma återkoppling. */
main { padding-top: var(--huvud-vila); }

/* Linjen finns bara i det rullade läget. Överst på sidan har sidhuvudet
   ingen underkant att markera — det är samma kräm som sidan under, och en
   linje där hade bara skurit av loggan från ingressen den hänger ned över.
   Rullat ligger sidhuvudet däremot ovanpå text som glider förbi, och då
   behöver kanten sägas. */
.masthead[data-scrollad] {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

/* Sidan bakom en utfälld meny ska inte gå att rulla — annars rullar man
   bakgrunden i tron att man rullar menyn. Klassen sätts av skriptet i
   layout/footer.php. */
.meny-oppen, .meny-oppen body { overflow: hidden; }

/* Vakten ligger 100 px ned i dokumentet och är absolut placerad, så den tar
   ingen plats och flyttar ingenting. När den lämnar vyn har man rullat
   tillräckligt för att sidhuvudet ska krympa. */
.topp-vakt { position: absolute; top: 100px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Ankare får inte hamna under det klistrade sidhuvudet. */
#innehall { scroll-margin-top: 7rem; }

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
}

/* Loggan hänger ned nedanför sidhuvudet, ut över ingressen. Ingen platta och
   ingen linje under den: sidhuvudet och sidan är samma kräm, så loggan läses
   som om den stod på sidan och inte i en list.

   Den negativa undermarginalen drar av space-5 + doppet ur radens höjd. Det
   är precis så mycket som loggan ska sticka ut nedanför sidhuvudet, och
   resten av raden — menyn — påverkas inte.

   Måtten är uppmätta ur psykedelisk-logo.svg genom att rita den och läsa av
   var färgen faktiskt ligger, inte uppskattade ur viewBox. Räknat i andelar av
   höjden: filen är 2,4435 bred, det blå märket har bläck mellan 0,4640 och
   0,9864, och ordbilden börjar först vid 1,1329.

   Två tal styr allt. --logga-x skjuter bilden åt vänster förbi filens tomma
   vänstermarginal, så att märkets kant hamnar på sidans rutnät i stället för
   innanför det. --logga-f är hur brett fönstret är: 1,979 visar hela loggan,
   0,545 klipper bort ordbilden och lämnar bara märket. En enda fil, ingen
   korsövertoning, inget par av bilder att hålla synkat. */
.wordmark {
  --logga-h: var(--logga-vila);
  --logga-x: -0.464;              /* filens tomma vänstermarginal */
  --logga-f: 1.979;               /* hela loggan, utan den marginalen */
  display: block;
  flex: none;
  /* Över menyöverlägget i staplingen: loggan ska stå kvar när menyn ligger
     utfälld, så att man ser vems meny det är och har vägen hem kvar. */
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: var(--logga-h);
  width: calc(var(--logga-h) * var(--logga-f));
  margin-bottom: calc(-1 * (var(--space-5) + var(--logga-dopp)));
}

/* Rullat läge: loggan krymper till bara symbolen och dras in i listen.
   Ett sidhuvud man rullar förbi ska vara en list, inte en skylt. */
.masthead[data-scrollad] .wordmark {
  --logga-h: clamp(40px, 5vw, 54px);
  --logga-f: 0.545;               /* bara märket */
  margin-bottom: 0;
}
.wordmark img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  margin-left: calc(var(--logga-h) * var(--logga-x));
}

/* Bytet mellan lägena är ett klipp, inte en morf. Loggan tonar ut, byter
   mått medan den inte syns, och tonar in igen. Att tweena måtten fick
   ordbilden att krympa och svepas bort av en glidande kant på samma gång, och
   det såg ut som ett trick — ett sidhuvud ska byta läge utan att uppträda.

   Måtten "övergår" på noll sekunder med en fördröjning: de slår om i det
   ögonblick nyckelbildernas opacitet står på noll. Talen hör ihop — 0,13 s är
   40 % av 0,32 s.

   Två nyckelbildsnamn med samma innehåll, eftersom en animation bara startar
   om när namnet byts. data-byte sätts av skriptet i layout/footer.php, och
   först vid det första verkliga bytet; utan det rör sig ingenting, så en sida
   som laddas mitt i en rullning står i rätt läge direkt. */
@media (prefers-reduced-motion: no-preference) {
  .masthead[data-byte] { transition: padding 0.2s ease; }
  .masthead[data-byte] .wordmark { transition: height 0s 0.13s, width 0s 0.13s, margin-bottom 0s 0.13s; }
  .masthead[data-byte] .wordmark img { transition: margin-left 0s 0.13s; }
  .masthead[data-byte="ned"] .wordmark { animation: logga-byt-ned 0.32s ease both; }
  .masthead[data-byte="upp"] .wordmark { animation: logga-byt-upp 0.32s ease both; }
}
@keyframes logga-byt-ned { 0% { opacity: 1; } 40%, 46% { opacity: 0; } 100% { opacity: 1; } }
@keyframes logga-byt-upp { 0% { opacity: 1; } 40%, 46% { opacity: 0; } 100% { opacity: 1; } }

/* Menyn satt i rubriksnittet. Sidhuvudet är en enhet — loggan och menyn
   bredvid varandra — och i gränssnittssnittet läses menyn som ett
   verktygsfält som råkat hamna där. Figtree binder ihop den med loggan och
   med rubrikerna nedanför i stället. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-display);
}

/* Menyn är knappar, inte textlänkar. Varje post har en egen träffyta och en
   egen vikt, och en rad likadana länkar rangordnar ingenting.

   Pillren syns i viloläge. Tidigare var ytan och konturen genomskinliga tills
   man förde muspekaren över dem, och då var menyn fyra ord i rad ända fram
   till att man råkade peka på ett av dem — formen fanns men visade sig inte
   för den som bara tittade. Nu bär posten sin knapp direkt, och hovringen får
   säga något annat i stället: den vänder pillret bak och fram.

   Den fyllda djupblå ytan är fortfarande reserverad för sidan du står på.
   Blått betyder "du är här" och ingenting annat i vila — därför vänder de
   vanliga posterna till bläcksvart och inte till blått när man pekar. */
.nav a {
  display: inline-block;
  /* Luften i em och inte rem, så pillret växer med sin egen text. */
  padding: 0.55em 0.95em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  /* Så stor menyn kan bli utan att radbryta. Det trängsta läget är inte den
     bredaste skärmen utan den smalaste av de breda: precis ovanför 58 rem har
     sidan 881 px innanför marginalerna och loggan tar 200 av dem, medan
     menyn på 21 px är 635 px bred. Därför 19 px där och 21 px först när sidan
     har vuxit förbi 1200 px. Uppmätt, inte gissat. */
  font-size: clamp(1.1875rem, 1.75vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.2;
  background: var(--card);
  color: var(--ink);
  border-color: var(--border);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Inverterat: ytan blir bläck och texten blir papper. */
.nav a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }

/* Den enda framhävda posten, och det är terapeutsidan. Konturerad i
   accentfärgen och tyngre satt — mest framträdande i menyn, utan att ta den
   fyllda ytan i anspråk i vila. Linjen till vänster gör åtskillnaden mellan
   publikerna; konturen gör att den syns.

   Inverterad blir den blå, och det är inte samma sak som den aktuella sidans
   blå yta: den här finns bara så länge pekaren står på pillret, och då är det
   pekaren och inte färgen som säger vad den betyder. */
.nav__item--primary a { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.nav__item--primary a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Aktuell sida — den enda fyllda ytan i sidhuvudet, oavsett variant. */
.nav a[aria-current="page"],
.nav a[aria-current="page"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* Terapeuterna är sajtens andra publik, inte en till patientsida. En linje
   skiljer dem från vägen in, i stället för en färg. */
.nav__item--divide {
  border-left: 1px solid var(--rule);
  padding-left: var(--space-4);
  margin-left: var(--space-2);
}

/* Sidfotens länkar, som menyn bär med sig på små skärmar. Dolda på bred skärm:
   där står de i sidfoten, och menyraden ska rangordna fyra saker och inte
   åtta. Se layout/header.php för varför de finns i menyn alls. */
.nav-sekundar { display: none; }

/* --- Menyknappen (bara små skärmar) --------------------------------------- */

/* Tre streck och ingenting annat. Knappen hade en pillerkontur och ordet
   ”Meny” bredvid strecken, och den ramen gjorde den till ett tredje element
   i sidhuvudet vid sidan av loggan och menyn. Strecken ensamma är en
   igenkänd form som inte behöver ramas in för att läsas.

   Ordet finns kvar för skärmläsare — knappen måste ha ett namn, och strecken
   är ren dekoration — men det syns inte. Träffytan är 44 px i kvadrat även
   om bläcket är mindre, och den negativa högermarginalen låter strecken stå
   på sidans rutnätslinje i stället för träffytans kant.

   Ovanför menyn i staplingen, så att den går att trycka på när menyn ligger
   utfälld över hela skärmen. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -9px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle__text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ett element bär alla tre strecken: mittstrecket är spannet, de yttre är
   dess två pseudoelement. Då finns det bara en punkt att rotera kring när de
   ska bli ett kryss. */
.nav-toggle__streck,
.nav-toggle__streck::before,
.nav-toggle__streck::after {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle__streck { position: relative; }
.nav-toggle__streck::before { content: ''; position: absolute; top: -8px; }
.nav-toggle__streck::after  { content: ''; position: absolute; top: 8px; }

/* Öppet läge: strecken blir ett kryss. De yttre glider in till mitten först
   och roterar sedan — samtidigt hade sett ut som att de vek sig. Mittstrecket
   släcks under tiden de är på väg. */
.nav-toggle[aria-expanded="true"] .nav-toggle__streck { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__streck::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__streck::after  { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__streck { transition: background-color 0.12s linear 0.16s; }
  .nav-toggle__streck::before,
  .nav-toggle__streck::after {
    transition: top 0.16s ease, transform 0.16s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__streck { transition-delay: 0s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__streck::before,
  .nav-toggle[aria-expanded="true"] .nav-toggle__streck::after {
    transition: top 0.16s ease, transform 0.16s ease 0.16s;
  }
}

/* --- Sektioner och räcke -------------------------------------------------- */

/* padding-block, inte padding: sektionerna bär också klassen .wrap, och en
   kortform hade nollställt dess sidmarginal — texten hade lagt sig 24 px för
   långt ut och nuddat skärmkanten på en telefon. */
.section { border-top: 1px solid var(--rule); padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--open { border-top: 0; }

/* Räckesrutnätet: etikett till vänster, innehåll till höger. Varje sektion
   säger vad den är innan den säger något annat. */
.rail {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gap);
  align-items: start;
}

/* Ett rutnätsbarn är som minst så brett som sitt innehåll om man inte säger
   något annat, och då kan ett brett innehåll trycka ut spalten förbi sidans
   kant i stället för att krympa. Det är så sidledsrullning uppstår utan att
   någon har bett om den. */
.rail > * { min-width: 0; }

/* --- Ingress -------------------------------------------------------------- */

/* Sidor utan bild börjar med den här i stället, och den ligger direkt under
   loggan. Doppet läggs till toppluften så att etiketten alltid får hela sin
   luft under loggans underkant och inte hamnar bakom märket. Startsidans
   ingress under bilden har ingen logga över sig och nollställer det nedan. */
.hero { padding-block: calc(var(--logga-dopp) + clamp(3rem, 8vw, 6rem)) clamp(2.5rem, 5vw, 4rem); }
.hero .eyebrow { margin-bottom: var(--space-4); }

/* Bildpanelen på startsidan. Nästan full bredd, med krämpapperet kvar som en
   smal ram runt om, och rubriken satt i nederkanten ovanpå bilden. Ingressen
   ligger under panelen i det vanliga sidflödet — bara rubriken bärs av bilden,
   för den är det enda som klarar att stå i en akvarell utan att bli svårläst. */
.hero-bild {
  position: relative;
  /* Ingen toppmarginal: bildens överkant är sidhuvudets underkant, och den
     ligger där --logga-bildkant säger. Ramen finns kvar på sidorna. */
  margin: 0 var(--space-5);
  min-height: min(74vh, 640px);
  display: flex;
  align-items: flex-end;
  /* Exakt Nysnös hero: 4 px upptill, kvadratiskt nedtill. Underkanten möter
     sidans innehåll och ska inte rundas ifrån det. Därför inte --radius. */
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: var(--surface);
}

.hero-bild__media { position: absolute; inset: 0; }

/* Panelen är nästan alltid mer avlång än bilden, så cover beskär i höjdled,
   och då måste varje bild få säga vilken höjd som är dess motiv. --bild-fokus
   är den punkten, satt i vyn bredvid bilden den gäller; utan den beskärs det
   från mitten som förut. */
.hero-bild__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center var(--bild-fokus, center);
  display: block;
}

/* Golvet under rubriken. Toningen når inte upp i bildens övre två tredjedelar,
   så akvarellen är fortfarande en akvarell och inte en mörk platta. */
.hero-bild__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(24, 32, 41, 0.82) 0%,
    rgba(24, 32, 41, 0.45) 34%,
    rgba(24, 32, 41, 0) 70%);
}

.hero-bild__inner {
  position: relative;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

.hero-bild .display {
  color: var(--on-accent);
  max-width: 19ch;
  margin-bottom: 0;
  text-wrap: balance;
}

/* Undersidornas bildpanel. Samma komponent som startsidans, men lägre: de
   här akvarellerna är breda och grunda (ungefär 19:10), och en panel som är
   lika hög som startsidans hade tvingat fram ett beskärningsbeslut i höjdled
   som bilderna inte tål. Startsidan ska dessutom förbli den högsta — den är
   den enda sidan där bilden är det första man möter utan att ha valt något. */
.hero-bild--band { min-height: min(64vh, 480px); }

/* Etiketten står över rubriken som på sidorna utan bild, men här ligger den på
   akvarellen och kan inte bära --muted. Dämpat ljust i stället: rubrikens ljus,
   nedtonat, så att ordningen mellan de två håller. */
.hero-bild .eyebrow {
  color: rgba(249, 244, 238, 0.76);
  margin-bottom: var(--space-4);
}

/* Undersidornas rubriker är längre än startsidans och behöver fler tecken per
   rad för att inte bli en smal pelare i en bred bild. */
.hero-bild--band .display { max-width: 24ch; }

/* Ingressen under bilden behöver inte ingressens vanliga toppluft — panelen
   ovanför har redan gett ögat en paus. */
.hero--under-bild { padding-top: clamp(2rem, 4vw, 3rem); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0; list-style: none;
  font-family: var(--font-ui); font-size: 0.9375rem;
  color: var(--muted);
}
.hero__meta li { display: flex; gap: var(--space-2); }
.hero__meta b { color: var(--ink); font-weight: 600; }

/* --- Vägarna in ----------------------------------------------------------- */

/* Startsidans huvudkomponent. Nästan alla som kommer hit har redan en
   terapeut; resten behöver hitta en. Två dörrar, jämnstora, för att ingen
   av dem är undantaget. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.door {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.door h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.door p { font-size: 0.9375rem; color: var(--muted-2); margin: 0; max-width: none; }
.door .btn { align-self: flex-start; margin-top: auto; text-decoration: none; }
.door__no { color: var(--accent-warm); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Tidslinjen ----------------------------------------------------------- */

/* Ett behandlingsförlopp är verkligen en ordning, så numren bär information
   i stället för att dekorera. Tiderna är hela poängen med komponenten.

   Formen är en ryggrad med en nod per fas. Noden är inte utsmyckning: dess
   kontur säger vem som håller i fasen, och tre av fem faser ligger hos din
   terapeut och inte hos mottagningen. Det är sajtens viktigaste påstående,
   och här är det den enda komponent som visar det i en bild. */
.timeline { list-style: none; margin: var(--space-5) 0 0; padding: 0; counter-reset: phase; }

.phase {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--space-5);
  padding-bottom: var(--space-7);
}
.phase:last-child { padding-bottom: 0; }

/* Ryggraden: från underkanten av noden ned till nästa. Den ligger i
   .phase och inte i nod-cellen, så att den täcker mellanrummet också. */
.phase::before {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: 2.75rem;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--rule);
}
.phase:last-child::before { display: none; }

.phase__mark {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-2);
}
.phase__mark svg { width: 1.3rem; height: 1.3rem; display: block; }

/* Mottagningens faser bär accentfärgen, terapeutens är neutrala. */
.phase--mottagningen .phase__mark { border-color: var(--accent); color: var(--accent); }

.phase__body { padding-top: 0.15rem; }

.phase__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 0.3rem;
  max-width: none;
}

.phase__no {
  counter-increment: phase;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted-3);
}
.phase__no::before { content: counter(phase, decimal-leading-zero); }

.phase__dur { font-size: 0.875rem; }

.phase h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.phase p { margin: 0; color: var(--muted-2); }

.phase__who {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
}
.phase__who--utanfor { color: var(--muted); }

/* --- Frågor och svar ------------------------------------------------------ */

.qa { border-top: 1px solid var(--border-strong); }
.qa > div { border-bottom: 1px solid var(--rule); padding: var(--space-5) 0; }
.qa p { margin: 0; color: var(--muted-2); }

/* --- Terapeutkatalogen ---------------------------------------------------- */

/* Katalogen är sajtens andra huvudkomponent. Varje kort ska svara på
   "kan jag höra av mig till just den här personen" — namn, legitimation,
   var hen tar emot, och om hen tar emot nya. */
.terapeuter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.terapeut {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.terapeut__portratt {
  width: 4.5rem; height: 4.5rem;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface);
  margin-bottom: var(--space-2);
}

.terapeut__namn { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); margin: 0; }
.terapeut__titel { font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.terapeut__ort { font-size: 0.9375rem; color: var(--muted-2); margin: 0; }
.terapeut__bio { font-size: 0.9375rem; line-height: 1.5; color: var(--muted-2); margin: 0; max-width: none; }
.terapeut .btn { align-self: flex-start; margin-top: auto; text-decoration: none; }

.terapeut__taggar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); padding: 0; list-style: none; }
.terapeut__taggar li {
  font-family: var(--font-ui); font-size: 0.75rem;
  color: var(--muted-2);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
}

.terapeut--full { opacity: 0.72; }
.terapeut--full .btn { pointer-events: none; }

/* --- Personregister ------------------------------------------------------- */

/* Mottagningens egen personal. Kvadratiskt och tätt: det här är vem som
   svarar för verksamheten, inte vem du sitter i ett rum med. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0; list-style: none;
}

.person p { margin: 0; max-width: none; }

.person__portratt {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--surface);
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
}

.person__namn { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--ink); }

/* Roller som "kvalitets- och patientsäkerhetsansvarig" är bredare än spalten.
   Automatisk avstavning bryter dem på fel ställe — svensk avstavning av
   sammansatta ord är inte något webbläsaren klarar. Låt ordet brytas utan
   bindestreck i stället, som en sista utväg när spalten är för smal. */
.person__titel {
  font-family: var(--font-ui); font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.25rem;
  overflow-wrap: break-word; hyphens: manual;
}

/* --- Formulär ------------------------------------------------------------- */

.form { max-width: 34rem; }
.form .field + .field { margin-top: var(--space-4); }
.form .btn { margin-top: var(--space-5); }
.form textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 11px 14px;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.6;
  resize: vertical;
}
.field input { background: var(--card); border-color: var(--border-strong); }
.field input::placeholder, .form textarea::placeholder { color: var(--muted-3); }
.field .hint { display: block; font-size: 0.8125rem; color: var(--muted-3); margin-top: var(--space-1); }

.notice { max-width: 40rem; }
.form__varning { margin-bottom: var(--space-6); }
.form__efter { margin-top: var(--space-6); }

/* Samtycket är inte finstilt: det är villkoret för att förfrågan får skickas
   vidare, så det sätts i samma grad som resten av formuläret. */
.form__samtycke { margin-top: var(--space-5); max-width: 34rem; }
.form__samtycke .checkbox-row { align-items: flex-start; gap: var(--space-3); line-height: 1.55; }
.form__samtycke input[type="checkbox"] { margin-top: 0.3rem; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; }
.notice--warn { border-left: 3px solid var(--accent-warm); }
.notice--ok { border-left: 3px solid var(--accent); }
.notice p { margin: 0 0 0.6em; max-width: none; }
.notice p:last-child { margin-bottom: 0; }

.errors { margin: 0 0 var(--space-5); padding: 0 0 0 1.1rem; color: var(--accent-warm); font-size: 0.9375rem; }
.errors li { margin-bottom: 0.25rem; }

.form__mottagare {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  max-width: 34rem;
}
.form__mottagare img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--surface); }
.form__mottagare p { margin: 0; max-width: none; }

/* --- Pristabell ----------------------------------------------------------- */

/* Tre kolumner ryms inte på en telefon. Tabellen får rulla i sin egen låda
   i stället för att skjuta ut hela sidan i sidled. */
/* Pristabellen. Tre spalter så länge de får plats, staplade rader när de inte
   gör det — se mediefrågan för små skärmar. Tabellen hade en rullbehållare och
   ett minsta mått på 30 rem, och den lösningen har två fel: den tredje spalten
   är priset, alltså det tabellen finns för, och en spalt som ligger utanför
   kanten är gömd bakom en gest man inte ser att man kan göra. Dessutom läckte
   måttet ut ur räckets rutnätsspalt och gav hela sidan en sidledsrullning på
   telefon. */
.prices { width: 100%; margin: 0 0 var(--space-6); border-collapse: collapse; }
.prices th, .prices td { text-align: left; padding: 0.875rem 1rem 0.875rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prices thead th {
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.prices td:first-child { font-weight: 600; color: var(--ink); }
.prices td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-warm); }
.prices tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; }
.prices tfoot td:first-child { color: var(--ink); }

/* --- Uppmaningar ---------------------------------------------------------- */

.btn { text-decoration: none; display: inline-block; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.cta-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-ui); font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 0.15rem;
}
.cta-link:hover { border-color: var(--accent); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* --- Sidfot --------------------------------------------------------------- */

.colophon {
  flex-shrink: 0;
  border-top: 1px solid var(--border-strong);
  background: var(--surface);
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: var(--space-8) 0;
  font-size: 0.9375rem;
  color: var(--muted-2);
}

.colophon__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-6); }
.colophon .eyebrow { margin-bottom: var(--space-3); }
.colophon p { margin: 0 0 0.75em; max-width: 22rem; }

.colophon__nav { list-style: none; margin: 0; padding: 0; }
.colophon__nav li { margin-bottom: 0.4rem; }
.colophon__copy { margin-top: var(--space-4); color: var(--muted-3); }

/* Akutnoten står som andra spalt bredvid länkarna. Den bar tidigare en egen
   linje och ett stort avstånd, för då låg den under hela sidfoten; nu räcker
   rutnätets mellanrum för att skilja dem åt. */
.colophon__note {
  margin: 0;
  color: var(--muted-3);
  max-width: 26rem;
}

/* --- Avtäckning ------------------------------------------------------------ */

/* Innehållet ligger stilla tills det kommer i sikte och stiger sedan fram.
   Lång kurva, kort väg: 14 px och inget mer, över 0,9 sekunder med en tung
   utandning på slutet. Rörelsen ska läsas som att sidan andas, inte som att
   något far in från kanten — det senare är vad en kort sträcka i hög fart
   ser ut som, och det är billigt.

   Förlopptidslinjen hade tidigare en egen variant av det här som spelades
   vid inladdning oavsett var på sidan man befann sig, alltså innan man hunnit
   se den. Den är ersatt av det här, som väntar på ögat.

   Vilka element det gäller står i layout/footer.php och inte här. Det är med
   avsikt: det som göms av CSS måste kunna visas igen av det skript som gömde
   det, annars blir innehåll osynligt för den vars skript aldrig kör. Därför
   sätter skriptet attributet självt, och regeln nedan biter bara på det som
   skriptet redan har märkt upp. Samma resonemang som för menyn. */
@media (prefers-reduced-motion: no-preference) {
  [data-avslojas] {
    opacity: 0;
    transform: translateY(var(--avslojas-lyft, 14px));
    transition:
      opacity var(--avslojas-tid, 0.9s) cubic-bezier(0.16, 1, 0.3, 1) var(--avslojas-vanta, 0s),
      transform var(--avslojas-tid, 0.9s) cubic-bezier(0.16, 1, 0.3, 1) var(--avslojas-vanta, 0s);
  }
  [data-avslojas][data-syns] { opacity: 1; transform: none; }

  /* Ingressbilden är en yta, inte en textrad. Den tonar fram på stället och
     lyfter inte: en bild i den storleken som glider ser billig ut. Och den
     tar längre tid, för den är det första sidan säger. */
  .hero-bild[data-avslojas] { --avslojas-lyft: 0px; --avslojas-tid: 1.2s; }
}

/* --- Rörelse -------------------------------------------------------------- */

@keyframes meny-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* --- Små skärmar ---------------------------------------------------------- */

/* Under den här bredden får bilden inte längre plats bredvid rubriken utan
   att en av dem blir för smal. Den lägger sig under texten i stället, och
   menyn viks ihop bakom en knapp i stället för att radbrytas under loggan. */
@media (max-width: 58rem) {
  /* Större logga här än på bred skärm. Menyn ligger bakom en knapp, så hela
     raden utom 44 px är loggans, och på en telefon är det bredden och inte
     höjden som sätter gränsen — därav vw och inte px i mitten. Golvet räcker
     åt de smalaste skärmarna, taket är samma höjd som på bred skärm.

     Allt annat i sidhuvudet räknas ur måttet och följer med av sig självt. */
  :root { --logga-vila: clamp(96px, 30vw, 167px); }

  .hero-bild { margin: 0 var(--space-3); min-height: min(62vh, 460px); }
  .hero-bild .display { max-width: none; }

  /* Här är panelen inte längre bredare än bilden är hög, och då börjar cover
     beskära i sidled i stället — det är den beskärningen som tar bort motivet,
     för händerna och ansiktet sitter i mitten på en bred bild. Höjden följer
     därför bredden och inte skärmen, så att bandet håller ungefär bildens egna
     proportioner hela vägen ned. Måttet är ett golv: ryms inte rubriken växer
     panelen, och det är rätt ordning mellan text och bild. */
  .hero-bild--band { min-height: clamp(210px, 52vw, 300px); }

  /* Bara med JavaScript. Utan skript ligger menyn kvar utfälld — se
     kommentaren i layout/header.php. */
  .js .nav-toggle { display: inline-flex; }

  /* Utfälld täcker menyn hela skärmen. En meny som bara skjuter ned innehållet
     lite grann ber om ett val samtidigt som den visar sidan man redan är på;
     den här tar över och gör valet till det enda som finns.

     Svepet: en cirkel som växer ur knappen tills den täcker rutan. Rörelsen
     kommer alltså ur det man tryckte på och inte från en kant, och samma
     regel spelas baklänges när man stänger. clip-path klipper också bort
     träffytorna, så det stängda läget inte fångar tryck — visibility gör
     resten och fördröjs tills svepet är klart.

     Ingen display: none: det som är dolt på det sättet kan inte animeras in
     igen, och då hade stängningen blivit ett hopp. */
  .js .masthead__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    margin: 0;
    max-height: none;
    background: var(--bg);
    display: grid;
    align-content: center;
    padding: calc(var(--huvud-vila) + var(--space-4)) var(--space-5) var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    clip-path: circle(0% at calc(100% - var(--space-5) - 13px) calc(var(--huvud-vila) / 2));
  }
  .js .masthead__nav[data-open] { visibility: visible; }

  @media (prefers-reduced-motion: no-preference) {
    .js .masthead__nav {
      transition: clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.42s;
    }
    .js .masthead__nav[data-open] {
      transition: clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
  }
  .js .masthead__nav[data-open] { clip-path: circle(150% at calc(100% - var(--space-5) - 13px) calc(var(--huvud-vila) / 2)); }

  /* Utfälld är menyn nästan lika stor satt som ingressrubriken. Fyra poster
     på en tom skärm tål det, och storleken är hela poängen: det här är sidans
     innehåll så länge den ligger uppe, inte en list ovanpå något annat. */
  .js .nav {
    flex-direction: column;
    align-items: start;
    gap: 0;
    padding: 0;
  }
  .js .nav a {
    display: inline-block;
    padding: 0.14em 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: clamp(1.875rem, 8vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .js .nav a:hover { background: none; color: var(--accent-hover); }

  /* Blått betyder fortfarande ”du är här”, men en fylld yta i den här
     storleken hade blivit en plakett. Färgen på bokstäverna räcker. */
  .js .nav a[aria-current="page"],
  .js .nav a[aria-current="page"]:hover {
    background: none;
    color: var(--accent);
  }

  /* Terapeutsidan förblir undantaget och behåller sitt piller. Den vänder sig
     till en annan publik än de tre ovanför, och i den här storleken är en
     knapp bland rubriker tydligare än en fjärde rubrik i avvikande färg. */
  .js .nav__item--divide {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule);
    align-self: stretch;
  }
  .js .nav__item--primary a {
    padding: 0.7rem 1.5rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    font-size: 1.0625rem;
    letter-spacing: 0;
    color: var(--accent);
  }
  .js .nav__item--primary a:hover {
    background: var(--accent);
    color: var(--on-accent);
  }

  /* Andra tredjedelen av menyn: sidorna man söker upp när man redan vet vad
     sajten är. Egen vikt och egen linje, så att de tre stora posterna, vägen
     för terapeuter och de här läses som tre olika saker. */
  .nav-sekundar {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
  }
  .nav-sekundar a { font-size: 1.0625rem; color: var(--muted-2); }
  .nav-sekundar a:hover,
  .nav-sekundar a[aria-current="page"] { color: var(--accent); }

  /* Posterna kommer in efter svepet, en i taget uppifrån. Ordningen är menyns
     ordning, och den är värd att läsas. */
  @media (prefers-reduced-motion: no-preference) {
    .js .masthead__nav[data-open] .nav__item,
    .js .masthead__nav[data-open] .nav-sekundar li {
      animation: meny-in 0.34s ease backwards;
    }
    .js .masthead__nav[data-open] .nav__item:nth-child(1) { animation-delay: 0.16s; }
    .js .masthead__nav[data-open] .nav__item:nth-child(2) { animation-delay: 0.22s; }
    .js .masthead__nav[data-open] .nav__item:nth-child(3) { animation-delay: 0.28s; }
    .js .masthead__nav[data-open] .nav__item:nth-child(4) { animation-delay: 0.34s; }
    .js .masthead__nav[data-open] .nav-sekundar li:nth-child(1) { animation-delay: 0.40s; }
    .js .masthead__nav[data-open] .nav-sekundar li:nth-child(2) { animation-delay: 0.44s; }
    .js .masthead__nav[data-open] .nav-sekundar li:nth-child(3) { animation-delay: 0.48s; }
    .js .masthead__nav[data-open] .nav-sekundar li:nth-child(4) { animation-delay: 0.52s; }
  }

  /* Utfälld lägger sig menyn på egen rad under loggan och knappen, med en
     post per rad. Ett piller i taget är en träffyta man kan sikta på.

     Sidhuvudet är klistrat, så en meny högre än skärmen hade blivit omöjlig
     att nå slutet av. Den får rulla i sig själv i stället.

     Marginalen upptill: loggan drar av sitt eget underhäng ur radens höjd
     med en negativ marginal, och utan det här hade rad två klivit upp rakt
     över den. Måttet lämnar tillbaka exakt den platsen, så menyn börjar där
     loggan slutar. Utan JavaScript ligger menyn alltid utfälld och behöver
     samma sak. */
  .masthead__nav {
    flex-basis: 100%;
    margin-top: calc(var(--space-5) + var(--logga-dopp));
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
  }
  .nav { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-4); }
  /* Utfälld tar varje post hela bredden och blir en rad att sikta på. Ytan och
     konturen kommer från grundregeln och behöver inte sättas om här. */
  .nav a { display: block; text-align: center; padding: 0.75rem 1rem; }
  .nav__item--divide { border-left: 0; padding-left: 0; margin-left: 0; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
}

@media (max-width: 44rem) {
  .rail { grid-template-columns: 1fr; gap: var(--space-2); }

  /* Här staplas pristabellens rader: namnet och beloppet på samma rad, vad
     delen omfattar under dem. Kolumnrubrikerna faller bort — fetstilen,
     brödtexten och beloppet i terracotta säger redan vad de tre delarna är,
     och en rubrikrad över staplade block hade bara pekat på ingenting. */
  .prices, .prices tbody, .prices tfoot { display: block; }
  .prices thead { display: none; }
  .prices tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule);
  }
  /* tfoot-cellerna har en egen överlinje i tabelläget, och den har högre
     specificitet än raden ovanför. Staplat skulle den bli ett kort streck
     tvärs över summaraden, så den nollas uttryckligen här och läggs på
     raden i stället. */
  .prices td,
  .prices tfoot td { display: block; padding: 0; border: 0; }
  .prices td:first-child  { grid-area: 1 / 1; }
  .prices td:last-child   { grid-area: 1 / 2; text-align: right; }
  .prices td:nth-child(2) { grid-area: 2 / 1 / 3 / -1; font-size: 0.9375rem; color: var(--muted-2); }
  .prices tfoot tr { border-bottom: 0; border-top: 1px solid var(--border-strong); }
  .rail > .eyebrow { padding-top: 0; }
  .phase { gap: 0 var(--space-4); }
  .display { max-width: none; }
}