/* ============================================
   QUANTI - UNIFIED STYLES
   ============================================ */

/* === CSS Variables === */
:root {
   /* Colors */
   --clr-primary: #f6f6f6;
   --clr-secondary: #fafafa;
   --clr-cta: #045cea;
   --clr-cta-hover: #0350d0;
   --clr-cta-dark: #02203e;
   --clr-cta-light: #e8f0fd;
   --clr-white: #fff;
   --clr-black: #000;
   --clr-offwhite: #f6f6f6;
   --clr-copy: #3a3a3a;
   --clr-heading: #222;
   --clr-muted: #656c79;
   --clr-border: #dddfe2;
   --clr-border-light: #e3e4e7;
   --clr-success: #0b7c56;
   --clr-success-light: #d1fae5;

   /* Transparent backgrounds */
   --msg-transp-bg: rgba(232, 232, 232, 0.5);
   --filter-transp-bg: rgb(250, 250, 250, 0.9);
   --input-transp-bg: rgba(241, 238, 238, 0.6);
   --input-transp-active: rgb(250, 250, 250, 0.7);
   --chip-transp-bg: rgba(216, 229, 251, 0.4);
   --chip-transp-hover: rgba(218, 230, 249, 0.8);
   --chip-transp-active: rgba(203, 220, 248, 0.95);

   /* Typography */
   --ff-primary: "Sofia Sans", "Inter", system-ui, sans-serif;
   --ff-secondary: "Inter", system-ui, sans-serif;

   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   --shadow-cta: 0 4px 12px rgba(4, 92, 234, 0.35);

   /* Border radius */
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
   --radius-lg: 0.75rem;
   --radius-xl: 1rem;
   --radius-2xl: 1.5rem;

   /* Transitions */
   --transition-fast: 120ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 350ms ease;

   /* Layout offsets */
   --blog-nav-offset: 92px;
}

@media (min-width: 900px) {
   :root {
      --blog-nav-offset: 104px;
   }
}

/* === Reset & Base === */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 5rem;
}

html.faq-page {
   scroll-padding-top: 14rem;
}

body {
   font-family: var(--ff-secondary);
   font-size: 1rem;
   line-height: 1.6;
   color: var(--clr-copy);
   background: var(--clr-offwhite);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

body.menu-open {
   overflow: hidden;
}

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

img {
   font-style: italic;
   color: var(--clr-muted);
}

figcaption {
   margin-block: 0.5rem 1rem;
   font-style: italic;
   color: var(--clr-muted);
   text-align: center;
   font-size: 0.85rem;
}

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

ul,
ol {
   list-style: none;
}

address {
   font-style: normal;
}

/* === Typography === */
h1,
h2,
h3,
h4,
.heading-4,
h5,
h6 {
   font-family: var(--ff-primary);
   font-weight: 600;
   color: var(--clr-black);
   line-height: 1.2;
}

/* === Container === */
.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1.5rem;
}

@media (min-width: 768px) {
   .container {
      padding: 0 2rem;
   }
}

.container--narrow {
   max-width: 650px;
   margin-inline: auto;
   padding-inline: 1.5rem;
}

.container-narrow {
   max-width: 70ch;

}

.blog-main .container-narrow {
   margin-bottom: 4rem;
}

/* === Section Utilities === */
.section-label {
   display: inline-block;
   font-size: 0.875rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--clr-cta);
   margin-bottom: 0.75rem;
}

.section-title {
   font-size: clamp(1.75rem, 4vw, 2.5rem);
   margin-bottom: 1rem;
}

.section-title .highlight {
   color: var(--clr-cta);
}

.section-subtitle {
   font-size: 1.125rem;
   color: var(--clr-muted);
   max-width: 600px;
}

.section-header {
   text-align: center;
   margin-bottom: 4rem;
}

.section-header .section-subtitle {
   margin: 0 auto;
}

/* === Accessibility === */
.skip-link {
   position: absolute;
   top: -100%;
   left: 50%;
   transform: translateX(-50%);
   padding: 1rem 2rem;
   background: var(--clr-cta);
   color: var(--clr-white);
   font-weight: 600;
   border-radius: var(--radius-md);
   z-index: 9999;
   transition: top var(--transition-fast);
}

.skip-link:focus {
   top: 1rem;
   outline: 3px solid var(--clr-cta-dark);
   outline-offset: 2px;
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

:focus-visible {
   outline: 3px solid var(--clr-cta);
   outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
   outline: 3px solid var(--clr-cta);
   outline-offset: 2px;
}

:focus:not(:focus-visible) {
   outline: none;
}

/* === Buttons === */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
   font-family: var(--ff-secondary);
   font-size: 0.9375rem;
   font-weight: 500;
   border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   transition: all var(--transition-fast);
   white-space: nowrap;
}

.btn--primary {
   background: var(--clr-cta);
   color: var(--clr-white);
   box-shadow: var(--shadow-cta);
}

.btn--primary:focus,
.btn--primary:hover {
   background: var(--clr-cta-hover);
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(4, 92, 234, 0.4);
}

.btn--primary:active {
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(4, 92, 234, 0.4);
}

.btn--ghost {
   background: transparent;
   color: var(--clr-copy);
}

.btn--ghost:focus,
.btn--ghost:hover {
   background: var(--clr-border-light);
}

.btn--outline {
   background: transparent;
   color: var(--clr-cta);
   border: 2px solid var(--clr-cta);
}

.btn--outline:focus,
.btn--outline:hover {
   background: var(--clr-cta);
   color: var(--clr-white);
}

.btn--outline:active {
   background: transparent;
   color: var(--clr-cta);
}

.btn--white {
   background: var(--clr-white);
   color: var(--clr-cta);
}

.btn--white:focus,
.btn--white:hover {
   background: var(--clr-offwhite);
   transform: translateY(-1px);
}

.btn--white:active {
   transform: translateY(0);
}

.btn--large {
   padding: 1rem 2rem;
   font-size: 1rem;
}

.btn--full {
   width: 100%;
}

.btn.is-loading {
   position: relative;
   pointer-events: none;
}

.btn.is-loading .btn__text {
   visibility: hidden;
}

.btn__loading {
   display: none;
}

.btn.is-loading .btn__loading {
   display: flex;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.small-button {
   padding: 0.35rem 0.75rem;
   font-size: 0.85rem;
}

.no-grow {
   flex: 0 0 auto;
   width: auto;
   max-width: max-content;
}

/* === Links === */
.inline-link {
   color: var(--clr-cta-dark);
   text-decoration: underline;
   text-decoration-style: dotted;
   text-decoration-color: var(--clr-muted);
   text-underline-offset: 0.22em;
}

.inline-link:hover {
   color: var(--clr-cta);
   text-decoration: underline;
   text-decoration-style: underline;
   text-decoration-color: var(--clr-cta-hover);
   text-underline-offset: 0.22em;
}

.inline-link:active {
   color: var(--clr-copy);
}

/* === Navigation === */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background-color: transparent;
   backdrop-filter: blur(4px);
}

.nav--scrolled {
   background: rgba(255, 255, 255, 0.85);
   box-shadow: 0 4px 16px hsl(0, 0%, 90%);
}

.nav__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 3.5rem;
}

.nav__brand {
   display: flex;
   align-items: center;
   gap: 0.625rem;
}

.nav__logo {
   width: 2rem;
   height: 2rem;
}

.nav__title {
   font-family: var(--ff-primary);
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--clr-heading);
}

.nav__links {
   display: flex;
   justify-content: center;
   gap: 2rem;
   height: 3.5rem;
}

@media (min-width: 768px) {
   .nav__links {
      display: flex;
   }
}

.nav__link {
   font-size: 0.9375rem;
   font-weight: 500;
   color: var(--clr-muted);
   text-decoration: none;
   border-radius: var(--radius-md);
   position: relative;
   display: flex;
   align-items: center;
   transition: color var(--transition-fast);
}

