/* ===========================================================================
   KLARTID.SE — stilen. Paletten, typsnitten och gradientbakgrunden är de
   godkända ur säljsidans första version; det som ändrats är innehållet.

   TYPSNITTEN ÄR SJÄLVHOSTADE. Filerna i /typsnitt/ är exakt de som appen
   levererar (app/public/typsnitt/), och @font-face-reglerna är avskrivna ur
   app/src/design/typsnitt.css. Inget hämtas från någon annan värd — ingen
   tredje part får besökarens IP-adress när sajten öppnas.
   =========================================================================== */

/* --- Familjen Grotesk (rubriker och knapptext) --------------------------- */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/typsnitt/familjen-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/typsnitt/familjen-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Instrument Sans (brödtext) ------------------------------------------ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/typsnitt/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/typsnitt/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- DM Mono (siffror och etiketter) ------------------------------------- */

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/typsnitt/dm-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/typsnitt/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/typsnitt/dm-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/typsnitt/dm-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Paletten ------------------------------------------------------------ */

:root {
  color-scheme: light dark;
  --base: #FEFCFD;
  --g-peach: rgba(250, 219, 198, .88);
  --g-pink:  rgba(246, 210, 228, .82);
  --g-lilac: rgba(226, 212, 244, .88);
  --surface: #FFFFFF;
  --surface-quiet: rgba(255, 255, 255, .62);
  --hairline: rgba(58, 40, 52, .07);
  --hairline-2: rgba(58, 40, 52, .12);
  --ink: #241B24;
  --muted: #6B5C69;
  --faint: #9A8B98;
  --accent: #9E4468;
  --accent-quiet: rgba(158, 68, 104, .09);
  --solid: #2C2029;
  --solid-ink: #FFFFFF;
  --good: #2F6E55;
  --good-quiet: rgba(47, 110, 85, .11);
  --warn: #8F6512;
  --warn-quiet: rgba(143, 101, 18, .12);
  --mark: rgba(255, 214, 102, .55);
  --lift: 0 1px 2px rgba(58, 40, 52, .04), 0 6px 18px rgba(58, 40, 52, .05);
  --lift-lg: 0 2px 6px rgba(58, 40, 52, .05), 0 24px 60px rgba(58, 40, 52, .10);
  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", Consolas, "Cascadia Code", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --base: #131019;
    --g-peach: rgba(120, 76, 58, .40); --g-pink: rgba(122, 62, 92, .38); --g-lilac: rgba(84, 66, 130, .42);
    --surface: #1D1822; --surface-quiet: rgba(255,255,255,.045);
    --hairline: rgba(255,255,255,.09); --hairline-2: rgba(255,255,255,.16);
    --ink: #F2EAF0; --muted: #ADA0AC; --faint: #827583;
    --accent: #F0A0BE; --accent-quiet: rgba(240,160,190,.14);
    --solid: #F2EAF0; --solid-ink: #241B24;
    --good: #7FCBA4; --good-quiet: rgba(127,203,164,.15);
    --warn: #DDB264; --warn-quiet: rgba(221,178,100,.15);
    --mark: rgba(221, 178, 100, .35);
    --lift: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
    --lift-lg: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --base: #131019;
  --g-peach: rgba(120, 76, 58, .40); --g-pink: rgba(122, 62, 92, .38); --g-lilac: rgba(84, 66, 130, .42);
  --surface: #1D1822; --surface-quiet: rgba(255,255,255,.045);
  --hairline: rgba(255,255,255,.09); --hairline-2: rgba(255,255,255,.16);
  --ink: #F2EAF0; --muted: #ADA0AC; --faint: #827583;
  --accent: #F0A0BE; --accent-quiet: rgba(240,160,190,.14);
  --solid: #F2EAF0; --solid-ink: #241B24;
  --good: #7FCBA4; --good-quiet: rgba(127,203,164,.15);
  --warn: #DDB264; --warn-quiet: rgba(221,178,100,.15);
  --mark: rgba(221, 178, 100, .35);
  --lift: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
  --lift-lg: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.45);
}

