/* Mitt smink · Makeup Tracker — appens egna sidor under TulliTippi.

   Formen kommer från designprojektet "Vectors TulliTippi"
   (makeuptracker/index.dc.html m.fl.). Det som skiljer mot designen, och varför:

     · Designen hämtar Fraunces OCH IBM Plex Mono från Google Fonts. Sidan bär
       integritetspolicyn och lovar att inget lämnar enheten — den kan inte
       samtidigt skicka varje besökares IP till Google. Fraunces ligger lokalt i
       assets/; monospacen är systemets egen stack, precis som rotsidans design
       redan gör.
     · Designens inline-stilar ligger här i stället, som klasser. Fem sidor delar
       sidhuvud, sidfot och kort — de kan inte få glida isär.
     · Mörkt läge finns kvar (Nattbord, appens egen mörka palett). Designen ritar
       bara det ljusa läget, men sidorna har haft mörkt läge sedan tidigare och
       delar de mörka bottnarna med rotsidan.

   Läsbredden är två olika: .doc för juridisk text (en spalt), .wrap för
   landningssidans breda sektioner. */

@font-face{
  font-family:'Fraunces';
  src:url('assets/Fraunces.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  --bg:#F4E9E3;  --surface:#FFFFFF;  --surface-2:#FBF3EF;
  --ink:#2B2233;  --ink-mid:#4F4559;  --ink-soft:#6E627C;  --ink-mute:#B49CAE;
  --primary:#EC4E8B;  --primary-2:#B65CF0;  --violet:#8B5CF6;
  --green:#3E9D7C;  --accent:#E9A13B;  --spent:#7C6E8E;
  --line:#EFE2DB;  --hairline:rgba(43,34,51,.07);

  --shadow:0 1px 2px rgba(43,34,51,.05), 0 8px 24px rgba(43,34,51,.06);
  --shadow-card:0 22px 54px rgba(43,34,51,.10);
  --shadow-rouge:0 8px 18px rgba(236,78,139,.30);

  --radius:18px;
  --radius-lg:32px;
  --radius-md:22px;

  /* Designens etikettstil: monospace, glest spärrad, versal. Systemets mono i
     stället för IBM Plex Mono — se filhuvudet. */
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#171221;  --surface:#221A30;  --surface-2:#1E1729;
    --ink:#F4EDF7;  --ink-mid:#D9CFE4;  --ink-soft:#A79BB8;  --ink-mute:#8A7C9C;
    --primary:#F26AA0;  --primary-2:#C084FC;  --violet:#A78BFA;
    --green:#5CBFA0;  --accent:#F0B454;  --spent:#9C8FAE;
    --line:#332844;  --hairline:rgba(244,237,247,.10);

    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --shadow-card:0 22px 54px rgba(0,0,0,.34);
    --shadow-rouge:0 8px 18px rgba(242,106,160,.24);
  }
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,'Segoe UI','Roboto',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--primary); text-decoration:none; font-weight:600; text-underline-offset:2px; }
a:hover{ color:var(--primary-2); }

/* Brödtext får understruken länk — i löpande text räcker inte färgen. */
.doc p a,.doc li a,.doc td a{ text-decoration:underline; }

.lang button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--violet); outline-offset:2px;
}

/* ---- Sidhuvud -----------------------------------------------------------
   Brödsmulan "TulliTippi / Mitt smink" är hela poängen med sammanslagningen:
   varje appsida säger vem som ger ut den och länkar tillbaka till roten. */

.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(20px);
  -webkit-backdrop-filter:saturate(1.4) blur(20px);
  border-bottom:1px solid var(--hairline);
}

.site-head__inner{
  max-width:1080px; margin:0 auto;
  padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.crumb{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-soft); font-weight:500;
  min-width:0;
}
.crumb:hover{ color:var(--ink); }
.crumb img{ display:block; width:24px; height:22px; flex:none; }

.crumb__pub{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}

.crumb__sep{ color:var(--ink-mute); }