.nav__link:focus,
.nav__link:hover {
   color: var(--clr-cta);
}

.nav__link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--clr-cta);
   transform: scaleX(0);
   transition: transform 0.25s ease;
}

.nav__link:focus::after,
.nav__link:hover::after,
.nav__link--active::after {
   transform: scaleX(1);
}

.nav__link--active {
   color: var(--clr-cta);
   font-weight: 600;
}

.nav__cta {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 0.75rem;
}

@media (min-width: 768px) {
   .nav__cta {
      display: flex;
   }
}

.nav__hamburger {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 0.5rem;
   background: none;
   border: none;
   cursor: pointer;
}

@media (min-width: 768px) {
   .nav__hamburger {
      display: none;
   }
}

.nav__hamburger span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--clr-copy);
   border-radius: 2px;
   transition: all var(--transition-fast);
}

.nav__hamburger.is-active span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav__hamburger.is-active span:nth-child(2) {
   opacity: 0;
}

.nav__hamburger.is-active span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

.icon-hamburger .line {
   transition: rotate 250ms ease-in,
      transform 250ms 200ms ease-in,
      opacity 250ms 200ms ease-in-out;
   transform-origin: center;
   will-change: transform, opacity, rotate;
}

.icon-hamburger.morphToClose .line {
   transition: rotate 250ms 200ms ease-in-out,
      transform 250ms ease-in-out,
      opacity 250ms ease-in-out;
   transform-origin: center;
}

.icon-hamburger.morphToClose .top {
   transform: translateY(20px);
   rotate: 45deg;
}

.icon-hamburger.morphToClose .middle {
   rotate: -45deg;
}

.icon-hamburger.morphToClose .bottom {
   transform: translateY(-20px);
   opacity: 0;
}

.nav__overlay {
   position: fixed;
   inset: 0;
   opacity: 0;
   visibility: hidden;
   transition: all var(--transition-base);
   z-index: 998;
}

.nav__overlay.is-visible {
   opacity: 1;
   visibility: visible;
}

/* Mobile menu */
@media (max-width: 767px) {
   .nav__links {
      position: fixed;
      top: 3.5rem;
      left: 0;
      right: 0;
      bottom: 0;
      height: auto;
      min-height: calc(100vh - 3.5rem);
      min-height: calc(100dvh - 3.5rem);
      background: var(--clr-white);
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 999;
      overflow-y: auto;

   }

   .nav__links.is-open {
      transform: translateX(0);
   }

   .nav__link {
      height: auto;
      display: block;
      padding: 1rem 0;
      font-size: 1.125rem;
      border-bottom: 1px solid var(--clr-border-light);
   border-radius: 0;

   }

   .nav__link::after {
      display: none;
   }

   .nav__cta {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding-top: 1.5rem;
      margin-top: auto;
      
   }

   .nav__cta .btn {
      width: 100%;
      justify-content: center;
   }

   .nav__hamburger {
      z-index: 1001;
   }
}

/* === Hero Section === */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding-top: 6rem;
   padding-bottom: 4rem;
   overflow: hidden;
}

.hero__bg {
   position: absolute;
   inset: 0;
   background:
      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(4, 92, 234, 0.08), transparent),
      radial-gradient(ellipse 60% 40% at 100% 100%, rgba(4, 92, 234, 0.05), transparent);
   pointer-events: none;
}

.hero__inner {
   display: grid;
   gap: 3rem;
   align-items: center;
}

@media (min-width: 1024px) {
   .hero__inner {
      grid-template-columns: 1fr 1.5fr;
      gap: 4rem;
   }
}

.hero__content {
   max-width: 42ch;
}

.hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 1rem;
   background: var(--clr-cta-light);
   color: var(--clr-cta);
   font-size: 0.85rem;
   font-weight: 500;
   border-radius: 100px;
   margin-bottom: 1.5rem;
}

.pulse {
   width: 8px;
   height: 8px;
   background: var(--clr-cta);
   border-radius: 50%;
   animation: pulse 2s infinite;
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.5;
      transform: scale(1.2);
   }
}

.hero__title {
   font-size: clamp(2.25rem, 5vw, 3.5rem);
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 1.5rem;
   text-wrap: balance;
}

.hero__title--highlight {
   display: block;
   background: linear-gradient(135deg, var(--clr-cta), #3b82f6);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.hero__subtitle {
   font-size: 1.125rem;
   color: var(--clr-muted);
   margin-bottom: 2rem;
   max-width: 32ch;
   text-wrap: pretty;
}

.hero__cta {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

@media (min-width: 480px) {
   .hero__cta {
      flex-direction: row;
      align-items: center;
   }
}

.hero__cta-note {
   font-size: 0.875rem;
   color: var(--clr-muted);
}

.hero__visual {
   position: relative;
}

.hero__screenshot {
   background: var(--clr-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
   border: 1px solid var(--clr-border);
}

.screenshot__browser {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
   background: var(--clr-border-light);
   border-bottom: 1px solid var(--clr-border);
}

.browser__dots {
   display: flex;
   gap: 6px;
}

.browser__dots span {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--clr-border);
}

.browser__dots span:nth-child(1) {
   background: #ef4444;
}

.browser__dots span:nth-child(2) {
   background: #f59e0b;
}

.browser__dots span:nth-child(3) {
   background: #22c55e;
}

.browser__url {
   font-size: 0.8125rem;
   color: var(--clr-muted);
   background: var(--clr-white);
   padding: 0.25rem 0.75rem;
   border-radius: var(--radius-sm);
   flex: 1;
   max-width: 200px;
}

.screenshot__content {
   background: var(--clr-offwhite);
   aspect-ratio: 16 / 10;
}

.screenshot__content picture {
   display: block;
   width: 100%;
   height: 100%;
}

.screenshot__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.screenshot__placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   height: 100%;
   color: var(--clr-muted);
   font-size: 0.875rem;
}

.screenshot__placeholder svg {
   opacity: 0.5;
}

.screenshot__placeholder--small {
   aspect-ratio: 16 / 9;
   background: var(--clr-border-light);
   border-radius: var(--radius-md);
   padding: 2rem;
}

.hero__float {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
   background: var(--clr-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   font-size: 0.875rem;
   font-weight: 500;
   animation: float 3s ease-in-out infinite;
}

.hero__float--1 {
   top: 15%;
   right: -1rem;
   animation-delay: 0s;
}

.hero__float--2 {
   bottom: 20%;
   left: -1rem;
   background: var(--clr-success-light);
   color: var(--clr-success);
   animation-delay: 1.5s;
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-10px);
   }
}

.float__icon {
   font-size: 1.25rem;
}

.icon {
   width: 2rem;
   height: 2rem;
   padding-top: 0.75rem;
   margin-right: 0.5em;
}

.small-icon {
   width: 18px;
   height: 18px;
   aspect-ratio: 1;
}

.hero__scroll {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   color: var(--clr-muted);
   font-size: 0.8125rem;
   opacity: 0.7;
   animation: bounce 2s infinite;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateX(-50%) translateY(0);
   }

   50% {
      transform: translateX(-50%) translateY(5px);
   }
}

@media (max-width: 1023px) {
   .hero__scroll {
      display: none;
   }
}

/* === Trust Section === */
.trust {
   padding: 3rem 0;
   border-bottom: 1px solid var(--clr-border-light);
   border-top: 1px solid var(--clr-border-light);
   background: var(--clr-offwhite);
}

.trust__label {
   text-align: center;
   font-size: 0.875rem;
   color: var(--clr-muted);
   margin-bottom: 1.5rem;
}

.trust__logos {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3rem;
   flex-wrap: wrap;
}

.trust__logo {
   display: flex;
   align-items: center;
   opacity: 0.7;
   transition: opacity var(--transition-fast);
   object-fit: cover;
}