/* --- Grunden ------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--base);
  background-image:
    radial-gradient(72% 50% at 6% 110%, var(--g-peach), transparent 70%),
    radial-gradient(66% 46% at 48% 114%, var(--g-pink), transparent 70%),
    radial-gradient(72% 52% at 94% 110%, var(--g-lilac), transparent 70%);
  background-attachment: fixed; background-repeat: no-repeat;
  overflow-x: clip; /* sidan skrollar aldrig i sidled; breda tabeller skrollar i sin egen ram */
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.05rem); font-weight: 600; letter-spacing: -0.022em; margin-bottom: 0.6rem; }
h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
section { margin-top: 5rem; }
.center { text-align: center; }
.center p { max-width: 54ch; margin-left: auto; margin-right: auto; }
.sectionsub { color: var(--muted); max-width: 56ch; }
.lugn { color: var(--muted); font-size: 0.94rem; margin-top: 1.2rem; max-width: 60ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Toppen -------------------------------------------------------------- */

.brandbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 3.5rem; }
.brandbar > a:first-child { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; }
.logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--solid); color: var(--solid-ink);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.95rem;
}
.brandbar b { font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; }
.brandbar .by { font-family: var(--mono); font-size: 0.76rem; color: var(--faint); }
.brandbar .loggain {
  margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  color: var(--ink); text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--hairline-2); background: var(--surface-quiet);
}
.brandbar .loggain:hover { box-shadow: var(--lift); }

/* --- Hero ---------------------------------------------------------------- */

.hero { display: grid; grid-template-columns: 1fr 400px; gap: 3rem; align-items: center; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; gap: 2.5rem; } }
.kicker {
  display: inline-block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-quiet);
  padding: 0.3rem 0.75rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.hero .lede { font-size: 1.18rem; color: var(--muted); max-width: 46ch; margin-top: 1.4rem; }
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--solid); color: var(--solid-ink);
  border: 0; border-radius: 14px; padding: 0.9rem 1.5rem; font-family: var(--display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; box-shadow: var(--lift);
}
.cta:hover { box-shadow: var(--lift-lg); }
.cta:disabled { opacity: .6; cursor: default; }
.ctarow { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 2rem; }
.ctanote { font-size: 0.88rem; color: var(--muted); }
.ctanote a { color: var(--ink); }
.ctarow.mitten { justify-content: center; }

/* --- Telefonerna --------------------------------------------------------- */

.phones { display: flex; gap: 1rem; justify-content: center; }
@media (max-width: 880px) { .phones { transform: scale(0.92); transform-origin: top center; } }
/* På smala skärmar: transform ändrar inte layoutbredden, så de två telefonerna
   (2 × 192 px + 0,6 rem) skulle annars tvinga sidan bredare än skärmen. Bredden
   låses, boxen centreras med negativ marginal och kolumnen får inte växa. */
