/* Fitzli, landningssidans stilmall. Ljus botten, mörkt matband.
 *
 * VARFÖR SIDAN ÄR LJUS. En mörk version provades först. På mörk botten
 * försvinner en mörk skärmbild in i bakgrunden och produkten blir det
 * mörkaste på sidan i stället för det ljusaste. Den här vänder på det:
 * ljus botten, ljusa skärmbilder, samma komposition.
 *
 * Skärmbilderna är hämtade ur PRODUKTIONENS demokonto, inte ur en lokal
 * rigg. Riktiga planer, riktiga recept, riktiga receptbilder.
 *
 * GRUNDEN ÄR HÄMTAD UR TVÅ KÄLLOR, INTE GISSAD.
 *
 * ui-ux-pro-max (repots egen färdighet, data/ui-reasoning.csv) placerar en
 * app som den här mellan rad 63 och rad 5:
 *   rad 63, Fitness/Gym App  -> OLED-mörkt, energisk orange, fet typografi,
 *                               progressringar, "Feature-Rich + Data"
 *   rad  5, Healthcare App   -> WCAG, stor läsbar text (16px+), social
 *                               bevisning, INGA rörelsetunga effekter och
 *                               inga lila/rosa AI-gradienter
 * Fitzli är båda: en träningsapp vars poäng är det medicinska.
 *
 * 21st.dev (Magic MCP) gav kompositionen: "Hero with Mockup" (id 1492) för
 * hjälten och "Bento Product Features" (id 9206) för rutnätet.
 *
 * TVÅ SAKER UR MAGIC ÄR MED FLIT BORTPLOCKADE. Komponenten ritar rubriken
 * som gradienttext och lägger en radiell glöd bakom hjälten. Båda är
 * namngivna slop-regler ([gradient-text], [radial-halo]) och ströks av just
 * det skälet. Att lägga tillbaka dem för att en komponent råkar ha dem vore
 * att byta ut ett skäl mot en vana.
 *
 * KONTRASTEN ÄR RÄKNAD MOT AAA (7:1), inte mot AA. Healthcare-raden kräver
 * det:
 *   #1C1613 mot #FAF7F2 = 16.8      #554C43 mot #FAF7F2 = 7.9
 *   #554C43 mot #FFFFFF =  8.4      #8A420F mot #FAF7F2 = 6.9
 * Orange #E8843E ger bara 2.5:1 som text och används därför som fyllning.
 * Där kulören ska bära text står #8A420F i stället, och mörk text på orange
 * fyllning ger 6.7:1.
 *
 * Matbandet är det enda mörka på sidan, och dess egna par står vid .mat.
 */

/* ============================================================ tokens ==== */

