/* =====================================================================
   landing.css – startsidan (skärmbild 01) och Smarta Saras byggkort
   (02–04). Mått i CSS-pixlar från plan/spec/01-04-landing-and-build.md
   (skärmbilderna är tagna i 50 % zoom: CSS = bild × 2). Värden som
   passats in mot skärmbilderna har en kommentar med målet.
   ===================================================================== */

/* ---------- Tokens (spec §4) ---------- */
:root {
  --bg: #FFFFFF;
  --surface: #F3F3F3;       /* hero, Saras bubbla, progressbanan */
  --logo-ink: #1A1A1C;
  --muted: #6E6E6E;         /* D-1: skärmbildens #737373 mörkad för WCAG AA (4,60:1 på grått) */
  --placeholder: #757575;
  --lime-strong: #84DF00;
  --green-start: #67BD2E;
  --error: #A83A2C;
  --header-gradient: linear-gradient(120deg, var(--green-start), var(--lime-strong));
  --fill-gradient: linear-gradient(90deg, var(--green-start), var(--lime));
  --glow-lime: rgba(132, 204, 22, .28);   /* inpassad mot skärmbild 01 (3 705 punkter, lime/mint/skugga isär) */
  --glow-mint: rgba(16, 185, 129, .26);
  --shadow-card: 0 34px 86px -46px rgba(0, 0, 0, .35), 0 2px 4px -1px rgba(0, 0, 0, .10);   /* profil under kortet inpassad mot 01 */
  --header-tag: rgba(255, 255, 255, .8);
  --r-btn: 12px; --r-outline: 6px; --r-bubble: 20px; --r-quote: 16px; --r-pill: 999px;
  --header-h: 60px; --gutter: 40px; --card-w: 504px; --card-pad: 34px; --glow-inset: 82px;
  --chamfer: clamp(40px, 7vw, 90px);
}
html { color-scheme: light; }
body.landing { background: var(--bg); color: var(--ink); }
.page { position: relative; overflow-x: hidden; overflow-x: clip; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

/* ---------- Sidhuvud (L-020–L-026) ---------- */
.site-header { position: relative; z-index: 2; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; height: 40px; color: var(--logo-ink); text-decoration: none; border-radius: 4px; }
.logo img { display: block; width: auto; height: 19.5px; }   /* bläck 120 × 20 px vid x 40 */
.btn-outline { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; background: var(--bg); border: 1px solid var(--ink); border-radius: var(--r-outline);
  font: 500 13.3px/1 var(--font); color: var(--ink); text-decoration: none; }   /* etikett 52 px */
.btn-outline:hover { background: var(--surface); }

/* ---------- Hero med 45° avfasning (L-027–L-041) ---------- */
.hero { position: relative; isolation: isolate; padding-bottom: 112px; }  /* 74 px ner till kortet + 38 px överlapp */
.hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--header-h)); z-index: -1; background: var(--surface);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); }
/* Avståndet ovanför rubriken är utfyllnad, inte marginal: en marginal skulle "kollapsa" genom heron och flytta ner det grå fältet. */
.hero-text { max-width: 640px; margin: 0 auto; padding: 63px 16px 0; text-align: center; }   /* H1:s versaltopp y 134 */
.hero h1 { margin: 0; font: 700 56.5px/64px var(--font); letter-spacing: -.02em; }   /* bläck 548 / 478 px, baslinjer y 176 och 240 */
.lead { margin: 22px 0 0; font: 400 19.3px/29px var(--font); color: var(--muted); }     /* bläck 586 / 596 / 458 px, baslinjer 294 / 324 / 352 */
.lead strong { font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }  /* topp y 384 */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill);
  font: 500 13.5px/1 var(--font); color: var(--ink); white-space: nowrap; }
.pill svg { display: block; width: 18px; height: 12px; border-radius: 2px; flex: none; }

/* ---------- Kortet och glöden (L-042–L-056) ---------- */
.card-section { position: relative; z-index: 1; }
.card-wrap { position: relative; width: var(--card-w); max-width: calc(100% - 32px); margin: -38px auto 0; }
.card-wrap::before { content: ""; position: absolute; inset: calc(-1 * var(--glow-inset)); z-index: -1; pointer-events: none;
  background: radial-gradient(36% 28% at 30% 23%, var(--glow-lime), transparent), radial-gradient(34% 27% at 74% 76%, var(--glow-mint), transparent); }