.trust__logo:hover {
   opacity: 1;
}

.trust__logo img {
   height: 32px;
   width: auto;
}

.trust__text {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--clr-muted);
}

.trust__logo--coming .trust__text {
   font-size: 0.875rem;
   font-weight: 400;
}

/* === Features / Steps Section === */
.features {
   padding: 6rem 0;
   background: var(--clr-secondary);
}

.steps {
   display: grid;
   gap: 3rem;
}

@media (min-width: 768px) {
   .steps {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
   }
}

.step {
   position: relative;
}

.step__number {
   width: 3rem;
   height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-cta);
   color: var(--clr-white);
   font-family: var(--ff-primary);
   font-size: 1.25rem;
   font-weight: 700;
   border-radius: 50%;
   margin-bottom: 1.5rem;
}

.step__title {
   font-size: 1.25rem;
   margin-bottom: 0.75rem;
}

.step__text {
   color: var(--clr-muted);
   margin-bottom: 1.5rem;
}

.step__screenshot {
   margin-top: 1rem;
   border: 1px solid var(--clr-border-light);
   border-radius: var(--radius-xl);
   overflow: hidden;
   background: var(--clr-white);
}

.step__screenshot picture {
   display: block;
}

.step__image {
   display: block;
   width: 100%;
   height: auto;
}

/* === Highlights Grid === */
.highlights {
   padding: 6rem 0;
   background: var(--clr-offwhite);
}

.highlights__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
   justify-content: center;
   width: 100%;
   gap: 1.5rem;
}

@media (max-width: 480px) {
   .highlights__grid {
      flex-direction: column;
   }
}

.highlight-card,
.highlight-card-legal {
   flex-basis: 25%;
   padding: 1.5rem;
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-xl);
   background: var(--clr-secondary);
   transition: all var(--transition-base);
}

.highlight-card__icon {
   width: 3rem;
   height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-cta-light);
   color: var(--clr-cta);
   border-radius: var(--radius-md);
   margin-bottom: 1rem;
}

.highlight-card__title {
   font-size: 1.125rem;
   margin-bottom: 0.5rem;
}

.highlight-card__text {
   font-size: 0.9375rem;
   color: var(--clr-muted);
   margin-bottom: 0.5rem;
}

.highlight-card__text ol {
   list-style:decimal;
   margin-left: 1.75rem;
}

.highlight-card__more {
   margin-top: 0.5rem;
}

.page-legal .highlights__grid {
   display: block;
}

.page-legal .highlight-card,
.page-legal .highlight-card-legal {
   width: 100%;
   max-width: 64ch;
   margin: 0 auto;
   flex-basis: auto;
}

.default-ul {
   appearance: initial;
   list-style: initial;
   margin: .5rem 0 0 1.1rem;
}

/* === Pricing Section === */
.pricing {
   padding: 6rem 0;
   background: var(--clr-secondary);
}

.pricing__cards {
   display: grid;
   gap: 2rem;
   max-width: 1000px;
   margin: 0 auto;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: stretch;
}

@media (max-width: 1023px) {
   .pricing__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

.pricing-card {
   display: flex;
   flex-direction: column;
   position: relative;
   background: var(--clr-white);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-lg);
   padding: 2rem;
   transition: all var(--transition-base);
}

.pricing-card>.btn {
   margin-top: auto;
}

.pricing__cards.snap-container .pricing-card {
   border: 1px solid var(--clr-border);
   box-shadow: none;
   transform: scale(1);
   transition: border-color 300ms ease-in-out,
      box-shadow 300ms ease-in-out,
      transform 300ms ease-in-out;
   will-change: border-color, box-shadow, transform;
}

.pricing__cards.snap-container .pricing-card--featured {
   border-color: var(--clr-cta);
   box-shadow: var(--shadow-lg);
   z-index: 1;
}

@media (min-width: 768px) {
   .pricing__cards.snap-container .pricing-card--featured {
      transform: scale(1.05);
   }
}

.pricing__cards.snap-container .pricing-card:hover {
   box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
   .pricing__cards.snap-container .pricing-card:hover {
      transform: scale(1.05);
   }
}

.pricing__cards.snap-container .pricing-card:hover:not(.pricing-card--featured) {
   border-color: var(--clr-border);
}

.pricing__cards.snap-container .pricing-card--featured:hover {
   border-color: var(--clr-cta);
}

@supports selector(.pricing__cards:has(.pricing-card:hover)) {
   .pricing__cards.snap-container:has(.pricing-card:hover:not(.pricing-card--featured)) .pricing-card--featured {
      border-color: var(--clr-border);
      box-shadow: none;
      transform: scale(1);
   }

   .pricing__cards.snap-container:has(.pricing-card:hover:not(.pricing-card--featured)) .pricing-card--featured .pricing-card__badge {
      background-color: var(--clr-border);
      color: var(--clr-black);
   }

   .pricing__cards.snap-container:has(.pricing-card:focus-within:not(.pricing-card--featured)) .pricing-card--featured {
      border-color: var(--clr-border);
      box-shadow: none;
      transform: scale(1);
   }
}

.pricing-card__badge {
   position: absolute;
   top: -0.75rem;
   left: 50%;
   transform: translateX(-50%);
   padding: 0.25rem 1rem;
   background-color: var(--clr-cta);
   color: var(--clr-white);
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-radius: var(--radius-md);
   transition: color var(--transition-base),
      background-color var(--transition-base);
}

.pricing-card__header {
   margin-bottom: 1.5rem;
}

.pricing-card__name {
   font-size: 1.5rem;
   margin-bottom: 0.25rem;
}

.pricing-card__tagline {
   color: var(--clr-muted);
   font-size: 0.9375rem;
}

.pricing-card__price {
   display: flex;
   align-items: baseline;
   gap: 0.25rem;
   margin-bottom: 2rem;
}

.price__amount {
   font-family: var(--ff-primary);
   font-size: 3rem;
   font-weight: 700;
   color: var(--clr-heading);
   line-height: 1;
}

.price__currency {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--clr-heading);
}

.price__period {
   font-size: 1rem;
   color: var(--clr-muted);
}

.pricing-card__features {
   display: flex;
   flex-direction: column;
   gap: 0.875rem;
   margin-bottom: 2rem;
}

.pricing-card__features li {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.9375rem;
}

.pricing-card__features svg {
   flex-shrink: 0;
   color: var(--clr-success);
}

.pricing__note {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   margin-top: 2.5rem;
   font-size: 0.875rem;
   color: var(--clr-muted);
   padding-inline: 1.5rem;
}

.only-mobile {
   display: none;
}

@media (max-width: 768px) {
   .pricing .container {
      padding-inline: 0;
   }

   .only-mobile {
      display: block;
   }

   .pricing .section-header {
      padding-inline: 1.5rem;
   }

   .pricing__cards {
      display: flex;
      flex-wrap: nowrap;
      gap: 1rem;
      overflow-x: auto;
      overflow-y: hidden;
      padding-inline: 0;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.5rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .pricing__cards::-webkit-scrollbar {
      display: none;
   }

   .pricing__cards>.pricing-card {
      flex: 0 0 85%;
      scroll-snap-align: center;
      margin-block: 1rem;
   }

   .pricing .snap-container {
      padding-inline: 1.5rem;
   }
}

/* === Social Proof / Testimonials === */
.social-proof {
   padding: 0rem 0;
   background: var(--clr-secondary);
}

.testimonial-carousel {
   position: relative;
   width: 100%;
   padding: 2.5rem 0 2.5rem;
}

.testimonial-carousel__viewport {
   display: flex;
   gap: 1.25rem;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding: 0 1.5rem 1.25rem;
   touch-action: pan-x pan-y;
   overscroll-behavior-x: contain;
}

.testimonial-carousel__viewport::-webkit-scrollbar {
   display: none;
}

#testimonials.is-dragging {
   cursor: grabbing;
   user-select: none;
}