:root {
  color-scheme: light;

  --bas: #FAF7F2;
  --yta: #FFFFFF;
  --yta-hog: #F4EFE8;
  --kant: #E9E0D5;
  --kant-stark: #D5C8B8;

  --text: #1C1613;
  --text-svag: #554C43;      /* 7.9:1 mot basen, 8.4:1 mot ytan, alltså AAA */

  --brand: #E8843E;          /* appens egen, används som FYLLNING */
  --brand-text: #8A420F;     /* samma kulör mörkad: 6.9:1, bär som ikon och tal */
  --brand-mork: #C96A29;
  --pa-brand: #1C1613;       /* mörk text på orange fyllning: 6.7:1 */

  --radie: 18px;
  --radie-stor: 26px;
  --sidbredd: 1200px;

  /* Skuggor på mörkt måste vara djupare än på ljust för att synas alls. */
  --skugga: 0 2px 5px rgba(28,22,19,.06), 0 10px 28px rgba(28,22,19,.07);
  --skugga-lyft: 0 5px 12px rgba(28,22,19,.09), 0 22px 56px rgba(28,22,19,.11);
  --kantljus: none;

  --studs: cubic-bezier(.22,1,.36,1);
  --luft: clamp(72px, 9vw, 136px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bas);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  /* 18px, inte 17. Healthcare-raden säger 16px+ och en säljsida läses på
   * telefon i rörelse. */
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: Sora, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--text);
}
p { text-wrap: pretty; }
a { color: var(--brand-text); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

.inre { max-width: var(--sidbredd); margin: 0 auto; padding: 0 24px; }

::selection { background: color-mix(in srgb, var(--brand) 34%, transparent); color: var(--text); }

/* ===================================================== App Store-badge == */

/* APPLES EGET KONSTVERK, HÄMTAT FRÅN DERAS MARKETING TOOLS. Knappen var ren
 * text tills nu, för teckenglyfen för Apples logotyp (U+F8FF) finns bara i
 * Apples egna typsnitt och blev en tom ruta på Windows, Android och Linux.
 *
 * REGLERNA UR APP STORE MARKETING GUIDELINES, och de är mått, inte smak:
 *   - minst 40 px hög på skärm. Här 54, för att bära som sidans huvudknapp.
 *   - fritt utrymme runt = en fjärdedel av höjden, alltså 13.5 px.
 *   - ingen ändring: inte vinklad, inte animerad, inte omfärgad. Den grå
 *     ramen runt det svarta är del av konstverket.
 *
 * Därför ingen skugga och ingen egen radie här: badgen har sina egna.
 *
 * SPRÅKET SITTER I FILEN, inte i CSS. "Hämta i" är översatt av Apple, men
 * App Store står alltid på engelska. Att skriva en egen svensk badge är
 * uttryckligen förbjudet, och min egen gissning "Ladda ned på" var fel.
 *
 * DET FRIA UTRYMMET KOMMER UR LAYOUTEN, INTE UR EN MARGINAL HÄR. Kravet är
 * 13.5 px vid 54 px höjd, och raden ger redan mer: gap 14 px i sidled,
 * 38 px över och 18 px under. En egen marginal ovanpå det dubbelräknade,
 * och eftersom .knapprad är flex med stretch sträcktes den tysta knappen
 * till badgens yttermått: 54 + 27 = 81 px hög bredvid en 54 px badge. */
.butiksknapp {
  display: inline-block;
  line-height: 0;
  transition: transform .3s var(--studs);
}
.butiksknapp:hover { transform: translateY(-2px); }
.butiksknapp img { height: 54px; width: auto; display: block; }

@media (max-width: 560px) {
  .butiksknapp img { height: 48px; }
}

/* ====================================================== rörelsen ======== */

/* MAGICS TRAPPA, UTAN DESS GLÖD. Komponenten fasar in rubrik, ingress,
 * knappar och bild med 0/150/300/700 ms fördröjning. Trappan är det som gör
 * att sidan känns byggd i stället för utlagd, så den är kvar. Men den körs
 * på transform och opacity, ease-out från ett synligt läge, och bara en
 * gång. */
@keyframes stig {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .trappa > * { animation: stig .7s var(--studs) both; }
  .trappa > :nth-child(1) { animation-delay: .00s; }
  .trappa > :nth-child(2) { animation-delay: .10s; }
  .trappa > :nth-child(3) { animation-delay: .20s; }
  .trappa > :nth-child(4) { animation-delay: .34s; }
}

/* =========================================================== topprad ==== */

.topp {
  position: sticky; top: 0; z-index: 50; padding: 15px 0;
  background: color-mix(in srgb, var(--bas) 72%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--kant) 75%, transparent);
}
.topp .inre { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.märke { display: flex; align-items: center; gap: 11px; font-family: Sora, sans-serif;
         font-weight: 700; font-size: 20px; letter-spacing: -.02em;
         color: var(--text); text-decoration: none; }
.märke img { width: 34px; height: 34px; border-radius: 10px; }
.toppslut { display: flex; align-items: center; gap: 12px; }

.språk { display: flex; gap: 2px; background: var(--yta); padding: 4px;
         border-radius: 999px; border: 1px solid var(--kant); }
.språk a { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 15px;
           border-radius: 999px; font-size: 14px; font-weight: 600;
           text-decoration: none; color: var(--text-svag); transition: color .2s ease; }
.språk a:hover { color: var(--text); }
.språk a[aria-current="true"] { background: var(--yta-hog); color: var(--text); }
@media (max-width: 860px) { .språk a { min-height: 44px; } }

/* ============================================================= knapp ==== */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--brand); color: var(--pa-brand);
  text-decoration: none; font-weight: 700; font-size: 17px;
  padding: 16px 30px; border-radius: 14px;
  box-shadow: var(--skugga);
  transition: transform .3s var(--studs), box-shadow .3s var(--studs), background .2s ease;
}
.knapp:hover { background: var(--brand-mork); transform: translateY(-2px); box-shadow: var(--skugga-lyft); }
.knapp:active { transform: translateY(0); }
.knapp--tyst {
  background: transparent; color: var(--text); box-shadow: none;
  border: 1px solid var(--kant-stark); padding: 15px 26px; font-weight: 600;
}
.knapp--tyst:hover { background: var(--yta); border-color: var(--brand); }
.knapp--liten { padding: 10px 20px; font-size: 15px; border-radius: 999px; box-shadow: none; }
@media (max-width: 860px) { .toppslut .knapp--liten { display: none; } }

