/* Mössverket – shared stylesheet.
   Visual language: the Oct 2026 v2 redesign (design project "MV"), which keeps
   the original 2026-09-21 palette but rebuilds the type, shape and component
   layer: Bricolage Grotesque display + DM Sans body, pill controls, 20/28/36px
   card radii, sky-50/100 tints, layered soft shadows and the cockade motif.
   Fonts are self-hosted (assets/fonts) – the CSP is font-src 'self', so no
   Google Fonts request is allowed at runtime. */


:root {
  /* palette – kept from the original design */
  --bg: #f8fdff;
  --ink: #1f1f23;
  --ink-2: #2c2c33;
  --body-ink: #1e1e1e;
  --dim: #5b6672;
  --white: #ffffff;
  /* white on --red is 3.98:1 – fails AA for normal-size labels. --red-strong
     (4.75:1) carries text under the large-text threshold; --red stays on
     large-text and purely decorative fills. */
  --red: #dd4e4e;
  --red-strong: #d13c3c;
  --red-50: #fdf0f0;
  /* --sky is 1.9:1 on white – decorative/dark-ground only. --sky-ink is the
     text-safe twin (4.7:1) for focus rings and small sky text. */
  --sky: #73c5f5;
  --sky-ink: #2578b2;
  --sky-50: #eef8fe;
  --sky-100: #dcf0fc;
  --sky-200: #bfe4fa;
  --line: rgba(31, 31, 35, 0.12);
  --line-strong: rgba(31, 31, 35, 0.22);
  --line-soft: rgba(31, 31, 35, 0.07);
  --line-solid: #e3e8ec;
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --success: #2e7d43;
  --danger: #b3402f;
  --success-on-dark: #7ddc9a;
  --danger-on-dark: #ff9d9d;

  /* semantic surfaces + text */
  --surface-page: var(--bg);
  --surface-card: var(--white);
  --surface-tint: var(--sky-50);
  --surface-inverse: var(--ink);
  --text-strong: var(--ink);
  --text-body: var(--body-ink);
  --text-muted: var(--dim);
  --text-on-inverse: var(--white);
  --text-on-inverse-muted: rgba(248, 253, 255, 0.72);
  --action: var(--red-strong);
  --action-large: var(--red);
  --focus: var(--sky-ink);

  /* type */
  --font-display: 'Bricolage Grotesque', 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
  --font-sans: 'DM Sans', -apple-system, Roboto, Helvetica, 'Noto Sans SC', sans-serif;
  --font-script: Niconne, -apple-system, Roboto, Helvetica, sans-serif;
  --fs-mega: clamp(3rem, 7.4vw, 6.6rem);
  --fs-h1: clamp(2.5rem, 5.2vw, 4.6rem);
  --fs-h2: clamp(2rem, 3.9vw, 3.4rem);
  --fs-h3: 1.45rem;
  --fs-lead: clamp(1.08rem, 1.5vw, 1.3rem);
  --fs-card-title: 1.3rem;
  --fs-card-body: 0.98rem;
  --fs-meta: 0.85rem;
  --fs-eyebrow: 0.78rem;
  --tracking-display: -0.035em;
  --tracking-eyebrow: 0.14em;
  --lh-display: 0.98;

  /* shape */
  --radius-card: 28px;
  --radius-card-sm: 20px;
  --radius-btn: 999px;
  --radius-input: 999px;
  --radius-pill: 999px;
  --radius-chip: 999px;
  --radius-media: 28px;
  --radius-panel: 36px;

  /* shadows */
  --shadow-card: 0 1px 2px rgba(31, 31, 35, 0.06), 0 10px 28px -10px rgba(31, 31, 35, 0.14);
  --shadow-lift: 0 2px 4px rgba(31, 31, 35, 0.06), 0 22px 44px -14px rgba(31, 31, 35, 0.24);
  --shadow-btn: 0 8px 18px -8px rgba(209, 60, 60, 0.6);
  --shadow-float: 0 18px 50px -12px rgba(31, 31, 35, 0.35);
  --shadow-head: 0 1px 2px rgba(31, 31, 35, 0.04), 0 10px 24px -18px rgba(31, 31, 35, 0.3);

  /* layout + motion */
  --maxw: 84rem;
  --readw: 46rem;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(3.25rem, 9vw, 8rem);
  --gap-cards: clamp(1rem, 2vw, 1.5rem);
  --ease-press: 0.12s ease;
  --ease-fast: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--body-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}

a { color: var(--ink); }
a:hover { color: var(--red-strong); } /* hover is text: 4.5:1 */

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { flex: 1; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* a class-level display (grid/flex) outranks the UA [hidden] rule */
[hidden] { display: none !important; }

.hp {
  position: absolute;
  top: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1rem;
  z-index: 30;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { top: 0; }

/* ---------- shared type atoms ---------- */

.eyebrow,
.section-head .eyebrow,
.card .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--red-strong);
}
.eyebrow::before,
.section-head .eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.card .badge { display: block; margin-bottom: 0.9rem; }
.card .badge::before { display: none; }

/* ---------- announcement bar ---------- */

.announce {
  background: var(--ink);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0.6rem var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.announce span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.announce span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sky);
  flex: none;
}
.announce span:nth-child(even)::before { background: var(--red); }
@media (max-width: 760px) {
  .announce { font-size: 0.78rem; }
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248, 253, 255, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-head .wrap {
  max-width: var(--maxw);
  display: grid;
  /* the design's columns: the side tracks never shrink below their content
     (a bare 1fr lets the nowrap nav spill over the centred brand) */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Every header item is pinned to row 1. The grid's *sparse* auto-placement
   only moves the cursor forward: .brand (col 2) is first in the DOM, so by
   the time .site-nav (col 1) is placed the cursor already sits past col 1 and
   the nav is pushed to a second row — the brand then floats alone on row 1
   and the bar doubles in height (measured 136px at 1440px wide). Declaring
   the row explicitly is what keeps this a single bar. */
.site-head .wrap > .brand,
.site-head .wrap > .site-nav,
.site-head .wrap > .head-tools,
.site-head .wrap > .nav-toggle { grid-row: 1; }

.brand {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  /* the design's lockup is the seal + the wordmark set in the display face
     (Bricolage 800), single colour — NOT the Niconne script. */
  color: var(--ink);
}
/* the design's lockup ratio is fixed: word = 0.6 × seal (Logo.jsx size 46,
   38 on the mobile bar), gap = 0.28 × seal */
.brand-seal { width: 2.875rem; height: 2.875rem; flex: none; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.725rem;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.site-nav {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 0;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  white-space: nowrap;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.site-nav a:hover { color: var(--ink); background: var(--sky-50); }
.site-nav a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sky-ink);
}

.site-nav a[aria-current="page"] {
  color: var(--white);
  background: var(--ink);
}

/* the "Designa nu" pill lives only inside the mobile menu (the desktop bar
   already has .head-cta); hide it above the burger breakpoint */
.site-nav .nav-cta { display: none; }

/* Mina mössor + Kundservice (injected by site.js) are rows of the opened
   mobile menu only — the desktop nav is the design's four items */
.site-nav a.mm-extra { display: none; }

.head-tools {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.head-tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
}
.head-tools a:hover { color: var(--ink); }
.head-tools svg { display: block; }

/* round hairline icon buttons (account, cart) */
.head-tools .icon-btn {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow var(--ease-fast), background var(--ease-fast);
}
.head-tools .icon-btn:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--sky-50); }
.head-tools .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sky-ink); }

/* my-hats account chip: quiet "Logga in" pill when signed out, first name +
   Logga ut when signed in (injected by site.js; markup is per-page static) */
.acct-chip { display: inline-flex; align-items: center; gap: 0.5rem; }
.acct-chip .acct-login {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45em 0.95em;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.acct-chip .acct-login:hover { color: var(--ink); border-color: var(--line-strong); }
.acct-chip .acct-name { font-weight: 700; font-size: 0.9rem; }
.acct-chip .acct-out {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--dim);
  cursor: pointer;
  text-decoration: underline;
}
.acct-chip .acct-out:hover { color: var(--ink); }
@media (max-width: 1200px) {
  /* design compact bar: smaller nav type and tighter pills so the four
     labels + tools fit between the header switch and 1200px */
  .site-head .wrap { gap: 1rem; }
  .head-tools { gap: 0.45rem; }
  .site-nav { gap: 0.1rem; font-size: 0.9rem; }
  .site-nav a { padding: 0.5rem 0.7rem; }
  .head-cta { padding: 0.7rem 1rem; }
}

/* the account chip is an addition to the design's tools row (the design has
   none), so it is the first thing to yield: it shows on wide desktops only.
   Below 1280 the design's own picker + saved pill + cart + CTA need the
   room — measured in en, the widest pack, the bar overflows and clips the
   wordmark if the chip stays. */
@media (max-width: 1280px) {
  .acct-chip { display: none; }
}

@media (max-width: 1080px) {
  /* mobile header: brand left, saved + cart icons and burger right on row 1;
     the nav drops to row 2 as a full-width panel when opened. The design
     says w<1000, but the real compact bar (4 nav labels + full lockup +
     picker/CTA in Bricolage) needs ~1032px — below ~1080 it clipped the
     wordmark, so the switch rides at 1080 (measured, not guessed). Between
     the switch and 1200 the compact desktop bar squeezes: saved pill
     collapses to its icon at 1200, nav/tools gaps tighten, chip hides. */
  .site-head .wrap { grid-template-columns: auto 1fr auto; gap: 0.75rem; }
  .brand { grid-column: 1; justify-self: start; gap: 0.66rem; }
  .brand-seal { width: 2.375rem; height: 2.375rem; }
  .brand-word { font-size: 1.425rem; }
  /* Both tools and the burger are pinned to row 1. Without the explicit
     grid-row the *sparse* auto-placement puts .head-tools (col 2) on row 2:
     .nav-toggle (col 3) is earlier in the DOM, so the cursor sits past col 3
     and the next item wraps — the cart then renders a row below the burger. */
  .head-tools { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  /* .site-head .wrap beats the base .nav-toggle rule further down the file
     (this block sits above it in source order; equal specificity would let
     the base display:none win and the burger would vanish) */
  .site-head .wrap > .nav-toggle { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; }
  .site-nav {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 0 0.6rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.6rem;
  }
  /* The base pin above (`.site-head .wrap > .site-nav` -> grid-row 1, spec
     0,3,0) out-specifies a bare `.site-nav { grid-row: 2 }` (0,1,0), so the
     opened panel stayed in row 1 spanning every column: its full-height box
     then painted OVER the brand, cart and burger, leaving the bar unusable.
     Matching the base selector here and declaring it later is what wins. */
  .site-head .wrap > .site-nav { grid-row: 2; }
  /* the design's menu rows are display-face headlines with a trailing arrow */
  .site-nav a {
    border-radius: 0;
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.025em;
  }
  .site-nav a:not(.nav-cta) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .site-nav a:not(.nav-cta)::after {
    content: "→";
    font-size: 1.1rem;
  }
  .site-nav a.mm-extra { display: flex; }
  .site-nav a[aria-current="page"] { background: transparent; color: var(--red-strong); }
  /* the design's menu ends with a full-width red "Designa nu" pill */
  .site-nav .nav-cta {
    display: block;
    margin-top: 1rem;
    text-align: center;
    background: var(--red-strong);
    color: var(--white);
    border-radius: var(--radius-pill);
    padding: 1rem;
    font-weight: 700;
    box-shadow: var(--shadow-btn);
    border-bottom: 0;
  }
  .site-nav .nav-cta:hover { background: var(--red-strong); color: var(--white); filter: brightness(1.07); }
  .site-nav.open { display: flex; }
  @media (prefers-reduced-motion: no-preference) {
    .site-nav {
      transition:
        opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
        display 160ms allow-discrete;
    }
    @starting-style { .site-nav.open { opacity: 0; transform: translateY(-6px); } }
  }
  .head-cta,
  .head-tools a.head-cta { display: none; }
  /* the design's mobile bar is saved + cart + burger only: the account chip
     and the language picker leave the row (picker relocated by site.js into
     the opened menu). The saved pill keeps its .icon-btn class, so exclude
     it from the generic icon-button hide. */
  .acct-chip { display: none; }
  .head-tools > .icon-btn:not(.cart-link):not(.saved-link) { display: none; }
  .site-nav .lang-wrap { position: static; padding: 0.6rem 0.1rem 0.2rem; }
  .nav-lang-label {
    padding: 1.1rem 0.1rem 0.7rem;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--dim);
  }
}