#testimonials {
   cursor: grab;
}

.testimonial-carousel__dots {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem 0 0;
}

.carousel-dot {
   width: 34px;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: 0;
   cursor: pointer;
}

.carousel-dot::before {
   content: "";
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: var(--clr-border);
   opacity: 0.9;
   transition: width var(--transition-fast),
      transform var(--transition-fast),
      background var(--transition-fast),
      opacity var(--transition-fast);
}

.carousel-dot:hover::before {
   transform: scale(1.15);
   opacity: 1;
}

.carousel-dot.is-active::before {
   width: 22px;
   background: var(--clr-cta);
   opacity: 1;
}

.quote-card {
   flex: 0 0 clamp(280px, 85vw, 720px);
   margin: 0;
   scroll-snap-align: center;
   max-width: 700px;
   margin: 0 auto;
   text-align: center;
   padding: 3rem;
   background: var(--clr-cta-light);
   border-radius: var(--radius-2xl);
}

.quote-card__text {
   font-family: var(--ff-primary);
   font-size: clamp(1.25rem, 3vw, 1.5rem);
   font-weight: 500;
   color: var(--clr-heading);
   line-height: 1.4;
   text-align: left;
   margin-bottom: 2rem;
}

.quote-card__author {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}

.author__avatar {
   width: 3rem;
   height: 3rem;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--clr-white);
   border-radius: 50%;
   font-size: 1.5rem;
}

.author__info {
   display: flex;
   flex-direction: column;
   text-align: left;
}

.author__name {
   font-weight: 600;
   color: var(--clr-heading);
}

.author__title {
   font-size: 0.875rem;
   color: var(--clr-muted);
}

/* Blog preview: default */
.blogg-preview__dots {
   display: none;
}

   /* Callout styles for blog */
   .callout {
      display: block;
      padding-block: 1rem 0.3rem; 
      padding-inline: 1.25rem;
      margin: 1.25rem 0;
      border-radius: var(--radius-sm);
      background: #f7fbff;         /* subtle background */
      border-left: 4px solid var(--clr-cta); /* accent color */
      color: #0f1724;
      box-shadow: 0 1px 2px rgba(15,23,36,0.04);
      line-height: 1.5;
   }

   .callout__title {
      margin: 0 0 0.25rem;
      font-weight: 600;
      color: #0b1220;
   }

   .callout p {
      margin: 0 0 0.5rem;
   }

   /* Variants */
   .callout--tip {
         background: var(--clr-cta-light);

      border-left-color: var(--clr-cta);
   }

   .callout--warning {
      background: #fffbeb;
      border-left-color: #f59e0b;
   }


/* === Blog preview: snap carousel on small screens === */
/* Sätt till 640px så du inte krockar med din grid som kickar in på tablets */
@media (max-width: 640px) {

   /* Full-bleed bara för listan (rubriker/cta får sin padding tillbaka) */
   .blogg-preview .container {
      padding-inline: 0;
   }

   .blogg-preview .section-header,
   .blogg-preview__cta,
   .faq-preview__cta {
      padding-inline: 1.5rem;
   }

   /* Viktigt: targeta ID:t så du slår grid-regeln säkert */
   #blogg-preview.blogg-preview__grid {
      display: flex;
      flex-wrap: nowrap;
      gap: 1rem;

      overflow-x: auto;
      overflow-y: hidden;

      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.5rem;

      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;

      padding: 0 1.5rem 1rem;
      overscroll-behavior-x: contain;
   }

   #blogg-preview.blogg-preview__grid::-webkit-scrollbar {
      display: none;
   }

   #blogg-preview.blogg-preview__grid>.blogg-article {
      flex: 0 0 calc(100% - 3rem);
      /* minus totala 1.5rem padding på varje sida */
      scroll-snap-align: start;
      scroll-snap-stop: always;
      box-sizing: border-box;
      margin: 0;
      /* säkerställ att inget extra spacing tillkommer */
   }


   /* Drag-cursor (matchar testimonials) */
   #blogg-preview {
      cursor: grab;
   }

   #blogg-preview.is-dragging {
      cursor: grabbing;
      user-select: none;
   }

   /* Dots (JS sköter hidden när den inte är scrollable) */
   .blogg-preview__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0 0.75rem;
   }

   #blogg-preview.blogg-preview__grid>.blogg-article {
      height: 420px;
      /* justera vid behov */
      display: flex;
   }

   /* Se till att länken fyller hela kortet */
   .blogg-article__link {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
   }

   /* Låt content växa och "Läs mer" hamna längst ned */
   .blogg-article__content {
      display: flex;
      flex-direction: column;
      flex: 1;
   }

   .blogg-article__excerpt {
      display: -webkit-box;
      max-height: 4.5em;
      /* 2 eller 3 rader */
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .blogg-article__readmore {
      margin-top: auto;
   }
}


/* === FAQ Section === */
.faq {
   padding: 6rem 0;
   background: var(--clr-offwhite);
}

.faq__list {
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.faq-item {
   background-color: var(--clr-offwhite);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   transition: background-color var(--transition-slow);
}

.faq-item:hover,
.faq-item:focus-within {
   background-color: var(--clr-secondary);
}

.faq-item[open] {
   background-color: var(--clr-secondary);
}

.faq-summary {
   list-style: none;
   cursor: pointer;
   padding: 1rem 1.25rem 1rem 1.25rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   font-family: var(--ff-primary);
   font-weight: 600;
   color: var(--clr-heading);
}

.faq-summary::-webkit-details-marker {
   display: none;
}

.faq-summary::after {
   content: "+";
   width: 2.25rem;
   height: 2.25rem;
   display: grid;
   place-items: center;
   color: var(--clr-muted);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-md);
   aspect-ratio: 1;
   transition: transform var(--transition-fast),
      background var(--transition-fast),
      color var(--transition-fast);
}

.faq-item[open]>.faq-summary::after {
   content: "−";
}

.faq-summary:focus::after,
.faq-summary:hover::after {
   background: var(--clr-cta-light);
   color: var(--clr-cta);
   border-color: var(--clr-cta-light);
}

.faq-group {
   margin-block: 0 2rem;
}

.faq-group__title {
   padding-bottom: 1rem;
}

.faq-content {
   padding: 0 1.25rem 1rem 1.25rem;
   color: var(--clr-muted);
   max-width: 75ch;
}

.faq-content p:not(:last-child) {
   padding-bottom: 1rem;
}

.faq__cta {
   display: flex;
   justify-content: center;
   margin-top: 2rem;
}

.faq-permalink {
   display: inline-flex;
   align-items: center;
   padding-inline: 0;
   margin-top: 0.5rem;
   font-size: 0.75rem;
   gap: 0.4rem;
}


.faq-preview__cta {
   display: flex;
   justify-content: center;

   padding-top: 3rem;
}
/* === Blog Preview / Cards === */


.blogg-preview {
   padding: 6rem 0;
   background: var(--clr-offwhite);
}

.blogg-preview__grid {
   display: grid;
   gap: 2rem;
   margin-bottom: 3rem;
}

@media (min-width: 640px) {
   .blogg-preview__grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (min-width: 1024px) {
   .blogg-preview__grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

.blogg-article {
   background: var(--clr-secondary);
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--clr-border-light);
   transition: all var(--transition-fast);
   display: flex;
   flex-direction: column;
   height: 100%;
}

@media (min-width: 767px) {

   .blogg-article:focus,
   .blogg-article:hover {
      box-shadow: var(--shadow-lg);
      background: var(--clr-white);
      transform: translateY(-4px);
   }

   .blogg-article:active {
      box-shadow: 0 0 0 transparent;
      transform: translateY(0);
      background: var(--clr-secondary);
   }
}

.blogg-article__link {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: inherit;
   height: 100%;
}

.blogg-article__image {
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--clr-border-light);
}