/* Kortet på ett eget lager (som originalet): gråskalekantutjämning på texten och mjuk höjdanimering. */
.card { position: relative; background: var(--bg); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); will-change: transform; }
.card-head { height: 50px; padding: 0 20px 0 18px; display: flex; align-items: center; gap: 10px; background: var(--header-gradient); color: #fff; }
.card-head .avatar { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--lime); object-fit: cover; background: #111; flex: none; }
.card-head b { font: 700 14.5px/1 var(--font); }                 /* 82 px */
.card-head small { margin-left: auto; font: 600 11.7px/1 var(--font); color: var(--header-tag); }   /* 102 px */
.card-body { padding: 0 var(--card-pad); }
.card-anim { overflow: hidden; transition: height .3s ease; }

/* Formuläret */
.card-title { margin: 0; padding-top: 34px; font: 700 22.8px/30px var(--font); letter-spacing: -.01em; }   /* bläck 238 px, versaltopp rel 90, baslinje rel 108 */
.card-desc { margin: 7px 0 0; font: 400 15.15px/23px var(--font); color: var(--muted); }               /* bläck 422 / 428 / 366 px, baslinjer rel 138 / 162 / 184 */
.field { position: relative; margin-top: 28px; }                                                        /* inmatningen rel 218 */
.card-input { display: block; width: 100%; height: 52px; padding: 0 17px; border: 1px solid var(--line); border-radius: var(--r-input); background: #fff;
  font: 400 16px/normal var(--font); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.card-input::placeholder { color: var(--placeholder); opacity: 1; }
.card-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(152, 254, 0, .45); }
.card-input[aria-invalid="true"] { border-color: var(--error); }
.card-input:-webkit-autofill, .card-input:-webkit-autofill:hover, .card-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px #fff inset; transition: background-color 9999s; }
.card-input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px #fff inset, 0 0 0 4px rgba(152, 254, 0, .45); }
.card-input[readonly] { color: var(--muted); }
.field-error { margin: 8px 0 0; font: 400 14px/20px var(--font); color: var(--error); }
.field-error:empty { display: none; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 48px; margin-top: 10px; padding: 0 24px; border: 0; border-radius: var(--r-btn); background: var(--lime);
  font: 700 16.1px/1 var(--font); color: var(--ink); cursor: pointer; text-decoration: none; }   /* etikett 172 px, knapp ≈220 × 48 */
.btn-primary:hover { background: #8CF000; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[aria-disabled="true"] { cursor: progress; }
.card-fine { margin: 12px 0 0; padding-bottom: 54px; font: 400 13.6px/22px var(--font); color: var(--muted); }  /* bläck 424 / 174 px, baslinjer rel 356 / 378, kortet slutar rel 438 */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Byggkortet (02–04, L-196–L-228) ---------- */
.build[hidden], .form[hidden] { display: none; }
.build { padding-bottom: 57px; }   /* kortet 610 px högt */
.big-avatar { display: block; width: 76px; height: 76px; margin: 42px auto 0; border-radius: 50%; border: 2px solid var(--lime); object-fit: cover; background: #111; }  /* rel 92 */
.bubble-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.bubble-wrap::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--surface); }  /* svansen 12 × 6, rel 176 */
.bubble { box-sizing: border-box; max-width: 100%; min-height: 46px; margin: 0; padding: 12px 18px; border-radius: var(--r-bubble); background: var(--surface);
  font: 400 15.2px/22px var(--font); color: var(--ink); text-align: center; }   /* text 334 / 282 / 256 px */
.bubble.swap { animation: pop .2s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: scale(.98); } 100% { opacity: 1; transform: scale(1); } }
.bar { position: relative; height: 8px; margin: 14px 4px 0 2px; border-radius: 999px; background: var(--surface); overflow: hidden; }  /* x 36–466, rel 242 */
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--fill-gradient); transition: width .6s ease-out; }
.bar.on i { min-width: 8px; }
.steps { margin: 36px 0 0; padding: 0; list-style: none; }   /* första ikonen rel 286, avstånd 48 */
.steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 26px; font: 400 15.8px/26px var(--font); color: var(--muted); }   /* vanlig vikt: 148 / 210 / 124 / 172 px */
.steps li + li { margin-top: 22px; }
.steps .ico { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.steps .ico svg { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -6.5px; display: none; }   /* som ✓ (U+2713), en aning vänster om mitten */
.steps .ico b { position: absolute; inset: 0; display: none; font: 700 14px/22px var(--font); color: var(--error); text-align: center; }
.steps li[data-state="done"] { color: var(--ink); }
.steps li[data-state="done"] .ico { border-color: var(--lime); background: var(--lime); }
.steps li[data-state="done"] .ico svg { display: block; }
.steps li[data-state="current"] { color: var(--ink); font-weight: 700; font-size: 15.3px; }   /* fet: 206 / 128 px */
.steps li[data-state="current"] .ico { border-color: var(--lime-strong); animation: halo 1.6s ease-out infinite; }
.steps li[data-state="error"] { color: var(--ink); }
.steps li[data-state="error"] .ico { border-color: var(--error); }
.steps li[data-state="error"] .ico b { display: block; }
/* Pulsen inpassad mot 02–04 (≈30 % / 13 % ljusgrönt en och två pixlar utanför ringen i 02): starkare och bredare än specens uppskattning. */
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(132, 223, 0, .5); } 100% { box-shadow: 0 0 0 8px rgba(132, 223, 0, 0); } }
.status { margin: 26px 0 0; font: 400 11px/16px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* rel ≈484 */
.calm { margin: 11px 0 0; font: 400 13.7px/22px var(--font); color: var(--muted); }   /* bläck 422 / 128 px, två rader */
.calm .br-desk { display: inline; }
.actions { margin-top: 22px; }
.actions[hidden] { display: none; }
.actions .card-input { margin-top: 0; }
.actions .help { margin: 18px 0 0; font: 400 13px/20px var(--font); color: var(--muted); }
.actions .help a { color: inherit; }
.open-btn[hidden] { display: none; }

/* ---------- Röster från kunder (L-057–L-063) ---------- */
.proof { padding: 0 16px; }
.eyebrow { margin: 66px 0 0; text-align: center; font: 400 12px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }  /* versaltopp 70 px under kortet */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 972px; margin: 22px auto 0; }
.quote { display: flex; flex-direction: column; margin: 0; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-quote); }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font: 400 15.2px/24px var(--font); color: var(--ink); }   /* första raden 244 px */
.quote .qm { position: relative; top: -.4em; margin-right: 5px; color: var(--lime); font-weight: 700; }
.quote figcaption { margin-top: auto; padding-top: 16px; font: 400 13px/16px var(--font); color: var(--muted); }
.quote figcaption b { font-weight: 700; }