/* saved-cart count on the header cart icon, all pages (same badge as /designa/) */
.head-tools .cart-link { position: relative; width: 44px; height: 44px; }
.head-tools .cart-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--red-strong);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  box-shadow: 0 0 0 2px var(--bg);
}

/* the "Mina mössor" pill: icon + label + saved count wide, icon-only with an
   ink badge below 1200px (design SiteHeader compact). Base geometry comes
   from .icon-btn; here it stretches into the labelled pill. */
.head-tools .saved-link {
  position: relative;
  gap: 0.45rem;
  width: auto;
  padding: 0 0.95rem 0 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.head-tools .saved-count { font-size: 0.75rem; font-weight: 700; color: var(--dim); }
/* A count arrives after /api/designs answers. Until then it shimmers in the
   exact box the number will occupy, so the tools row never jumps and the
   badge never flashes an empty red dot. */
.head-tools .saved-count.is-pending,
.head-tools .cart-count.is-pending {
  display: inline-block;
  min-width: 1.1rem;
  min-height: 1rem;
  border-radius: var(--radius-pill);
  color: transparent;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--sky-50) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
}
.head-tools .cart-count.is-pending { background: linear-gradient(90deg, rgba(209,60,60,.28) 25%, rgba(209,60,60,.12) 37%, rgba(209,60,60,.28) 63%); background-size: 400% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .head-tools .saved-count.is-pending,
  .head-tools .cart-count.is-pending { animation: mv-shimmer 1.3s ease-in-out infinite; }
}
.head-tools .saved-count.is-pending[hidden],
.head-tools .cart-count.is-pending[hidden] { display: none; }
.head-tools .saved-link[aria-current="page"] { background: var(--ink); color: var(--white); }
.head-tools .saved-link[aria-current="page"] .saved-count { color: var(--sky); }
@media (max-width: 1200px) {
  .head-tools { gap: 0.45rem; }
  .head-tools .saved-link { width: 44px; padding: 0; gap: 0; }
  .head-tools .saved-label { display: none; }
  .head-tools .saved-count {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.25rem;
    box-shadow: 0 0 0 2px var(--bg);
  }
}

/* the red "Designa nu" pill, far right */
.head-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--red-strong);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-btn);
  transition: transform var(--ease-press), filter var(--ease-fast);
}
.head-cta:hover { color: var(--white); filter: brightness(1.07); }
.head-cta:active { transform: scale(0.97); }
.head-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sky-ink); }

.nav-toggle {
  display: none;
  flex: none;
  grid-column: 3;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  padding: 0.35rem;
  cursor: pointer;
}
.nav-toggle:hover {
  color: var(--ink);
  background: none;
  box-shadow: none;
  filter: none;
}
/* the old rule put :focus-visible in a reset – focus had NO indicator at all */
.nav-toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ---------- hero (split: copy left, arched photo right) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

.hero .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.hero-eyebrow b {
  background: var(--sky);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-mega);
  line-height: var(--lh-display);
  letter-spacing: -0.045em;
}
.hero h1 .hl { color: var(--red); }

.hero .hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--dim);
  max-width: 32rem;
  margin: 1.6rem 0 2.2rem;
}

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* the "Köp ihop" group-price note under the hero headline (GroupPriceNote) —
   white pill with a red ring, red chip, per-cap price from the group ladder */
.group-note {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  max-width: 100%;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--red);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem 0.45rem 0.45rem;
}
.group-note-chip {
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}
.group-note-txt { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.group-note-txt b { color: var(--red-strong); font-weight: 800; }
.group-note[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .group-note:hover { color: var(--ink); filter: none; transform: none; background: var(--sky-50); }
  .group-note:hover .btn-arrow { transform: translateX(3px); }
}
@media (max-width: 760px) {
  .group-note { margin-top: 1rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; gap: 0.55rem; }
  .group-note-chip { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
  .group-note-txt { font-size: 0.88rem; }
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 2.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.hero-points li { display: flex; align-items: center; gap: 0.5rem; }
.hero-points li::before {
  content: "✓";
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--sky-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  flex: none;
}

.hero-media { position: relative; }
.hero-media::before {
  /* the sky ground behind the arched photo */
  content: "";
  position: absolute;
  inset: -8% -20% -8% 12%;
  background: var(--sky-100);
  border-radius: 50% 50% var(--radius-panel) var(--radius-panel);
  z-index: 0;
}
.hero img.hero-bg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  /* height:auto is REQUIRED: the <img> carries a width/height attribute pair
     (1400x728) whose presentational hint sets height:728px, and aspect-ratio
     only applies when the height is auto. Without this the arch renders far
     taller than the design's 5:6 (and 16:10 on mobile). */
  height: auto;
  /* 4:3, not the old 5:6 portrait arch: the hero photo is a wide two-cap
     banner (1400x728) — a portrait frame cover-zooms into ~30% of its width
     and renders it as an unreadable white blur. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 22% 45%;
  /* arched top, echoing the crown of a cap */
  border-radius: 50% 50% var(--radius-media) var(--radius-media) / 38% 38% var(--radius-media) var(--radius-media);
  box-shadow: var(--shadow-float);
}

/* the cockade motif – a red disc ringed in white and sky */
.cockade {
  position: absolute;
  z-index: 2;
  /* board Hero: the badge cockade hangs bottom-left of the photo (left
     -1.5rem, bottom 12%). It briefly lived on the right when an older 4:3
     crop put the embroidery at the left edge — the current landscape photo
     doesn't, so the board position is back. */
  left: -1.5rem;
  right: auto;
  bottom: 12%;
  width: 136px; height: 136px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 7px var(--white), 0 0 0 14px var(--sky), var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-8deg);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: 2rem;
}

/* ---------- buttons ---------- */

button, .btn {
  /* --red-strong: white labels at normal size need 4.5:1 (--red is 3.98) */
  background: var(--red-strong);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-btn);
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 0.9rem 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: transform var(--ease-press), filter var(--ease-fast), box-shadow var(--ease-fast), background var(--ease-fast);
}

/* brightness hover is pointer-only feedback – on touch it sticks after a tap */
@media (hover: hover) {
  button:hover, .btn:hover { filter: brightness(1.08); color: var(--white); }
  button:hover, .btn:hover { transform: translateY(-1px); }
}
button:active, .btn:active { transform: scale(0.97); }
button:disabled { opacity: 0.6; cursor: wait; }
button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sky-ink);   /* solid: the alpha ring was 1.6:1 */
}

.btn-arrow {
  display: inline-block;
  transition: transform var(--ease-fast);
}
@media (hover: hover) {
  .btn:hover .btn-arrow { transform: translateX(3px); }
}

.btn-lg {
  /* large text passes AA at 3:1, so the design's --red stays here */
  background: var(--red);
  font-size: 1.15rem;
  padding: 1.1rem 2rem;
}