.blogg-article__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-base);
}

.blogg-article:hover .blogg-card__image img {
   transform: scale(1.05);
}

.blogg-article__content {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex-grow: 1;
}

.blogg-article__meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
}

.blogg-article__category {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--clr-cta);
   background: var(--clr-cta-light);
   padding: 0.25rem 0.75rem;
   border-radius: 100px;
   margin-bottom: 0.75rem;
}

.blogg-article__category {
   margin-bottom: 0;
}

.blogg-article__date {
   font-size: 0.8125rem;
   color: var(--clr-muted);
}

.blogg-article__title {
   font-size: 1.125rem;
   font-weight: 600;
   color: var(--clr-heading);
   margin-bottom: 0.5rem;
   line-height: 1.3;
}

.blogg-article__excerpt {
   font-size: 0.9375rem;
   color: var(--clr-muted);
   margin-bottom: 1rem;
   --excerpt-lines: 3;
   --excerpt-lh: 1.45;
   --excerpt-fade: 3em;
   line-height: var(--excerpt-lh);
   max-height: calc(var(--excerpt-lines) * 1em * var(--excerpt-lh));
   overflow: hidden;
   position: relative;
}

@supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
   .blogg-article__excerpt {
      mask-image: linear-gradient(to bottom,
            #000 0,
            #000 calc(100% - var(--excerpt-fade)),
            transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom,
            #000 0,
            #000 calc(100% - var(--excerpt-fade)),
            transparent 100%);
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-size: 100% 100%;
      -webkit-mask-size: 100% 100%;
   }
}

@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
   .blogg-article__excerpt::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--excerpt-fade);
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--clr-white));
   }
}

.blogg-article__readmore {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--clr-cta);
}

.blogg-preview__cta {
   text-align: center;
}

.blogg-empty {
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding: 4rem 2rem;
   row-gap: 1rem;
}

.blogg-empty[hidden] {
   display: none;
}

/* === Blog Post Page === */
.blogg-header {
   padding-block: 4rem 0;
   background: var(--clr-secondary);
}

.bg-offwhite {
   background: var(--clr-offwhite);
}

.breadcrumb {
   margin-bottom: 1.5rem;
}

.breadcrumb ol {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.875rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

.breadcrumb li {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   list-style: none;
}

.breadcrumb li:not(:last-child)::after {
   content: '>';
   color: var(--clr-muted);
   font-size: 0.75rem;
   font-weight: 300;
}

.breadcrumb a {
   color: var(--clr-cta);
   text-decoration: underline;
   text-underline-offset: 2px;
   font-weight: 500;
}

.breadcrumb a:hover {
   color: var(--clr-cta-hover);
}

.blogg-category {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--clr-cta);
   background: var(--clr-cta-light);
   padding: 0.5rem 1rem;
   border-radius: 100px;
   margin-bottom: 1rem;
}

.blogg-title {
   font-size: clamp(1.75rem, 6vw, 2.5rem);
   line-height: 1.2;
   margin-bottom: 0.75rem;
   color: var(--clr-heading);
   font-weight: 700;
}

.blogg-meta {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-size: 0.875rem;
   color: var(--clr-muted);
   margin-bottom: 1.5rem;
}

.blogg-hero {
   margin: 1.5rem 0;
}

.blogg-hero__img {
   width: 100%;
   height: auto;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-md);
}

.blogg-content {
   padding: 1.5rem 0 1.5rem 0;
   margin-bottom: 6rem;
}

.blog-main .blogg-header {
   padding-top: 0;
}

@media (min-width: 768px) {
   .blog-main {
      background: var(--clr-offwhite);
   }


   .blogg-content {
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-xl);
      background: var(--clr-secondary);
      padding-inline: 1.5rem;
      margin-bottom: 0;
   }
}

.blogg-content .lead {
   font-size: 1.25rem;
   line-height: 1.65;
   color: var(--clr-copy);
   margin-bottom: 2rem;
   font-weight: 400;
}

.blogg-content p {
   font-size: 1.0625rem;
   line-height: 1.75;
   color: var(--clr-copy);
   margin-bottom: 1.25rem;
}

.blogg-content h2 {
   font-size: 1.75rem;
   line-height: 1.3;
   color: var(--clr-heading);
   margin-top: 2.5rem;
   margin-bottom: 1rem;
   font-weight: 700;
}

.blogg-content h3 {
   font-size: 1.375rem;
   line-height: 1.35;
   color: var(--clr-heading);
   margin-top: 2rem;
   margin-bottom: 0.875rem;
   font-weight: 600;
}

.blogg-content ul {
   list-style-type: disc;
   list-style-position: outside;
   margin: 1.25rem 0;
   padding-left: 1.75rem;
}

.blogg-content ol {
   list-style-type: decimal;
   list-style-position: outside;
   margin: 1.25rem 0;
   padding-left: 1.75rem;
}

.blogg-content li {
   font-size: 1.0625rem;
   line-height: 1.75;
   color: var(--clr-copy);
   margin-bottom: 0.625rem;
   padding-left: 0.375rem;
}

.blogg-content ul li::marker {
   color: var(--clr-cta);
   font-size: 1.2em;
}

.blogg-content ol li::marker {
   color: var(--clr-cta);
   font-weight: 700;
}

.blogg-content strong {
   font-weight: 700;
   color: var(--clr-heading);
}

.block-image {
   display: block;
   width: auto;
   height: auto;
   max-width: 100%;
   object-fit: contain;
}

.inline-image {
   display: inline-block;
}


.blogg-cta {
   background: linear-gradient(135deg, #e8f0fd, #dbeafe);
   border: 3px solid var(--clr-cta);
   border-radius: var(--radius-xl);
   padding: 2rem 1.75rem;
   margin: 2.5rem 0;
   text-align: center;
}

.blogg-cta h3 {
   font-size: 1.5rem;
   color: var(--clr-heading);
   margin: 0 0 0.75rem;
   font-weight: 700;
}

.blogg-cta p {
   font-size: 1.0625rem;
   color: var(--clr-copy);
   margin-bottom: 1.5rem;
}

.related-articles {
   background: var(--clr-offwhite);
   border: 2px solid var(--clr-border);
   border-radius: var(--radius-md);
   padding: 2rem;
   margin-top: 2.5rem;
}

.related-articles h3 {
   font-size: 1.25rem;
   color: var(--clr-heading);
   margin: 0 0 1.25rem;
   font-weight: 700;
}

.related-articles ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.related-articles li {
   margin-bottom: 0.875rem;
   margin-left: 1rem;
   list-style: initial;
}


.related-articles a {
   color: var(--clr-cta);
   font-size: 1rem;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 0.625rem;
   position: relative;

}

.related-articles a:hover {
   gap: 0.875rem;
   color: var(--clr-cta-hover);

}

.related-articles a::after {
   content: '→';
   position: relative;
   font-weight: bold;
   right: 0;
   font-size: 1.125rem;
   transition: transform 250ms var(--transition-base);

}

.related-articles:hover>.related-articles::before {
   transform: translateX(10%);
   font-size: 1.125rem;
}

.blogg-content .image-list {
   padding-left: 0;
   list-style: none;
}


.blogg-content .sublist {
   list-style-type: circle;
}

/* Optional: fine-tune marker color/size for consistent hollow-circle appearance */
.blogg-content .sublist li::marker {
   color: var(--clr-cta);
   font-size: 0.95em;
}

/* === Blog List Page === */
.blogg-header__title {
   font-size: clamp(2rem, 5vw, 3rem);
   margin-bottom: 0.5rem;
}

.blogg-header__subtitle {
   font-size: 1.125rem;
   color: var(--clr-muted);
}

.blogg-filters {
   padding: 1.5rem 0 1rem 0;
   border-bottom: 1px solid var(--clr-border-light);
   top: 3rem;
   z-index: 100;
   background: var(--filter-transp-bg);
   backdrop-filter: blur(6px);
}

@media (min-width: 767px) {
   .blogg-filters {
      position: sticky;
   }
}

.blogg-search {
   margin-bottom: 1rem;
}

.search-input-wrapper {
   position: relative;
   max-width: 400px;
}

.search-icon {
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--clr-muted);
   pointer-events: none;
}

