/* ===========================================================
   Dos: läkemedelsberäkning — marketing site
   Design tokens
   Color (rebuilt around the real app icon: solid purple, bold
     white wordmark) — premium white/glass surface, purple brand:
     --cream        #FFFFFF  page base, clean white surface
     --ink          #241A2E  near-black, purple-tinted, for text
     --purple-1     #4B2E86  brand purple, sampled from the app icon
     --purple-2     #7A52C9  lighter purple, gradient partner for purple-1
     --flame        #FF7A45  warm accent (blobs, tints) — secondary, not brand
     --sun          #FFC857  yellow accent (blobs, highlights)
     --muted        #6E6478  secondary text on light surfaces
     --line         rgba(36,26,46,0.08)
     --glass-bg / --glass-border — frosted-glass panel treatment used
       over the hero's soft color blur, and on nav
   Type:
     Display / headings — 'Space Grotesk' (bold, geometric, a little technical —
       reads like a measuring instrument, fits a calculation app)
     Body — 'Inter' (quiet, legible, gets out of the way)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --cream:#FFFFFF;
  --ink:#241A2E;
  --purple-1:#4B2E86;
  --purple-2:#7A52C9;
  --flame:#FF7A45;
  --sun:#FFC857;
  --muted:#6E6478;
  --line:rgba(36,26,46,0.08);
  --glass-bg:rgba(255,255,255,0.6);
  --glass-bg-strong:rgba(255,255,255,0.78);
  --glass-border:rgba(255,255,255,0.7);
  --glass-shadow:0 8px 32px rgba(75,46,134,0.10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --maxw: 1120px;
}

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

html{ scroll-behavior:smooth; }

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  margin:0;
  line-height:1.08;
  letter-spacing:-0.01em;
  font-weight:700;
}

p{ margin:0; }

a{ color:inherit; text-decoration:none; }

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

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--violet);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.2rem;
}
.brand .mark{
  width:34px; height:34px;
  border-radius:10px;
  background:linear-gradient(145deg, var(--purple-1), var(--purple-2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.05rem;
  box-shadow:0 4px 10px rgba(75,46,134,0.35);
}
.nav-links{
  display:flex;
  gap:34px;
  font-size:0.96rem;
  color:var(--ink);
}
.nav-links a{ opacity:0.78; transition:opacity .15s ease; }
.nav-links a:hover{ opacity:1; }
.nav-cta{
  padding:10px 20px;
  border-radius:100px;
  background:var(--ink);
  color:var(--cream);
  font-size:0.92rem;
  font-weight:600;
  white-space:nowrap;
}

.nav-toggle{ display:none; }

.nav-toggle-input{ display:none; }
.nav-toggle-label{
  display:none;
  width:40px; height:40px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  flex:none;
}
.nav-toggle-label span{
  width:18px; height:2px;
  background:var(--ink);
  border-radius:2px;
  margin:2.5px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle-input:checked ~ .wrap .nav-toggle-label span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .wrap .nav-toggle-label span:nth-child(2){ opacity:0; }
.nav-toggle-input:checked ~ .wrap .nav-toggle-label span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-mobile-panel{
  display:none;
  flex-direction:column;
  padding:8px 28px 20px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
}
.nav-mobile-panel a{
  padding:14px 2px;
  border-bottom:1px solid var(--line);
  font-weight:600;
  font-size:1rem;
}
.nav-mobile-panel a:last-child{ border-bottom:none; }
.nav-toggle-input:checked ~ .nav-mobile-panel{ display:flex; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 28px;
  border-radius:100px;
  font-weight:600;
  font-size:1rem;
  border:none;
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(120deg, var(--purple-1), var(--purple-2));
  color:#fff;
  box-shadow:0 10px 24px rgba(75,46,134,0.32);
}
.btn-ghost{
  background:var(--glass-bg-strong);
  color:var(--ink);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:64px 0 80px;
  background:var(--cream);
}
.blob{
  position:absolute;
  filter:blur(38px);
  opacity:0.55;
  z-index:0;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
}
.eyebrow-plain{
  color:var(--purple-1);
  font-weight:600;
  font-size:0.98rem;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.1rem, 5.6vw, 3.4rem);
  max-width:24ch;
  text-wrap:balance;
}
.hero .sub{
  margin-top:22px;
  max-width:46ch;
  color:var(--muted);
  font-size:1.14rem;
  text-wrap:pretty;
}
.hero-ctas{
  margin-top:34px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.hero-note{
  margin-top:18px;
  font-size:0.9rem;
  color:var(--muted);
}

/* ---------- phone mockup ---------- */
.phone-stage{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1;
  padding:48px;
  border-radius:40px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--glass-shadow);
}
.phone{
  width:280px;
  border-radius:38px;
  background:var(--ink);
  padding:12px;
  box-shadow:0 30px 60px rgba(36,26,46,0.28), 0 4px 12px rgba(36,26,46,0.18);
  transform:rotate(-3deg);
}
.phone-screen{
  background:linear-gradient(165deg, var(--purple-1), var(--purple-2));
  border-radius:28px;
  overflow:hidden;
  aspect-ratio:9/18.5;
  position:relative;
  display:flex;
  flex-direction:column;
}
.phone-notch{
  position:absolute;
  top:10px; left:50%;
  transform:translateX(-50%);
  width:64px; height:18px;
  background:var(--ink);
  border-radius:100px;
}
.phone-content{
  margin-top:44px;
  padding:0 16px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.phone-label{
  color:rgba(255,255,255,0.85);
  font-size:0.72rem;
  font-weight:600;
}
.phone-problem{
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:14px;
  padding:12px;
  color:#fff;
  font-size:0.78rem;
  line-height:1.45;
}
.phone-question-card{
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 20px rgba(36,26,46,0.18);
}
.phone-question-card .q-label{
  font-size:0.68rem;
  font-weight:600;
  color:var(--purple-1);
  margin-bottom:6px;
}
.phone-question-card .q-text{
  font-size:0.82rem;
  color:var(--ink);
  font-weight:600;
  line-height:1.4;
}
.phone-calc{
  margin-top:auto;
  background:#fff;
  border-radius:16px 16px 0 0;
  padding:12px 14px 16px;
  box-shadow:0 -6px 16px rgba(36,26,46,0.14);
}
.calc-display{
  background:var(--cream);
  border-radius:10px;
  padding:10px 12px;
  text-align:right;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1rem;
  margin-bottom:8px;
  color:var(--ink);
}
.calc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.calc-grid span{
  background:var(--cream);
  border-radius:8px;
  text-align:center;
  padding:7px 0;
  font-size:0.74rem;
  font-weight:600;
  color:var(--muted);
}
.calc-grid span.op{ color:var(--purple-1); }

/* ---------- section shell ---------- */
section{ padding:96px 0; position:relative; }
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(1.9rem, 3vw, 2.5rem);
}
.section-head p{
  margin-top:16px;
  color:var(--muted);
  font-size:1.08rem;
}

