/* frontness.com — varumärkeslager ovanpå SaaS Dark (assets/sd/theme.css).
   Svart yta, orange accent och Inter, som den tidigare sajten. */
:root {
  --sd-bg: #050505;
  --sd-bg-2: #0a0a0a;
  --sd-surface: #101010;
  --sd-orange: #ff5b1f;
  --sd-orange-2: #ff7a2e;
  --sd-gradient: linear-gradient(120deg, #ffd29a 0%, #ff7a2e 40%, #ff5b1f 100%);
}
.sd-page .sd-btn { border-radius: 999px; background: var(--sd-orange); color: #0a0a0a; box-shadow: 0 10px 30px -10px rgba(255, 91, 31, .7); }
.sd-page .sd-btn:hover { background: var(--sd-orange-2); box-shadow: 0 14px 40px -10px rgba(255, 91, 31, .9); }
.sd-page .sd-btn--ghost { background: rgba(255,255,255,.04); color: var(--sd-text); box-shadow: inset 0 0 0 1px var(--sd-line-2); }
.sd-page .sd-btn--ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.sd-page .sd-btn--accent { background: var(--sd-orange); color: #0a0a0a; }

.sd-logo img { display: block; height: 20px; width: auto; }
.sd-lang { display: inline-flex; gap: .15rem; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sd-line-2); font-family: var(--sd-mono); font-size: .6875rem; letter-spacing: .06em; }
.sd-lang a { padding: .2rem .55rem; border-radius: 999px; color: var(--sd-text-3); text-decoration: none; }
.sd-lang a[aria-current="true"] { background: rgba(255,255,255,.1); color: var(--sd-text); }
.sd-lang a:hover { color: var(--sd-text); }

/* Gradient-text (background-clip: text) målas bara inom radhöjden: ge orden
   luft nedåt så g, y och p inte klipps, utan att ändra radavståndet. */
.sd-w__i, .sd-shine:not(.is-split), .fa-titel { padding-bottom: .16em; margin-bottom: -.16em; }

/* FAQ-listan vänsterställd, i linje med rubriken */
.sd-page .sd-faq { margin-left: 0; margin-right: auto; }

.sd-app__brand svg { width: 20px; height: 20px; }
.sd-orbit__hub svg { width: 34px; height: 34px; }

/* Chatten i "Be om ändringar" */
.sd-chat { display: grid; gap: .75rem; width: 100%; max-width: 440px; }
.sd-chat .sd-ai__q { justify-self: end; }
.sd-chat__meta { font-family: var(--sd-mono); font-size: .6875rem; color: var(--sd-text-3); }

/* Planernas pris: enheten byter text med växlaren */
.sd-plan__amount { font-variant-numeric: tabular-nums; }
.sd-pricing__note { margin-top: 1.25rem; color: var(--sd-text-3); font-size: var(--sd-fs-small); }
.sd-cta .sd-actions { margin-top: 2.25rem; }
.sd-footer__lang { display: flex; gap: 1rem; }
.sd-app__top .sd-app__title { font-size: .9375rem; font-weight: 600; margin-right: auto; }

/* ── Översikten i appen (hem/hemskarm.tsx), som bild i hero ─────────────── */
.fa { position: relative; isolation: isolate; padding: 1.5rem 1.75rem 1.75rem; background: #050505; color: #f4f5f6; font-size: 13px; line-height: 1.4; overflow: hidden; }
.fa-glod { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / .05), transparent 22rem),
    radial-gradient(40rem 28rem at 78% 38%, rgb(255 91 31 / .12), transparent 70%),
    radial-gradient(30rem 22rem at 22% 75%, rgb(255 122 46 / .08), transparent 70%); }
.fa p { margin: 0; }
.fa svg { display: block; }
.fa-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.fa-rund { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; color: #f4f5f6;
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); }
.fa-rund svg { width: 15px; height: 15px; }
.fa-titel { font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15;
  background: linear-gradient(to bottom, #fff, #bababa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fa-adr { display: flex; align-items: center; gap: .45rem; margin-top: .15rem !important; font-family: var(--sd-mono); font-size: 11px; color: #9ba0a6; }
.fa-adr i { width: 6px; height: 6px; border-radius: 50%; background: #ff5b1f; box-shadow: 0 0 6px rgb(255 91 31 / .9); }
.fa-knappar { margin-left: auto; display: flex; align-items: center; gap: .45rem; }
.fa-pub { padding: .4rem .85rem; border-radius: 999px; background: #ff5b1f; color: #0a0b09; font-size: 12px; font-weight: 550; box-shadow: 0 8px 22px rgba(0,0,0,.5); }

.fa-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.fa-c3 { grid-column: span 3; } .fa-c4 { grid-column: span 4; } .fa-c6 { grid-column: span 6; } .fa-c8 { grid-column: span 8; }
.fa-kort { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 13.5rem; padding: 1.1rem 1.15rem;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(rgba(23,24,26,.55), rgba(14,15,17,.4)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.fa-lbl { font-family: var(--sd-mono); font-size: 11.5px; letter-spacing: .04em; color: #9ba0a6; }
.fa-rad { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.fa-rad > span:last-child { display: inline-flex; align-items: center; gap: .2rem; font-family: var(--sd-font); font-size: 11px; color: #c9ccd0; letter-spacing: 0; }
.fa-rad svg { width: 11px; height: 11px; }
.fa-stor { font-size: 2.6rem; font-weight: 600; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.fa-mellan { font-size: 1.85rem; margin-top: .9rem !important; }
.fa-mt { margin-top: auto !important; }
.fa-sma { margin-top: .4rem !important; font-size: 11px; color: #9ba0a6; }
.fa-vit { color: #f4f5f6 !important; }
.fa-bra { font-family: var(--sd-mono); font-weight: 400; color: #3ddc97; margin-left: .3rem; }
.fa-fot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .9rem; font-size: 11.5px; color: #f4f5f6; }
.fa-fot svg { width: 12px; height: 12px; color: #9ba0a6; }
.fa-media { background: linear-gradient(to bottom, rgb(0 0 0 / .45), transparent 35%, transparent 55%, rgb(0 0 0 / .75)), url(/media/demo-bageri.jpg) center / cover; border-color: rgba(255,255,255,.1); }
.fa-media .fa-lbl { color: #f4f5f6; }

.fa-leads { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: .6rem; }
.fa-leads .fa-mellan { margin-top: 0 !important; }
.fa-staplar { display: flex; align-items: flex-end; gap: 3px; height: 44px; flex: 1; }
.fa-staplar span { flex: 1; border-radius: 2px; background: rgba(255,255,255,.1); }
.fa-staplar span.fa-p { background: rgb(255 91 31 / .8); }
.fa-former { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-family: var(--sd-mono); font-size: 11px; }
.fa-former li { display: flex; justify-content: space-between; }
.fa-former b { font-weight: 400; color: #ff5b1f; }
.fa-linje { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: auto !important; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; color: #9ba0a6; }
.fa-logg { padding: .25rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: #f4f5f6; }

.fa-karta { display: grid; grid-template-columns: 1.4rem repeat(7, 1fr); gap: .5rem; margin: .9rem 0 .8rem; }
.fa-tim { display: grid; grid-template-rows: repeat(4, 1fr); height: 7rem; font-family: var(--sd-mono); font-size: 9.5px; color: #9ba0a6; }
.fa-celler { display: grid; grid-template-rows: repeat(8, 1fr); gap: 4px; height: 7rem; }
.fa-celler i { border-radius: 3px; background: rgb(255 91 31 / var(--o)); }
.fa-celler i.fa-tom { background: rgba(255,255,255,.04); }
.fa-dag p { display: grid; margin-top: .45rem !important; padding: .25rem .4rem; border-radius: 6px; font-family: var(--sd-mono); font-size: 10px; color: #9ba0a6; }
.fa-dag p b { font-weight: 400; color: #c9ccd0; }
.fa-idag p { background: #ff5b1f; color: #0a0b09; }
.fa-idag p b { color: #0a0b09; font-weight: 600; }
.fa-legend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sd-mono); font-size: 10px; }
.fa-legend i { width: 12px; height: 8px; border-radius: 2px; background: rgb(255 91 31 / var(--o)); }

.fa-jord { display: grid; place-items: center; align-content: center; gap: .6rem; }
.fa-jord { position: relative; }
.fa-klot { width: min(100%, 16rem); aspect-ratio: 1; background: url(/media/demo-jord.svg) center / contain no-repeat; }
.fa-land { display: flex; gap: 2rem; font-family: var(--sd-mono); font-size: 11px; }
.fa-land b { font-weight: 400; color: #ff5b1f; }

.fa-bars { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.fa-bars p { display: flex; justify-content: space-between; font-size: 11.5px; }
.fa-bars b { font-family: var(--sd-mono); font-weight: 400; }
.fa-bars i { display: block; height: 4px; margin-top: .3rem; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.fa-bars em { display: block; height: 100%; border-radius: inherit; background: #ff5b1f; }
.fa-mini { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin: .8rem 0 .7rem; }
.fa-mini span { flex: 1; border-radius: 2px; background: rgb(255 91 31 / .75); }

@media (max-width: 900px) {
  .fa { padding: 1rem; }
  .fa-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .fa-c3 { grid-column: span 1; } .fa-c4, .fa-c6, .fa-c8 { grid-column: span 2; }
  .fa-c4.fa-jord, .fa-c4:nth-last-child(-n+3) { display: none; }
  .fa-titel { font-size: 1.3rem; }
  .fa-knappar .fa-rund:not(:last-of-type) { display: none; }
  .fa-kort { min-height: 10rem; }
  .fa-karta { grid-template-columns: 1rem repeat(7, minmax(0, 1fr)); gap: .25rem; }
  .fa-dag p { padding: .2rem; font-size: 9px; }
  .fa-titel { font-size: 1.1rem; }
}