.search-input {
   width: 100%;
   padding: 0.875rem 1rem 0.875rem 2.5rem;
   font-family: var(--ff-secondary);
   font-size: 1rem;
   color: var(--clr-copy);
   background: var(--msg-transp-bg);
   border: 2px solid transparent;
   border-radius: var(--radius-md);
   transition: all var(--transition-fast);
}

.search-input:focus {
   outline: none;

   border-color: var(--clr-cta);
}

.search-clear {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   padding: 0.5rem;
   background: none;
   border: none;
   color: var(--clr-muted);
   cursor: pointer;
   border-radius: 50%;
}

.filter-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1rem;
}

.chip {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--clr-muted);
   background: var(--chip-transp-bg);
   border: 2px solid transparent;
   border-radius: var(--radius-md);
   cursor: pointer;
}

.chip:hover,
.chip:focus {
   color: var(--clr-cta);
   background: var(--chip-transp-hover);
}

.chip--active {
   color: var(--clr-black);
   background: var(--chip-transp-active);
}

.filter-status {
   font-size: 0.875rem;
   color: var(--clr-muted);
}

.blogg-articles {
   padding: 3rem 0 6rem;
   background: var(--clr-offwhite);
   min-height: 100%;
}

.blogg-preview.blogg-preview--list {
      padding-top: 2.5rem;
}

.blogg-grid {
   display: grid;
   gap: 2rem;
}

.blogg-article[hidden] {
   display: none !important;
}