/* ============================================================ hjälte ==== */

/* Magics komposition: allt centrerat, bilden under texten och stor. Det är
 * en annan sida än en tvåspalt. Telefonen får bära första vyn i stället
 * för att stå bredvid den. */
.hjälte { padding: clamp(56px, 8vw, 110px) 0 0; text-align: center; }
.hjälte h1 { font-size: clamp(42px, 7.2vw, 88px); max-width: 16ch; margin: 0 auto; }
.hjälte .ingress {
  font-size: clamp(19px, 1.7vw, 23px); color: var(--text-svag);
  max-width: 50ch; margin: 26px auto 0;
}
/* align-items: center, inte stretch. Med stretch blir varje knapp lika hög
 * som radens högsta, och en badge med annan höjd drar därför ut resten. */
.knapprad { display: flex; flex-wrap: wrap; align-items: center;
            justify-content: center; gap: 14px; margin-top: 38px; }
.prisrad { color: var(--text-svag); font-size: 16px; margin-top: 18px; }
.prisrad strong { color: var(--text); font-weight: 700; }

.förtroende {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 26px; margin-top: 30px; color: var(--text-svag); font-size: 15px;
}
.förtroende li { display: flex; align-items: center; gap: 9px; }
.förtroende li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 42%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%238A420F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}

.hjältebild { margin-top: clamp(44px, 6vw, 76px); display: flex; justify-content: center; }
.hjältebild .telefon { width: min(330px, 78vw); }

/* ======================================================= telefonram ==== */

.telefon {
  position: relative; aspect-ratio: 9 / 19.5;
  border-radius: 38px; padding: 8px;
  background: linear-gradient(162deg, #4A4038, #14100D 58%);
  box-shadow: var(--skugga-lyft), inset 0 0 0 1px rgba(255,255,255,.14);
}
.telefon::after {
  content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 17px; border-radius: 999px; background: #0D0A08; z-index: 2;
}
.telefon img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 31px; background: var(--yta-hog);
}

/* =========================================================== siffror ==== */

/* "Vibrant & Block-based" ur ui-reasoning-raden: talen som block, inte som
 * en rad text. Två tal, inte tre. Tre stora tal med små etiketter är
 * mallens räkneverk. */
.tal {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: var(--luft);
}
.talblock {
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie);
  padding: 34px 30px; box-shadow: var(--kantljus);
}
.talblock--brand { background: var(--brand); border-color: var(--brand); }
.talblock--brand .siffra, .talblock--brand .etikett { color: var(--pa-brand); }
.talblock--brand .etikett { opacity: .82; }
.siffra { font-family: Sora, sans-serif; font-size: clamp(38px, 4.4vw, 54px);
          font-weight: 700; line-height: 1; letter-spacing: -.035em; color: var(--brand-text); }
.etikett { color: var(--text-svag); font-size: 15.5px; margin-top: 12px; }

/* ============================================================ avsnitt ==== */

.avsnitt { padding: var(--luft) 0 0; }
.avsnitt h2 { font-size: clamp(30px, 3.8vw, 50px); max-width: 19ch; }
.avsnitt .under { color: var(--text-svag); margin-top: 18px; max-width: 54ch; font-size: 19px; }

/* ============================================================== maten ==== */