.btn-ink { background: var(--ink); box-shadow: none; }
.btn-light { background: var(--white); color: var(--ink); box-shadow: none; }
.btn-light:hover { color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
@media (hover: hover) {
  .btn-ghost:hover { color: var(--ink); filter: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
}

.btn-ghost-dark {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
@media (hover: hover) {
  .btn-ghost-dark:hover { color: var(--white); filter: none; box-shadow: inset 0 0 0 1.5px var(--white); }
}

/* ---------- waitlist form ---------- */

form.waitlist {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 30rem;
  flex-wrap: wrap;
}
form.waitlist input[type="email"] {
  flex: 1;
  min-width: 12rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  color: var(--ink);
  font: inherit;
  padding: 0.85rem 1.15rem;
  outline: none;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
form.waitlist input[type="email"]:focus {
  border-color: var(--sky-ink);
  box-shadow: 0 0 0 3px var(--sky-ink);
}
form.waitlist input::placeholder { color: var(--dim); }

#msg { min-height: 1.4em; font-size: 0.92rem; margin-top: 0.7rem; }
#msg.ok { color: var(--success-on-dark); }
#msg.err { color: var(--danger-on-dark); }

/* on a light ground the status colours need the light-ground pair */
section #msg.ok { color: var(--success); }
section #msg.err { color: var(--danger); }

/* ---------- sections ---------- */

/* #configurator is a full-height app shell (designa.css gives it 100dvh and
   its own top bar), so neither the section band nor the subpage seam may
   apply: either one pads the top and pushes the shell past the viewport,
   leaving dead space above the bar. */
section:not(#configurator) { padding: var(--section-y) 0 0; }

/* one consistent intro-to-content seam on subpages (the start page's hero
   keeps its own rhythm); replaces three diverging per-page patches.
   #configurator is excluded too: it is a full-height app shell
   (designa.css gives it 100dvh and its own .cfg-bar), so ANY top padding —
   this seam or the section band above — pushes it past the viewport and
   leaves dead space above its bar. */
main > section:first-of-type:not(.hero):not(#configurator) { padding-top: clamp(3rem, 7vw, 6rem); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head > div { max-width: 44rem; }

.section-head h2 { font-size: var(--fs-h2); }
.section-head h1 { font-size: var(--fs-h1); }

.section-head p {
  color: var(--dim);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 38rem;
  margin-top: 1.1rem;
}

.section-head .eyebrow { margin-bottom: 1rem; }

.section-head-centre {
  display: block;
  text-align: center;
}
.section-head-centre > div { max-width: 50rem; margin: 0 auto; }
.section-head-centre p { margin-left: auto; margin-right: auto; }

.lede {
  font-size: 1.06rem;
  color: var(--dim);
  max-width: 44rem;
}

/* ---------- product cards ---------- */

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap-cards);
}

.product {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}

/* touch taps fire :hover – the lift must only run for real pointers */
@media (hover: hover) and (pointer: fine) {
  .product:hover {
    transform: translateY(-4px);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
  }
}

.product-media {
  margin: 10px;
  border-radius: calc(var(--radius-card) - 8px);
  background: var(--sky-50);
  aspect-ratio: 401 / 413;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .product:hover .product-media img { transform: scale(1.05); }
}

/* the featured (middle) card is the ink one */
.product[data-featured] {
  background: var(--ink);
  color: var(--white);
}
.product[data-featured] .product-media { background: var(--ink-2); }
.product[data-featured] .product-name { color: var(--white); }
.product[data-featured] .product-desc { color: var(--text-on-inverse-muted); }
.product[data-featured] .product-price,
.product[data-featured] .product-cta { color: var(--white); }
.product[data-featured] .product-index { color: var(--sky); }
.product[data-featured] .product-foot { border-top-color: var(--line-on-dark); }

.product-body {
  padding: 0.9rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.product-index {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--red-strong);
  text-transform: uppercase;
}

.product-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.product-desc { color: var(--dim); font-size: var(--fs-card-body); flex: 1; }

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.product-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  min-height: 1.5em;   /* reserve the slot so a failed price fetch can't collapse the card */
}
/* board cards close with a text CTA, not a price (price||cta in ProductCard) */
.product-cta {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
/* honest empty state: no price = say so, never a silent blank */
.product-price[data-price-state="pending"]::after {
  content: "Pris – kommer snart";
  font-size: var(--fs-card-body);
  font-weight: 400;
  color: var(--dim);
}
.product-price .was {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--dim);
  text-decoration: line-through;
  margin-left: 0.5rem;
}

.product-arrow {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  font-size: 1.1rem;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.product[data-featured] .product-arrow { background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .product:hover .product-arrow { background: var(--red-strong); color: var(--white); }
}

/* ---------- generic cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--gap-cards);
}

.cards-stack { grid-template-columns: 1fr; }

.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card-sm);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 1.75rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}
.card--tint { background: var(--sky-50); box-shadow: none; }
.card--ink {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
}
.card--ink h3 { color: var(--white); }
.card--ink p, .card--ink .card-body { color: var(--text-on-inverse-muted); }
.card--ink .badge { color: var(--sky); }

@media (hover: hover) and (pointer: fine) {
  a.card:hover {
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
  a.card--ink:hover { color: var(--white); }
}

.card h3 {
  font-size: var(--fs-card-title);
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.card p, .card-body { color: var(--dim); font-size: var(--fs-card-body); }
/* declared after the generic rule on purpose: it would otherwise win the tie
   (same specificity, later in the file) and repaint ink-card bodies dim on ink */
.card--ink p, .card--ink .card-body { color: var(--text-on-inverse-muted); }

.card-arrow {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-size: 1.2rem;
  transition: transform var(--ease-fast), color var(--ease-fast);
}
@media (hover: hover) and (pointer: fine) {
  a.card:hover .card-arrow { transform: translate(3px, -3px); color: var(--red-strong); }
}

/* ---------- about-page blocks ---------- */

.band {
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
  min-height: clamp(24rem, 48vw, 38rem);
  display: flex;
  align-items: flex-end;
}
.band img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 31, 35, 0.75), rgba(31, 31, 35, 0) 60%);
}
.band h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  color: var(--white);
  font-size: var(--fs-mega);
  line-height: 0.95;
}
.band h1 .hl { color: var(--sky); }

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* the big lead paragraph on om-oss: display face, tight tracking */
.contact-lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.contact-lead span { color: var(--dim); }

.linkish {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5rem;
  white-space: normal;
}
.linkish:hover { text-decoration: underline; filter: none; transform: none; }

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.4rem, 2.4vw, 2rem);
}

.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--line-strong);
}
.step::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--red);
}
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--sky-ink);
  margin-bottom: 1rem;
}
.step h3 { font-size: var(--fs-card-title); margin-bottom: 0.5rem; }
.step p { color: var(--dim); font-size: var(--fs-card-body); }

/* dark ground variant (the ink panels) */
.steps--dark .step { border-top-color: var(--line-on-dark); }
.steps--dark .step-num { color: var(--sky); }
.steps--dark .step h3 { color: var(--white); }
.steps--dark .step p { color: var(--text-on-inverse-muted); }
/* the base `a { color: var(--ink) }` above paints inline links ink on this ink
   ground — the mailto link in step 1 was a blank gap in the sentence */
.steps--dark .step p a { color: var(--sky-200); }
.steps--dark .step p a:hover { color: var(--white); }

/* the ink panel that wraps dark step rows (studentmossa "så beställer du") */
.ink-panel {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-panel);
  padding: clamp(2rem, 5vw, 4.5rem);
}
.ink-panel .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ink-panel .section-head h2 { color: var(--white); }
.ink-panel .section-head p { color: var(--text-on-inverse-muted); }
.ink-panel .eyebrow { color: var(--sky); }
.ink-panel .section-head .eyebrow::before { background: var(--sky); }

/* ---------- definition / parts list ---------- */

.parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0;
}

.part {
  padding: 1.75rem 1.75rem 1.75rem 0;
  border-top: 1.5px solid var(--line-strong);
  margin-right: 1.5rem;
}
.part-num {
  font-weight: 800;
  color: var(--red-strong);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}
.part h3 { font-size: var(--fs-card-title); margin-bottom: 0.5rem; }
.part p { color: var(--dim); }

/* mobile-only pager variants (built by site.js; hidden at >760px) */
.anatomy-mobile, .parts-pager { display: none; }

/* ---------- anatomy panel (sky-50, split) ---------- */

.anatomy {
  background: var(--sky-50);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.anatomy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.anatomy-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  border: 0;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  white-space: normal;
  transition: background var(--ease-fast), box-shadow var(--ease-fast);
}
.anatomy-list button:hover { filter: none; transform: none; }
.anatomy-list button[aria-pressed="true"] {
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.anatomy-num {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: inset 0 0 0 1px var(--line);
}
.anatomy-list button[aria-pressed="true"] .anatomy-num {
  background: var(--red);
  color: var(--white);
  box-shadow: none;
}
.anatomy-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.anatomy-figure {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
.anatomy-media {
  position: relative;
  aspect-ratio: 1 / 0.8;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
}
.anatomy-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.anatomy-big-num {
  position: absolute;
  top: 0.75rem; right: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--sky);
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.6);
}
.anatomy-figure h3 { margin: 1rem 0 0.6rem; font-size: 2rem; }
.anatomy-figure p { margin: 0; color: var(--dim); font-size: 1.05rem; min-height: 4.8em; }

/* ---------- trust strip (pill row) ---------- */

.trust-strip {
  list-style: none;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.8rem 2rem;
  font-weight: 700;
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}
.trust-strip li { display: flex; align-items: center; gap: 0.55rem; }
.trust-strip li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

/* ---------- comparison table (studentmossa) ---------- */

.compare-wrap {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.compare th {
  text-align: center;
  padding: 1.4rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  width: 18%;
}
.compare th:first-child {
  text-align: left;
  width: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}
.compare th[data-featured] {
  background: var(--ink);
  color: var(--white);
}
.compare td {
  padding: 1rem 1.6rem;
  font-weight: 600;
}
.compare tr { border-top: 1px solid var(--line-soft); }
.compare td:not(:first-child) {
  text-align: center;
  padding: 1rem;
}
.compare td[data-featured] { background: var(--sky-50); }
.compare .mark {
  display: inline-flex;
  width: 28px; height: 28px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--sky-100);
  color: var(--sky-ink);
  font-weight: 800;
  font-size: 0.8rem;
}
.compare .mark--feat { background: var(--red); color: var(--white); }
.compare .no { color: var(--line-strong); }

/* ---------- two-column feature (om-oss) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature img {
  border-radius: var(--radius-media);
  width: 100%;
  max-width: 628px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  height: auto;
}
/* the group photo ships landscape (628x419) since the 2026-10 design refresh;
   the flag photo stays portrait */
.feature img.is-landscape { aspect-ratio: 628 / 419; }
.feature h2 { font-size: var(--fs-h2); margin-bottom: 0.9rem; }
.feature .hl { color: var(--sky-ink); }
.feature p { color: var(--dim); font-size: 1.08rem; }

/* the tilted cockade badge on the om-oss group photo – it overhangs the
   photo edge on desktop but must stay inside the viewport on narrow screens */
.feature-cockade {
  position: absolute;
  right: -1.5rem;
  top: 2rem;
  width: 118px; height: 118px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px var(--white), 0 0 0 12px var(--sky), var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(8deg);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: 1.3rem;
  padding: 0.4rem;
}
/* the badge overhangs the photo edge on desktop, but the photo column is
   only ~half the viewport in the two-column band, so -1.5rem of overhang
   there pushes past the viewport edge. Inside the viewport below 1100px, and
   pulled further in where the grid has stacked (its own ring + float shadow
   paint ~36px past the element box, which is what inflates scrollWidth). */
@media (max-width: 1100px) {
  .feature-cockade { right: 1rem; }
}
@media (max-width: 920px) {
  .feature-cockade { right: 2.25rem; }
}
@media (max-width: 620px) {
  .feature-cockade { right: 0.5rem; width: 96px; height: 96px; font-size: 1.05rem; }
}

/* numbered promise rows (om-oss "våra löften") */
.values { display: grid; }
.value {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1.5px solid var(--line-strong);
}
.value-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sky-ink);
}
.value h3 { font-size: var(--fs-card-title); margin-bottom: 0.4rem; }
.value p { color: var(--dim); }

/* big contact links (om-oss) */
.contact-links {
  display: grid;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
}
.contact-links a { color: var(--ink); text-decoration: none; }
.contact-links a:hover { color: var(--red-strong); }
.contact-links .sky { color: var(--sky-ink); }
/* the base button pill centers its label — the contact card stacks links
   flush-left like the board, so the chat button reads like its anchor twins */
.contact-links button.linkish { justify-content: flex-start; }

/* the oversized phone/email link inside a contact card */
.card .contact-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: -0.03em;
  margin-top: 0.4rem;
}
.card .contact-big a { color: var(--ink); text-decoration: none; }
.card .contact-big a:hover { color: var(--red-strong); }

