/* Emotion Almroths – grafisk profil tillämpad på Buyer's Guide
   Palett & typografi enligt profilguide (mars 2026). TT Commons saknas i webbmiljö
   därför används Open Sans genomgående för både rubriker och brödtext. */

:root {
    --ea-red: #D50037;
    --ea-red-dark: #A8002B;
    --ea-yellow: #FCDF51;
    --ea-coral: #FF8D6B;
    --ea-coal: #1D252C;
    --ea-grey: #5B6670;
    --ea-light: #EFF0F1;
    --ea-white: #FFFFFF;
    --ea-line: #DDE1E4;
    --ea-radius: 18px;
    --ea-radius-sm: 12px;
    --ea-shadow: 0 18px 44px rgba(29, 37, 44, .10);
    --ea-shadow-sm: 0 4px 14px rgba(29, 37, 44, .07);
}

body {
    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ea-coal);
    background: var(--ea-light);
}

h1, h2, h3, h4, h5, h6, .display-4 {
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ea-coal);
}

a { color: var(--ea-red); text-decoration: none; }
a:hover { color: var(--ea-red-dark); }

.navbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ea-coal) !important; }
.navbar-brand img { height: 30px; width: auto; }
.nav-link.text-dark { color: var(--ea-coal) !important; font-weight: 600; }
.nav-link.text-dark:hover { color: var(--ea-red) !important; }
footer.footer { background: var(--ea-white); color: var(--ea-grey); }

/* ---------- Knappar ---------- */
.btn-ea, .btn-ea-outline {
    font-weight: 700;
    border-radius: 999px;
    padding: .7rem 1.8rem;
    border: 2px solid transparent;
    transition: background .15s ease, color .15s ease, transform .05s ease;
    cursor: pointer;
    font-size: 1rem;
}
.btn-ea { background: var(--ea-red); color: #fff; }
.btn-ea:hover { background: var(--ea-red-dark); color: #fff; }
.btn-ea:active { transform: translateY(1px); }
.btn-ea-outline { background: transparent; color: var(--ea-coal); border-color: var(--ea-line); }
.btn-ea-outline:hover { border-color: var(--ea-coal); color: var(--ea-coal); }
.btn-ea[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Wizard-skal ---------- */
.ea-wizard { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }

/* Focus-layout (guiden: logga topp, ingen nav, Avsluta centrerad i botten, animerad bakgrund) */
.guide-body { background: var(--ea-white); min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; }
/* Hjulspår-motiv inaktiverat för ren platt design */
.guide-body::before { display: none; }

.guide-topbar { display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 1.5rem; position: relative; z-index: 1; }
.guide-logo { display: inline-flex; text-decoration: none; }
.guide-logo__img { height: 68px; width: auto; display: block; animation: guideLogoIn .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes guideLogoIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }

.guide-main { flex: 1; min-height: auto; display: flex; flex-direction: column; position: relative; z-index: 1; }
/* width:100% hindrar flex-item från att krympa till innehållet; max-width + auto-marginaler centrerar i båda axlarna. */
.guide-main .ea-wizard { width: 100%; margin-block: auto; }

.guide-foot { display: flex; justify-content: center; padding: 1rem 1rem 1.9rem; position: relative; z-index: 1; }
.guide-exit { color: var(--ea-grey); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; transition: color .15s ease; }
.guide-exit:hover { color: var(--ea-red); }
@media (prefers-reduced-motion: reduce) { .guide-body::before, .guide-logo__img { animation: none; } }

.ea-hero { text-align: center; padding: clamp(1.5rem, 6vh, 4rem) 1rem 2.5rem; }
.ea-hero .hero__kicker { margin-bottom: 1rem; }
.ea-hero .hero__kicker::before { display: none; }
.ea-hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1rem; }
.ea-hero .ea-lead { margin-left: auto; margin-right: auto; }
.ea-hero .btn-ea--lg { margin-top: .25rem; }
.ea-hero-meta { color: var(--ea-grey); font-size: .85rem; margin-top: 1.1rem; letter-spacing: .02em; }
.ea-lead { color: var(--ea-grey); font-size: 1.1rem; max-width: 30rem; margin: 0 auto 1.75rem; }

/* ---------- Progress ---------- */
.ea-progress { margin: 0 .25rem 1.25rem; }
.ea-progress-track { height: 8px; background: #E2E5E8; border-radius: 999px; overflow: hidden; }
.ea-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--ea-coral), var(--ea-red)); transition: width .35s ease; }
.ea-progress-label { margin-top: .5rem; font-size: .85rem; font-weight: 700; color: var(--ea-grey); letter-spacing: .02em; }

/* ---------- Kort & steg ---------- */
.ea-card { background: var(--ea-white); border-radius: var(--ea-radius); box-shadow: var(--ea-shadow); padding: 2rem 2rem 2.25rem; }
.ea-wizard .ea-card { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 2.5rem 0 !important; }