@media (min-width: 640px) {
   .blogg-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (min-width: 1024px) {
   .blogg-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* === CTA Section === */
.cta-section {
   background: var(--clr-secondary);
   padding-block: 6rem;
}

.cta-box {
   text-align: center;
   padding: 4rem 2rem;
   background: linear-gradient(135deg, var(--clr-cta), #3b82f6);
   border-radius: var(--radius-2xl);
   color: var(--clr-white);
}

.cta-box__title {
   font-size: clamp(1.5rem, 4vw, 2.25rem);
   color: var(--clr-white);
   margin-bottom: 1rem;
}

.cta-box__text {
   font-size: 1.125rem;
   opacity: 0.9;
   margin-bottom: 2rem;
}

/* === Contact Section === */
.contact {
   padding: 6rem 0;
   background: var(--clr-offwhite);
}

.contact__grid {
   display: grid;
   gap: 3rem;
}

@media (min-width: 768px) {
   .contact__grid {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
   }
}

.contact__info .section-title {
   text-align: left;
}

.contact__text {
   color: var(--clr-muted);
   margin-bottom: 2rem;
}

.contact__details {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.contact__link {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
   color: var(--clr-cta);
   font-weight: 500;
   transition: opacity var(--transition-fast);
}

.contact__link:hover {
   opacity: 0.8;
}

.contact__form-wrapper {
   background: var(--clr-secondary);
   padding: 2rem;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-md);
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.form-group {
   position: relative;
}

.form-group.floating input,
.form-group.floating textarea {
   width: 100%;
   padding: 1.5rem 1rem 0.75rem;
   font-family: var(--ff-secondary);
   font-size: 1rem;
   color: var(--clr-copy);
   background: var(--clr-offwhite);
   border: 2px solid transparent;
   border-radius: var(--radius-md);
   transition: all var(--transition-fast);
   resize: vertical;
}

.form-group.floating input:focus,
.form-group.floating textarea:focus {
   outline: none;
   border-color: var(--clr-cta);
   background: var(--clr-white);
}

.form-group.floating label {
   position: absolute;
   left: 1rem;
   top: 1.125rem;
   font-size: 1rem;
   color: var(--clr-muted);
   pointer-events: none;
   transition: all 0.2s ease;
   transform-origin: left top;
}

.form-group.floating textarea~label {
   top: 1.125rem;
}

.form-group.floating input:focus~label,
.form-group.floating input:not(:placeholder-shown)~label,
.form-group.floating textarea:focus~label,
.form-group.floating textarea:not(:placeholder-shown)~label {
   top: 0.375rem;
   font-size: 0.7rem;
   color: var(--clr-cta);
   font-weight: 500;
}

.form-error {
   display: block;
   font-size: 0.8125rem;
   color: #ef4444;
   min-height: 1.25rem;
   margin-top: 0.25rem;
}

.form-group.has-error input,
.form-group.has-error textarea {
   border-color: #ef4444;
}

.spinner {
   animation: spin 1s linear infinite;
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* === Thank Popup === */
.thank-popup {
   position: fixed;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%) translateY(60px);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   display: flex;
   align-items: center;
   background: rgb(232, 240, 253, 0.8);
   backdrop-filter: blur(6px);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-xl);
   border-top: 1px solid var(--clr-white);
   border-bottom: 1px solid var(--clr-offwhite);
   border-left: 1px solid var(--clr-white);
   border-right: 1px solid var(--clr-offwhite);
   box-shadow: var(--shadow-lg);
   padding: 1rem 1.5rem;
   gap: 0.75rem;
   z-index: 9999;
   transition: opacity 400ms ease, transform 400ms ease;
}

.thank-popup.is-visible {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
   pointer-events: auto;
}

.thank-popup.is-hiding {
   opacity: 0;
   visibility: visible;
   transform: translateX(-50%) translateY(20px);
   pointer-events: none;
}

.thank-popup__inner {
   display: flex;
   gap: 1.5rem;
}

.thank-popup__logo {
   width: 28px;
   height: 28px;
}

.thank-popup__text {
   font-family: var(--ff-secondary);
   color: var(--clr-heading);
   font-weight: 500;
}

/* === Newsletter === */
.newsletter {
   padding: 4rem 0;
   background: var(--clr-offwhite);
}

.newsletter__box {
   display: grid;
   gap: 2rem;
   padding: 3rem;
   background: var(--clr-white);
   border-radius: var(--radius-2xl);
   box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
   .newsletter__box {
      grid-template-columns: 1fr 1fr;
   }
}

.newsletter__title {
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
}

.newsletter__form {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.newsletter__input-group {
   display: flex;
   gap: 0.5rem;
}

.newsletter__input-group input {
   flex: 1;
   padding: 0.875rem 1rem;
   font-size: 1rem;
   border: 2px solid var(--clr-border);
   border-radius: var(--radius-md);
}

/* === Footer === */
.footer {
   margin-top: auto;
   padding: 4rem 0 2rem;
   background: var(--clr-cta-dark);
   color: var(--clr-white);
}

.footer__inner {
   display: grid;
   gap: 3rem;
   margin-bottom: 3rem;
}

@media (min-width: 768px) {
   .footer__inner {
      grid-template-columns: 1fr auto;
   }
}

.footer__brand .nav__brand {
   margin-bottom: 1rem;
}

.footer__brand .nav__title {
   color: var(--clr-white);
}

.footer__tagline {
   color: rgba(255, 255, 255, 0.7);
   max-width: 280px;
}

.footer__links {
   display: flex;
   gap: 4rem;
}

.footer__col .heading-4 {
   color: var(--clr-white);
   font-size: 0.875rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 1rem;
}

.footer__col a {
   display: block;
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.9375rem;
   padding: 0.375rem 0;
   transition: color var(--transition-fast);
}

.footer__col a:hover {
   color: var(--clr-white);
}

.footer__bottom {
   padding-top: 2rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   text-align: center;
}

.footer__bottom p {
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.5);
}

.block-image {
   aspect-ratio: auto;
   object-fit: auto;
}

/* === Animations === */
@media (prefers-reduced-motion: no-preference) {
   .hero__content {
      opacity: 0;
      animation: heroFadeIn 0.6s ease 0.1s forwards;
   }

   .hero__visual {
      opacity: 0;
      animation: heroFadeIn 0.6s ease 0.3s forwards;
   }

   .step,
   .highlight-card,
   .pricing-card,
   .blogg-card {
      opacity: 0;
      transition: opacity 0.5s ease;
   }

   .step:nth-child(1),
   .highlight-card:nth-child(1),
   .pricing-card:nth-child(1),
   .blogg-card:nth-child(1) {
      transition-delay: 0.05s;
   }

   .step:nth-child(2),
   .highlight-card:nth-child(2),
   .pricing-card:nth-child(2),
   .blogg-card:nth-child(2) {
      transition-delay: 0.1s;
   }

   .step:nth-child(3),
   .highlight-card:nth-child(3),
   .pricing-card:nth-child(3),
   .blogg-card:nth-child(3) {
      transition-delay: 0.15s;
   }

   .highlight-card:nth-child(4) {
      transition-delay: 0.2s;
   }

   .step.is-visible,
   .highlight-card.is-visible,
   .pricing-card.is-visible,
   .blogg-card.is-visible {
      opacity: 1;
   }
}

@keyframes heroFadeIn {
   to {
      opacity: 1;
   }
}

/* === Blog Post Offset === */
.blog-page .blog-main {
   padding-top: var(--blog-nav-offset);
   padding-bottom: 0;
}

/* === Mobile Optimizations === */
@media (max-width: 768px) {
   .blogg-title {
      font-size: 1.75rem;
   }

   .blogg-content .lead {
      font-size: 1.125rem;
      margin-bottom: 1.5rem;
   }

   .blogg-content p,
   .blogg-content li {
      font-size: 1rem;
      margin-bottom: 1rem;
   }

   .blogg-content h2 {
      font-size: 1.5rem;
      margin-top: 2rem;
      margin-bottom: 0.875rem;
   }

   .blogg-content h3 {
      font-size: 1.25rem;
      margin-top: 1.75rem;
      margin-bottom: 0.75rem;
   }

   .blogg-cta {
      padding: 1.75rem 1.25rem;
      margin: 2rem 0;
   }

   .blogg-cta h3 {
      font-size: 1.375rem;
   }

   .related-articles {
      padding: 1.5rem;
      margin-top: 2rem;
   }
}

@media (max-width: 560px) {
   :root {
      --blog-nav-offset: 4rem;
   }

   .blogg-hero {
      margin-top: 14px;
   }

   .blogg-hero__img {
      border-radius: 14px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
   }

   .blogg-content .lead {
      margin: 14px 0 22px;
   }

   .blogg-content h2 {
      margin-top: 28px;
   }
}

@media (max-width: 480px) {
   .blogg-title {
      font-size: 1.5rem;
   }

   .blogg-content {
      padding: 0 0 1.5rem 0;
   }

   .blogg-category {
      font-size: 0.6875rem;
      padding: 0.375rem 0.75rem;
   }

   .blogg-meta {
      font-size: 0.8125rem;
   }

   .blogg-content .lead {
      font-size: 1.0625rem;
   }

   .blogg-content p,
   .blogg-content li {
      font-size: 1rem;
   }

   .blogg-content h2 {
      font-size: 1.375rem;
   }

   .blogg-content h3 {
      font-size: 1.125rem;
   }

   .blogg-cta {
      padding: 1.5rem 1rem;
   }

   .blogg-cta h3 {
      font-size: 1.25rem;
   }

   .related-articles {
      padding: 1.25rem;
   }
}

/* === Blog Read Progress (nav border-bottom) === */
.nav__read-progress {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;

   height: 2px;
   background: transparent;
   overflow: hidden;

   pointer-events: none;
}

.nav__read-progress-bar {
   display: block;
   width: 100%;
   height: 100%;

   background: var(--clr-cta);
   transform: scaleX(0);
   transform-origin: left;

   transition: transform var(--transition-fast);
}

/* ============================================================================
   Cookie Consent (Quanti landing) — WHITE MODE ONLY
   ============================================================================ */

.cookie-consent {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;

   z-index: 10000;

   transform: translateY(110%);
   opacity: 0;
   pointer-events: none;

   transition:
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 280ms ease;
}

.cookie-consent.is-visible {
   transform: translateY(0);
   opacity: 1;
   pointer-events: auto;
}

.cookie-consent.is-hiding {
   transform: translateY(110%);
   opacity: 0;
   pointer-events: none;
}

.cookie-consent__inner {
   max-width: 84ch;
   margin: 0 auto;

   background: var(--filter-transp-bg);
   border: 1px solid var(--clr-border);
   border-bottom: 0;
   border-top-left-radius: var(--radius-2xl);
   border-top-right-radius: var(--radius-2xl);

   box-shadow: var(--shadow-lg);
   overflow: hidden;

   backdrop-filter: blur(8px);
}

@supports not (backdrop-filter: blur(8px)) {
   .cookie-consent__inner {
      background: rgba(250, 250, 250, 0.98);
   }
}

/* Layout */
.cookie-consent__content {
   padding: 1.125rem 1.125rem 1rem;
}

.cookie-consent__text {
   display: flex;
   flex-direction: column;
   gap: 0.875rem;
}

/* "info-box" block i din markup */
.cookie-consent .info-box {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 0.875rem;
   align-items: start;
}

.cookie-consent .fixed-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   flex: 0 0 auto;

   background: transparent;
   border: 0;
   border-radius: 0;

   color: var(--clr-black);
}

.cookie-consent .fixed-icon svg {
   width: 22px;
   height: 22px;
}

/* Typografi */
.cookie-consent .heading-3 {
   display: inline-block;
   font-family: var(--ff-primary);
   font-weight: 650;
   color: var(--clr-heading);
   line-height: 1.2;
   margin-bottom: 0.25rem;
}

.cookie-consent__description {
   font-size: 0.9375rem;
   line-height: 1.55;
   color: var(--clr-muted);
   margin: 0;
}

.cookie-consent__description strong {
   color: var(--clr-heading);
   font-weight: 650;
}

/* Close button (din markup har btn--icon) */
.cookie-consent .btn--icon {
   appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;

   width: 40px;
   height: 40px;
   padding: 0;
   border-radius: var(--radius-md);

   background: transparent;
   border: 1px solid transparent;
   cursor: pointer;

   transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.cookie-consent .btn--icon:hover {
   background: var(--clr-border-light);
   border-color: var(--clr-border);
   transform: translateY(-1px);
}

.cookie-consent .btn--icon:active {
   transform: translateY(0);
}

.cookie-consent .btn--icon .icon {
   width: 18px;
   height: 18px;
}

/* Options panel */
.cookie-consent__options {
   margin-top: 0.25rem;

   background: var(--msg-transp-bg);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-xl);

   padding: 0.875rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.cookie-consent__option {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 0.75rem;
   align-items: center;
}

.cookie-consent__option-text {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
}

.cookie-consent__option-title {
   font-size: 0.9375rem;
   font-weight: 600;
   color: var(--clr-heading);
   line-height: 1.25;
}

.cookie-consent__option-desc {
   font-size: 0.8125rem;
   color: var(--clr-muted);
   line-height: 1.35;
}

.cookie-consent__option-required {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--clr-muted);
   background: var(--clr-white);
   border: 1px solid var(--clr-border-light);
   border-radius: 999px;
   padding: 0.25rem 0.5rem;
   white-space: nowrap;
}

/* Actions */
.cookie-consent__actions {
   display: flex;
   justify-content: flex-end;
   gap: 0.625rem;
   flex-wrap: wrap;
}

/* Gör knapparna lite tajtare i banner så de ser "landing" ut */
.cookie-consent__actions .btn {
   padding: 0.65rem 1.1rem;
   border-radius: var(--radius-md);
}

/* ============================================================================
   Toggle (scopad till cookie-consent) — använder landing tokens
   ============================================================================ */

.cookie-consent .toggle {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
}

.cookie-consent .toggle__input {
   position: absolute;
   opacity: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.cookie-consent .toggle__track {
   position: relative;
   width: 46px;
   height: 28px;

   background: var(--clr-border-light);
   border: 1px solid var(--clr-border);
   border-radius: 999px;

   transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cookie-consent .toggle__thumb {
   position: absolute;
   top: 2px;
   left: 2px;

   width: 24px;
   height: 24px;

   background: var(--clr-white);
   border: 1px solid var(--clr-border-light);
   border-radius: 999px;

   box-shadow: var(--shadow-sm);

   transition: transform var(--transition-fast);
}

.cookie-consent .toggle__input:checked+.toggle__track {
   background: var(--clr-cta-light);
   border-color: rgba(4, 92, 234, 0.35);
}

.cookie-consent .toggle__input:checked+.toggle__track .toggle__thumb {
   transform: translateX(18px);
   border-color: rgba(4, 92, 234, 0.25);
}

.cookie-consent .toggle__input:focus-visible+.toggle__track {
   outline: 3px solid var(--clr-cta);
   outline-offset: 2px;
}

.cookie-consent .toggle--disabled {
   opacity: 0.65;
   cursor: not-allowed;
}

.cookie-consent .toggle--disabled .toggle__track {
   background: var(--clr-border-light);
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 860px) {
   .cookie-consent {
      padding: 0;
   }

   .cookie-consent__content {
      padding: 1rem 1rem 0.875rem;
   }

   .cookie-consent .info-box {
      grid-template-columns: auto 1fr 32px;
      grid-template-areas:
         "icon title"
         "icon text"
         "close close";
   }

   /* Vi kan inte ändra markup, men vi kan göra close-knappen fullbredd och högerställd */
   .cookie-consent .fixed-icon.padding-top {
      justify-content: flex-end;
      background: transparent;
      border: 0;
      width: 100%;
      height: auto;
   }

   .cookie-consent__actions {
      flex-direction: column-reverse;
      align-items: stretch;
   }

   .cookie-consent__actions .btn {
      width: 100%;
      justify-content: center;
   }

   .cookie-consent__option {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      align-items: start;
   }

   .cookie-consent__option-required {
      grid-column: 2 / -1;
      justify-self: start;
      margin-top: 0.25rem;
   }
}

@media (prefers-reduced-motion: reduce) {
   .cookie-consent {
      transition: opacity 200ms ease;
      transform: none;
   }

   .cookie-consent.is-visible {
      opacity: 1;
   }

   .cookie-consent.is-hiding {
      opacity: 0;
   }

   .cookie-consent .toggle__thumb {
      transition: none;
   }
}


@media (prefers-reduced-motion: reduce) {
   .nav__read-progress-bar {
      transition: none;
   }
}


/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }

   .hero__float {
      animation: none;
   }

   .pulse {
      animation: none;
   }

   .hero__scroll {
      animation: none;
   }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
   :root {
      --clr-cta: #0033cc;
      --clr-muted: #333;
   }

   .btn--primary {
      border: 2px solid var(--clr-cta-dark);
   }

   .btn--outline {
      border-width: 3px;
   }
}

/* === Print Styles === */
@media print {

   .nav,
   .hero__scroll,
   .hero__float,
   .cta-section,
   .contact__form-wrapper,
   .footer {
      display: none;
   }

   body {
      font-size: 12pt;
      color: #000;
      background: #fff;
   }

   a {
      text-decoration: underline;
   }

   .pricing-card {
      break-inside: avoid;
   }
}


/* ============================================
   Blogg (list-sida): Mobil 1-kolumn, ingen swipe
   Thumbnail till vänster (bild), titel + datum, liten pil
   Kräver: .blogg-preview--list på <section class="blogg-preview ...">
   ============================================ */
@media (max-width: 640px) {
   .blogg-preview.blogg-preview--list {
      padding-top: 1.5rem;
   }

   /* Slå av "full-bleed swipe"-känslan för just list-sidan */
   .blogg-preview.blogg-preview--list .container {
      padding-inline: 1.5rem;
   }

   /* Ingen horisontell karusell här */
   .blogg-preview.blogg-preview--list #blogg-preview.blogg-preview__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;

      overflow: visible;
      padding: 0;

      scroll-snap-type: none;
      scroll-padding-inline: 0;

      cursor: auto;
      -webkit-overflow-scrolling: auto;
      overscroll-behavior-x: auto;
      touch-action: auto;
   }

   /* Neutralisera karusell-children om de får flex/height från andra regler */
   .blogg-preview.blogg-preview--list #blogg-preview.blogg-preview__grid>.blogg-article {
      flex: initial;
      height: auto;
      scroll-snap-align: none;
      scroll-snap-stop: normal;
      margin: 0;

      border-radius: var(--radius-md);
   }

   /* Rad-layout i kortet */
   .blogg-preview.blogg-preview--list .blogg-article__link {
      display: grid;
      grid-template-columns: 52px 1fr auto;
      /* thumbnail | text | pil */
      gap: 0.75rem;
      align-items: center;

      padding-block: 0;
      padding-inline: 0 1rem;
      text-decoration: none;
   }

   /* Thumbnail: liten bild till vänster (ingen “hero-bild”) */
   .blogg-preview.blogg-preview--list .blogg-article__image {
      width: 64px;
      height: 64px;
      aspect-ratio: auto;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--clr-border-light);
   }

   .blogg-preview.blogg-preview--list .blogg-article__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: none;
   }

   /* Kompakt textdel */
   .blogg-preview.blogg-preview--list .blogg-article__content {
      padding-block: 0;
      padding-inline: 0.75rem 0;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
   }

   /* Mindre titel */
   .blogg-preview.blogg-preview--list .blogg-article__title {
      margin: 0;
      font-size: 0.95rem;
      line-height: 1.25;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      /* ingen ellipsis */

      --title-fade: 2.75em;

      /* horisontell fade (samma teknik som excerpt, fast åt höger) */
      mask-image: linear-gradient(to right,
            #000 0,
            #000 calc(100% - var(--title-fade)),
            transparent 100%);
      -webkit-mask-image: linear-gradient(to right,
            #000 0,
            #000 calc(100% - var(--title-fade)),
            transparent 100%);
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-size: 100% 100%;
      -webkit-mask-size: 100% 100%;
   }

   /* Visa datum (men göm kategori + excerpt + readmore) */
   .blogg-preview.blogg-preview--list .blogg-article__meta {
      margin: 0;
      justify-content: flex-start;
   }

   .blogg-preview.blogg-preview--list .blogg-article__category,
   .blogg-preview.blogg-preview--list .blogg-article__excerpt,
   .blogg-preview.blogg-preview--list .blogg-article__readmore {
      display: none;
   }

   .blogg-preview.blogg-preview--list .blogg-article__date {
      font-size: 0.8125rem;
      color: var(--clr-muted);
   }

   /* Liten pil till höger */
   .blogg-preview.blogg-preview--list .blogg-article__link::after {
      content: "→";
      font-size: 1rem;
      line-height: 1;
      color: var(--clr-muted);
      opacity: 0.9;
      margin-left: 0.25rem;
   }

   /* Om du hann lägga in mina pseudo-ikoner tidigare: stäng av dem här */
   .blogg-preview.blogg-preview--list .blogg-article__content::before,
   .blogg-preview.blogg-preview--list .blogg-article__content::after {
      content: none !important;
   }

   /* Subtil touch feedback */
   .blogg-preview.blogg-preview--list .blogg-article__link:active {
      background: var(--clr-cta-light);
   }
}