/* "vill du ändra din order?" row under the contact cards */
.undo-row {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--white);
  font-weight: 600;
}

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

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.faq-nav a {
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;   /* ~44px touch target */
  background: var(--white);
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}
.faq-nav a:hover { border-color: var(--ink); background: var(--sky-50); color: var(--ink); }

.faq-search { max-width: 38rem; margin: 0 auto; }

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

.faq-search input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 0.9rem 1.4rem;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.faq-search input:focus {
  outline: none;
  border-color: var(--sky-ink);
  box-shadow: 0 0 0 3px var(--sky-ink);
}

.faq-search-status {
  color: var(--dim);
  font-size: var(--fs-meta);
  margin: 0.5rem 0 0 1.2rem;
  text-align: left;
}
.faq-search-status:empty { display: none; }

.faq-body {
  display: grid;
  grid-template-columns: minmax(15rem, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* while a search query is active the topic list is hidden – the answer
   column takes the full width instead of leaving an empty first track */
.faq-body:has(#faq-topics[hidden]) { grid-template-columns: 1fr; }

.faq-topics {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 0.35rem;
}
.faq-topics .faq-topics-label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.6rem 1rem;
}
.faq-topics a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.1rem;
  font-size: 0.98rem;
  font-weight: 600;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.faq-topics a span { font-size: 0.78rem; font-weight: 700; color: var(--red-strong); }
.faq-topics a:hover { background: var(--sky-50); color: var(--ink); }
.faq-topics a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sky-ink); }

.qa-kind {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* sky-ink, not --sky: this chip sits on white and --sky measures 1.9:1 –
     --sky is decorative/dark-ground only (AA requires 4.5:1 at this size). */
  color: var(--sky-ink);
  margin-right: 0.45rem;
}

.faq-group { margin-bottom: 2.4rem; scroll-margin-top: 1rem; }

.faq-group > h2 {
  font-size: var(--fs-h3);
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.faq-group > .group-note {
  color: var(--dim);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

details.qa {
  border-bottom: 1px solid var(--line);
}

details.qa summary {
  cursor: pointer;
  padding: 1.4rem 4rem 1.4rem 0;
  list-style: none;
  position: relative;
}

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

details.qa summary .qa-kind { display: block; margin-bottom: 0.35rem; }

details.qa summary .qa-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

details.qa summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: transform 0.25s var(--ease-out), background var(--ease-fast), color var(--ease-fast);
}

/* one animatable glyph: + rotates 45° into × – content swaps can't animate */
details.qa[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--red-strong);
  color: var(--white);
  box-shadow: none;
}

/* the answer reveals instead of snapping; browsers without
   ::details-content keep the instant open (progressive) */
:root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) {
  details.qa::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size 250ms cubic-bezier(0.23, 1, 0.32, 1),
      content-visibility 250ms allow-discrete;
  }
  details.qa[open]::details-content { block-size: auto; }
}

.answer {
  padding: 0 4rem 1.5rem 0;
  color: var(--dim);
  font-size: 1.02rem;
  max-width: 44rem;
}

.answer .pending {
  font-style: italic;
  display: block;
}

.answer p + p { margin-top: 0.7rem; }

/* ---------- notice ---------- */

.notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--sky-50);
  border-radius: var(--radius-card-sm);
  padding: 1.4rem 1.6rem;
  color: var(--dim);
  font-size: 0.98rem;
  max-width: var(--readw);
}
.notice::before {
  content: "i";
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  font-family: var(--font-display);
}
.notice strong { display: block; color: var(--ink); margin-bottom: 0.2rem; }

/* ---------- prose (legal pages) ---------- */

.prose { max-width: var(--readw); }
.prose h2 {
  font-size: var(--fs-h3);
  margin: 2rem 0 0.6rem;
}
.prose h3 {
  font-size: 1.05rem;
  margin: 1.4rem 0 0.4rem;
}
.prose p { margin-bottom: 0.8rem; color: var(--dim); }
.prose ul { margin: 0 0 0.9rem 1.2rem; color: var(--dim); }
.prose li { margin-bottom: 0.3rem; }

/* ---------- CTA band (ink panel + cockade rings) ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-panel);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
/* concentric cockade rings, top-right */
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-band::before {
  width: 420px; height: 420px;
  right: -120px; top: -160px;
  box-shadow: inset 0 0 0 38px rgba(115, 197, 245, 0.22);
}
.cta-band::after {
  width: 260px; height: 260px;
  right: -40px; top: -70px;
  box-shadow: inset 0 0 0 23px rgba(221, 78, 78, 0.5);
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2.5rem;
  align-items: end;
}
.cta-band h2 { color: var(--white); font-size: var(--fs-h2); }
.cta-band p {
  color: var(--text-on-inverse-muted);
  margin: 1.1rem 0 0;
  max-width: 32rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.cta-band .eyebrow { color: var(--sky); }
.cta-band form.waitlist { margin: 1.5rem 0 0; }
.cta-band form.waitlist input[type="email"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-on-dark);
  color: var(--white);
}
.cta-band form.waitlist input::placeholder { color: rgba(248, 253, 255, 0.6); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--ink);
  color: var(--white);
  margin-top: var(--section-y);
  overflow: hidden;
  font-size: 1rem;
}
.site-foot > .wrap {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  /* The chat launcher is fixed at bottom:1.25rem and 54px tall, so at max
     scroll it sat on the legal line at EVERY width (measured: 192x54 at
     y=726 vs legal at y=740). 5rem clears the launcher's 74px footprint
     with a little air. Was phone-only at 480px, which still fell 2px short. */
  padding-bottom: 5rem;
}

.site-foot a { color: var(--white); text-decoration: none; }
.site-foot a:hover { color: var(--white); text-decoration: underline; }

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.foot-cols h2 {
  color: var(--sky);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.foot-cols ul { list-style: none; display: grid; gap: 0.55rem; }
.foot-cols li a, .foot-cols button.chat-open { opacity: 0.9; }

/* "Chatta nu!" is a list row – strip the leaked button pill so it reads as the
   plain white text line the design specifies */
.foot-cols button.chat-open {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: inherit;
  color: var(--white);
  cursor: pointer;
  white-space: normal;
}
.foot-cols button.chat-open:hover {
  color: var(--white);
  text-decoration: underline;
  filter: none;
  transform: none;
}

.foot-blurb { max-width: 22rem; }
.foot-blurb p { color: var(--text-on-inverse-muted); margin: 0 0 1.2rem; }

/* the huge footer lockup — seal + wordmark at the design's fixed 0.6 ratio,
   white on the ink ground (Logo tone="dark", size clamp(5rem,16cqw,13rem)) */
.foot-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 4.48vw, 3.64rem);
  color: var(--white);
  text-align: center;
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.foot-seal { width: clamp(5rem, 16vw, 13rem); height: clamp(5rem, 16vw, 13rem); flex: none; }
.foot-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 9.6vw, 7.8rem);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}
.foot-mark + .foot-legal { border-top: 1px solid var(--line-on-dark); }
/* contact lines never break inside a phone number or address */
.site-foot li a[href^="tel:"], .site-foot li a[href^="mailto:"] { white-space: nowrap; }

/* the design's legal bar is a full-bleed strip with its own inner max width —
   but the markup keeps .foot-legal inside .wrap. Pull the bar out to the
   viewport edges and re-apply the wrap's padding math so the content still
   lines up with the columns above. (.site-foot's overflow:hidden clips the
   50vw overshoot that a scrollbar would otherwise add.) */
.foot-legal {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--maxw) / 2));
}

.foot-news form {
  display: flex;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 0.35rem;
  max-width: 24rem;
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
}
.foot-news input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
}
.foot-news input::placeholder { color: rgba(248, 253, 255, 0.55); }
.foot-news input:focus {
  outline: none;
  box-shadow: none;
}
.foot-news form:focus-within { box-shadow: 0 0 0 2px var(--sky); }
.foot-news button {
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  padding: 0.65rem 1.2rem;
}

.foot-news-status {
  font-size: 0.88rem;
  margin-top: 0.6rem;
  min-height: 1.3em;
}
.foot-news-status.ok { color: var(--success-on-dark); }
.foot-news-status.err { color: var(--danger-on-dark); }

.foot-legal {
  border-top: 1px solid var(--line-on-dark);
  margin-top: 0;
  padding-block: 1.2rem; /* padding-inline comes from the earlier full-bleed .foot-legal rule — a plain `padding` shorthand here would zero it out */
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-meta);
}

/* ---------- live chat ---------- */

.chat-launch {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  border-radius: var(--radius-pill);
  /* the design's pill: sky icon disc + label (ChatWidget.jsx) */
  padding: 0.55rem 1.2rem 0.55rem 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
}
.chat-launch svg { display: block; }
.chat-launch-ico {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--sky);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-launch[aria-expanded="true"] .chat-launch-txt,
.chat-launch[aria-expanded="false"] .chat-launch-close { display: none; }

.chat-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  z-index: 41;
  width: min(23rem, calc(100vw - 2.5rem));
  max-height: min(32rem, calc(100dvh - 9rem));
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;   /* arrives from the launcher's corner */
}
@media (prefers-reduced-motion: no-preference) {
  .chat-panel {
    transition:
      opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 180ms;
  }
  .chat-panel:not([hidden]) { opacity: 1; transform: none; visibility: visible; }
  /* exit: stay laid out for the fade-out – display:flex !important outranks
     the global [hidden] kill-switch, visibility flips at the end */
  .chat-panel[hidden] {
    display: flex !important;
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    visibility: hidden;
    pointer-events: none;
  }
  @starting-style {
    .chat-panel:not([hidden]) { opacity: 0; transform: translateY(8px) scale(0.97); }
  }
}

.chat-head {
  background: var(--ink);
  color: var(--white);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.chat-head strong { font-size: 1.1rem; font-family: var(--font-display); }
.chat-head small { display: block; font-weight: 400; opacity: 0.7; font-size: 0.8rem; }
/* the design's presence dot, left of the stacked name/status */
.chat-head > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.8rem;
  align-items: center;
}
.chat-head > div:first-child::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--success-on-dark);
  grid-row: 1 / span 2;
}
.chat-head button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.5rem 0.6rem;   /* ~44px touch target */
  cursor: pointer;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--sky-50);
}