@media (max-width: 460px) {
  .hero > div { min-width: 0; }
  .hero > div:last-child { overflow: hidden; }
  .phones {
    gap: 0.6rem; width: 393.6px; transform: scale(0.8); transform-origin: top center;
    margin-left: calc(50% - 196.8px); margin-bottom: -2.5rem;
  }
}
.phone {
  width: 192px; border-radius: 26px; box-shadow: var(--lift-lg); overflow: hidden;
  background-color: var(--surface);
  background-image:
    radial-gradient(90% 40% at 4% 104%, var(--g-peach), transparent 68%),
    radial-gradient(85% 38% at 52% 108%, var(--g-pink), transparent 68%),
    radial-gradient(90% 40% at 100% 104%, var(--g-lilac), transparent 68%);
  padding: 0.7rem 0.65rem 0.9rem;
}
.phone.tilt { transform: translateY(1.5rem); }
@media (max-width: 880px) { .phone.tilt { transform: none; } }
.ptop { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.6rem; }
.ptop b { font-family: var(--display); font-weight: 600; font-size: 0.78rem; letter-spacing: -0.01em; }
.ptop .av { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--solid); }
.ptop .cog { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-quiet); }
.pswitch { display: flex; gap: 0.15rem; background: var(--surface-quiet); padding: 0.15rem; border-radius: 999px; margin-bottom: 0.5rem; }
.pswitch span { flex: 1; text-align: center; font-family: var(--display); font-weight: 600; font-size: 0.6rem; padding: 0.25rem 0; border-radius: 999px; color: var(--muted); }
.pswitch span.on { background: var(--solid); color: var(--solid-ink); }
.pdate { font-size: 0.6rem; color: var(--muted); margin: 0 0 0.5rem 0.15rem; line-height: 1.35; }
.pdate b { color: var(--ink); }
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.ptile {
  background: var(--surface); border-radius: 12px; box-shadow: var(--lift); padding: 0.5rem 0.45rem;
  min-height: 72px; display: flex; flex-direction: column; position: relative;
}
.ptile i { color: var(--accent); display: block; margin-bottom: 0.25rem; }
.ptile em { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 0.66rem; line-height: 1.15; letter-spacing: -0.01em; }
.ptile small { font-size: 0.53rem; color: var(--muted); margin-top: auto; line-height: 1.25; }
.ptile .pd {
  position: absolute; top: 0.4rem; right: 0.4rem; width: 13px; height: 13px; border-radius: 7px;
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: 0.5rem;
  display: grid; place-items: center;
}
:root[data-theme="dark"] .ptile .pd { color: #241B24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptile .pd { color: #241B24; } }
.plabel { text-align: center; font-family: var(--mono); font-size: 0.68rem; color: var(--faint); margin-top: 0.7rem; letter-spacing: 0.04em; }

/* --- Smärtor ------------------------------------------------------------- */

.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 780px) { .pains { grid-template-columns: 1fr; } }
.pain { background: var(--surface); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: var(--lift); }
.pain .q { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.012em; margin-bottom: 0.5rem; }
.pain p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* --- Steg ---------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; counter-reset: s; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: var(--lift); position: relative; }
.step::before {
  counter-increment: s; content: counter(s);
  font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  background: var(--accent-quiet); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 0.7rem;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* --- Funktioner ---------------------------------------------------------- */

.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2.5rem; margin-top: 2rem; }
@media (max-width: 700px) { .feats { grid-template-columns: 1fr; } }
.feat { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.5rem 0; }
.feat + .feat { border-top: 1px solid var(--hairline); }
.feat svg { color: var(--good); flex: none; margin-top: 0.3rem; }
.feat b { font-family: var(--display); font-weight: 600; font-size: 0.98rem; display: block; letter-spacing: -0.01em; }
.feat span { font-size: 0.88rem; color: var(--muted); }

/* --- Röstsektionen ------------------------------------------------------- */