.crumb__app{
  font-family:var(--serif);
  font-size:16px; font-weight:600; color:var(--ink);
  white-space:nowrap;
}

.site-nav{ display:flex; align-items:center; gap:22px; }

.site-nav a{
  font-size:14px; font-weight:500; color:var(--ink-soft);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{ color:var(--ink); font-weight:600; }

/* Språkväxel. Båda språken ligger i DOM:en; CSS döljer det som inte är valt.
   Utan JS syns båda — degraderat men fullständigt, vilket är rätt felläge för
   en sida som måste gå att läsa juridiskt. */
.lang{
  display:flex; gap:2px; padding:3px;
  background:var(--surface-2);
  border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--hairline);
  flex:none;
}

.lang button{
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:6px 12px; border:0; border-radius:999px;
  background:transparent; color:var(--ink-mute);
  cursor:pointer;
}
.lang button:hover{ color:var(--ink); }

.lang button[aria-pressed="true"]{
  background:var(--surface); color:var(--ink);
  box-shadow:0 1px 3px rgba(43,34,51,.12);
}

/* ---- Sidbredder ---------------------------------------------------------- */

.wrap{ max-width:1080px; margin:0 auto; padding-inline:24px; }

/* Juridisk text: en smal spalt. Bredden är läsbarhet, inte pynt. */
.doc{
  max-width:44rem; margin:0 auto;
  padding:44px 24px 72px;
}

/* Support- och kontaktsidan: samma spalt, men bredare. De bär kort och
   formulär i stället för löpande text och blir trånga vid 44 rem. */
.doc--wide{ max-width:52rem; }
.doc--wider{ max-width:70rem; }

.section{ padding-bottom:26px; }
.section:last-of-type{ padding-bottom:80px; }

/* Det stora vita kortet som designen bygger nästan varje sektion av. */
.panel{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:34px;
}

.panel__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:24px;
}

.panel__title{
  font-family:var(--serif); font-size:26px; font-weight:600; line-height:1.2;
  margin:0;
}

/* Den spärrade monoetiketten, designens genomgående "eyebrow". */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute);
  margin:0;
}

.eyebrow--rouge{ color:var(--primary-2); letter-spacing:.24em; }

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

h1{
  font-family:var(--serif);
  font-size:clamp(30px,6vw,48px); font-weight:600; line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 6px;
  text-wrap:balance;
}

h2{
  font-family:var(--serif);
  font-size:clamp(21px,4vw,25px); font-weight:600; line-height:1.25;
  margin:44px 0 10px;
  text-wrap:balance;
}

h3{ font-size:17px; font-weight:700; margin:28px 0 6px; }

p{ margin:0 0 16px; text-wrap:pretty; }

.updated{ color:var(--ink-soft); font-size:15px; margin:0 0 28px; }

.lede{ font-size:19px; color:var(--ink-soft); margin:0 0 32px; }

ul,ol{ margin:0 0 16px; padding-left:22px; }
li{ margin:0 0 8px; }

strong{ font-weight:650; }

/* Paketnamnet com.tullitippi.makeuptracker är 28 tecken utan en enda plats att
   bryta på. overflow-wrap:anywhere och inte break-word: bara anywhere räknas in
   i min-content-bredden, och det är den som avgör om rutnätet nedan kan krympa
   under 390 px eller spränger sidan på bredden. */
code{
  font-family:var(--mono); font-size:.92em;
  overflow-wrap:anywhere;
}

hr{ border:0; border-top:1px solid var(--line); margin:48px 0; }

/* ---- Knappar ------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 26px; border-radius:16px;
  font-size:15.5px; font-weight:600; font-family:inherit;
  border:0; cursor:pointer;
  text-align:center;
}

.btn--fill{
  background:var(--primary); color:#fff;
  box-shadow:var(--shadow-rouge);
}
.btn--fill:hover{ background:var(--primary-2); color:#fff; }

.btn--light{
  background:var(--surface); color:var(--violet);
  box-shadow:0 8px 18px rgba(43,34,51,.18);
}
.btn--light:hover{ background:var(--surface-2); color:var(--violet); }

/* "Snart i Google Play" är ingen länk — det finns inget att länka till ännu.
   Samma form som knappen, men utan hovring och utan pekfinger. */