.chat-msg {
  max-width: 85%;
  padding: 0.65rem 0.95rem;
  border-radius: 18px;
  font-size: 0.93rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-msg {
    transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  @starting-style { .chat-msg { opacity: 0; transform: translateY(6px); } }
}

.chat-retry {
  background: none;
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
  margin-top: 0.3rem;
}
.chat-msg.bot {
  background: var(--white);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}
.chat-msg.me {
  background: var(--ink);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
}
.chat-msg.sys {
  align-self: center;
  background: transparent;
  color: var(--dim);
  font-size: 0.82rem;
  text-align: center;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 0.6rem 1rem;
}
.chat-form input:focus {
  outline: none;
  border-color: var(--sky-ink);
  box-shadow: 0 0 0 3px var(--sky-ink);
}
.chat-form button { padding: 0.6rem 1.1rem; border-radius: var(--radius-pill); }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .foot-cols { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 1.6rem; }
  .contact-split { grid-template-columns: 1fr; gap: 1.2rem; }
  .faq-body { grid-template-columns: 1fr; gap: 2rem; }
  .faq-topics { position: static; }
}


/* tighten only the flexible spacing below 480px (controls keep full size) */
@media (max-width: 480px) {
  .site-head .wrap { gap: 0.5rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  .head-tools { gap: 0.4rem; }
  /* the design keeps 44px round targets on mobile (a thumb, not a cursor) —
     shrink the spacing, never the tap area */
  .head-tools .icon-btn { width: 44px; height: 44px; }
  .head-tools .cart-link { width: 44px; height: 44px; }
  .lang-btn { padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (max-width: 400px) {
  .site-head .wrap { gap: 0.45rem; }
  .head-tools { gap: 0.35rem; }
  .lang-btn { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; }
}
@media (max-width: 360px) {
  .site-head .wrap { gap: 0.35rem; padding-left: 0.65rem; padding-right: 0.65rem; }
  /* target size holds at 44px; only the type steps down */
  .head-tools .icon-btn, .head-tools .cart-link { width: 44px; height: 44px; }
  .lang-btn { font-size: 0.72rem; padding-left: 0.4rem; padding-right: 0.4rem; }
}

@media (max-width: 560px) {
  form.waitlist { flex-direction: column; }
  form.waitlist button { width: 100%; }
  .products { grid-template-columns: 1fr; }
  .compare { font-size: 0.9rem; }
  .compare th, .compare td { padding: 0.8rem 0.7rem; }
  .answer { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* the missing half: without `animation`, the keyframe animations kept
     playing under "reduce" – instant is the gentle variant here. Only
     movement is neutralised; colour/opacity state changes stay instant
     flips rather than eating every declared transition wholesale. */
  *, *::before, *::after {
    animation: none !important;
    transition-property: transform, translate, scale, rotate, top, left, right, bottom !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- language selector (GetYourGuide/Reddit popover pattern) ---------- */
.lang-wrap { position: relative; display: flex; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 0.55rem 0.8rem;   /* ~44px touch target */
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: none;
  transition: border-color var(--ease-fast), background-color var(--ease-fast), box-shadow var(--ease-fast);
}
.lang-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg);
  filter: none;
  transform: none;
}
.lang-btn[aria-expanded="true"] {
  border-color: var(--ink);
  box-shadow: 0 1px 4px rgba(31, 31, 35, 0.14);
}
.lang-btn:focus-visible {
  outline: none;
  /* One focus idiom: solid sky-ink ring – alpha rings composite under 3:1. */
  box-shadow: 0 0 0 3px var(--sky-ink);
}
.lang-code { line-height: 1; }
.lang-caret {
  display: block;
  transition: transform var(--ease-fast);
}
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-list {
  position: absolute;
  top: calc(100% + 0.45rem);
  inset-inline-end: 0;
  min-width: 13.5rem;
  max-width: calc(100vw - 2rem);
  max-height: min(28rem, 78vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  /* DM Sans has no Arabic/CJK glyphs – Noto Sans SC (self-hosted) + system fallbacks render العربية/中文 */
  font-family: var(--font-sans);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.35rem;
  z-index: 60;
  transform-origin: top right;
}
.lang-list::-webkit-scrollbar { width: 8px; }
.lang-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
}
@media (prefers-reduced-motion: no-preference) {
  .lang-list {
    transition:
      opacity 150ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
      display 150ms allow-discrete;
  }
  @starting-style { .lang-list { opacity: 0; transform: translateY(-4px) scale(0.98); } }
}
.lang-list button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.lang-list button:hover { background: var(--bg); color: var(--ink); filter: none; }
.lang-list button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sky-ink);
}
.lang-list button[aria-pressed="true"] { font-weight: 700; }
.lang-list button[aria-pressed="true"]::after {
  content: "✓";
  margin-inline-start: auto;
  padding-inline-start: 0.75rem;
  color: var(--red-strong);
  font-weight: 700;
}
.lang-more {
  padding: 0.55rem 0.7rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 9px 9px;
  margin-top: 0.3rem;
}
.lang-more:hover { color: var(--ink); background: none; }

/* right-to-left scripts */
[dir="rtl"] .lang-list button { text-align: right; }
[dir="rtl"] .lang-list { transform-origin: top left; }
[dir="rtl"] .hero .wrap { text-align: right; }
[dir="rtl"] .steps { direction: rtl; }

/* ---------- shared-component defect fixes (site-wide) ---------- */

/* The chat widget markup is <section class="chat-panel">, so the bare
   `section { padding: … }` rule leaks a dead band INSIDE the floating panel.
   The panel's children own their spacing. That section rule carries the ID
   specificity of :not(#configurator) — (1,1,1) — so the fix must answer
   with the panel's own id (equal weight, later in the file wins). */
section#chat-panel { padding: 0; }

/* Newsletter honeypot: `.foot-news input { … }` out-specifies `.hp`, so the
   invisible honeypot would render as a wide box hanging past the right edge
   on phones (absolute top:-9999px, so invisible – but latent overflow). */
.foot-news input.hp {
  width: 1px;
  height: 1px;
  padding: 0;
  flex: none;
}

/* The chat-FAB clearance now lives on `.site-foot > .wrap` (site-wide) — the
   old `@media (max-width: 480px) { .site-foot { padding-bottom: 4.5rem } }`
   is gone: the FAB overlapped the legal line at every width, not just phones. */
/* ---------- 404 ---------- */

.nf-head { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.2rem; }
.nf-code {
  font-family: Niconne, -apple-system, Roboto, Helvetica, sans-serif;
  font-size: clamp(4.5rem, 12vw, 8rem);
  line-height: 1;
  color: var(--red);
  margin: 0 0 0.4rem;
}
.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* ---------- motion: page transitions, scroll reveal, skeletons ----------
   Opt-in, never opt-out: every effect below lives inside
   `prefers-reduced-motion: no-preference`, so a visitor who has asked their
   OS for less motion gets the site with no transitions at all — and no
   element is ever hidden waiting on JS (the reveal base state is visible). */

@media (prefers-reduced-motion: no-preference) {
  /* NO page-in / page-out fade. Both were a white haze on every click: the
     old page faded to white, then the new one faded UP from opacity 0, so a
     navigation read as ~450ms of washed-out white. A fast site must render
     the new page at full opacity immediately; the reveal-on-scroll below is
     the only entrance motion left. */

  /* scroll reveal — .reveal is set on section-level blocks; .is-in lands
     when the observer fires (motion.js). Base opacity is 1 so a missing
     observer is a no-op, not a blank page. */
  .reveal { opacity: 0.001; transform: translateY(14px); }
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  /* Sections already in view at page load are revealed WITHOUT the animation
     (motion.js adds .instant to the observer's first batch): on a page switch
     the fade-and-float made the page read as slow even though paint was fast.
     Only elements scrolled into view later animate. */
  .reveal.is-in.instant { transition: none; }
  /* stagger the cards inside a revealed grid so they cascade, not pop */
  .reveal .product,
  .reveal .card,
  .reveal .value,
  .reveal .step { transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
  .reveal.is-in .product:nth-child(2),
  .reveal.is-in .card:nth-child(2),
  .reveal.is-in .value:nth-child(2),
  .reveal.is-in .step:nth-child(2) { transition-delay: 0.06s; }
  .reveal.is-in .product:nth-child(3),
  .reveal.is-in .card:nth-child(3),
  .reveal.is-in .value:nth-child(3),
  .reveal.is-in .step:nth-child(3) { transition-delay: 0.12s; }
  .reveal.is-in .product:nth-child(4),
  .reveal.is-in .card:nth-child(4),
  .reveal.is-in .step:nth-child(4) { transition-delay: 0.18s; }
}

/* hover lift — a resting card rises a hair under the pointer */
@media (prefers-reduced-motion: no-preference) {
  .product, .card { transition: transform var(--ease-fast), box-shadow var(--ease-fast); }
  .product:hover, .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}

/* ---------- sold-out (driven by /api/catalog, never hardcoded) ----------
   A tier that cannot be ordered must read as unavailable everywhere it is
   offered: the card dims, the image desaturates, a badge names the state and
   the call to action stops promising a purchase. Nothing here is tied to a
   particular tier - site.js toggles .is-soldout from the catalog. */
.acc-chip.is-soldout { opacity: .55; text-decoration: line-through; }
.product.is-soldout { position: relative; }
.product.is-soldout .product-media img { filter: grayscale(1) contrast(.92); opacity: .55; }
.product.is-soldout .product-name { color: var(--dim); }
.product.is-soldout .product-cta { color: var(--dim); }
.product.is-soldout .product-arrow { display: none; }
.product-soldout {
  display: inline-block;
  margin-left: .5rem;
  padding: .18rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.product-soldout[hidden] { display: none; }

/* ---------- skeleton loading ----------
   Shown wherever content arrives after first paint (the package prices today,
   the affiliate figures on a slow connection). A shimmer sweep, sized to the
   slot it fills so nothing jumps when the real value lands. */
.skeleton {
  display: inline-block;
  min-width: 4.5rem;
  height: 1em;
  vertical-align: -0.1em;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--sky-50) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
  color: transparent;
  user-select: none;
}
/* The hero's "från N kr" sits INSIDE the h1, so its box must never change.
   Measured on the live h1 at 94.7px: the plain `.skeleton` rule reflowed the
   heading to FOUR line boxes while pending and back to three when the real
   price landed (371px -> 278px), shoving 93px of hero down on every visit.
   Two causes, both reset here:
     - `vertical-align: -0.1em` drops the span 9.5px at this size, putting the
       price on its own line box (top 441 vs 431);
     - `display: inline-block` breaks the text run into fragments that wrap.
   With these overrides the h1 measures 278.4px in every state - settled,
   "000 kr", "999 kr" and "-". */
.hero h1 [data-price-inline] { white-space: nowrap; }
.hero h1 .hv-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero h1 .hv-price.skeleton {
  display: inline;
  min-width: 0;
  height: auto;
  vertical-align: baseline;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--sky-50) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-pill);
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: mv-shimmer 1.3s ease-in-out infinite; }
  @keyframes mv-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { background: var(--line-soft); }
}
/* the price slots on product cards are empty until /api/catalog answers:
   render them as skeletons rather than a blank gap */