.rostkort {
  background: var(--solid); color: var(--solid-ink); border-radius: 24px;
  padding: 2.2rem; margin-top: 2rem; box-shadow: var(--lift-lg);
}
@media (max-width: 620px) { .rostkort { padding: 1.5rem 1.25rem; } }
.mikrad { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.mik {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.12); display: grid; place-items: center;
}
:root[data-theme="dark"] .mik { background: rgba(0,0,0,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mik { background: rgba(0,0,0,.12); } }
.mikrad span { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: .65; }
.rostcitat {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  line-height: 1.32; letter-spacing: -0.018em; margin: 0 0 1.6rem; max-width: 30ch;
}
.pilner { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: .6; margin-bottom: 0.9rem; }
.pilner::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.rostchips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.3rem; }
.rostchips span {
  background: rgba(255,255,255,.13); border-radius: 999px; padding: 0.32rem 0.8rem;
  font-family: var(--display); font-weight: 600; font-size: 0.85rem; letter-spacing: -0.005em;
}
:root[data-theme="dark"] .rostchips span { background: rgba(0,0,0,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rostchips span { background: rgba(0,0,0,.12); } }
.rostfot { font-size: 0.95rem; opacity: .75; margin: 0; max-width: 52ch; }
.rostfot + .rostfot { margin-top: 0.7rem; }
.jamfor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .jamfor { grid-template-columns: 1fr; } }
.jam { background: var(--surface); border-radius: 18px; padding: 1.2rem 1.4rem; box-shadow: var(--lift); }
.jam.gammal { background: var(--surface-quiet); box-shadow: none; border: 1px solid var(--hairline); }
.jam h3 { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; font-weight: 600; }
.jam.gammal h3 { color: var(--faint); }
.jam ol { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; color: var(--muted); }
.jam li { margin-bottom: 0.25rem; }
.jam li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--faint); }
.jam .tid { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); margin-top: 0.8rem; }

/* --- Pris ---------------------------------------------------------------- */

.pricecard {
  background: var(--surface); border-radius: 24px; padding: 2.2rem; box-shadow: var(--lift-lg);
  margin-top: 2rem; text-align: center;
}
.bigprice { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 7vw, 3.8rem); letter-spacing: -0.035em; line-height: 1; }
.bigprice sup { font-size: 0.32em; font-weight: 500; letter-spacing: 0; vertical-align: 0.9em; margin-left: 0.15em; color: var(--muted); }
.priceline { color: var(--muted); margin: 0.7rem auto 0; max-width: 42ch; }
.pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 2rem auto 0; max-width: 560px; }
@media (max-width: 620px) { .pricegrid { grid-template-columns: 1fr; } }
.pcase { background: var(--surface-quiet); border: 1px solid var(--hairline); border-radius: 14px; padding: 0.9rem 0.7rem; }
.pcase .who { font-size: 0.82rem; color: var(--muted); margin: 0; }
.pcase .amt { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0.15rem 0 0; }
.pcase .amt small { font-family: var(--body); font-size: 0.72rem; font-weight: 400; color: var(--faint); display: block; }
.pricefoot { font-size: 0.86rem; color: var(--faint); margin: 1.5rem auto 0; max-width: 62ch; }
.pricefoot + .pricefoot { margin-top: 0.7rem; }

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

.formcard { background: var(--surface); border-radius: 24px; padding: 2.2rem; box-shadow: var(--lift-lg); margin-top: 2rem; }
@media (max-width: 620px) { .formcard, .pricecard { padding: 1.5rem 1.25rem; } }
.formcard h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.formcard .formintro { color: var(--muted); font-size: 0.94rem; max-width: 52ch; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.9rem; margin-top: 1.2rem; }
@media (max-width: 620px) { .fgrid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-family: var(--display); font-weight: 600; font-size: 0.83rem; letter-spacing: -0.005em; }
.field input, .field select {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--surface-quiet); border: 1px solid var(--hairline-2); border-radius: 12px;
  padding: 0.72rem 0.85rem; width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field input::placeholder { color: var(--faint); }
/* Fällan för robotar. Aldrig synlig, aldrig i tabbordningen. */
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formcard .cta { width: 100%; justify-content: center; margin-top: 1.4rem; }
.formnote { font-size: 0.84rem; color: var(--faint); margin: 0.9rem 0 0; text-align: center; }
.formnote.fel { color: var(--accent); }
.tack { background: var(--good-quiet); border-radius: 16px; padding: 1.5rem; text-align: center; margin-top: 1.4rem; }
.tack b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; display: block; margin-bottom: 0.3rem; }
.tack p { font-size: 0.92rem; color: var(--muted); margin: 0; }
/* Utan JavaScript svarar servern med en omdirigering till #tack eller #fel,
   och :target visar rätt ruta. Med JavaScript sköter formular.js samma sak. */