.pill-status{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:16px;
  background:var(--primary); color:#fff;
  font-size:15.5px; font-weight:600;
  box-shadow:var(--shadow-rouge);
}

.meta{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---- Startskärmen (endast index.html) ------------------------------------
   Appens startskärm, återgiven på webben. Ringen är samma bild som
   Resources/Splash/splash.svg och webbvyns .boot; markupen i index.html bär
   geometrin och kommentaren om vad som måste hållas i takt.

   Här ligger bara rörelsen, och den spelas EN gång. Tidsschemat:

     0,00–0,45 s  hel ring, stilla
     0,45–2,85 s  tömning, 2,4 s (samma kurva som i ikonleveransen)
     2,85–3,15 s  ringen tonar bort
     3,00–3,60 s  appikonen tonar och skalar in — och blir stående

   Ringen och ikonen ligger på varandra i .splash__mark. Överlappet på 0,15 s
   är avsiktligt: en ren korsövertoning i stället för ett hopp. Ringen är redan
   tömd när den tonar, så det enda som möts är burkglyfen i två storlekar, och
   på under en halv sekund vid låg opacitet syns det inte.

   Tömningen görs med en mask, inte med ett suddgummi i bakgrundsfärgen — se
   kommentaren vid <mask> i index.html. Rutan får därför ha vilken bakgrund som
   helst, vilket är precis vad designens toning nedan kräver. */

.splash{
  --splash-mark:clamp(148px,32vw,300px);

  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:64px 24px 72px;
  background:radial-gradient(130% 120% at 50% 26%,#FFF5F0 0%,#FBE6DE 55%,#F6DCE6 100%);
  color:var(--ink);
  border-bottom:1px solid var(--hairline);
}

@media (prefers-color-scheme: dark){
  .splash{ background:radial-gradient(130% 120% at 50% 26%,#241A33 0%,#1D1529 55%,#221726 100%); }
}

/* Ringen och ikonen delar ruta. Måtten sitter här och inte på barnen, så att
   .splash__lockup får något att räkna sin marginal mot även när barnen är
   utlyfta ur flödet. */
.splash__mark{
  position:relative;
  width:var(--splash-mark); height:var(--splash-mark);
}

.splash__ring{
  position:absolute; inset:0; width:100%; height:100%;

  /* Tonar bort när tömningen är klar och kommer inte tillbaka: "both" håller
     ringen synlig fram till fördröjningen och tom efteråt. */
  animation:ms-splash-ring-out .3s ease 2.85s both;
}

.splash__drain{ animation:ms-splash-drain 2.4s cubic-bezier(.45,0,.55,1) .45s both; }

/* Ikonen dras in några procent. En squircle med samma yttermått som en ring
   ser större ut än ringen — hörnen sticker längre ut än cirkelns kant. */
.splash__icon{
  position:absolute; left:3%; top:3%;
  width:94%; height:94%;

  /* Samma radie som filens egen beskärning: rx 86 av 304 = 28,29 %. Den står
     här för skuggans skull — utan radie kastas skuggan av den fyrkantiga
     ruta bilden ligger i, och sticker ut utanför ikonens rundade hörn. */
  border-radius:28.29%;

  /* Plattans toning är samma tre färger som .splash ovan. I ljust läge smälter
     ikonen därför nästan in i bakgrunden; skuggan är det som gör att den läses
     som en ikon och inte som en ring som svävar. */
  box-shadow:0 18px 44px rgba(43,34,51,.16), 0 2px 6px rgba(43,34,51,.06);

  animation:ms-splash-icon-in .6s cubic-bezier(.2,.6,.2,1) 3s both;
}

@media (prefers-color-scheme: dark){
  .splash__icon{ box-shadow:0 22px 52px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35); }
}

/* Maskbågen är den del av ringen som är KVAR, och den BÖRJAR alltid kl 12:
   med pathLength 100 och andelen P kvar är bågen [0, P], vilket är precis
   stroke-dasharray "P 100" med stroke-dashoffset kvar på 0.

   Ringen rullas alltså tillbaka moturs — den fria änden vandrar baklänges mot
   kl 12, motsatt det håll ringen ritas. Det är den riktning tömningen har i
   ikonleveransen och i designen. Skruvar man i stället på dashoffset börjar
   bågen släppa vid kl 12 och äter medurs, alltså åt fel håll.

   Bara ett värde animeras, så de två kan inte glida isär. */
@keyframes ms-splash-drain{
  from{ stroke-dasharray:100 100; }
  to  { stroke-dasharray:0 100; }
}

@keyframes ms-splash-ring-out{
  from{ opacity:1; }
  to  { opacity:0; }
}

@keyframes ms-splash-icon-in{
  from{ opacity:0; transform:scale(.92); }
  to  { opacity:1; transform:none; }
}

/* Lockupen tonar in en gång och blir kvar. */
.splash__lockup{
  margin-top:calc(var(--splash-mark) * .16);
  animation:ms-splash-lockup .7s cubic-bezier(.2,.6,.2,1) 1.4s both;
}

@keyframes ms-splash-lockup{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}

.splash__title{
  margin:0;
  font-size:clamp(31px,7vw,56px);
  letter-spacing:-.015em;
}

/* Utan JS syns båda språken. Som block blir det två läsbara rader i stället
   för "Mitt sminkMakeup Tracker" på en. Regeln måste ligga FÖRE
   språkhanteringen nedan — samma specificitet, källordningen avgör. */
.splash__title span{ display:block; }

.splash__tagline{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--ink-mute);
}

/* Ingen rörelse: visa slutbilden direkt. Ringen tas bort helt — utan animation
   ligger den kvar på sitt grundläge (synlig, hel) och skulle annars stå kvar
   under ikonen. Ikonens grundläge är just slutläget, så den behöver bara få
   animationen avstängd. */
@media (prefers-reduced-motion: reduce){
  .splash__ring{ display:none; }
  .splash__icon,
  .splash__lockup{ animation:none; }
}

/* ---- Landningssidans ingress + skärmbilder -------------------------------- */

.pitch{
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px;
  align-items:center;
  padding:60px 24px 84px;
}

.pitch__copy{ display:flex; flex-direction:column; gap:22px; }

.pitch__copy h1{ margin:0; font-size:clamp(32px,5.2vw,52px); line-height:1.04; }

.pitch__lede{
  margin:0; max-width:460px;
  font-size:16.5px; line-height:1.62; color:var(--ink-soft);
}

.pitch__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding-top:6px;
}

/* Skärmbilden i ingressen. Riktig bild ur appen, inte den CSS-ritade telefonen
   som stod här förut — se kommentaren i index.html.

   Ramen är ett eget element runt bilden och inte en border på den, därför att
   .shot måste kunna vara språktvilling: språkregeln längst ned sätter
   display:none på det som har fel lang, och då ska hela luren försvinna, inte
   bara glaset. Utan JavaScript syns båda språkens lurar under varandra —
   samma degraderade läge som resten av sidan.

   display:block: språkregeln är starkare än .shot (två attributselektorer mot
   en klass) och vinner alltså på det dolda språket, men det synliga behöver
   ett eget display eftersom <span> annars är inline och padding-ramen inte
   skulle omsluta bilden. */
.shot{
  display:block;
  border-radius:26px; background:#2B2233; padding:7px;
  box-shadow:var(--shadow-card);
}

.shot img{
  display:block; width:100%; height:auto;
  border-radius:20px;
  /* Glaset medan bilden laddas: utan färg lyser sidans botten igenom den tomma
     rutan och ramen ser ut att ha ett hål. */
  background:#F4E9E3;
}

/* Ingressens lur är fast bred — ingressen är en tvåspaltig grid och luren ska
   inte växa med spalten. Galleriets lurar är däremot flytande. */
.pitch__shot{ justify-self:center; }

.shot--hero{
  width:308px;
  border-radius:44px; padding:10px;
  box-shadow:0 30px 64px rgba(43,34,51,.24);
}
.shot--hero img{ border-radius:35px; }

/* ---- Galleriet ("Så ser det ut") ----------------------------------------- */

.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 22px; }