/* ---------- Sidfot (L-064–L-067) ---------- */
/* Teckenstorleken mätt i 05 (sidfoten syns bara där): 3,5 bildpixlar per tecken = 7,0 CSS-pixlar, alltså 11,67 px Roboto Mono. */
.site-footer { margin-top: 72px; padding: 26px var(--gutter) 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font: 400 11.67px/18px var(--mono); color: var(--muted); }
.site-footer p { margin: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.site-footer .dala { display: inline-block; width: 16px; height: 14px; margin-right: 4px; vertical-align: -2px; color: #4A4A4A; }   /* dalahästen i 05: ≈ 16 × 14, vänd åt vänster (T-060) */
.site-footer .fi { white-space: nowrap; }   /* varje del hålls ihop; raden bryts bara vid avgränsarna (T-066) */

/* ---------- Mobil och surfplatta (L-294–L-307) ---------- */
@media (max-width: 1003px) {
  .quotes { grid-template-columns: 1fr; max-width: 504px; gap: 12px; }
}
@media (max-width: 767px) {
  .br-desk, .calm .br-desk { display: none; }
  /* Inga ensamma ord på sista raden (bara på smala skärmar; datorns radbrytningar följer skärmbilden). */
  .lead, .card-desc, .card-fine, .calm, .bubble, .quote p { text-wrap: pretty; }
  .lead { font-size: 16px; line-height: 1.55; }
}
@media (max-width: 640px) {
  .site-header { padding: 0 16px; }
  .hero-text { padding-top: 40px; }
  .hero h1 { font-size: clamp(30px, 9vw, 56px); line-height: 1.14; }
  .pills { gap: 8px; }
  .site-footer { flex-direction: column; padding: 24px 16px; }
}
@media (max-width: 480px) {
  .card-body { padding: 0 20px; }
  .bar { margin-left: 0; margin-right: 0; }
  .actions .btn-primary { width: 100%; }
}

/* ---------- Mindre rörelse (L-318) ---------- */
@media (prefers-reduced-motion: reduce) {
  .bar i, .card-anim { transition: none; }
  .steps li[data-state="current"] .ico, .bubble.swap { animation: none; }
}
/* Fasta lägen för jämförelsen med skärmbilderna (?fixture=…, bara lokalt) */
.frozen *, .frozen *::before, .frozen *::after { animation-play-state: paused !important; transition: none !important; }