.product-price[data-price-state="pending"] {
  min-width: 4.5rem;
  height: 1.15em;
  vertical-align: -0.15em;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--sky-50) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .product-price[data-price-state="pending"] { animation: mv-shimmer 1.3s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .product-price[data-price-state="pending"] { background: var(--line-soft); }
}

/* Below-the-fold rendering is skipped until a section nears the viewport.
   `auto` remembers the real height once seen, so the scrollbar settles and
   back-navigation does not jump. The FAQ is excluded: its topic filter and
   deep-link anchors need every group laid out. */
@supports (content-visibility: auto) {
  /* Top-level blocks only. On /designa/ the configurator's steps are
     <section class="cfg-step"> siblings of the block that holds them, so a
     bare `main > section` match skipped their render and the configurator's
     copy painted ~2 s late. A page whose main nests sections at all is left
     entirely alone (the configurator IS its above-the-fold content); the
     footer always qualifies. */
  .site-foot {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }
}
@supports selector(:has(*)) {
  /* listed separately: a browser without :has() drops that whole block above,
     and the footer rule must survive on its own */
  main:not(:has(section section)) > section:nth-of-type(n+3):not(:has(#faq-topics)) {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }
}

/* block-level skeleton for ghost layouts (cards, rows). The size comes from the
   modifier, so a ghost reserves the box the real content will occupy and the
   page does not jump when it lands. */
.skeleton.skel-block { display: block; width: 100%; min-width: 0; vertical-align: baseline; }
.skel-title { height: 17px; width: 62%; }
.skel-line { height: 21px; width: 40%; }
.skel-btn { height: 41px; border-radius: var(--radius-pill); }
.skel-remove { height: 22px; width: 34%; margin-top: 2px; }
.hat-card.is-ghost { box-shadow: var(--shadow-card, 0 2px 10px rgba(31, 31, 35, 0.08)); pointer-events: none; }
.hat-card.is-ghost:hover { transform: none; }
@media (max-width: 620px) {
  /* single-column grid: one ghost, not a screenful that collapses on load */
  .mm-skel .hat-card.is-ghost:nth-child(n+2) { display: none; }
}
.hat-card.is-ghost .hat-tile.skeleton {
  border-radius: 0;
  background: linear-gradient(90deg, var(--sky-100) 25%, var(--sky-50) 37%, var(--sky-100) 63%);
  background-size: 400% 100%;
}

.cart-skel { display: grid; gap: 1rem; grid-column: 1 / -1; }
.skel-cartline { height: 7.5rem; border-radius: var(--radius-card-sm, 20px); }

/* the header's account chip arrives after /api/auth/me: hold its place as a
   pill so the tools row does not shift when "Logga in" / the name lands */
.acct-chip[hidden] { display: none; }
.acct-chip:empty {
  min-width: 6.9rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--sky-50) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .acct-chip:empty { animation: mv-shimmer 1.3s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-chip:empty { background: var(--line-soft); }
}

/* ---------- mobile layout (≤760px) ----------
   The design's own breakpoint is 760px (useMobile in the kit's Viewport.jsx)
   and it does two things the fluid layout cannot: product cards become
   horizontal rows (square thumb + text, so three packages fit a phone screen
   without a page-length scroll), and the compare table gets a horizontal
   scroll container instead of pushing the page wide. Both are pure layout —
   no copy or colour changes. */
@media (max-width: 760px) {
  /* package cards: stacked column -> row */
  .products { grid-template-columns: 1fr; gap: 0.7rem; }
  .product {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    border-radius: var(--radius-card-sm);
  }
  .product-media {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }
  .product-media img { width: 100%; height: 100%; object-fit: cover; }
  .product-body { padding: 0; gap: 0.25rem; }
  .product-name { font-size: 1.2rem; }
  .product-desc {
    font-size: 0.84rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-foot { margin-top: 0.2rem; padding-top: 0; border-top: 0; }
  /* the circular arrow shrinks to match the compact row */
  .product-arrow { width: 30px; height: 30px; font-size: 0.9rem; }

  /* the compare table: the design COMPRESSES it to fit a phone (smaller
     type + tighter cells) rather than scrolling. Keep the wrapper scrollable
     only as a fallback for very narrow screens. */
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare { min-width: 21rem; font-size: 0.86rem; }
  .compare th { width: 19%; padding: 1rem 0.35rem; font-size: 0.95rem; }
  .compare th:first-child { font-size: 0.68rem; padding-left: 1rem; }
  .compare td { padding: 0.8rem 0.5rem 0.8rem 1rem; }
  .compare td:not(:first-child) { padding: 0.8rem 0.2rem; }

  /* steps stack cleanly; the design keeps the om-oss value rows at their
     full 3.5rem number column on mobile too (no mobile branch there) */
  .steps { grid-template-columns: 1fr; gap: 0.9rem; }
  /* board Step (mobile): circled number disc beside the text, not a bare numeral */
  .step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--line); }
  .step::before { display: none; }
  .step-num {
    width: 2.75rem; height: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--sky-100); color: var(--sky-ink);
    font-size: 1rem; letter-spacing: -0.02em;
    margin-bottom: 0;
  }
  .steps--dark .step-num { background: var(--sky); color: var(--ink); }
  /* h3 and p share the text track — auto-placement would drop the p into
     the narrow number column of row 2 */
  .step h3, .step p { grid-column: 2; }
  .step h3 { font-size: 1.15rem; }

  /* section headers put their action below the text, full width */
  .section-head { grid-template-columns: 1fr; gap: 1rem; }
  .section-head .btn { justify-self: start; }

  /* the ink CTA band and panels get tighter padding */
  .cta-band, .ink-panel, .anatomy { padding: clamp(1.5rem, 5vw, 2.5rem); }
  /* ...and the dark steps panel takes the design's card radius + its own
     tighter rhythm (Studentmossa: radius-card, 2rem 1.25rem 1rem) */
  .ink-panel { border-radius: var(--radius-card); padding: 2rem 1.25rem 1rem; }

  /* ---- trust strip: pill row -> stacked list (design mobile) ---- */
  .trust-strip {
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--radius-card-sm);
    padding: 1.2rem 1.5rem;
  }

  /* ---- om-oss hero band shortens on a phone (design: 19rem) ---- */
  .band { min-height: 19rem; }

  /* footer becomes two columns with the newsletter full width (design intent) */
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.25rem; }
  .foot-news { grid-column: 1 / -1; }

  /* ---- hero: photo on top, copy below (design mobile layout) ---- */
  .hero .wrap { display: flex; flex-direction: column; gap: 0; padding-top: 0.75rem; padding-bottom: 2.5rem; }
  .hero-media { order: -1; margin-bottom: 1.6rem; }
  .hero-media::before { display: none; }
  .hero img.hero-bg {
    aspect-ratio: 16 / 10;
    object-position: 50% 40%;
    border-radius: var(--radius-card);
    box-shadow: none;
  }
  .hero .cockade {
    left: 0.5rem; right: auto; bottom: -1.4rem;
    width: 100px; height: 100px;
    font-size: 1.25rem;
    transform: rotate(-8deg);
  }
  .hero-eyebrow {
    background: none; box-shadow: none; border-radius: 0; padding: 0;
    color: var(--red-strong);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-size: var(--fs-eyebrow);
    padding-right: 6.5rem;
  }
  .hero-eyebrow b { display: none; }
  .hero h1 { font-size: 2.45rem; line-height: 1; letter-spacing: -0.045em; }
  .hero .hero-sub { font-size: 1rem; line-height: 1.5; margin: 0.9rem 0 1.3rem; }
  .hero-actions { display: grid; gap: 0.5rem; }
  .hero-actions .btn { width: 100%; }
  .hero-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.75rem;
    margin: 1.5rem 0 0;
    font-size: 0.82rem;
  }
  .hero-points li::before { width: 18px; height: 18px; font-size: 0.62rem; }

  /* ---- anatomy: swap the desktop split for the PartsPager ---- */
  .anatomy { display: none; }
  .anatomy-mobile { display: block; }

  /* contact cards (kundservice, om-oss) stack to a single column */
  .cards { grid-template-columns: 1fr; }
  /* the "ångra köp" strip takes the design's small-card radius on a phone */
  .undo-row { border-radius: var(--radius-card-sm); }

  /* ---- om-oss feature: wider photo crop and an inset cockade ---- */
  .feature img { aspect-ratio: 4 / 3; }
  .feature-cockade { right: 0.75rem; top: 0.75rem; }

  /* ---- "Allt om ditt köp": cards become a single white box of link rows ---- */
  .cards[data-cards-links] {
    display: block;
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
  }
  .cards[data-cards-links] .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-top: 1px solid var(--line-soft);
  }
  .cards[data-cards-links] .card:first-child { border-top: 0; }
  .cards[data-cards-links] .card h3 { font-size: 1.02rem; margin: 0; }
  .cards[data-cards-links] .card p {
    color: var(--dim);
    font-size: 0.85rem;
    margin: 0.15rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cards[data-cards-links] .card h3 { grid-column: 1; grid-row: 1; }
  .cards[data-cards-links] .card p { grid-column: 1; grid-row: 2; }
  .cards[data-cards-links] .card-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: static;
    font-size: 1.1rem;
    transform: none;
  }

  /* ---- /studentmossa/ "Delarna": grid -> PartsPager (tone white) ---- */
  .parts[data-parts-desktop] { display: none; }

  /* ---- FAQ topic list: vertical sticky -> horizontal scroll strip ---- */
  .faq-topics {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0.2rem var(--gutter) 0.6rem;
    position: static;
  }
  .faq-topics .faq-topics-label { display: none; }
  .faq-topics a {
    flex: none;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1.5px var(--line);
  }

  /* mobile parts pager (home anatomy + studentmossa parts) */
  .anatomy-mobile { display: block; }
  .parts-pager { display: block; }
  .parts-pager .parts-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.9rem;
  }
  .parts-pager .parts-tabs button {
    height: 44px;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.85rem;
    background: var(--white);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .parts-pager .parts-tabs button[aria-selected="true"] {
    background: var(--red);
    color: var(--white);
    box-shadow: none;
  }
  .parts-card {
    background: var(--sky-50);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.4rem 1.25rem;
    min-height: 15rem;
    display: flex;
    flex-direction: column;
  }
  /* the studentmossa pager sits on the page, not a tinted panel: white card */
  .parts + .parts-pager .parts-card { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
  .parts-card-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--sky-ink);
    margin: 0 0 0.6rem;
  }
  .parts-card h3 { margin: 0 0 0.5rem; font-size: 1.6rem; }
  .parts-card p[data-pp-desc] { margin: 0; color: var(--dim); font-size: 1rem; line-height: 1.55; flex: 1; }
  .parts-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
  }
  .parts-arrow {
    width: 44px; height: 44px;
    flex: none;
    border-radius: 50%;
    border: 0;
    background: var(--white);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
  }
  .parts-next { font-size: 0.85rem; font-weight: 700; color: var(--dim); }

  /* the swap animation: the card slides in from the side the user moved
     toward, so the pager reads as a real carousel rather than a repaint */
  @media (prefers-reduced-motion: no-preference) {
    .parts-card.is-swapping[data-dir="next"] { animation: pp-in-next 260ms cubic-bezier(0.23, 1, 0.32, 1); }
    .parts-card.is-swapping[data-dir="prev"] { animation: pp-in-prev 260ms cubic-bezier(0.23, 1, 0.32, 1); }
    .parts-card.is-swapping[data-dir="jump"] { animation: pp-in-jump 200ms ease; }
    @keyframes pp-in-next {
      from { opacity: 0; transform: translateX(1.25rem); }
      to { opacity: 1; transform: none; }
    }
    @keyframes pp-in-prev {
      from { opacity: 0; transform: translateX(-1.25rem); }
      to { opacity: 1; transform: none; }
    }
    @keyframes pp-in-jump {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  }
}