.shots__item{ margin:0; display:flex; flex-direction:column; gap:12px; }

.shots__cap{ display:block; }
.shots__cap b{
  display:block;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
}
/* Direktbarnet, inte varje span: språktvillingarna inne i <b> ligger ett steg
   till in och ska inte också läggas på egen rad. */
.shots__cap > span{
  display:block; margin-top:3px;
  font-size:13px; line-height:1.5; color:var(--ink-soft);
}

/* ---- Lägen (fem statusar) ------------------------------------------------ */

.states{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }

.state{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:22px 20px;
  display:flex; flex-direction:column; gap:10px;
}

.state__dot{ width:12px; height:12px; border-radius:50%; background:currentColor; }

.state p{ margin:0; font-size:13px; line-height:1.55; color:var(--ink-soft); }

/* Måste ligga EFTER .state p och väga lika tungt — annars vinner den regelns
   13 px och dova färg över lägesnamnet. color:inherit hämtar lägets egen färg
   från .state--*, samma som pricken tar via currentColor. */
.state .state__name{
  font-family:var(--serif); font-size:19px; font-weight:600;
  color:inherit;
}

/* Färgen sätts på .state så att prick och rubrik alltid följs åt. */
.state--unopened{ color:var(--violet); }
.state--opened  { color:var(--green); }
.state--soon    { color:var(--accent); }
.state--expired { color:var(--primary); }
.state--spent   { color:var(--spent); }