/* ---------- how it works ---------- */
.how{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.how-list{
  display:flex;
  flex-direction:column;
}
.how-item{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  padding:30px 0;
  border-top:1px solid var(--line);
}
.how-item:last-child{ border-bottom:1px solid var(--line); }
.how-num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.4rem;
  color:var(--purple-1);
}
.how-item h3{ font-size:1.28rem; margin-bottom:8px; }
.how-item p{ color:var(--muted); max-width:56ch; }

/* ---------- categories ---------- */
.cat-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.cat-pill{
  padding:12px 20px;
  border-radius:100px;
  background:#fff;
  border:1.5px solid var(--line);
  font-weight:600;
  font-size:0.95rem;
}
.cat-pill.big{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink);
  font-size:1.05rem;
}
.cat-pill.tint-sun{ background:#FFF3D6; border-color:#F4D999; }
.cat-pill.tint-violet{ background:#EFEBFF; border-color:#D6CCFF; }

/* ---------- feature grid (varied, not identical cards) ---------- */
.features{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:20px;
}
.feature-main{
  grid-row: span 2;
  background:linear-gradient(160deg, #2E1F52, var(--purple-1));
  color:var(--cream);
  border-radius:var(--radius-lg);
  padding:38px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:420px;
}
.feature-main h3{ font-size:1.6rem; color:#fff; }
.feature-main p{ margin-top:12px; color:rgba(255,248,240,0.72); max-width:38ch; }
.feature-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
}
.feature-card.sun{ background:#FFF3D6; border-color:transparent; }
.feature-card.violet{ background:#EFEBFF; border-color:transparent; }
.feature-card h3{ font-size:1.15rem; margin-bottom:8px; }
.feature-card p{ color:var(--muted); font-size:0.98rem; }

/* ---------- plan / onboarding strip ---------- */
.plan{
  background:var(--sun);
  border-radius:var(--radius-lg);
  padding:48px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
}
.plan h3{ font-size:1.7rem; max-width:16ch; }
.plan p{ margin-top:14px; color:rgba(36,26,46,0.72); max-width:48ch; }
.plan-steps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.plan-step{
  background:rgba(36,26,46,0.08);
  border-radius:100px;
  padding:8px 16px;
  font-size:0.86rem;
  font-weight:600;
}

/* ---------- faq ---------- */
.faq-item{
  border-top:1px solid var(--line);
  padding:22px 0;
}
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.08rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  color:var(--purple-1);
}
.faq-item[open] .faq-plus{ transform:rotate(45deg); }
.faq-item p{
  margin-top:14px;
  color:var(--muted);
  max-width:64ch;
}

/* ---------- final cta ---------- */
.cta-band{
  background:linear-gradient(135deg, var(--purple-1), var(--purple-2));
  border-radius:var(--radius-lg);
  padding:64px 48px;
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-band h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); color:#fff; }
.cta-band p{ margin-top:14px; color:rgba(255,255,255,0.85); }
.cta-band .hero-ctas{ justify-content:center; margin-top:30px; }
.cta-band .btn-ghost{ background:rgba(255,255,255,0.14); color:#fff; border-color:rgba(255,255,255,0.3); }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:44px 0;
}
.foot-grid{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}
.foot-links{
  display:flex;
  gap:26px;
  font-size:0.92rem;
  color:var(--muted);
}
.foot-links a:hover{ color:var(--ink); }
.foot-copy{ font-size:0.86rem; color:var(--muted); }

/* ---------- support page specific ---------- */
.support-hero{ padding:64px 0 40px; }
.support-hero h1{ font-size:clamp(2rem,4vw,2.8rem); max-width:16ch; }
.support-hero p{ margin-top:16px; color:var(--muted); max-width:52ch; font-size:1.08rem; }
.support-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.support-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px;
}
.support-card h3{ font-size:1.2rem; margin-bottom:10px; }
.support-card p{ color:var(--muted); }
.support-card a.email{
  display:inline-block;
  margin-top:14px;
  font-weight:600;
  color:var(--purple-1);
  border-bottom:1.5px solid currentColor;
}

/* ---------- legal / policy pages ---------- */
.policy-meta{
  color:var(--muted);
  font-size:0.95rem;
  margin-top:10px;
}
.policy-content{
  max-width:74ch;
}
.policy-content h2{
  font-size:1.45rem;
  margin-top:48px;
  margin-bottom:14px;
}
.policy-content h2:first-child{ margin-top:0; }
.policy-content h3{
  font-size:1.1rem;
  margin-top:26px;
  margin-bottom:8px;
}
.policy-content p{
  color:var(--muted);
  margin-bottom:14px;
}
.policy-content ul{
  color:var(--muted);
  margin:0 0 14px;
  padding-left:22px;
}
.policy-content li{ margin-bottom:8px; }
.policy-content strong{ color:var(--ink); }
.policy-content a{
  color:var(--purple-1);
  border-bottom:1.5px solid currentColor;
}
.policy-callout{
  background:#FFF3D6;
  border:1px solid #F4D999;
  border-radius:var(--radius-md);
  padding:20px 24px;
  margin-bottom:40px;
  font-size:0.95rem;
}
.policy-callout strong{ display:block; margin-bottom:6px; }
.policy-toc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:44px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line);
}
.policy-toc a{
  padding:8px 16px;
  border-radius:100px;
  background:#fff;
  border:1px solid var(--line);
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink);
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-toggle-label{ display:flex; }
  .hero{ padding:40px 0 56px; }
  .hero-grid{ grid-template-columns:1fr; }
  .phone-stage{ order:-1; margin-bottom:28px; padding:32px 20px; }
  .phone{ width:220px; transform:rotate(0); }
  .features{ grid-template-columns:1fr; }
  .feature-main{ min-height:240px; }
  .plan{ grid-template-columns:1fr; padding:28px; }
  .support-grid{ grid-template-columns:1fr; }
  .how-item{ grid-template-columns:32px 1fr; gap:16px; }
  section{ padding:64px 0; }
  .section-head{ margin-bottom:36px; }
  .cta-band{ padding:44px 26px; }
  .wrap{ padding:0 20px; }
}

@media (max-width: 520px){
  .hero h1{ max-width:100%; }
  .hero-break{ display:none; }
  .hero-ctas .btn{ width:100%; }
  .hero-ctas{ flex-direction:column; }
  .phone-stage{ padding:24px 14px; border-radius:28px; }
  .plan-steps{ gap:8px; }
  .foot-grid{ flex-direction:column; align-items:flex-start; gap:20px; }
}