/* FULL BREDD, INTE I SPALTEN. Bandet ska läsa som mat, inte som ett
 * innehållsblock, därför går det ut till kanterna och beskärs av fönstret.
 *
 * INGEN MARQUEE. Ett band som rullar av sig självt är en namngiven
 * slop-regel och stjäl dessutom uppmärksamhet från knappen ovanför.
 * Bilderna står still; det är rätterna som ska säga något, inte rörelsen. */
/* MATBANDET LIGGER PÅ MÖRKT ÄVEN HÄR, och det är ett medvetet undantag
 * från sidans ljusa grund.
 *
 * Skälet är mätbart: samma sex bilder sida vid sida på ljus respektive mörk
 * botten: mot mörkt lyser tallrikarna och läser som mat, mot gräddvitt
 * smälter de in i pappret. Bilderna ÄR ljusa, med ljust trä och ljusa
 * tallrikar, så de behöver en mörk ram för att bli bilder i stället för
 * fläckar.
 *
 * Skärmbilderna har motsatt behov, och det är därför resten av sidan är
 * ljus: en ljus telefon på ljus botten läser som en telefon, en mörk gör
 * det inte. Sidan följer alltså inte ett tema utan två krav.
 *
 * Bandet håller samma AAA-krav som resten:
 *   #F3EBE2 mot #14100D = 16.0      #B3A698 mot #14100D = 8.0 */
.mat {
  margin-top: var(--luft);
  background: #14100D;
  padding: var(--luft) 0;
  color: #F3EBE2;
}
.mat h2 { color: #F3EBE2; }
.mat .under, .mat .matnot { color: #B3A698; }
.mat .matband img { border-color: rgba(255,255,255,.08); }
.matband {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 14px; margin-top: 38px;
  /* align-items: start. Utan den sträcks cellerna till radens höjd och
   * kör över bildernas aspect-ratio, så kvadraterna blev höga rektanglar. */
  align-items: start;
  padding-inline: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.matband::-webkit-scrollbar { display: none; }
.matband img {
  /* height: auto MÅSTE stå här. Utan den gäller height="600" ur
   * HTML-attributet, radhöjden låser sig vid 600 px och aspect-ratio
   * förlorar, och kvadraterna blev höga rektanglar. Attributet är kvar för
   * att webbläsaren ska kunna reservera plats innan bilden laddat. */
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radie); display: block;
  scroll-snap-align: start;
  border: 1px solid var(--kant);
}
@media (min-width: 1000px) {
  /* På bred skärm får de plats allihop, och de yttersta bleder ut. */
  .matband { overflow: visible; grid-auto-columns: 1fr;
             padding-inline: max(24px, calc((100vw - var(--sidbredd)) / 2 - 40px)); }
}
.matnot { color: var(--text-svag); font-size: 15px; margin-top: 18px; }

/* ============================================================== bento ==== */

/* RUTNÄTET KOMMER FRÅN 21st.dev "Bento Product Features" (id 9206): tre
 * spalter, tre rader, en hög cell till vänster över alla tre och en bred
 * cell nederst. Det är den formen som gör ett bento till ett bento i
 * stället för sex lika lådor: innehåll av olika vikt får olika yta.
 *
 * Den höga cellen bär en telefon. Det är den enda cellen som kan, och det
 * är också den som ska: skärmbilden är starkare än vilken textrad som helst.
 */
.bento { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 46px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); }
  .cell--hog  { grid-column: 1; grid-row: 1 / span 3; }
  .cell--bred { grid-column: span 2; }
}
.cell {
  position: relative; overflow: hidden;
  background: var(--yta); border: 1px solid var(--kant);
  border-radius: var(--radie); padding: 30px 28px;
  box-shadow: var(--kantljus);
  transition: border-color .35s ease, transform .35s var(--studs);
}
.cell:hover { border-color: var(--kant-stark); transform: translateY(-3px); }
.cell h3 { font-size: 21px; margin-bottom: 10px; }
.cell p { color: var(--text-svag); font-size: 16.5px; }
.cellikon { width: 26px; height: 26px; display: block; margin-bottom: 18px; color: var(--brand-text); }

/* Den höga cellen: rubrik uppe, telefon som fyller resten. */
.cell--hog { display: flex; flex-direction: column; padding-bottom: 0; }
.cell--hog .telefon { width: 84%; margin: 26px auto -14%; flex: none; }