/* ---- Listor (säsongerna) -------------------------------------------------- */

.lists{
  display:grid; grid-template-columns:1fr 340px; gap:36px; align-items:center;
}

.lists__copy{ display:flex; flex-direction:column; gap:14px; }
.lists__copy h2{ margin:0; font-size:clamp(24px,3.6vw,34px); line-height:1.1; }
.lists__copy p{ margin:0; max-width:430px; font-size:15.5px; color:var(--ink-soft); }

.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Brickorna är appens egna listfärger. Glansen ovanifrån och skuggan nedtill
   är samma två lager som i appen, därför gradienterna i stället för flata
   färger. */
.tile{
  position:relative; overflow:hidden;
  border-radius:18px; min-height:92px;
  padding:13px 15px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; font-weight:800; font-size:17px; letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.16);
}
.tile::before,.tile::after{ content:''; position:absolute; inset:0; }
.tile::before{ background:radial-gradient(120% 130% at 18% 8%,rgba(255,255,255,.32),rgba(255,255,255,0) 52%); }
.tile::after { background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.17)); }
.tile span{ position:relative; }

.tile--spring{ background:linear-gradient(150deg,#7FD957 0%,#38A05F 100%); box-shadow:0 9px 20px rgba(56,160,95,.30),inset 0 1px 0 rgba(255,255,255,.35); }
.tile--summer{ background:linear-gradient(150deg,#FFE05C 0%,#F0A114 100%); box-shadow:0 9px 20px rgba(240,161,20,.30),inset 0 1px 0 rgba(255,255,255,.35); }
.tile--autumn{ background:linear-gradient(150deg,#E58E39 0%,#BC3F1F 100%); box-shadow:0 9px 20px rgba(188,63,31,.30),inset 0 1px 0 rgba(255,255,255,.30); }
.tile--winter{ background:linear-gradient(150deg,#5FA8F1 0%,#3A53C6 100%); box-shadow:0 9px 20px rgba(58,83,198,.30),inset 0 1px 0 rgba(255,255,255,.32); }

/* Vardagslistan bär appmärkets rouge→lila och tar hela bredden. */
.tile--everyday{
  grid-column:1 / -1; min-height:88px;
  background:linear-gradient(150deg,#C86BEF 0%,#9A5CF3 55%,#8B5CF6 100%);
  box-shadow:0 9px 20px rgba(139,92,246,.32),inset 0 1px 0 rgba(255,255,255,.35);
}
.tile--everyday::before{
  background:
    radial-gradient(70% 90% at 12% 92%,rgba(236,78,139,.45),rgba(236,78,139,0) 60%),
    radial-gradient(120% 130% at 18% 8%,rgba(255,255,255,.30),rgba(255,255,255,0) 52%);
}

/* ---- Vad appen gör -------------------------------------------------------- */

.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.feature{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:26px;
  display:flex; flex-direction:column; gap:10px;
}

.feature h3{
  margin:0; font-family:var(--serif);
  font-size:20px; font-weight:600;
}

.feature p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-soft); }

/* ---- Gratis / Premium ----------------------------------------------------- */

.plans{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.plan{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex; flex-direction:column; gap:14px;
}

.plan__name{
  margin:0;
  font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink);
}

.plan ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }

.plan li{
  margin:0; padding-left:16px; position:relative;
  font-size:14px; line-height:1.5; color:var(--ink-soft);
}
.plan li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-mute);
}

.plan--premium{
  background:linear-gradient(150deg,#C86BEF 0%,#9A5CF3 55%,#8B5CF6 100%);
  box-shadow:0 9px 24px rgba(139,92,246,.28);
}
.plan--premium .plan__name{ color:#fff; }
.plan--premium li{ color:rgba(255,255,255,.92); }
.plan--premium li::before{ background:rgba(255,255,255,.75); }

/* ---- Avslutande uppmaning -------------------------------------------------- */

.closer{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  padding:52px 40px;
  background:linear-gradient(150deg,#C86BEF 0%,#9A5CF3 55%,#8B5CF6 100%);
  box-shadow:0 22px 54px rgba(139,92,246,.30);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:32px;
}
.closer::before,.closer::after{ content:''; position:absolute; inset:0; }
.closer::before{ background:radial-gradient(70% 90% at 10% 96%,rgba(236,78,139,.5),rgba(236,78,139,0) 62%); }
.closer::after { background:radial-gradient(120% 130% at 18% 6%,rgba(255,255,255,.26),rgba(255,255,255,0) 52%); }

.closer__copy{ position:relative; max-width:540px; }
.closer__copy h2{
  margin:0 0 12px; color:#fff;
  font-size:clamp(24px,3.6vw,34px); line-height:1.12;
}
.closer__copy p{ margin:0; font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.86); }
.closer .btn{ position:relative; }

/* ---- Faktaruta, varning och tabell (juridiska sidor) ---------------------- */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 22px;
  margin:0 0 32px;
}

.card p:last-child{ margin-bottom:0; }

.card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; }
.card dt{ color:var(--ink-soft); font-size:15px; }
/* min-width:0 upphäver rutnätets automatiska minimibredd, annars vägrar
   kolumnen krympa under sitt längsta ord. */
.card dd{ margin:0; font-size:15px; min-width:0; }

/* Ansvarsfriskrivningen ska vara omöjlig att missa */
.notice{
  background:color-mix(in srgb, var(--accent) 9%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius:var(--radius);
  padding:20px 22px;
  margin:0 0 28px;
}

.notice p:last-child{ margin-bottom:0; }

.table-wrap{ overflow-x:auto; margin:0 0 20px; }

table{
  width:100%; border-collapse:collapse;
  font-size:15px;
  min-width:28rem;
}

th,td{
  text-align:left; vertical-align:top;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}

th{
  font-weight:650; color:var(--ink-soft);
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
}

/* ---- Kortlänkar ----------------------------------------------------------- */

.links{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; gap:12px;
}

.links a{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;
  color:var(--ink); font-weight:400;
}

.links a:hover{ border-color:var(--primary); color:var(--ink); }

.links b{
  display:block;
  font-family:var(--serif);
  font-size:19px; font-weight:600;
}

/* Direktbarnet: annars träffar regeln även språktvillingarna inuti <b> och
   krymper rubriken till beskrivningens grad (samma vikt, senare i filen). */
.links a > span{ color:var(--ink-soft); font-size:15px; }

/* ---- Vanliga frågor (support.html) ---------------------------------------- */

.faq{ padding:10px 34px; }

.faq__item{ padding:24px 0; border-top:1px solid var(--line); }
.faq__item:first-child{ padding-top:26px; border-top:0; }
.faq__item:last-child{ padding-bottom:30px; }

.faq__item h2{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:22px; font-weight:600; letter-spacing:-.01em;
  line-height:1.25;
}

.faq__item p{
  margin:0; font-size:15.5px; line-height:1.68; color:var(--ink-mid);
}
.faq__item p + p{ margin-top:12px; }

/* Rutan längst ned på support- och kontaktsidan. */
.callout{
  background:var(--surface-2);
  border-radius:var(--radius-lg);
  padding:34px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
}

.callout__copy{ max-width:430px; }
.callout__copy h2{ margin:0 0 8px; font-size:24px; letter-spacing:-.01em; }
.callout__copy p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }

/* ---- Kontaktsidan --------------------------------------------------------- */

.contact{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }

.form{ display:flex; flex-direction:column; gap:20px; }

.field{ display:flex; flex-direction:column; gap:7px; }

.field label{
  font-size:13px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 16px;
  border-radius:14px; border:1.5px solid var(--line);
  font-size:15px; font-family:inherit; line-height:1.55;
  background:var(--surface); color:var(--ink);
}

.field textarea{ min-height:150px; resize:vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--primary); }

.form__send{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:4px; }

.form__hint{ font-size:13px; color:var(--ink-mute); }

/* Bekräftelsen efter att e-postprogrammet öppnats. Dold tills skriptet
   avslöjar den; utan JS är knappen en vanlig mailto-länk och rutan behövs
   inte. */
.form__done[hidden]{ display:none; }
.form__done{
  padding:14px 16px; border-radius:14px;
  background:color-mix(in srgb, var(--green) 14%, var(--surface));
  color:var(--green);
  font-size:14px; font-weight:600;
}

.aside{ display:flex; flex-direction:column; gap:16px; }

.aside__mail{
  background:var(--surface-2);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex; flex-direction:column; gap:8px;
  color:var(--ink); font-weight:400;
}
.aside__mail:hover{ background:color-mix(in srgb, var(--primary) 10%, var(--surface-2)); color:var(--ink); }
.aside__mail small{
  font-size:13px; font-weight:600; color:var(--primary-2);
  text-transform:uppercase; letter-spacing:.05em;
}
.aside__mail b{ font-size:19px; font-weight:700; letter-spacing:-.01em; word-break:break-word; }

.aside__card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:28px;
}
.aside__card h2{ margin:0 0 16px; font-size:19px; }

.notes{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:13px; }
.notes li{
  margin:0; padding-left:18px; position:relative;
  font-size:14px; line-height:1.6; color:var(--ink-soft);
}
.notes li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--ink-mute);
}
/* Färgen sitter på en klass, inte på :nth-child. Varje punkt finns två gånger
   i DOM:en — en per språk — så ordningstalen räknar tvillingarna och ger fel
   färg på det ena språket. */