@media (max-width: 480px) {
  /* keep the giant wordmark + seal from outrunning the wrap's own gutter —
     seal + gap + word must stay inside (100vw - 2*gutter) or the lockup
     overflows past .site-foot's side padding on both edges equally
     (overflow:hidden on .site-foot hides the scrollbar, not the shove) */
  .foot-mark { gap: 1rem; }
  .foot-word { font-size: clamp(2.3rem, calc(16vw - 13px), 4rem); }
  .foot-seal { width: clamp(1.9rem, calc(16vw - 13px), 3.4rem); height: clamp(1.9rem, calc(16vw - 13px), 3.4rem); }
}

/* ============================================================
   Stage 3 — page surfaces (group band + ladder + calculator,
   /kop-ihop/, legal layout, cookie table, accessoarer, 404)
   ============================================================ */

/* ---------- GroupBand (dark marketing band, home + studentmossa) ---------- */
.group-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-panel);
  padding: clamp(2.5rem, 5cqw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5cqw, 5rem);
  align-items: center;
}
.group-band-txt {
  position: relative;
  display: grid;
  gap: 1.1rem;
}
.group-band .eyebrow { color: var(--sky); }
.group-band-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--white);
  text-wrap: balance;
}
.group-band-title .sky { color: var(--sky); }
.group-band-lead {
  margin: 0;
  color: var(--text-on-inverse-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.group-band-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.group-band-ladder {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.75rem 1.4rem;
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
}
.group-ladder-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.group-ladder-head b { font-weight: 700; font-size: 0.9rem; }
.group-ladder-head span { font-size: 0.8rem; color: var(--text-on-inverse-muted); }
.group-ladder-head.is-light span { color: var(--dim); }

/* ---------- price ladder (dark in the band, light on /kop-ihop/) ---------- */
.group-ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
}
.gl-item {
  all: unset;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  text-align: center;
  min-width: 0;
}
button.gl-item { cursor: pointer; }
.gl-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
  transition: font-size var(--ease-fast);
}
.gl-price small { font-size: 0.6em; font-weight: 700; }
.gl-item.is-active .gl-price { font-size: 1.6rem; color: var(--red-strong); }
.group-ladder.is-dark .gl-price { color: var(--white); }
.group-ladder.is-dark .gl-item.is-active .gl-price { color: var(--white); }
.gl-barwrap { width: 100%; height: 170px; display: flex; align-items: flex-end; }
.gl-bar {
  width: 100%;
  border-radius: 18px 18px 8px 8px;
  background: var(--sky-200);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.7rem;
  box-sizing: border-box;
  transition: background var(--ease-fast);
}
.gl-item.is-zero .gl-bar { background: var(--line-solid); }
.gl-item.is-active .gl-bar { background: var(--red); box-shadow: var(--shadow-btn); }
.group-ladder.is-dark .gl-bar { background: rgba(115, 197, 245, 0.28); }
.group-ladder.is-dark .gl-item.is-zero .gl-bar { background: rgba(255, 255, 255, 0.1); }
.gl-pct { font-size: 0.85rem; font-weight: 800; color: var(--sky-ink); }
.gl-item.is-active .gl-pct { color: var(--white); }
.group-ladder.is-dark .gl-pct { color: var(--sky); }
.gl-meta {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 600;
}
.group-ladder.is-dark .gl-meta { color: var(--text-on-inverse-muted); }
.gl-people { display: inline-flex; }
.gl-people svg { margin-left: -3.6px; }
.gl-people svg:first-child { margin-left: 0; }
.gl-label { white-space: nowrap; }

/* ---------- group calculator (from design-mv Group.jsx GroupCalc) ---------- */
.group-calc {
  background: var(--white);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  padding: clamp(2rem, 4cqw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.group-calc-left { display: grid; gap: 1rem; }
.group-calc-left .eyebrow { color: var(--red-strong); }
.group-calc-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.calc-stepper { display: flex; align-items: center; gap: 1rem; }
.calc-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: opacity var(--ease-fast);
}
.calc-btn:disabled { opacity: 0.35; cursor: default; }
.calc-count {
  flex: 1;
  text-align: center;
  background: var(--sky-50);
  border-radius: 999px;
  padding: 0.7rem 0;
}
.calc-count b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.03em;
}
.calc-count span { font-weight: 600; color: var(--dim); }
.calc-hint { margin: 0; font-size: 0.88rem; color: var(--dim); }
.calc-out {
  display: grid;
  gap: 0.9rem;
  background: var(--sky-50);
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: 1.9rem 2rem;
  transition: background var(--ease-fast);
}
.calc-out.has-pct { background: var(--ink); color: var(--white); }
.calc-out-head { display: flex; justify-content: space-between; align-items: center; }
.calc-out-head .lbl { font-weight: 600; font-size: 0.9rem; color: var(--dim); }
.calc-out.has-pct .lbl { color: var(--text-on-inverse-muted); }
.calc-out-badge {
  background: var(--red);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--white);
}
.calc-per { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.calc-per b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.8rem;
  line-height: 1;
  letter-spacing: -0.05em;
}
.calc-per s { font-weight: 600; color: var(--dim); }
.calc-out.has-pct .calc-per s { color: var(--text-on-inverse-muted); }
.calc-rows {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.calc-out.has-pct .calc-rows { border-top-color: var(--line-on-dark); }
.calc-rows > div { display: flex; justify-content: space-between; gap: 1rem; }
.calc-rows .k { color: var(--dim); }
.calc-out.has-pct .calc-rows .k { color: var(--text-on-inverse-muted); }
.calc-rows .save b { color: var(--sky-ink); }
.calc-out.has-pct .calc-rows .save b { color: var(--sky); }

/* ---------- /kop-ihop/ hero ---------- */
.kih-hero {
  background: var(--sky-50);
  border-radius: var(--radius-panel);
  padding: clamp(2.5rem, 5cqw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5cqw, 5rem);
  align-items: center;
}
.kih-hero-txt { display: grid; gap: 1.1rem; }
.kih-hero .eyebrow { color: var(--red-strong); }
.kih-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.kih-hero h1 .price { color: var(--red); }
/* the price phrase replaces the number-free fallback the moment a real
   ladder lands (D1) — both live in the h1, CSS picks the visible one */
.kih-hero h1:has(.kih-price-phrase:not([hidden])) .kih-alt-phrase { display: none; }
.kih-hero-lead { margin: 0; color: var(--dim); font-size: var(--fs-lead); line-height: 1.5; }
.kih-hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.kih-hero-ladder {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 1.75rem 1.4rem;
}
/* the three steps row and the split FAQ reuse .steps / .qa */
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem; }
.kih-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5cqw, 5rem);
  align-items: start;
}
@media (max-width: 760px) {
  .kih-desktop-only { display: none; }
}

/* ---------- vanliga frågor: topic filter ---------- */
.faq-topics-label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.6rem 1rem;
}
.faq-topic {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  text-align: left;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  /* A borderless text row read as a loose list of words rather than as a set
     of buttons. The hairline ring gives the group a resting shape; hover
     deepens it, and the selected row inverts to ink. */
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background var(--ease-fast), color var(--ease-fast),
              box-shadow var(--ease-fast);
}
.faq-topic:hover { background: var(--sky-50); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.faq-topic:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sky-ink); }
.faq-topic span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--red-strong);
  white-space: nowrap;
  /* the count is a counter, not a label: give it its own pill so the row
     stops looking like a sentence with a stray number at the end */
  background: var(--red-50);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.faq-topic[aria-current="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
.faq-topic[aria-current="true"]:hover { background: var(--ink); }
.faq-topic[aria-current="true"] span { color: var(--sky); background: rgba(115, 197, 245, 0.16); }
.faq-current { font-size: var(--fs-h3); margin: 0 0 0.5rem; }
.faq-answers .faq-group > h2 { display: none; }
.faq-help { margin-top: 3rem; }

/* ---------- legal pages: hero, toc, body, page nav, help band ---------- */
.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--sky-50);
  border-radius: var(--radius-panel);
  padding: clamp(2.5rem, 5cqw, 4.5rem);
}
.legal-hero::before {
  content: "";
  position: absolute;
  right: -3rem; top: -4rem;
  width: 22rem; height: 22rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--sky-200), inset 0 0 0 26px var(--sky-50), inset 0 0 0 28px var(--sky-200);
  pointer-events: none;
}
.legal-hero-in { position: relative; max-width: 46rem; display: grid; gap: 1rem; }
.legal-hero .eyebrow { color: var(--red-strong); }
.legal-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}
.legal-hero .lede { margin: 0; color: var(--dim); font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.legal-meta {
  margin: 0.4rem 0 0;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line);
}
.legal-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-ink); }
.legal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5cqw, 5rem);
  align-items: start;
}
.legal-body.has-toc { grid-template-columns: minmax(13rem, 0.55fr) minmax(0, 1.45fr); }
@media (max-width: 760px) {
  .legal-body.has-toc .legal-toc { display: none; }
}
.legal-toc {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 0.15rem;
}
.legal-toc-label {
  margin: 0 0 0.7rem 0.9rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dim);
}
.legal-toc a {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.5rem 0.9rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dim);
  transition: background var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
}
.legal-toc a i { font-style: normal; font-size: 0.75rem; font-weight: 800; color: var(--dim); }
.legal-toc a.is-active { background: var(--white); box-shadow: var(--shadow-card); color: var(--ink); }
.legal-toc a.is-active i { color: var(--red-strong); }
.legal-article { padding: 1.9rem 0; max-width: var(--readw); }
.legal-article + .legal-article { border-top: 1px solid var(--line); }
/* A clause that must not be missed — the cancellation reservation lives in
   one of these so a customer skimming the terms cannot scroll past it. */