/* Den breda cellen får ett stort tal i stället för en ikon. */
.cell--bred .stortal {
  font-family: Sora, sans-serif; font-size: clamp(46px, 5vw, 66px); font-weight: 700;
  color: var(--brand-text); line-height: 1; letter-spacing: -.035em; margin-bottom: 14px;
}

/* ============================================================== steg ==== */

.steg { list-style: none; margin-top: 46px;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.steg > li { position: relative; }
.stegring { position: relative; width: 52px; height: 52px; margin-bottom: 20px; }
.stegring svg { width: 52px; height: 52px; transform: rotate(-90deg); display: block; }
.stegring circle { fill: none; stroke-width: 4; }
.stegring .spar { stroke: var(--kant-stark); }
.stegring .fyll { stroke: var(--brand); stroke-linecap: round;
                  stroke-dasharray: 138; transition: stroke-dashoffset .8s var(--studs); }
.stegring b { position: absolute; inset: 0; display: grid; place-items: center;
              font-family: Sora, sans-serif; font-size: 16px; color: var(--text); }
.steg h3 { font-size: 22px; margin-bottom: 10px; }
.steg p { color: var(--text-svag); font-size: 17px; max-width: 34ch; }

/* ======================================================== skärmbilder ==== */

.skärmar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
           gap: clamp(16px, 2.4vw, 28px); margin-top: 46px; }

/* ============================================================ frågor ==== */

.fragor { margin-top: 44px; max-width: 800px;
          border: 1px solid var(--kant); border-radius: var(--radie);
          background: var(--yta); overflow: hidden; box-shadow: var(--kantljus); }
.fragor details { border-bottom: 1px solid var(--kant); }
.fragor details:last-child { border-bottom: 0; }
.fragor summary { cursor: pointer; list-style: none; display: flex; align-items: center;
                  justify-content: space-between; gap: 18px; padding: 22px 28px;
                  font-family: Sora, sans-serif; font-weight: 600; font-size: 18.5px;
                  letter-spacing: -.015em; transition: color .2s ease; }
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary:hover { color: var(--brand-text); }
.fragor summary::after { content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--text-svag); border-bottom: 2px solid var(--text-svag);
  border-radius: 1px; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--studs); }
.fragor details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fragor details > p { padding: 0 28px 26px; color: var(--text-svag); font-size: 17px; max-width: 64ch; }

/* ============================================================ avslut ==== */

.avslut { margin-top: var(--luft); padding: clamp(60px, 8vw, 104px) 24px;
          text-align: center; position: relative; }
.avslut::before { content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--radie-stor); background: var(--yta);
  box-shadow: inset 0 0 0 1px var(--kant); }
.avslut h2 { font-size: clamp(32px, 4.6vw, 56px); max-width: 17ch; margin: 0 auto; }
.avslut .knapprad { margin-top: 36px; }

.qr { display: none; }
@media (min-width: 861px) {
  .qr { display: flex; align-items: center; justify-content: center; gap: 18px;
        margin: 38px auto 0; padding-top: 30px; border-top: 1px solid var(--kant);
        max-width: 46ch; text-align: left; }
  .qr img { flex: none; display: block; padding: 9px; border-radius: 12px;
        background: var(--yta); box-shadow: var(--skugga); }
  .qr p { color: var(--text-svag); font-size: 15px; line-height: 1.5; }
}

/* =============================================================== fot ==== */

.fot { border-top: 1px solid var(--kant); margin-top: var(--luft);
       padding: 42px 0 calc(42px + env(safe-area-inset-bottom));
       color: var(--text-svag); font-size: 15px; }
.fot .inre { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.fot a { color: var(--text-svag); text-decoration: none; display: inline-block;
         padding: 12px 0; margin-right: 22px; }
.fot a:hover { color: var(--text); text-decoration: underline; }
.fot address { font-style: normal; line-height: 1.75; }

/* ==================================================== klistrad knapp ==== */

.klistrad { display: none; }
@media (max-width: 860px) {
  .klistrad { display: block; position: fixed; z-index: 60; left: 12px; right: 12px;
              bottom: calc(12px + env(safe-area-inset-bottom)); }
  .klistrad .knapp { width: 100%; padding: 17px; box-shadow: var(--skugga-lyft); }
  .fot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}