.notes .is-ok::before   { background:var(--green); }
.notes .is-note::before { background:var(--accent); }
.notes .is-key::before  { background:var(--primary); }

.aside__card > p:last-child{
  margin:0; padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.6; color:var(--ink-mute);
}

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

.site-foot{ border-top:1px solid var(--hairline); }

.site-foot__inner{
  max-width:1080px; margin:0 auto;
  padding:30px 24px 56px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px;
}

.site-foot__brand{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-soft); font-weight:500;
}
.site-foot__brand:hover{ color:var(--ink); }
.site-foot__brand img{ display:block; width:22px; height:20px; }
.site-foot__brand span{ font-family:var(--mono); font-size:11px; }

.site-foot nav{ display:flex; flex-wrap:wrap; gap:12px 26px; }
.site-foot nav a{ font-size:13px; font-weight:500; color:var(--ink-soft); }
.site-foot nav a:hover{ color:var(--ink); }

/* ---- Responsivt ------------------------------------------------------------
   Designen är ritad för skrivbord i fasta spalter. Sidorna säljer en
   mobilapp — merparten av besökarna kommer från en telefon, så varje rutnät
   viks ned här. */

@media (max-width:1000px){
  .pitch{ grid-template-columns:1fr; gap:44px; padding-bottom:64px; }
  .pitch__copy{ align-items:flex-start; }
  .pitch__lede{ max-width:none; }
  .states{ grid-template-columns:repeat(3,1fr); }
  .lists{ grid-template-columns:1fr; gap:28px; }
  .lists__copy p{ max-width:none; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  body{ font-size:16px; }

  .site-head__inner{ padding:11px 18px; gap:12px; }
  .site-nav{ gap:14px; }
  /* Brödsmulans utgivarled får vika först — märket och appnamnet räcker för
     att säga var man är. */
  .crumb__pub,.crumb__sep{ display:none; }

  .wrap{ padding-inline:18px; }
  .doc{ padding:32px 18px 64px; }
  .pitch{ padding:44px 18px 56px; }

  .panel{ padding:24px 20px; border-radius:26px; }
  .faq{ padding:6px 20px; }
  .callout,.closer{ padding:28px 22px; border-radius:26px; }
  .closer{ gap:24px; }

  .states{ grid-template-columns:1fr 1fr; }
  .features{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }

  .btn,.pill-status{ padding:14px 22px; font-size:15px; }

  /* Luren krymper. Bilden är flytande, så bredden räcker — den gamla
     CSS-telefonen hade fast höjd och måste skalas med transform i stället. */
  .shot--hero{ width:266px; }

  /* Galleriet blir en swajpbar remsa i stället för sex rutor under varandra.
     Samma grepp som butikslistningen själv använder, och utan JavaScript.
     Negativ marginal plus lika stor padding: remsan går ut i panelens kanter,
     så att nästa bild syns halvt och remsan läser som rullbar. Talet 20px är
     panelens padding i den här brytpunkten — ändras den ska det här följa. */
  .shots{
    display:flex; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:-20px; padding:2px 20px 12px;
  }
  .shots__item{
    flex:0 0 62%; min-width:168px; max-width:240px;
    scroll-snap-align:center;
  }

  .site-foot__inner{ padding:26px 18px 44px; }
}

@media (max-width:420px){
  .states{ grid-template-columns:1fr; }
  .shot--hero{ width:232px; }

  /* Två spalter blir för trångt för faktarutan; etiketten får en egen rad. */
  .card dl{ grid-template-columns:1fr; gap:2px; }
  .card dt{ margin-top:10px; }
  .card dt:first-child{ margin-top:0; }
}

/* ---- Språkhantering -------------------------------------------------------- */

/* JS sätter data-lang på <html>. Innan dess (och helt utan JS) syns båda. */
html[data-lang="sv"] [lang="en"]{ display:none; }
html[data-lang="en"] [lang="sv"]{ display:none; }

@media print{
  /* Skärmbilderna kostar mer bläck än de säger på papper — sex helsidesbilder
     i galleriet, och luren i ingressen säger inget som texten inte redan gör. */
  .site-head,.lang,.site-foot nav,.pitch__shot,.shots,.closer,.callout,.form__send{ display:none; }
  [lang]{ display:block !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .panel,.card,.notice,.aside__card{ box-shadow:none; border:1px solid #ccc; }

  /* Märket kostar en halv sida bläck och säger inget på papper — hela rutan
     bort, alltså både ringen och ikonen. Lockupen måste explicit nollställas:
     annars står den kvar på animationens startvärde (opacity 0) om utskriften
     sker före 1,4 s. */
  .splash{ background:none; border:0; padding:0 0 16px; align-items:flex-start; text-align:left; }
  .splash__mark{ display:none; }
  .splash__lockup{ animation:none; margin:0; }
}