.legal-callout {
  margin: 1.1rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--sky-50);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.legal-callout strong { color: var(--ink); }
.legal-article h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 0.8rem;
  font-size: var(--fs-h3);
}
.legal-article h2 i {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--red-strong);
  min-width: 1.5rem;
}
.legal-article > div { display: grid; gap: 0.8rem; }
.legal-article p { margin: 0; color: var(--dim); line-height: 1.65; text-wrap: pretty; }
.legal-article p a { color: var(--sky-ink); text-underline-offset: 0.15em; }
.legal-article strong { color: var(--ink); }
.legal-article code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9em;
  background: var(--sky-50);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  color: var(--ink);
}
.legal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.legal-nav a {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--ease-fast), color var(--ease-fast);
}
.legal-nav a[aria-current="page"] { background: var(--ink); color: var(--white); box-shadow: none; }
.help-band {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-panel);
  padding: clamp(2rem, 4cqw, 3rem) clamp(2rem, 4cqw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.help-band-txt { max-width: 36rem; display: grid; gap: 0.5rem; }
.help-band h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: var(--tracking-display);
  color: var(--white);
}
.help-band p { margin: 0; color: var(--text-on-inverse-muted); }

/* ---------- om cookies: cookie table + consent card ---------- */
.cookie-table {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.cookie-table-head {
  padding: 1.2rem 1.4rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.cookie-table-head h2 { margin: 0; font-size: 1.2rem; }
.cookie-table-head span { font-size: 0.8rem; color: var(--dim); }
.cookie-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 7.5rem auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.cookie-row code { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.cookie-row .desc { color: var(--dim); }
.cookie-row .dur { color: var(--ink); font-weight: 600; }
.cookie-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
  background: var(--sky-100);
  color: var(--sky-ink);
}
.cookie-tag.consent { background: var(--red-50); color: var(--red-strong); }
.consent-card {
  background: var(--sky-50);
  border-radius: var(--radius-card);
  padding: 1.4rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.consent-card .lbl { margin: 0; font-weight: 700; color: var(--ink); }
.consent-card .st { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--dim); }
.consent-card .acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- ångra köp ---------- */
.angra-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
}
.angra-card {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.6rem;
  display: grid;
  align-content: start;
  gap: 0.7rem;
}
.angra-card.is-tint { background: var(--sky-50); box-shadow: none; }
.angra-card .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sky-ink);
}
.angra-card h2 { margin: 0; font-size: var(--fs-card-title); }
.angra-card p { margin: 0; color: var(--dim); font-size: var(--fs-card-body); line-height: 1.6; }
.angra-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--gap-cards);
  align-items: start;
}
.angra-side { display: grid; gap: var(--gap-cards); }
.angra-retur { background: var(--sky-50); border-radius: var(--radius-card); padding: 1.75rem 1.6rem; }
.angra-retur p.eyebrow { color: var(--sky-ink); margin: 0 0 0.8rem; }
.angra-retur address {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.angra-kontakt {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.6rem;
  display: grid;
  gap: 0.6rem;
}
.angra-kontakt h2 { margin: 0; font-size: var(--fs-card-title); }
.angra-kontakt p { margin: 0; color: var(--dim); }
.angra-form {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem 2.2rem;
  display: grid;
  gap: 0.9rem;
}
.angra-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.angra-form-head h2 { margin: 0; font-size: var(--fs-h3); }
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: var(--radius-btn);
  padding: 0.5em 1.05em;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.angra-form > p { margin: 0; color: var(--dim); }
.angra-form-box {
  background: var(--bg);
  border-radius: var(--radius-card-sm);
  box-shadow: inset 0 0 0 1.5px var(--line-solid);
  padding: 1.25rem 1.3rem;
  display: grid;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.65;
}
.angra-form-box p { margin: 0; }
.angra-form-box p:first-child { font-weight: 700; color: var(--ink); }
.angra-form-box p:last-child { color: var(--body-ink); }
.angra-form-box .slot {
  background: var(--sky-100);
  color: var(--sky-ink);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  font-weight: 600;
}

/* ---------- accessoarer ---------- */
.acc-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--sky-50);
  border-radius: var(--radius-panel);
  overflow: hidden;
  align-items: stretch;
}
.acc-feature-media { position: relative; min-height: 26rem; }
.acc-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-feature-body {
  padding: clamp(2rem, 4cqw, 3.5rem);
  display: grid;
  align-content: center;
  gap: 1rem;
}
.acc-feature-body .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--sky-ink);
}
.acc-feature-body h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.acc-feature-body p { margin: 0; color: var(--dim); font-size: var(--fs-lead); line-height: 1.5; }
.acc-chip {
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  background: var(--sky-100);
  color: var(--sky-ink);
}
.acc-chip.on-dark { background: rgba(255, 255, 255, 0.12); color: var(--sky); }
.acc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: var(--gap-cards);
}
.acc-card {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.6rem 1.9rem;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 15rem;
}
.acc-card.is-ink { background: var(--ink); color: var(--white); box-shadow: none; }
.acc-card .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--sky-ink);
}
.acc-card.is-ink .big { color: var(--sky); }
.acc-card h3 { margin: 0; font-size: var(--fs-card-title); color: inherit; }
.acc-card p { margin: 0; color: var(--dim); font-size: var(--fs-card-body); line-height: 1.6; flex: 1; }
.acc-card.is-ink p { color: var(--text-on-inverse-muted); }

/* ---------- 404 ---------- */
.nf-panel {
  position: relative;
  overflow: hidden;
  background: var(--sky-50);
  border-radius: var(--radius-panel);
  padding: clamp(3rem, 6cqw, 5.5rem) clamp(2rem, 5cqw, 4rem);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}
.nf-code-wrap { position: relative; display: inline-block; }
.nf-code {
  font-family: var(--font-script);
  font-size: clamp(7rem, 16cqw, 12rem);
  line-height: 0.9;
  color: var(--red);
  margin: 0;
}
.nf-cockade { position: absolute; right: -3.5rem; top: -0.5rem; }
.nf-cockade .cockade {
  position: static;
  width: 92px; height: 92px;
  box-shadow: 0 0 0 5px var(--white), 0 0 0 10px var(--sky), var(--shadow-float);
}
.nf-panel h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.nf-panel > p:not(.nf-code) { margin: 0; color: var(--dim); font-size: var(--fs-lead); line-height: 1.5; max-width: 34rem; }
.nf-ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-cards);
  margin-top: var(--gap-cards);
  padding-bottom: clamp(2.5rem, 6cqw, 4.5rem);
}
.nf-way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1.6rem 1.6rem 1.5rem;
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--ink);
  min-height: 9rem;
}
.nf-way span.txt { display: grid; gap: 0.35rem; }
.nf-way .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nf-way.is-ink .t { color: var(--white); }
.nf-way .d { font-size: 0.9rem; color: var(--dim); }
.nf-way.is-ink { background: var(--ink); color: var(--white); }
.nf-way.is-ink .d { color: var(--text-on-inverse-muted); }
.nf-way.is-tint { background: var(--sky-100); }
.nf-way.is-white { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.nf-way .arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 1.1rem;
}
.nf-way.is-ink .arrow { background: var(--red); color: var(--white); box-shadow: none; }

/* ---------- stage 3 responsive ---------- */
@media (max-width: 760px) {
  .group-band {
    border-radius: var(--radius-card);
    padding: 2rem 1.25rem 1.75rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .group-band-title { font-size: 2.2rem; }
  .group-band-ladder { padding: 1.25rem 0.9rem 1rem; }
  .group-ladder { gap: 0.35rem; }
  .gl-barwrap { height: 120px; }
  .gl-bar { border-radius: 12px 12px 6px 6px; padding-top: 0.45rem; }
  .gl-pct { font-size: 0.72rem; }
  .gl-meta { font-size: 0.68rem; }
  .gl-price { font-size: 0.95rem; }
  .gl-item.is-active .gl-price { font-size: 1.15rem; }
  .group-calc {
    border-radius: var(--radius-card);
    padding: 1.5rem 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .group-calc-title { font-size: 1.9rem; }
  .calc-out { padding: 1.4rem 1.25rem; }
  .calc-per b { font-size: 3rem; }
  .kih-hero {
    border-radius: var(--radius-card);
    padding: 2rem 1.25rem 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .kih-hero h1 { font-size: 2.6rem; }
  .kih-hero-ladder { padding: 1.25rem 0.9rem 1rem; }
  .kih-faq { grid-template-columns: minmax(0, 1fr); }
  .legal-hero { border-radius: var(--radius-card); padding: 2.25rem 1.25rem 2rem; }
  .legal-hero::before { right: -5rem; top: -5rem; width: 12rem; height: 12rem; }
  .legal-hero h1 { font-size: 2.5rem; }
  .legal-body.has-toc { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .legal-article { padding: 1.4rem 0; }
  .legal-article h2 { font-size: 1.3rem; }
  .legal-article > div { padding-left: 0; }
  .help-band { border-radius: var(--radius-card); padding: 1.75rem 1.25rem; }
  .help-band h2 { font-size: 1.6rem; }
  .cookie-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; }
  .cookie-row .desc { grid-column: 1 / -1; }
  .angra-cards { grid-template-columns: minmax(0, 1fr); }
  .angra-grid { grid-template-columns: minmax(0, 1fr); }
  .angra-form { padding: 1.5rem 1.25rem; }
  .acc-feature { border-radius: var(--radius-card); grid-template-columns: minmax(0, 1fr); }
  .acc-feature-media { min-height: 15rem; }
  .acc-feature-body { padding: 1.75rem 1.25rem 2rem; }
  .acc-feature-body h2 { font-size: 2rem; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-card { min-height: 0; }
  .nf-panel { border-radius: var(--radius-card); padding: 2.5rem 1.25rem; }
  .nf-code { font-size: 6.5rem; }
  .nf-cockade { right: -2.2rem; top: -0.8rem; }
  .nf-cockade .cockade { width: 64px; height: 64px; }
  .nf-cockade .cockade span { font-size: 0.75em; }
  .nf-panel h1 { font-size: 2.3rem; }
  .nf-ways { grid-template-columns: minmax(0, 1fr); }
  .nf-way { min-height: 0; }
  .faq-topics-label { display: none; }
  .faq-topics {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0.2rem var(--gutter) 0.6rem;
  }
  /* The ring and the white ground now come from the base rule, so the phone
     strip only has to keep its buttons from shrinking. The count pill would
     make each chip noticeably wider on a scrolling row, so it is dropped. */
  .faq-topic {
    flex: none;
    white-space: nowrap;
    gap: 0.55rem;
  }
  .faq-topic span {
    background: none;
    padding: 0;
  }
}