.tack, .formnote.fel { display: none; }
#tack:target, #fel:target, .tack.visa, .formnote.fel.visa { display: block; }
#tack:target ~ form { display: none; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { margin-top: 2rem; }
.qa { border-top: 1px solid var(--hairline); padding: 1.1rem 0; }
.qa:last-child { border-bottom: 1px solid var(--hairline); }
.qa h3 { margin-bottom: 0.3rem; }
.qa p { font-size: 0.94rem; color: var(--muted); margin: 0; max-width: 62ch; }
.qa p + p { margin-top: 0.5rem; }

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

footer { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 0.78rem; color: var(--faint); display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; align-items: center; }
footer .juridik { display: flex; gap: 1rem; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .exmoms { margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  .cta, .pain, .step { transition: box-shadow 160ms ease, transform 160ms ease; }
  .pain:hover, .step:hover { box-shadow: var(--lift-lg); }
}

/* ===========================================================================
   LÄSVYN — villkor, integritetspolicy och biträdesavtal. Texten kommer ur
   juridik/*.md genom skript/bygg-juridik.mjs; det här är bara typografin.
   =========================================================================== */

.las { max-width: 760px; }
.las .brandbar { margin-bottom: 2.5rem; }
.dokmeny { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dokmeny a {
  font-family: var(--display); font-weight: 600; font-size: 0.86rem; text-decoration: none; color: var(--muted);
  padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--hairline-2); background: var(--surface-quiet);
}
.dokmeny a[aria-current="page"] { background: var(--solid); color: var(--solid-ink); border-color: transparent; }
.dok { background: var(--surface); border-radius: 24px; padding: 2.5rem 2.6rem; box-shadow: var(--lift-lg); overflow-wrap: break-word; }
@media (max-width: 620px) { .dok { padding: 1.6rem 1.25rem; border-radius: 18px; } }
.dok h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: 1.2rem; }
.dok h1 + h1, .dok hr + h1 { margin-top: 2.5rem; }
.dok h2 { font-size: 1.35rem; margin: 2.4rem 0 0.7rem; }
.dok h3 { font-size: 1.08rem; margin: 1.6rem 0 0.5rem; }
.dok p { font-size: 0.97rem; }
.dok hr { border: 0; border-top: 1px solid var(--hairline); margin: 2rem 0; }
.dok ul, .dok ol { padding-left: 1.3rem; margin: 0 0 1rem; font-size: 0.97rem; }
.dok li { margin-bottom: 0.35rem; }
.dok li p { margin: 0; }
.dok blockquote {
  margin: 1.2rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--accent);
  background: var(--accent-quiet); border-radius: 0 14px 14px 0; font-size: 0.95rem;
}
.dok blockquote p:last-child { margin-bottom: 0; }
.dok code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-quiet); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.05em 0.35em; }
.dok em { font-style: italic; }
.tabellram { overflow-x: auto; margin: 1rem 0 1.4rem; -webkit-overflow-scrolling: touch; }
.dok table { border-collapse: collapse; width: 100%; font-size: 0.9rem; min-width: 480px; }
.dok th, .dok td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--hairline); }
.dok th { font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--muted); border-bottom: 1px solid var(--hairline-2); }
.dok tr:last-child td { border-bottom: 0; }
/* Platshållare ur markdown-filerna — [FYLL I: ...] — lyser tills de är ifyllda. */
.fyll-i { background: var(--mark); color: var(--ink); border-radius: 4px; padding: 0.05em 0.3em; font-family: var(--mono); font-size: 0.86em; }
.dokfot { margin-top: 1.5rem; font-size: 0.86rem; color: var(--faint); }

/* --- 404 ----------------------------------------------------------------- */

.saknas { text-align: center; padding-top: 3rem; }
.saknas p { color: var(--muted); max-width: 44ch; margin-left: auto; margin-right: auto; }