/* Mjuk övergång när ett steg/resultat renderas */
.ea-anim { animation: eaStepIn .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes eaStepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ea-anim { animation: none; } }
.ea-step-desc { color: var(--ea-grey, #5B6670); font-size: .95rem; line-height: 1.5; margin: .45rem 0 0; }
.ea-step-kicker { display: inline-block; font-size: .78rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ea-red); margin-bottom: .35rem; }
.ea-step-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.ea-step-head h2 { font-size: 1.5rem; margin-bottom: 0; }
.ea-step-icon { width: 54px; height: 54px; flex: 0 0 auto; margin-top: .15rem; }
.ea-step-headtext { min-width: 0; }

/* ---------- Frågor ---------- */
.ea-q { margin-bottom: 1.5rem; }
.ea-q > label { display: block; font-weight: 700; margin-bottom: .5rem; font-size: 1.02rem; }
.ea-req { color: var(--ea-red); margin-left: .15rem; }
.ea-help { color: var(--ea-grey); font-size: .88rem; margin: -.25rem 0 .6rem; }

.ea-input, .ea-select {
    width: 100%; border: 2px solid var(--ea-line); border-radius: var(--ea-radius-sm);
    padding: .8rem 1rem; font-size: 1rem; font-family: inherit; color: var(--ea-coal); background: #fff;
}
.ea-input:focus, .ea-select:focus {
    border-color: var(--ea-red); outline: none; box-shadow: 0 0 0 4px rgba(213, 0, 55, .12);
}

/* Boolean – segmenterad Ja/Nej */
.ea-toggle { display: inline-flex; border: 2px solid var(--ea-line); border-radius: 999px; overflow: hidden; }
.ea-toggle button { padding: .6rem 1.6rem; border: none; background: #fff; font-weight: 700; color: var(--ea-grey); cursor: pointer; font-family: inherit; }
.ea-toggle button.active { background: var(--ea-red); color: #fff; }

/* MultiChoice – kryssrutor */
.ea-multi { display: flex; flex-direction: column; gap: .55rem; }
.ea-check { display: flex; align-items: center; gap: .65rem; font-weight: 700; color: var(--ea-coal); cursor: pointer; }
.ea-check input { width: 18px; height: 18px; accent-color: var(--ea-red); flex: 0 0 auto; }

/* Ogiltigt obligatoriskt fält */
.ea-invalid { border-color: var(--ea-red) !important; box-shadow: 0 0 0 4px rgba(213, 0, 55, .12); }

/* ---------- Radioval (val per skärm) + radio-med-logga ---------- */
.ea-radiogroup { display: grid; gap: .7rem; }
.ea-radiogroup--logo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ea-radio { position: relative; display: flex; align-items: center; gap: .85rem; cursor: pointer;
    border: 2px solid var(--ea-line); border-radius: var(--ea-radius-sm); padding: .9rem 1rem; background: #fff;
    font-weight: 700; color: var(--ea-coal); transition: border-color .15s ease, background-color .15s ease, transform .05s ease; }
.ea-radio:hover { border-color: var(--ea-coal); }
.ea-radio:active { transform: translateY(1px); }
.ea-radio input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.ea-radio.ea-radio--sel, .ea-radio:has(input:checked) { border-color: var(--ea-red); background-color: rgba(213, 0, 55, 0.02); box-shadow: none; }
.ea-radio.ea-radio--sel::after, .ea-radio:has(input:checked)::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: .55rem; right: .7rem;
    color: var(--ea-red); font-size: .8rem; }
.ea-radio-label { font-size: .98rem; }
.ea-radio-logo { height: 44px; width: auto; max-width: 100%; object-fit: contain; flex: 0 0 auto; }
.ea-radio-logo--ph { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 .7rem;
    background: var(--ea-light); border-radius: 8px; font-size: .82rem; font-weight: 800; color: var(--ea-grey); }
.ea-radiogroup--logo .ea-radio { flex-direction: row; align-items: center; justify-content: center; padding: 1.5rem; height: 96px; min-height: 96px; }
.ea-radiogroup--logo .ea-radio:has(.ea-radio-label) { flex-direction: column; justify-content: center; gap: 0.35rem; }
.ea-radiogroup--logo .ea-radio:has(img.ea-radio-logo) .ea-radio-label { display: none !important; }

/* ---------- Slider (0–10, heltalsvisning) ---------- */
.ea-range-wrap { display: flex; align-items: center; gap: 1rem; }
.ea-range { flex: 1; min-width: 0; accent-color: var(--ea-red); height: 6px; cursor: pointer; }
.ea-range-out { min-width: 2.6rem; text-align: center; font-weight: 800; font-size: 1.2rem; color: var(--ea-red);
    background: var(--ea-light); border-radius: 10px; padding: .25rem .55rem; }

/* ---------- Interstitiella info-/laddningsskärmar ---------- */
.ea-interstitial { text-align: center; padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; }
.ea-inter-title { font-size: clamp(1.35rem, 4vw, 1.6rem); font-weight: 800; color: var(--ea-coal); margin: 0 0 .6rem; max-width: 34rem; }
.ea-inter-msg { color: var(--ea-grey); font-size: 1.05rem; line-height: 1.55; max-width: 34rem; margin: 0 0 1.25rem; }
/* En eller flera bilder/loggor på interstitiella steg (centrerad rad som radbryter). */
.ea-inter-media { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; max-width: 34rem; margin: 0 auto 1.25rem; }
.ea-inter-media img { width: auto; max-height: 120px; max-width: 100%; border-radius: var(--ea-radius-sm); display: block; }
/* En eller flera bilder/loggor på vanligt frågesteg (ovanför/under texten, satt i admin). */
.ea-step-media { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1.25rem; }
.ea-step-media img { width: auto; max-height: 56px; max-width: 160px; border-radius: var(--ea-radius-sm); display: block; }
.ea-inter-skip { margin-top: .5rem; background: none; border: 2px solid var(--ea-line); border-radius: 999px;
    padding: .55rem 1.4rem; font-weight: 700; color: var(--ea-grey); cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: .5rem; transition: border-color .15s ease, color .15s ease; }
.ea-inter-skip:hover { border-color: var(--ea-red); color: var(--ea-red); }
@property --ea-inter-p { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
.ea-inter-ring { width: 72px; height: 72px; border-radius: 50%; margin: 0 0 1.5rem;
    background: conic-gradient(var(--ea-red) var(--ea-inter-p, 0%), var(--ea-line) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
    animation: eaInterFill var(--ea-inter-ms, 3000ms) linear forwards; }
@keyframes eaInterFill { to { --ea-inter-p: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .ea-inter-ring { animation: none; background: conic-gradient(var(--ea-red) 100%, var(--ea-line) 0); }
}

/* ---------- Navigering ---------- */
.ea-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* Spara & fortsätt senare – diskret textknapp */
.ea-savelater { background: none; border: none; color: var(--ea-grey); font-weight: 700; cursor: pointer;
    padding: .6rem 0 0; margin-top: .25rem; text-decoration: underline; font-family: inherit; font-size: .9rem; }
.ea-savelater:hover { color: var(--ea-red); }

/* ---------- Resultat ---------- */
.ea-result-head { text-align: center; margin-bottom: 1.5rem; }
.ea-price-card { background: var(--ea-coal); color: #fff; border-radius: var(--ea-radius); padding: 2rem; text-align: center; box-shadow: none; }
.ea-price-card .ea-amount { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; line-height: 1; color: var(--ea-yellow); }
.ea-price-card .ea-amount small { font-size: 1rem; font-weight: 700; color: #fff; opacity: .85; }
.ea-price-card .ea-annual { color: #fff; opacity: .8; margin-top: .4rem; }
.ea-price-lines { list-style: none; margin: 1.5rem 0 0; padding: 0; text-align: left; max-width: 28rem; margin-inline: auto; }
.ea-price-lines li { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.ea-price-lines li span:last-child { font-weight: 700; }

.ea-quote-card { background: var(--ea-white); border: 2px dashed var(--ea-coral); border-radius: var(--ea-radius); padding: 2.25rem; text-align: center; box-shadow: none; }
.ea-quote-card h3 { color: var(--ea-red); }

.ea-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.25rem 0; }
.ea-chip { flex: 1 1 12rem; background: #fff; border-radius: var(--ea-radius-sm); padding: 1rem 1.25rem; border: 1px solid var(--ea-line); box-shadow: none; }
.ea-chip .ea-chip-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ea-grey); font-weight: 700; }
.ea-chip .ea-chip-value { font-weight: 800; font-size: 1.05rem; margin-top: .15rem; }

.ea-recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.ea-rec { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: var(--ea-radius); padding: 1.25rem 1.35rem; border: 1px solid var(--ea-line); box-shadow: none; }
/* Ikon: alltid i cirkel, alltid två kontrasterande färger (profilregel) */
.ea-icon { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.ea-icon--brand img { width: 100%; height: 100%; display: block; }
.ea-rec-body h4 { font-size: 1.05rem; margin: 0 0 .2rem; }
.ea-rec-body p { margin: 0; color: var(--ea-grey); font-size: .92rem; }

.ea-cta { text-align: center; margin-top: 2rem; }
.ea-alert { background: #FDECEF; border: 1px solid var(--ea-red); color: var(--ea-red-dark); border-radius: var(--ea-radius-sm); padding: 1rem 1.25rem; margin-top: 1rem; font-weight: 600; }

/* ---------- Förbättrad förslagssida (toggle, spec, doughnut, badges, nedladdning) ---------- */
.ea-price-toggle { display: inline-flex; gap: .25rem; background: rgba(255,255,255,.08); border-radius: 999px; padding: .25rem; margin-bottom: 1.1rem; }
.ea-price-toggle button { border: none; background: none; color: rgba(255,255,255,.82); font-weight: 700; font-family: inherit; padding: .45rem 1.05rem; border-radius: 999px; cursor: pointer; font-size: .88rem; transition: background .15s ease, color .15s ease; }
.ea-price-toggle button.active { background: var(--ea-yellow); color: var(--ea-coal); }

.ea-result-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; align-items: center; margin-top: 1.25rem; }
@media (max-width: 640px) { .ea-result-grid { grid-template-columns: 1fr; } }
.ea-spec h3, .ea-recs-head { font-size: 1.15rem; margin: 0 0 .75rem; }
.ea-recs-head { margin-top: 1.75rem; }
.ea-spec-table { width: 100%; border-collapse: collapse; }
.ea-spec-table td { padding: .6rem 0; border-bottom: 1px solid var(--ea-line); font-size: .95rem; color: var(--ea-coal); }
.ea-spec-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.ea-spec-table tfoot td { border-bottom: none; border-top: 2px solid var(--ea-coal); font-weight: 800; }
.ea-spec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .55rem; vertical-align: middle; }
.ea-chart-wrap { position: relative; height: 220px; max-width: 280px; width: 100%; margin: 0 auto; }
.ea-chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ea-chart-center strong { font-size: 1.3rem; font-weight: 800; color: var(--ea-coal); line-height: 1; }
.ea-chart-center span { font-size: .8rem; color: var(--ea-grey); margin-top: .15rem; }

/* Kostnadsfördelning: intro + de fem kostnadsdrivarna (namn, beskrivning, belopp per order). */
.ea-cost-intro { color: var(--ea-grey); font-size: .92rem; line-height: 1.5; margin: 0 0 1.25rem; }
.ea-cost-list { list-style: none; padding: 0; margin: 0; }
.ea-cost-item { padding: .85rem 0; border-bottom: 1px solid var(--ea-line); }
.ea-cost-item:last-child { border-bottom: none; padding-bottom: 0; }
.ea-cost-head { display: flex; align-items: center; gap: .55rem; }
.ea-cost-name { font-weight: 800; color: var(--ea-coal); }
.ea-cost-amt { margin-left: auto; font-weight: 800; color: var(--ea-coal); white-space: nowrap; }
.ea-cost-desc { color: var(--ea-grey); font-size: .9rem; line-height: 1.45; margin: .35rem 0 0 1.1rem; }
/* Lagringsrater (Hyllmeter/Pallplats) som detaljrader under Hyra. */
.ea-cost-sub { list-style: none; padding: .55rem .75rem; margin: .5rem 0 0 1.1rem; display: flex; flex-direction: column; gap: .3rem;
    font-size: .85rem; color: var(--ea-grey); background: var(--ea-light); border-radius: var(--ea-radius-sm); }
.ea-cost-sub li { display: flex; justify-content: space-between; gap: 1rem; }
.ea-cost-sub strong { color: var(--ea-coal); font-weight: 700; }
/* Standardpriser, hopslagen med kostnadsfördelningen. */
.ea-cost-standard { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--ea-coal); }
.ea-cost-standard h4 { font-size: .95rem; font-weight: 800; margin: 0 0 .6rem; }
.ea-cost-standard .ea-muted { font-weight: 600; color: var(--ea-grey); font-size: .82rem; }
.ea-cost-standard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.ea-cost-standard li { display: flex; justify-content: space-between; gap: 1rem; }

.ea-trust-badges { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0; }
.ea-trust-badges .ea-badge { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 6.5rem; padding: 0; background: transparent; border: none; box-shadow: none; }
.ea-trust-badges .ea-badge i, .ea-trust-badges .ea-badge svg { font-size: 2rem; width: 36px; height: 36px; color: var(--ea-red); }
.ea-trust-badges .ea-badge span { font-size: .76rem; font-weight: 700; color: var(--ea-grey); text-align: center; letter-spacing: .02em; margin-top: 0.2rem; }

.ea-result-insights { display: flex; flex-direction: column; gap: .6rem; margin: 1.25rem 0; }

.ea-dl-form { background: #fff; border: 2px solid var(--ea-red) !important; border-top-width: 6px !important; border-radius: 12px; padding: 2rem; margin: 0; box-shadow: none; }
.ea-dl-form h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.ea-dl-lead { color: var(--ea-grey); font-size: .92rem; margin: 0 0 1rem; }
.ea-dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 520px) { .ea-dl-grid { grid-template-columns: 1fr; } }
.ea-dl-form .btn-ea { display: inline-flex; align-items: center; gap: .5rem; }
.ea-dl-done { margin-top: 1rem; color: #1b5e20; background: #EAF7EE; border-radius: var(--ea-radius-sm); padding: .8rem 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }

.ea-impl { display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; color: var(--ea-grey); font-weight: 700; font-size: .92rem; margin: .9rem 0 0; }
.ea-impl i { color: var(--ea-red); }
.ea-result-foot { text-align: center; color: var(--ea-grey); font-size: .92rem; margin: 1.75rem 0 0; }
.ea-result-foot a { font-weight: 700; }

/* ---------- Hem-hero (committed, asymmetrisk, hjulspår-motiv) ---------- */
.hero {
    max-width: 1160px; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) 1.25rem clamp(2.5rem, 5vw, 5rem);
    display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(1.75rem, 4vw, 4rem); align-items: center;
}
.hero__kicker {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .78rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ea-red); margin-bottom: 1.1rem;
}
.hero__kicker::before { content: ""; width: 26px; height: 2px; background: var(--ea-red); }
.hero__title { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.0; letter-spacing: -.025em; margin: 0 0 1.3rem; }
.hero__accent { color: var(--ea-red); }
.hero__lead { color: var(--ea-grey); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 34rem; margin: 0 0 2rem; line-height: 1.55; }
.hero__actions { margin-bottom: 2.4rem; }
.btn-ea--lg { font-size: 1.05rem; padding: .95rem 2.1rem; display: inline-flex; align-items: center; gap: .6rem; }
.btn-ea--lg i { transition: transform .25s var(--ea-ease, cubic-bezier(.22,1,.36,1)); }
.btn-ea--lg:hover i { transform: translateX(4px); }
.hero__trust { list-style: none; display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); padding: 1.5rem 0 0; margin: 0; border-top: 1px solid var(--ea-line); }
.hero__trust li { display: flex; flex-direction: column; }
.hero__trust b { font-size: 1.6rem; font-weight: 800; color: var(--ea-coal); line-height: 1; }
.hero__trust span { font-size: .8rem; color: var(--ea-grey); margin-top: .3rem; text-transform: uppercase; letter-spacing: .07em; }

/* Coal-panel med hjulspår-motiv + flytande input-chips */
.hero__panel {
    position: relative; aspect-ratio: 1 / 1; border-radius: 30px; background:
        radial-gradient(120% 120% at 85% 12%, #2a3640 0%, var(--ea-coal) 55%);
    overflow: hidden; box-shadow: var(--ea-shadow);
}
.hero__panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__track { fill: none; stroke-linecap: round; }
.hero__track--draw { stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; animation: heroDraw 1.6s var(--ea-ease, cubic-bezier(.22,1,.36,1)) .25s forwards; }
@keyframes heroDraw { to { stroke-dashoffset: 0; } }
.hero__chip {
    position: absolute; display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.95);
    color: var(--ea-coal); font-weight: 700; font-size: .82rem; padding: .5rem .85rem; border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0,0,0,.22); animation: heroFloat 5s ease-in-out infinite;
}
.hero__chip i { color: var(--ea-red); }
.hero__chip--a { top: 16%; left: 8%; animation-delay: 0s; }
.hero__chip--b { top: 44%; right: 7%; animation-delay: .8s; }
.hero__chip--c { bottom: 13%; left: 14%; animation-delay: 1.6s; }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Staggered inladdning av hero-innehållet */
.hero__content > * { animation: heroUp .7s cubic-bezier(.22,1,.36,1) both; }
.hero__content > .hero__kicker { animation-delay: .04s; }
.hero__content > .hero__title { animation-delay: .12s; }
.hero__content > .hero__lead { animation-delay: .2s; }
.hero__content > .hero__actions { animation-delay: .28s; }
.hero__content > .hero__trust { animation-delay: .36s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; }
    .hero__panel { aspect-ratio: 16 / 10; order: -1; }
    .hero__trust { flex-wrap: wrap; gap: 1.25rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__content > *, .hero__chip, .hero__track--draw { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 576px) {
    .ea-card { padding: 1.5rem 1.25rem; }
    .ea-nav { flex-direction: row; }
    .ea-nav .btn-ea, .ea-nav .btn-ea-outline { flex: 1; padding-inline: 1rem; }
    .auth-card { padding: 1.75rem 1.35rem; }

    /* Guide på telefon: smalare sidopadding och luftigare, men inte trång, resultatsida. */
    .ea-wizard { padding: 1rem 1rem 3rem; }
    .ea-step-head { gap: .75rem; margin-bottom: 1.15rem; }
    .ea-step-head h2 { font-size: 1.3rem; }
    .ea-price-card { padding: 1.5rem 1.25rem; }
    .ea-quote-card { padding: 1.75rem 1.25rem; }
    .ea-dl-form { padding: 1.35rem 1.15rem !important; }
    .ea-spec { padding: 1.25rem !important; }
    .ea-rec { padding: 1rem 1.1rem; }
    /* Resultatsidans Bootstrap-rad staplar i en kolumn på telefon — nolla horisontell gutter
       (negativa marginaler) så inget skapar sidoscroll; vertikalt mellanrum behålls av g-5. */
    #ea-result .row { --bs-gutter-x: 0; }
    /* Pris-toggle: full bredd och jämnt fördelad i stället för att spreta eller flöda över. */
    .ea-price-toggle { display: flex; width: 100%; }
    .ea-price-toggle button { flex: 1; padding: .6rem .35rem; font-size: .82rem; }
}

/* Pekskärm: lyft de minsta träffytorna till WCAG-nivå (≥24px) utan att öka desktop-densiteten. */
@media (pointer: coarse) {
    .ea-info-btn { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
    .ea-price-toggle button { min-height: 40px; }
    .ea-savelater { padding-block: .5rem; }
}

/* ---------- Sorterbara tabellhuvuden (säljdashboard) ---------- */
.ea-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ea-sortable::after { content: "\2195"; opacity: .3; margin-left: .35rem; font-size: .8em; }
.ea-sortable[data-dir="asc"]::after { content: "\2191"; opacity: 1; }
.ea-sortable[data-dir="desc"]::after { content: "\2193"; opacity: 1; }
.ea-table-empty { padding: 1rem 1.25rem; color: var(--ea-grey); margin: 0; }

/* ---------- On-brand badges för grade/prioritet ---------- */
.ea-badge { display: inline-flex; align-items: center; font-weight: 800; font-size: .72rem;
    padding: .22rem .55rem; border-radius: 7px; line-height: 1; letter-spacing: .02em; }
.ea-badge--ok { background: var(--state-ok-bg, rgba(45,122,79,.12)); color: var(--state-ok, #2d7a4f); }
.ea-badge--coral { background: rgba(255,141,107,.18); color: #b5471f; }
.ea-badge--warn { background: var(--state-warn-bg, rgba(252,223,81,.25)); color: var(--state-warn, #b08500); }
.ea-badge--muted { background: var(--state-info-bg, rgba(91,102,112,.10)); color: var(--state-info, #5B6670); }
.ea-badge--red { background: rgba(213,0,55,.10); color: var(--ea-red); }
.ea-badge--dash { color: var(--ea-grey); }

/* ════════ Säljdashboard-omdesign (toolbar, status-flikar, KPI-accent, num, lead-rail, audit-timeline) ════════ */
.page-header { margin-bottom: var(--space-3); }

.page-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); }
.page-toolbar .ea-eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
/* Touch-vänliga ikonknappar på pekskärm (≥40px träffyta) utan att öka desktop-densiteten. */
@media (pointer: coarse) { .btn-icon { min-width: 40px; min-height: 40px; } }

.ea-num { text-align: right; font-variant-numeric: tabular-nums; }
th[data-num] { text-align: right; }
.ea-muted-cell { color: var(--muted); }

/* Emfas-KPI via bakgrunds-tint (ingen sido-stripe) */
.metric-card--accent { background: var(--state-late-bg); border-top-color: var(--accent); }
.metric-card--accent .metric-value { color: var(--accent); }
.metric-card[data-kpi-filter] { cursor: pointer; transition: border-color .15s ease; }
.metric-card[data-kpi-filter]:hover { border-color: var(--muted); }

/* Segmenterad status-flikrad (egna, robusta knappar) */
.status-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.status-tab { font-size: var(--fs-sm); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); background: var(--surface);
    color: var(--dark); border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.status-tab:hover { border-color: var(--muted); }
.status-tab.is-active { background: var(--dark); color: #fff; border-color: var(--dark); }
.status-tab .tab-count { font-family: var(--font-mono); color: var(--muted); }
.status-tab.is-active .tab-count { color: rgba(255,255,255,.7); }
.status-tab.tab-hot .tab-count { color: var(--state-late); }
.status-tab.tab-hot.is-active .tab-count { color: #fff; }

/* Lead-detalj: två-kolumns beslutsyta + sticky rail */
.lead-grid { display: grid; grid-template-columns: 340px 1fr; gap: 1.25rem; align-items: start; }
.lead-rail { position: sticky; top: var(--space-4); }
.lead-score-num { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 800; color: var(--dark); line-height: 1; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: 1fr; } .lead-rail { position: static; } }
.lead-main { min-width: 0; }
/* Företagsidentitet — kompakt stat-rad högst upp på lead-detaljen */
.lead-ident { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; margin-bottom: var(--space-4); }
.lead-ident__item { flex: 1 1 130px; min-width: 0; padding: .8rem 1.15rem; border-right: 1px solid var(--border); }
.lead-ident__item:last-child { border-right: none; }
.lead-ident__k { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: .25rem; }
.lead-ident__v { font-size: .95rem; font-weight: 700; color: var(--dark); }
/* Tätt fakta-rutnät i flikpanelerna (ersätter luftiga inline-grids) */
.lead-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.75rem; padding: 1.1rem 1.25rem; }
.lead-facts > div { min-width: 0; }
.lead-facts small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: .15rem; }
/* Ekonomi-KPI:er (senaste år) ovanför flerårstabellen */
.lead-econ-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
.lead-econ-num { display: block; font-family: var(--font-mono, 'DM Mono', monospace); font-size: 1.3rem; font-weight: 500; color: var(--dark); margin-top: .2rem; }
@media (max-width: 600px) { .lead-facts { grid-template-columns: 1fr; } }

/* ---------- Info-kort på frågor (guide: "?"-popup med text/video) ---------- */
.ea-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
    border-radius: 50%; border: none; background: var(--accent, #D50037); color: #fff; font-weight: 800; font-size: .72rem;
    cursor: pointer; line-height: 1; vertical-align: middle; padding: 0; }
.ea-info-btn:hover { background: #b50030; }
.ea-info-pop { position: fixed; inset: 0; background: rgba(29,37,44,.55); display: flex; align-items: center; justify-content: center;
    z-index: 1080; padding: 1.25rem; animation: eaFade .15s ease; }
.ea-info-card { background: var(--surface, #fff); border-radius: 16px; max-width: 540px; width: 100%; padding: 1.5rem 1.6rem;
    position: relative; box-shadow: 0 18px 48px rgba(29,37,44,.28); animation: eaModalIn .25s cubic-bezier(.22,1,.36,1); max-height: 86vh; overflow: auto; }
.ea-info-card h3 { margin: 0 1.6rem .6rem 0; font-size: 1.15rem; color: var(--dark, #1D252C); }
.ea-info-card p { color: var(--muted, #5B6670); line-height: 1.6; margin: 0 0 1rem; }
.ea-info-close { position: absolute; top: .7rem; right: .9rem; background: none; border: none; font-size: 1.5rem; line-height: 1;
    color: var(--muted, #5B6670); cursor: pointer; }
.ea-info-close:hover { color: var(--accent, #D50037); }
.ea-info-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.ea-info-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ea-info-img { width: 100%; border-radius: 10px; display: block; }
.ea-info-link { color: var(--accent, #D50037); font-weight: 700; text-decoration: none; }

/* ---------- Insiktsladdning (regelstyrd, avslöjas före resultatet) ---------- */
.ea-loading { text-align: center; padding: 3rem 1rem 2rem; }
.ea-loading-spin { width: 54px; height: 54px; margin: 0 auto 1.25rem; border-radius: 50%;
    border: 4px solid var(--border, #e3e5e7); border-top-color: var(--accent, #D50037); animation: eaSpin 1s linear infinite; }
@keyframes eaSpin { to { transform: rotate(360deg); } }
.ea-loading-title { font-size: 1.4rem; font-weight: 800; color: var(--dark, #1D252C); margin: 0 0 1.5rem; }
.ea-loading-insights { list-style: none; padding: 0; margin: 0 auto; max-width: 30rem; display: flex; flex-direction: column; gap: .7rem; text-align: left; }
.ea-loading-insight { display: flex; gap: .65rem; align-items: flex-start; background: var(--state-ok-bg, rgba(45,122,79,.10));
    border-radius: 12px; padding: .75rem .9rem; font-size: .95rem; color: var(--dark, #1D252C); line-height: 1.45; }
.ea-loading-insight > i { color: var(--state-ok, #2d7a4f); margin-top: .15em; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .ea-loading-spin { animation: none; } }

/* Quiet audit-timeline */
.audit-timeline { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.audit-timeline__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.audit-timeline__time { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--muted); white-space: nowrap; min-width: 9.5rem; }
.audit-timeline__detail { max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* ---------- Admin-hub (sektions-paneler i stället för preview-tabeller) ---------- */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.admin-tile { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.35rem 1.2rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; color: var(--dark);
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.admin-tile:hover { border-color: var(--accent); box-shadow: var(--elev-2); color: var(--dark); transform: translateY(-1px); }
.admin-tile:active { transform: translateY(0); }
.admin-tile__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--state-late-bg); color: var(--accent); font-size: 1.15rem; }
.admin-tile__name { font-weight: 800; font-size: 1.06rem; display: flex; align-items: center; gap: .5rem; }
.admin-tile__desc { color: var(--muted); font-size: .88rem; line-height: 1.45; flex: 1; }
.admin-tile__cta { color: var(--accent); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; }
.admin-tile__cta i { transition: transform .2s ease; }
.admin-tile:hover .admin-tile__cta i { transform: translateX(3px); }

/* ---------- Lättviktig modal (admin quick-add) ---------- */
.ea-modal-backdrop { position: fixed; inset: 0; background: rgba(29,37,44,.55); display: none;
    align-items: flex-start; justify-content: center; z-index: 1060; padding: 8vh 1rem; }
.ea-modal-backdrop.open { display: flex; animation: eaFade .15s ease; }
@keyframes eaFade { from { opacity: 0; } to { opacity: 1; } }
.ea-modal { background: var(--surface, #fff); border-radius: 16px; width: 100%; max-width: 560px;
    box-shadow: var(--elev-3, 0 12px 32px rgba(29,37,44,.18)); max-height: 84vh; overflow: auto; animation: eaModalIn .25s cubic-bezier(.22,1,.36,1); }
@keyframes eaModalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ea-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border); }
.ea-modal__head h3 { margin: 0; }
.ea-modal__close { background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .25rem; }
.ea-modal__close:hover { color: var(--accent); }
.ea-modal__body { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
.ea-modal__body label { font-weight: 600; font-size: .85rem; display: block; margin-bottom: .3rem; color: var(--dark); }
.ea-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 1rem 1.35rem; border-top: 1px solid var(--border); }

/* ---------- Innehållsflikar (underline-stil) ---------- */
.ea-tabs { display: flex; gap: var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); }
.ea-tab { font-size: .95rem; font-weight: 700; padding: .55rem .2rem; border: none; background: none; color: var(--muted);
    cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.ea-tab:hover { color: var(--dark); }
.ea-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.ea-tab .badge-count { font-size: .7rem; }
.ea-tabpanel[hidden] { display: none; }

/* ---------- Notisruta (info/varning) — ersätter förbjuden side-stripe ---------- */
.ea-note { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem 1rem;
    border-radius: 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--dark);
    background: var(--state-info-bg, rgba(91,102,112,.10)); }
.ea-note > i { flex-shrink: 0; margin-top: .15em; color: var(--state-info, #5B6670); }
.ea-note code { background: rgba(29,37,44,.06); padding: .05rem .3rem; border-radius: 4px; }
.ea-note--warn { background: var(--state-warn-bg, rgba(252,223,81,.25)); }
.ea-note--warn > i { color: var(--state-warn, #b08500); }

/* ---------- Auth (inloggning som fokuserad, brandad tröskel) ---------- */
.auth-body { margin: 0; min-height: 100vh; font-family: var(--font-body, 'Open Sans', sans-serif);
    background: var(--dark, #1D252C); color: var(--dark); position: relative; overflow-x: hidden; }
/* hjulspår-eko: koncentriska brand-bågar bakom kortet (whisper, ej dekor-tung).
   position: fixed → dekoren driver aldrig dokumentets scrollhöjd, så långt innehåll/felmeddelanden
   kan alltid scrollas fram (toppen blir aldrig oåtkomlig på korta viewports). */
.auth-body::before { content: ""; position: fixed; right: -22vw; top: 50%; width: 78vw; height: 78vw;
    transform: translateY(-50%); pointer-events: none; opacity: .9;
    background:
        radial-gradient(circle, transparent 59.5%, rgba(213,0,55,.12) 60%, transparent 60.6%),
        radial-gradient(circle, transparent 67.5%, rgba(255,141,107,.10) 68%, transparent 68.6%),
        radial-gradient(circle, transparent 75.5%, rgba(252,223,81,.08) 76%, transparent 76.6%); }
.auth-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 6vh 1.25rem; gap: 1.1rem; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface, #fff); border-radius: 20px;
    padding: 2.5rem 2.25rem; border-top: 3px solid var(--accent, #D50037);
    box-shadow: 0 24px 64px rgba(0,0,0,.40); animation: authIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes authIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }
.auth-brand { display: inline-block; font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em;
    color: var(--dark, #1D252C); text-decoration: none; margin-bottom: 1.6rem; }
.auth-brand span { color: var(--accent, #D50037); }
.auth-card h1 { font-size: 1.55rem; font-weight: 800; margin: 0 0 .35rem; color: var(--dark, #1D252C); }
.auth-lead { color: var(--muted, #5B6670); font-size: .94rem; line-height: 1.5; margin: 0 0 1.7rem; }
.auth-foot { color: rgba(255,255,255,.6); font-size: .8rem; margin: 0; text-align: center; }
.auth-foot a { color: rgba(255,255,255,.75); text-decoration: none; }
.auth-foot a:hover { color: #fff; }
.auth-field { margin-bottom: 1.05rem; }
.auth-field label { display: block; font-weight: 600; font-size: .85rem; color: var(--dark, #1D252C); margin-bottom: .4rem; }
.auth-field .form-control { border-radius: 10px; padding: .7rem .85rem; border: 1px solid var(--border, #d7dadd); }
.auth-field .form-control:focus { border-color: var(--accent, #D50037); box-shadow: 0 0 0 3px rgba(213,0,55,.12); }
.auth-field-err { color: var(--accent, #D50037); font-size: .8rem; display: block; margin-top: .3rem; }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 1.25rem 0 1.5rem; }
.auth-remember { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--dark, #1D252C); cursor: pointer; }
.auth-remember input { accent-color: var(--accent, #D50037); width: 1.05rem; height: 1.05rem; }
/* Egen röd knapp så auth-ytan inte beror på btn-primary-overriden (som bara laddas av globala _Layout). */
.auth-submit { width: 100%; padding: .8rem 1.1rem; border-radius: 10px; font-weight: 700; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background-color: var(--accent, #D50037); color: #fff; border: none; box-shadow: none; transition: background-color .15s ease, box-shadow .15s ease; }
.auth-submit:hover, .auth-submit:focus-visible { background-color: #b50030; color: #fff; box-shadow: 0 6px 18px rgba(213,0,55,.28); }
.auth-error { background: var(--state-late-bg, rgba(213,0,55,.08)); color: var(--accent, #D50037);
    border-radius: 10px; padding: .7rem .9rem; font-size: .88rem; margin-bottom: 1.3rem;
    display: flex; gap: .55rem; align-items: flex-start; line-height: 1.45; }
.auth-error::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex-shrink: 0; margin-top: .05em; }
.auth-error.validation-summary-valid { display: none; }
.auth-error ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Tom-/feltillstånd (Error 500, 404, empty states) ---------- */
.ea-state { max-width: 30rem; margin: 9vh auto; text-align: center; padding: 0 1.25rem; }
.ea-state__icon { width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-size: 2rem; margin-bottom: 1.35rem; }
.ea-state__icon--err { background: var(--state-late-bg, rgba(213,0,55,.10)); color: var(--accent, #D50037); }
.ea-state__code { font-family: var(--font-mono, 'DM Mono', monospace); font-size: 3.75rem; font-weight: 500;
    line-height: 1; letter-spacing: -.03em; color: var(--dark, #1D252C); margin-bottom: .6rem; }
.ea-state h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 .55rem; color: var(--dark, #1D252C); }
.ea-state p { color: var(--muted, #5B6670); line-height: 1.6; margin: 0 0 1.6rem; }
.ea-state__ref { font-size: .85rem; }
.ea-state__ref code { background: rgba(29,37,44,.06); padding: .12rem .4rem; border-radius: 5px; font-family: var(--font-mono, 'DM Mono', monospace); }

/* ---------- Läsbar långtext (Integritetspolicy m.m.) ---------- */
.ea-prose { max-width: 68ch; margin: 0 auto 4rem; }
.ea-prose p { line-height: 1.65; color: var(--text, #3a4147); margin: 0 0 1rem; }
.ea-prose h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .6rem; color: var(--dark, #1D252C); }
.ea-prose ul { margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.65; color: var(--text, #3a4147); }
.ea-prose li { margin-bottom: .4rem; }
.ea-prose strong { color: var(--dark, #1D252C); }
.ea-prose .ea-note { margin-bottom: 1.75rem; }

/* ---------- Resultat split-layout & CRO-optimering ---------- */
.ea-result-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 2rem;
}
@media (max-width: 991px) {
    .ea-result-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
.ea-dl-bullets {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ea-dl-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.ea-dl-bullets li i {
    color: var(--ea-red);
    margin-top: 0.15rem;
}
.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--ea-line);
    padding-top: 1.25rem;
}
.timeline-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.timeline-number {
    width: 24px;
    height: 24px;
    background: var(--ea-coal);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.timeline-text h4 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 0.15rem 0;
    color: var(--ea-coal);
}
.timeline-text p {
    font-size: 0.78rem;
    color: var(--ea-grey);
    margin: 0;
    line-height: 1.35;
}

/* Force layout container to expand to full screen for Admin and data tables */
.main.main--full {
    max-width: 100% !important;
    padding-left: 24px;
    padding-right: 24px;
}

/* ════════ Guide: ryms-utan-scroll (mobil) + läsbar kolumn (desktop) ════════
   Frågestegen ska få plats på en skärm. Resultatsidan (#ea-result) lämnas bred. */

/* Desktop: håll fråge-kolumnen läsbar i stället för 1200px bred. */
#ea-progress, #ea-step, #ea-nav { max-width: 620px; margin-inline: auto; }

@media (max-width: 576px) {
    /* Mindre topbar → mer höjd åt frågan (var 3.5rem + 68px logga). */
    .guide-topbar { padding: 1.4rem 1rem .9rem; }
    .guide-logo__img { height: 46px; }
    .guide-foot { padding: .75rem 1rem 1.1rem; }

    /* Kortets påtvingade 2.5rem-luft åt över/under äter en skärm – nolla den. */
    .ea-wizard .ea-card { padding: 1rem 0 1.25rem !important; }
    .ea-progress { margin-bottom: .9rem; }
    .ea-step-head { margin-bottom: .9rem; }
    .ea-q { margin-bottom: 1rem; }
    .ea-nav { margin-top: 1rem; }

    /* Logo-val: 2 i bredd och lägre kort → 4 alternativ = 2 rader, inte 4. */
    .ea-radiogroup--logo { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .ea-radiogroup--logo .ea-radio { height: 68px; min-height: 68px; padding: .8rem; }
    .ea-radio-logo { height: 38px; }
}