/* Design variant "Refined" — home page only.
 * A light touch on the Framer baseline: one elevation system, one card radius,
 * more legible small text, a slightly stronger hero call-to-action, hover feedback.
 * Scope: html[data-cs-variant="listen-one"] body[data-cs-page="home"]. */

html[data-cs-variant="listen-one"] body[data-cs-page="home"] {
  --cs-ink: #1b1d1c;
  --cs-ink-2: #5a615d;
  --cs-line: rgba(27, 29, 28, 0.08);
  --cs-line-strong: rgba(27, 29, 28, 0.14);
  --cs-surface-2: #f7f7f5;
  --cs-yellow: #ffd000;
  --cs-orange: #f26d0f;
  --cs-radius: 16px;
  --cs-shadow: 0 1px 2px rgba(27, 29, 28, 0.04), 0 14px 36px -14px rgba(27, 29, 28, 0.14);
  --cs-shadow-hover: 0 1px 2px rgba(27, 29, 28, 0.05), 0 22px 44px -16px rgba(27, 29, 28, 0.2);
  --cs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- hero ---------- */
/* headline: solid ink instead of a washed-out gradient fill, so it reads against the glow */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1hr8ria h1 span[data-text-fill] {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--cs-ink) !important;
  color: var(--cs-ink) !important;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1hr8ria h1 {
  --framer-letter-spacing: -0.03em;
}
/* "New! Cura Assist" pill: clearer edge */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1gh0019 {
  --border-color: var(--cs-line-strong) !important;
  box-shadow: 0 1px 2px rgba(27, 29, 28, 0.05);
}
/* primary buttons (hero "Get started", "Book a demo", footer "Contact us"): a touch taller, hover lift */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-V0DJj.framer-v-qwlc1c,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-8sv3z.framer-v-va96vp {
  border-radius: 8px !important;
  transition: transform 0.25s var(--cs-ease), box-shadow 0.25s var(--cs-ease);
  box-shadow: 0 1px 2px rgba(27, 29, 28, 0.12);
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-V0DJj .framer-1pedt18,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-8sv3z .framer-kvhxv5 {
  border-radius: 8px !important;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-V0DJj.framer-v-qwlc1c .framer-18y93ec,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-8sv3z.framer-v-va96vp .framer-1dic64n {
  padding: 2px 8px 2px 10px;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-V0DJj.framer-v-qwlc1c.hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-8sv3z.framer-v-va96vp.hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(27, 29, 28, 0.35);
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-V0DJj.framer-v-qwlc1c:active,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-8sv3z.framer-v-va96vp:active {
  transform: translateY(0);
}

/* ---------- navigation ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-JtmCT .framer-842wyw a.framer-text {
  transition: color 0.15s ease;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-JtmCT .framer-842wyw a.framer-text:hover {
  color: var(--cs-ink) !important;
}

/* ---------- feature cards (3-up, desktop + phone) ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ix7o2v,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1msb2rn,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1ljr4hz,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1m8k883,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-lmelbe,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1hn98qn,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-x7qvcm,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-11g0jyf,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-nn5r2j {
  border-radius: var(--cs-radius);
  --border-color: var(--cs-line) !important;
  box-shadow: var(--cs-shadow);
  background-color: #fff;
  transition: box-shadow 0.3s var(--cs-ease);
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ix7o2v:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1msb2rn:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1ljr4hz:hover {
  box-shadow: var(--cs-shadow-hover);
}
/* card body copy: one step more legible */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ix7o2v [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1msb2rn [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1ljr4hz [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1m8k883 [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-lmelbe [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1hn98qn [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-x7qvcm [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-11g0jyf [data-framer-name="Body3"] p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-nn5r2j [data-framer-name="Body3"] p {
  color: var(--cs-ink-2) !important;
  --framer-line-height: 1.55em;
}

/* ---------- stats ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-169u1fv p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1wk0o6l p {
  font-variant-numeric: tabular-nums;
}

/* ---------- "Next generation tools" cards ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1t5gwk9,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1q360ar,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-t48med,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1gypgra,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-zjwwo4,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1bt3s40,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1h1bivs,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1q9rqks,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-16irjvk,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ynlkux,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1m21g4g,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1uumc36 {
  border-radius: 12px;
  --border-color: var(--cs-line) !important;
  box-shadow: var(--cs-shadow);
  background-color: #fff;
  padding: 20px !important;
  transition: box-shadow 0.3s var(--cs-ease);
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1t5gwk9:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1q360ar:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-t48med:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1gypgra:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-zjwwo4:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1bt3s40:hover {
  box-shadow: var(--cs-shadow-hover);
}

/* ---------- "Features for all levels of care" row: keep labels on one line ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1j1a57s .framer-vko9tn,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-w15zcy > [data-framer-name],
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-kwd0gy > [data-framer-name],
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-uuo0c1 > [data-framer-name] {
  left: 0;
  right: 0;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1j1a57s h3 {
  white-space: nowrap;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1j1a57s h3,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-w15zcy h3,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-kwd0gy h3,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-uuo0c1 h3 {
  --framer-font-size: 17px;
  --framer-letter-spacing: -0.01em;
}

/* ---------- pricing ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-54cezh,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-111s43z,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-b22k50,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mxc833-container li > div {
  background-color: #fff;
  border-radius: var(--cs-radius);
  box-shadow: 0 0 0 1px var(--cs-line), var(--cs-shadow);
  padding: 24px;
  height: auto;
  min-height: 340px;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-15m68a8 {
  align-items: stretch;
  padding: 3px;
}
/* the recommended plan (middle, black button) gets the brand yellow as its edge */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-111s43z,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mxc833-container li:nth-child(2) > div {
  box-shadow: 0 0 0 2px var(--cs-yellow), var(--cs-shadow-hover);
}
/* price: tabular, tighter */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mrniee p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-cj4ndt p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-q6ln15 p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mrniee h1 {
  font-variant-numeric: tabular-nums;
  --framer-letter-spacing: -0.02em;
}
/* plan features: readable grey, a little more air */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1b5fzk9 p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-meo8y4 p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-19dffgk p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mxc833-container li p {
  color: var(--cs-ink-2) !important;
}
/* …but not the plan buttons' labels (phone/tablet carousel): grey on the black "Get started" button was hard to read */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mxc833-container li a p {
  color: var(--framer-text-color, var(--cs-ink-2)) !important;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1b5fzk9,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-meo8y4,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-19dffgk {
  gap: 7px;
  height: auto;
  min-height: 120px;
}
/* plan buttons: one shape, hover feedback */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1opfxda,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1fibyge,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-14kimkr,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-mxc833-container li a {
  border-radius: 8px;
  transition: background-color 0.2s ease, transform 0.2s var(--cs-ease);
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1opfxda:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-14kimkr:hover {
  background-color: rgba(27, 29, 28, 0.14) !important;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1fibyge:hover {
  background-color: #2b2828 !important;
  transform: translateY(-1px);
}

/* ---------- security cards ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1eynwe7-container li > div,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ukmj56-container li > div {
  background-color: var(--cs-surface-2);
  border-radius: var(--cs-radius);
  box-shadow: 0 0 0 1px var(--cs-line);
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1eynwe7-container li p,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ukmj56-container li p {
  --framer-font-size: 13px;
  --framer-line-height: 1.45em;
  --framer-letter-spacing: 0;
  color: var(--cs-ink-2) !important;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1eynwe7-container li h3,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-1eynwe7-container li h4,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ukmj56-container li h3,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-ukmj56-container li h4 {
  color: var(--cs-ink) !important;
}

/* ---------- footer links ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-3SkoH a.framer-text,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-bizhcy a.framer-text,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-3llm7j a.framer-text {
  transition: color 0.15s ease;
}
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-3SkoH a.framer-text:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-bizhcy a.framer-text:hover,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-3llm7j a.framer-text:hover {
  color: var(--cs-ink) !important;
}

/* ---------- keyboard focus (the baseline has none) ---------- */
html[data-cs-variant="listen-one"] body[data-cs-page="home"] a:focus-visible,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] button:focus-visible,
html[data-cs-variant="listen-one"] body[data-cs-page="home"] select:focus-visible {
  outline: 2px solid var(--cs-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] * { transition: none !important; }
}


/* ---- listen-one ---- */
/* Design variant "Listen · One" — extends Refined (its CSS is prepended, re-scoped to this id).
 * The phone hero as one page of the phone: the first screen is the hero, white, centred on one axis, with the record
 * button / note card as its only object. Built by listen-one.js. Wide screens are not touched: there it is Refined.
 * Type: Urbanist (headline, card title), Satoshi (everything else), Fragment Mono (the code). */

@font-face { font-family: "Satoshi"; src: url(/assets/fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/assets/fonts/satoshi-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/assets/fonts/satoshi-700.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url(/assets/fonts/fragment-mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }

@media (max-width: 1099.98px) {
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] {
    --lo-ink: #26262a; --lo-ink2: #5f5f66; --lo-mute: #8e8e96; --lo-line: rgba(38, 38, 42, 0.08); --lo-bar: #efeff2;
    --lo-grad: linear-gradient(90deg, #FFB300 0%, #FF9F40 45%, #F26D0F 100%);
    --lo-sat: "Satoshi", "Inter", system-ui, sans-serif; --lo-urb: "Urbanist", "Satoshi", sans-serif;
    --lo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --lo-nav: 64px;
  }

  /* the Framer hero makes room: the whole first screen below the nav is the hero */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .framer-uex0ha { height: auto !important; min-height: calc(100vh - var(--lo-nav)); min-height: calc(100svh - var(--lo-nav)); padding: 0 !important; display: block !important; position: relative; overflow: clip; background: #fff !important; }
  html[data-cs-variant="listen-one"]:not(.cs-lo-on) body[data-cs-page="home"] .framer-uex0ha > * { visibility: hidden; animation: cs-lo-reveal 0s linear 2.5s forwards; }
  @keyframes cs-lo-reveal { to { visibility: visible; } }
  html[data-cs-variant="listen-one"].cs-lo-on body[data-cs-page="home"] .framer-uex0ha > :not(.cs-lo) { display: none !important; }

  /* one column, one axis: top (news, headline) · the object · foot (one line, one action) */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    width: 100%; max-width: 520px; margin: 0 auto; box-sizing: border-box; padding: 18px 20px 22px;
    height: calc(100vh - var(--lo-nav)); height: calc(100svh - var(--lo-nav)); min-height: 560px; max-height: 880px;
    font-family: var(--lo-sat); color: var(--lo-ink); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-top { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 2; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; position: relative; z-index: 2; }

  /* news: a hairline pill, no fill */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-news { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px 0 4px; border-radius: 999px; text-decoration: none; color: var(--lo-ink2); opacity: 0;
    box-shadow: inset 0 0 0 1px var(--lo-line); font: 500 13px/1 var(--lo-sat); letter-spacing: -0.005em; -webkit-tap-highlight-color: transparent; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font: 700 11.5px/1 var(--lo-sat); color: #a65700; background: rgba(255, 191, 0, 0.14); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-news svg { width: 13px; height: 13px; fill: none; stroke: var(--lo-mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: -2px; }

  /* headline: centred, each line rises out of its own mask */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-h { margin: 18px 0 0; width: 100%; font: 600 52px/1 var(--lo-urb); letter-spacing: -0.045em; color: var(--lo-ink); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-h:first-child { margin-top: 30px; }   /* no news pill above: a little more air under the nav */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-ln { display: block; overflow: hidden; padding: 0 0.06em 0.16em; margin: 0 auto -0.16em; width: max-content; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-li { display: block; white-space: nowrap; transform: translateY(108%); will-change: transform; }
  /* the key word's gradient twin is a pseudo-element, so the heading's text stays "Du lyssnar. Vi skriver." (--g fades it) */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-k { --g: 1; position: relative; display: inline-block; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-k::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; opacity: var(--g); pointer-events: none;
    background-image: var(--lo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 0.16em; }

  /* the stage: everything between the headline and the foot */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-stage { position: relative; flex: 1 1 auto; min-height: 270px; width: calc(100% + 40px); margin: 0 -20px; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-stage > * { position: absolute; left: 0; top: 0; }
  /* light: only a breath of warmth under the object */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-glow { width: 520px; height: 520px; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 226, 140, 0.42), rgba(255, 214, 120, 0.16) 38%, rgba(255, 230, 180, 0.04) 66%, rgba(255, 255, 255, 0)); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-halo { width: 140px; height: 140px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px rgba(242, 109, 15, 0.14); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-wave { overflow: visible; pointer-events: none; z-index: 2; }
  /* the press: two rings run out from the button like a drop on water — glass rings that bend what is under them */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-drop { width: 88px; height: 88px; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0; transform-origin: 50% 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.95) 86%, rgba(255, 196, 92, 0.22) 93%, rgba(255, 255, 255, 0) 100%);
    -webkit-backdrop-filter: blur(1.6px) saturate(1.35) brightness(1.04); backdrop-filter: blur(1.6px) saturate(1.35) brightness(1.04);
    -webkit-mask-image: radial-gradient(closest-side, transparent 70%, #000 80%, #000 97%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 70%, #000 80%, #000 97%, transparent 100%);
    box-shadow: 0 0 0 0.5px rgba(242, 160, 60, 0.12), inset 0 0 0 0.5px rgba(255, 255, 255, 0.9); }

  /* the one object: a white circle that becomes the white note card (box set per frame) */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-card { --m: 0; z-index: 4; cursor: pointer; transform-origin: 50% 50%; opacity: 0; background: #fff;
    /* no border (it would push the disc off-centre); the hairline is a shadow that only appears as the note opens */
    box-shadow: 0 0 0 1px rgba(38, 38, 42, calc(0.07 * var(--m))), 0 1px 1px rgba(38, 38, 42, 0.03), 0 34px 70px -34px rgba(38, 38, 42, 0.28), 0 12px 24px -16px rgba(38, 38, 42, 0.12); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-card > * { position: absolute; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-ic { left: 0; top: 0; width: 88px; height: 88px; border-radius: 50%; background: #fff; transform-origin: 0 0; z-index: 2; }
  /* the vial: the liquid sits 5px inside the ring, so a thin white gap keeps the ring readable all the way round,
     also where the liquid is. clip-path (not overflow) so WebKit clips it to the circle under transforms too */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-vial { position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; clip-path: circle(50% at 50% 50%); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-liq { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* glass: a soft highlight on the dome (it slides and widens when pressed — only the highlight moves, never the layer's edge),
     a light inner rim; a soft inner shade when pressed; the ring sits on top of everything so it reads the same all round */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-gloss { --py: 0px; --sx: 1; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0.7;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.85); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-gloss::before { content: ""; position: absolute; left: 16%; right: 16%; top: 5%; height: 40%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.45) 55%, rgba(255, 255, 255, 0) 100%);
    transform: translateY(var(--py)) scaleX(var(--sx)); transform-origin: 50% 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 2.5px #F3C95E, inset 0 0 0 3px rgba(242, 160, 40, 0.18); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-press { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
    box-shadow: inset 0 7px 16px rgba(150, 90, 0, 0.2), inset 0 0 0 1px rgba(242, 109, 15, 0.12); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-micon { position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; margin: -16% 0 0 -16%; fill: none; stroke: var(--lo-ink); stroke-width: 1.9; stroke-linecap: round; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-micon rect { fill: var(--lo-ink); stroke: none; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-ttl { left: 64px; top: 16px; font: 600 19px/1 var(--lo-urb); letter-spacing: -0.02em; white-space: nowrap; opacity: 0; text-align: left; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-meta { left: 64px; top: 39px; height: 16px; width: 60%; opacity: 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-meta > span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 500 12.5px/16px var(--lo-sat); color: var(--lo-mute); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-m1 { opacity: 0; color: var(--lo-ink) !important; font-weight: 700 !important; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-m1 i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFC93C, #F26D0F); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-m1 svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-btn { --awake: 0; right: 16px; top: 16px; height: 36px; min-width: 96px; padding: 0 14px 0 12px; border-radius: 999px; overflow: hidden; opacity: 0; display: grid; place-items: center;
    font: 700 13.5px/1 var(--lo-sat); letter-spacing: -0.005em; color: color-mix(in srgb, #fff calc(var(--awake) * 100%), var(--lo-mute));
    background: color-mix(in srgb, #26262a calc(var(--awake) * 100%), rgba(38, 38, 42, 0.06)); box-shadow: 0 10px 22px -10px rgba(38, 38, 42, calc(var(--awake) * 0.5)); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-btn > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; position: relative; white-space: nowrap; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-b0 svg { stroke: color-mix(in srgb, #FFC53D calc(var(--awake) * 100%), var(--lo-mute)); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-b1 { opacity: 0; color: #fff; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-b1 svg { stroke-width: 2.6; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-flash { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #FFC93C, #F26D0F); opacity: 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-hr { left: 18px; right: 18px; top: 64px; height: 1px; background: var(--lo-line); transform-origin: 0 50%; transform: scaleX(0); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-lbl { left: 18px; font: 500 12.5px/15px var(--lo-sat); color: var(--lo-mute); white-space: nowrap; opacity: 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-tl { left: 18px; height: 22px; font: 500 var(--lo-fs, 15.5px)/22px var(--lo-sat); color: var(--lo-ink); white-space: nowrap; letter-spacing: -0.005em; text-align: left; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-tl span { display: inline-block; white-space: pre; opacity: 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-bar { left: 18px; height: 12px; border-radius: 6px; opacity: 0; background-color: var(--lo-bar); background-repeat: no-repeat; background-size: 160px 100%; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-caret { width: 2.5px; height: 18px; border-radius: 2px; background: linear-gradient(#FFD500, #F26D0F); box-shadow: 0 0 12px 3px rgba(255, 176, 0, 0.4); opacity: 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-chip { height: 22px; padding: 0 8px; border-radius: 7px; display: flex; align-items: center; white-space: nowrap; opacity: 0; transform-origin: 0 50%;
    font: 400 11.5px/1 "Fragment Mono", ui-monospace, monospace; letter-spacing: 0.06em; color: #a65700; background: rgba(255, 191, 0, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 159, 64, 0.3); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-sheenbox { inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-sheen { position: absolute; left: 0; top: 0; width: 300px; height: 100%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 18%, rgba(255, 246, 225, 0.9) 50%, rgba(255, 255, 255, 0) 82%); }

  /* the live caption: the patient's words, one at a time, centred under the button */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-cap { z-index: 5; pointer-events: none; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-cap span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; visibility: hidden; font: 500 15px/22px var(--lo-sat); letter-spacing: -0.005em; color: var(--lo-ink2); }

  /* foot: one line, one action */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-sub { margin: 0; max-width: 24em; font: 500 16px/1.45 var(--lo-sat); letter-spacing: -0.005em; color: var(--lo-ink2); opacity: 0; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-sub.cs-lo-sub-rot { font-size: 17.5px; }   /* the Swedish line with the roller: 1.5 px larger */
  /* the roller on the last word (as in the desktop hero): the word slides up out of a clip, in the brand gradient */
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-rot { position: relative; display: inline-block; vertical-align: top; height: 1.45em; overflow: hidden; white-space: nowrap; text-align: left; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-w { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 700; opacity: 0; transform: translateY(100%); transition: transform 0.6s var(--lo-ease), opacity 0.35s ease;
    background-image: var(--lo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-w.is-in { opacity: 1; transform: none; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-w.is-out { opacity: 0; transform: translateY(-100%); }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-go { width: 100%; height: 54px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; white-space: nowrap; opacity: 0;
    font: 700 16px/1 var(--lo-sat); letter-spacing: -0.005em; color: #fff; background: #26262a; box-shadow: 0 18px 32px -18px rgba(38, 38, 42, 0.6);
    -webkit-tap-highlight-color: transparent; transition: background 0.25s ease; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-go svg { width: 18px; height: 18px; fill: none; stroke: #FFC53D; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-go:active { background: #3a3a40; }
  html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-go:focus-visible, html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-news:focus-visible { outline: 2px solid #F26D0F; outline-offset: 3px; }

  @media (min-width: 600px) {
    html[data-cs-variant="listen-one"] body[data-cs-page="home"] .cs-lo-stage { width: 100%; margin: 0; }
  }
}