/* Dan Clinic — one-pager. Hebrew, RTL. Logical properties only.

   Layout idea: the page is a soft grey ground. Big moments (hero, proof, lead) are
   full-bleed rounded "frames" that run edge to edge with a small gutter, following
   the SAYORA / EffBeauty references. Everything else sits in white cards inside a
   centred container. */

/* Liebling Pro, Fontef. Self-hosted: Instatic re-serves fonts from the site's own
   origin, so the licence must cover webfont self-hosting. Verify before launch. */
@font-face {
  font-family: 'Liebling';
  src: url('fonts/liebling-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Liebling';
  src: url('fonts/liebling-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Liebling';
  src: url('fonts/liebling-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Liebling';
  src: url('fonts/liebling-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-page:             #F2F1EE;
  --color-surface:          #FFFFFF;
  --color-surface-soft:     #F7F6F3;
  --color-deep:             #1E1B19;
  --color-deep-soft:        #2A2624;
  --color-ink:              #1F1B19;
  --color-ink-soft:         #6E6862;
  --color-ink-inverse:      #F6F3EE;
  --color-line:             #E4E1DB;
  /* Copper, taken off the FoLix handpiece. Used sparingly: small marks, the FoLix
     row in the table, focus rings. Buttons are ink so the page stays quiet. */
  --color-accent:           #A44E19;
  --color-accent-wash:      #F4E7DB;
  --color-placeholder:      #D6D0C7;
  --color-placeholder-deep: #B4AB9F;
  --color-danger:           #C43D2F;   /* required marks, form errors */

  /* One family across the page. Both tokens kept so they can diverge later. */
  --font-display: 'Liebling', system-ui, sans-serif;
  --font-body:    'Liebling', system-ui, sans-serif;

  /* Type scale: Perfect Fourth (1.333), base 16px. */
  --text-sm:   0.75rem;
  --text-base: 1rem;
  --text-md:   1.333rem;
  --text-lg:   1.777rem;
  --text-xl:   2.369rem;
  --text-2xl:  3.157rem;
  --text-3xl:  4.209rem;
  --text-4xl:  5.61rem;

  --radius-pill:  999px;
  --radius-frame: clamp(22px, 3vw, 36px);
  --radius-card:  24px;
  --radius-media: 18px;

  --gutter:       clamp(0.75rem, 1.6vw, 1.5rem);   /* page edge to frame edge */
  --frame-pad:    clamp(1.5rem, 4vw, 3.5rem);      /* inside a frame */
  --page-pad:     clamp(1rem, 3vw, 2.25rem);      /* page edge to container */
  --header-h:     64px;
  --section-pad:  clamp(4.5rem, 9vw, 8rem);
  --container:    min(1360px, 100% - 2 * var(--page-pad));
  --measure:      58ch;
  --card-pad:     clamp(1.5rem, 3vw, 2.5rem);
  --grid-gap:     clamp(0.75rem, 1.5vw, 1.25rem);

  --shadow-float: 0 1px 2px rgba(31, 27, 25, 0.05),
                  0 20px 40px -28px rgba(31, 27, 25, 0.35);

  /* Same curve as the GSAP "osmo" CustomEase, so CSS and JS motion match. */
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Locomotive Scroll v5 / Lenis runtime CSS, inlined: the published CSP blocks
   external stylesheets. Verbatim from locomotive-scroll@5.0.1/dist/locomotive-scroll.css. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-behavior: allow-discrete; transition-duration: 1ms; transition-property: overflow; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- layout primitives ---------- */

.container { inline-size: var(--container); margin-inline: auto; }

/* Full-bleed rounded block with a small gutter to the viewport edge. */
.frame {
  inline-size: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  border-radius: var(--radius-frame);
  overflow: hidden;
}

.frame--deep { background: var(--color-deep); color: var(--color-ink-inverse); }
.frame--surface { background: var(--color-surface); }

.frame__inner { padding: var(--frame-pad); }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block-start: var(--gutter); }

/* ---------- surfaces ---------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.card--flush { padding: 0; overflow: hidden; }
.card--soft { background: var(--color-surface-soft); }

/* Translucent card over an image or a dark ground. */
.card--glass {
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  backdrop-filter: blur(16px);
  color: var(--color-ink-inverse);
}

/* Image tile: a media slot with the image filling it edge to edge. */
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-placeholder);
}

.tile img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.tile__label {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 82%, transparent);
  backdrop-filter: blur(10px);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 500;
}

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

.eyebrow {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-block-end: 1rem;
}

.frame--deep .eyebrow { color: color-mix(in srgb, var(--color-ink-inverse) 60%, transparent); }

.section-head { margin-block-end: clamp(2rem, 4vw, 3.5rem); }

.section-head--split {
  display: grid;
  gap: 1rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.section-title {
  font-size: clamp(var(--text-xl), 4.6vw, var(--text-3xl));
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-inline-size: 16ch;
}

.lede {
  font-size: clamp(var(--text-base), 1.6vw, var(--text-md));
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-ink-soft);
  max-inline-size: var(--measure);
}

.frame--deep .lede { color: color-mix(in srgb, var(--color-ink-inverse) 72%, transparent); }

.section-head .section-title + .lede { margin-block-start: 1.25rem; }

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

/* Osmo "Button 038". Resource CSS verbatim; project tokens and the light
   variant follow it. Text is split into per-letter spans by the script. */
:root {
  --button-038-color: #fff;
  --button-038-color-background: var(--color-ink);
  --button-038-color-focus: var(--color-accent);
  --button-038-padding: 1.2em 2em;
  --button-038-border-radius: 2.5em;
  --button-038-focus-inset: -0.125em;
  --button-038-stagger: 0s; /* no per-letter stagger: the label masks as one piece */
  --button-038-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
  --button-038-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-038 {
  color: var(--button-038-color);
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  outline-style: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.button-038::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-038-focus-inset);
  border-radius: var(--button-038-border-radius);
  transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.45s var(--button-038-ease-hover);
  pointer-events: none;
  z-index: 1;
}

.button-038:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-038-color-focus);
  scale: var(--button-038-scale-x) var(--button-038-scale-y);
  transition: box-shadow 0.3s var(--button-038-ease-focus), scale 0.55s 0.05s var(--button-038-ease-hover);
}

.button-038__bg {
  background-color: var(--button-038-color-background);
  border-radius: var(--button-038-border-radius);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
  transition: scale 0.45s var(--button-038-ease-hover);
}

.button-038__inner {
  width: 100%;
  height: 100%;
  padding: var(--button-038-padding);
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-038__text {
  clip-path: inset(-10% 0%);
}

.button-038__text span {
  will-change: transform;
  display: inline-block;
  white-space: nowrap;
  translate: 0 0 0;
  text-shadow: 0px 1.3em currentColor;
  transition: translate 0.6s calc(var(--index) * var(--button-038-stagger)) var(--button-038-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-038:is(:hover, :focus-visible) .button-038__bg,
  [data-hover]:is(:hover, :focus-visible) .button-038 .button-038__bg {
    scale: var(--button-038-scale-x) var(--button-038-scale-y);
    transition: scale 0.55s 0.05s var(--button-038-ease-hover);
  }

  .button-038:is(:hover, :focus-visible) .button-038__text span,
  [data-hover]:is(:hover, :focus-visible) .button-038 .button-038__text span {
    translate: 0 -1.3em 0;
    transition: translate 0.6s calc(var(--index) * var(--button-038-stagger) + 0.05s) var(--button-038-ease-hover);
  }
}

/* Project additions: type, a reset so <button> matches <a>, and the light variant
   for buttons that sit on photos or dark frames. */
.button-038 {
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.button-038[data-theme='light'] {
  --button-038-color: var(--color-ink);
  --button-038-color-background: var(--color-surface);
  --button-038-color-focus: #fff;
}

/* ---------- navigation ---------- */
/* Osmo "Fixed Underlay Navigation", restyled to the page tokens. The menu panel is
   fixed behind the page on the right; the page (.page, data-main) slides left to
   reveal it. Data attributes are the script's hooks.

   Physical left/right on purpose throughout this block: the brief is "logo on the
   left, menu on the right" regardless of text direction, and the overlay's corner
   decoration is drawn for that geometry. */

:root { --menu-width: min(30rem, 80vw); }

.page { position: relative; z-index: 2; background: var(--color-page); }

/* The page slides 480px left when the menu opens. In RTL that side is scrollable
   overflow, so without this the document grows sideways while the menu is open. */
body { overflow-x: clip; }

/* Header: fixed, transparent, full width. White over the hero; ink once the page
   has scrolled past it (data-scrolled, set by the nav script). */
.underlay-nav__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  color: #fff;
  transition: color 0.3s var(--ease);
}

.underlay-nav__header[data-scrolled] { color: var(--color-ink); }

/* Open: the toggle sits over the white menu, the logo over the dimmed page. */
body[data-menu-status="open"] .underlay-nav__toggle { color: var(--color-ink); }
body[data-menu-status="open"] .underlay-nav__logo { opacity: 0; pointer-events: none; }

.underlay-nav__bar { inline-size: 100%; }

.underlay-nav__container {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  block-size: var(--header-h);
  padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-block-start: var(--gutter);
}

/* Outlined SELINA wordmark, inlined so fill: currentColor follows the nav colour. */
.logo { display: block; block-size: 1em; inline-size: auto; }

.underlay-nav__logo {
  pointer-events: auto;
  display: block;
  font-size: 1.125rem; /* sets the wordmark height */
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}

.underlay-nav__toggle {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: -1em;
  padding: 1em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.underlay-nav__toggle-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  block-size: 1.5em;
  overflow: hidden;
}

.underlay-nav__toggle-label { font-size: 1rem; font-weight: 500; line-height: 1.4; }

.underlay-nav__toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.375em;
  flex: none;
  inline-size: 1.5em;
  /* Same height as the text box, so both centre on the same line. */
  block-size: 1.5em;
}

.underlay-nav__toggle-bar { flex: none; inline-size: 100%; block-size: 2px; background: currentColor; }

/* Menu panel, behind the page. */
.underlay-nav__menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  inline-size: var(--menu-width);
  background: var(--color-page);
  color: var(--color-ink);
}

.underlay-nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  inline-size: 100%;
  block-size: 100%;
  padding: calc(var(--header-h) + 3 * var(--gutter)) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
  overflow: auto;
}

.underlay-nav__list {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.underlay-nav__list.is--small { gap: 0.75rem; }

.underlay-nav__link-large {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}

.underlay-nav__link-large:hover { background: var(--color-surface); }

.underlay-nav__link-label {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
}

.underlay-nav__bottom {
  position: relative;
  display: flex;
  gap: 2rem;
  inline-size: 100%;
  padding-block-start: 1.5rem;
}

.underlay-nav__bottom-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.underlay-nav__link-small { font-size: 1rem; line-height: 1.05; text-decoration: none; color: var(--color-ink-soft); }
.underlay-nav__link-small.is--faded { opacity: 0.6; }

/* The line grows from the reading start of the RTL menu text. */
.underlay-nav__bottom-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  block-size: 1px;
  background: currentColor;
  opacity: 0.15;
  transform-origin: 100% 50%;
}

/* Overlay: rides on top of the page and slides with it. Dims the page, catches
   the click that closes the menu and draws the rounded edge against the menu. */
.underlay-nav__overlay {
  direction: ltr;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: -1px;
  z-index: 100;
  pointer-events: none;
  cursor: pointer;
  visibility: hidden;
  overflow: clip;
}

.underlay-nav__dark {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 18%, transparent);
  opacity: 0;
}

.underlay-nav__borders {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.underlay-nav__border-row { display: flex; flex-direction: column; align-items: flex-end; }

.underlay-nav__border { inline-size: 100%; block-size: 1em; background: var(--color-page); }

.underlay-nav__corner {
  inline-size: 2em;
  block-size: 2em;
  transform-origin: 100% 0;
  background-image: radial-gradient(circle farthest-side at 0 100%, transparent 99%, var(--color-page));
}

.underlay-nav__corner.is--bottom {
  transform-origin: 100% 100%;
  background-image: radial-gradient(circle farthest-side at 0 0, transparent 99%, var(--color-page));
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-block-size: 110svh;
  /* Edge to edge: drops the .frame gutter, keeps the frame rounding at the bottom. */
  inline-size: 100%;
  border-radius: 0;
  border-end-start-radius: var(--radius-frame);
  border-end-end-radius: var(--radius-frame);
  display: grid;
  color: #fff;
  background: var(--color-placeholder);
}

.hero__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Physical on purpose: this anchors the photo's own content (the face on its
     left edge), not the layout, so it must not flip with dir. */
  object-position: left center;
}

/* Keeps white type readable on any photo that lands here. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(22, 18, 16, 0.80) 0%, rgba(22, 18, 16, 0.22) 45%, rgba(22, 18, 16, 0.50) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  /* The hero is taller than the screen; its content fills exactly the first fold. */
  min-block-size: 100svh;
  align-self: start;
  grid-template-rows: 1fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  padding: var(--frame-pad);
  /* Clears the fixed header pill. */
  padding-block-start: calc(var(--header-h) + 2 * var(--gutter) + var(--frame-pad));
}

.hero__title {
  font-size: clamp(var(--text-xl), 6vw, var(--text-4xl));
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-inline-size: 13ch;
  align-self: center; /* centred in the 1fr row above the bottom block */
}

.hero__bottom {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}

.hero__lede {
  color: color-mix(in srgb, #fff 84%, transparent);
  font-weight: 300;
  max-inline-size: 46ch;
  margin-block-end: 1.75rem;
}

.hero__cta { margin-block-end: 0.9rem; }
.hero__reassurance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  color: color-mix(in srgb, #fff 70%, transparent);
}

/* Black line icon, inverted to white. */
.hero__reassurance-icon { inline-size: 1.1em; block-size: 1.1em; filter: invert(1); opacity: 0.8; }

.hero__trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Flat: no fill, no border, no blur. A hairline between items, an icon on the stat line. */
.trust-item {
  padding-block: 0.25rem;
  padding-inline: 1rem;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: color-mix(in srgb, #fff 76%, transparent);
}

.trust-item:first-child { padding-inline-start: 0; }
.trust-item + .trust-item { border-inline-start: 1px solid color-mix(in srgb, #fff 28%, transparent); }

.trust-item strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: #fff;
  margin-block-end: 0.2rem;
}

.trust-item__icon {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
}

/* ---------- proof: layered slider + before/after splitter ---------- */
/* Osmo "Layered Image Slider" and "Before/After Split Slider", restyled to the
   page tokens. Data attributes are the script's hooks; class names are the CMS's. */

.layered-slider {
  position: relative;
  display: grid;
  min-block-size: clamp(680px, 96svh, 960px);
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}

/* Each layer is its own stacking context: the script raises the active
   background's z-index inside the collection, and it must stay under the overlay. */
.layered-slider__bg-collection { position: absolute; inset: 0; z-index: 0; overflow: clip; }

.layered-slider__bg-item { position: absolute; inset: 0; opacity: 0; }
.layered-slider__bg-item:not([data-active]) { pointer-events: none; }

/* Keeps the type readable top and bottom; the middle stays clear for the photo. */
.layered-slider__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(18, 15, 13, 0.66) 0%, rgba(18, 15, 13, 0.04) 36%,
                    rgba(18, 15, 13, 0.04) 56%, rgba(18, 15, 13, 0.82) 100%);
}

.layered-slider__overlay {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  padding: var(--frame-pad);
  pointer-events: none;
}

.layered-slider__overlay button { pointer-events: auto; }

.layered-slider__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.layered-slider .section-head { margin: 0; }
.layered-slider .section-title { font-size: clamp(var(--text-lg), 3vw, var(--text-2xl)); max-inline-size: 16ch; }
.layered-slider .eyebrow { color: color-mix(in srgb, #fff 70%, transparent); }

.layered-slider__counter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.layered-slider__progress {
  inline-size: 5rem;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 30%, transparent);
  overflow: hidden;
}

.layered-slider__progress-inner {
  inline-size: 100%;
  block-size: 100%;
  background: #fff;
  transform: scaleX(0);
}

/* Captions: one centred slot. Every caption sits in the same grid cell; the
   slider script masks the active one in and the previous one out. Without the
   script only the first caption shows. */
.layered-slider__text-collection {
  display: grid;
  justify-items: center;
  align-items: end;
}

.layered-slider__text-item { grid-area: 1 / 1; max-inline-size: 100%; }
.layered-slider__text-item:not(:first-child) { visibility: hidden; }

.layered-slider__text-title {
  display: grid;
  gap: 0.25rem;
  color: #fff;
  font-family: var(--font-display);
  text-align: center;
}

/* Each caption line is its own mask; the inner span slides through it. */
.layered-slider__text-heading,
.layered-slider__text-sub { display: block; overflow: clip; padding-block: 0.08em; }
.layered-slider__line { display: block; will-change: transform; }

.layered-slider__text-heading {
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.05;
}

.layered-slider__text-sub {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.2;
  color: color-mix(in srgb, #fff 72%, transparent);
}

.layered-slider__btm {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.layered-slider__thumbs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.layered-slider__thumb {
  inline-size: clamp(52px, 6vw, 68px);
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.layered-slider__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.layered-slider__thumb:hover { opacity: 0.85; }
.layered-slider__thumb[data-active] { opacity: 1; border-color: #fff; transform: translateY(-3px); }

.layered-slider__nav { display: flex; gap: 0.5rem; }

.layered-slider__nav-button {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, #fff 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 8%, transparent);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}

.layered-slider__nav-button:hover { background: color-mix(in srgb, #fff 20%, transparent); }
.layered-slider__nav-button svg { inline-size: 100%; block-size: 100%; }

/* Splitter: one per slide, dragged only on the active slide. */
.splitter { position: absolute; inset: 0; overflow: hidden; }

.splitter__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Physical right inset on purpose: the script drives it, and "after" shows on
   the left of the handle so "before" is at the inline start of this RTL page. */
.splitter__after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }

.splitter__tag {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 84%, transparent);
  backdrop-filter: blur(8px);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  pointer-events: none;
}

.splitter__tag--before { inset-inline-start: 1rem; }
.splitter__tag--after  { inset-inline-end: 1rem; }

/* Physical left on purpose: Draggable moves it along x from this origin. */
.splitter__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  inline-size: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  transition: opacity 0.3s var(--ease);
}

/* The line itself. Masked so it fades out above the caption and thumbnails;
   masking the handle would clip its round grip, which overflows the 2px box. */
.splitter__handle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #fff 85%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 76%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 76%);
}

.layered-slider__bg-item:not([data-active]) .splitter__handle { opacity: 0; }

.splitter__handle-center {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-ink);
}

.splitter__handle-center::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  border: 1px solid #fff;
  opacity: 1;
  transition: inset 0.4s var(--ease), opacity 0.4s var(--ease);
}

.splitter__handle:hover .splitter__handle-center::after { inset: -8px; opacity: 0.5; }

.splitter__handle-icon { inline-size: 22px; }

img::selection { background: none; }

/* Under the slider: the honest note and the CTA. */
.proof__foot {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.proof__note {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
  max-inline-size: var(--measure);
}

/* ---------- method ---------- */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid-gap);
}

/* One card per step: an image slot on top, the copy under it. */
.step { display: grid; gap: 1.5rem; align-content: start; padding: var(--grid-gap); }

.step__media { aspect-ratio: 4 / 3; }

.step__text { padding: 0.5rem 0.75rem 1rem; }

.step__number {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-block-end: 0.5rem;
}

.step__title {
  font-size: clamp(var(--text-md), 2.2vw, var(--text-lg));
  font-weight: 500;
  margin-block-end: 0.75rem;
}

.step__body { color: var(--color-ink-soft); font-size: var(--text-base); }
.step__body + .step__body { margin-block-start: 0.875rem; }

/* ---------- compare ---------- */

/* Layout: title on the start side, the grid card beside it on wide screens. */
/* The whole block sits on one coloured panel, like the reference; the table
   card floats on it as a translucent sheet. */
.compare__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: var(--frame-pad);
  border-radius: var(--radius-frame);
  /* Same ground as images/placeholder.svg. */
  background: linear-gradient(135deg, var(--color-placeholder), var(--color-placeholder-deep));
}

@media (min-width: 960px) {
  /* Seven columns need the full width: the head sits above the table. */
  .compare__layout { grid-template-columns: 1fr; }
}

.compare__head .lede { margin-block-start: 1.25rem; }

.compare__card {
  padding: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;   /* phones scroll the table sideways */
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-surface) 80%, transparent);
}

/* Features run down, treatments across. Separate borders so the FoLix
   column can carry rounded ends. */
.compare__table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.compare__table th,
.compare__table td {
  padding: 1.1rem 0.75rem;
  font-size: var(--text-base);
  text-align: center;
  vertical-align: middle;
}

.compare__table thead th {
  padding-block: 1.25rem 0.75rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  line-height: 1.15;
}

.compare__table tbody th {
  text-align: start;
  font-weight: 400;
  color: var(--color-ink);
  padding-inline-start: 0;
  min-inline-size: 14rem;
}

/* Not applicable: a short dash instead of a yes or no. */
.mark--na { border: 0; color: var(--color-ink-soft); }
.mark--na::before { content: ""; inline-size: 12px; block-size: 1.5px; background: currentColor; }
.compare__table tbody td:nth-child(2) .mark--na { color: var(--color-ink-inverse); }

/* Price row: short text instead of a mark. */
.compare__price { font-size: var(--text-sm); line-height: 1.3; }
.compare__price small { font-size: 0.85em; color: var(--color-ink-soft); }
.compare__table tbody td:nth-child(2).compare__price small { color: color-mix(in srgb, var(--color-ink-inverse) 70%, transparent); }

/* Hairline between rows. currentColor keeps it subtle on both the light
   card and the dark FoLix strip. */
.compare__table tbody tr:not(:last-child) > * {
  border-block-end: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* The highlighted FoLix column: a dark rounded strip through every row. */
.compare__table .is-folix,
.compare__table tbody td:nth-child(2) {
  background: var(--color-deep);
  color: var(--color-ink-inverse);
}

.compare__table thead .is-folix { border-start-start-radius: 16px; border-start-end-radius: 16px; }
.compare__table tbody tr:last-child td:nth-child(2) { border-end-start-radius: 16px; border-end-end-radius: 16px; }

.compare__pill {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}

/* Yes = filled dot with a check, no = empty ring with an X. The icons are
   black line SVGs; invert() turns them white where the dot is dark. */
.mark {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  vertical-align: middle;
}

.mark img { inline-size: 18px; block-size: 18px; }

.mark--yes { background: currentColor; }
.mark--yes img { filter: invert(1); }
.mark--no  { color: var(--color-ink-soft); }
.mark--no img { opacity: 0.6; }

/* Inside the dark FoLix column the colours flip. */
.compare__table tbody td:nth-child(2) .mark--yes img { filter: none; }
.compare__table tbody td:nth-child(2) .mark--no { color: var(--color-ink-inverse); }
.compare__table tbody td:nth-child(2) .mark--no img { filter: invert(1); }


.compare__close {
  margin-block-start: 2rem;
  font-size: clamp(var(--text-base), 1.9vw, var(--text-md));
  font-weight: 500;
  max-inline-size: var(--measure);
}

/* ---------- cta band ---------- */
/* Edge-to-edge photo band: big headline and two pill actions on the start side. */

.cta-band {
  position: relative;
  inline-size: 100%;
  min-block-size: clamp(26rem, 60vw, 40rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-frame);
  color: #fff;
  background: var(--color-placeholder);
}

.cta-band__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cta-band__scrim {
  position: absolute;
  inset: 0;
  /* Physical on purpose: gradients have no logical direction. Darkens the right,
     where RTL text starts. */
  background: linear-gradient(to left, rgba(22, 18, 16, 0.62) 0%, rgba(22, 18, 16, 0.12) 65%);
}

.cta-band__inner {
  position: relative;
  padding: var(--frame-pad);
  padding-inline-start: clamp(1.5rem, 7vw, 7rem);
}

.cta-band__title {
  font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.02em;
  max-inline-size: 10ch;
  text-wrap: balance;
}

.cta-band__text {
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  max-inline-size: 38ch;
  font-size: clamp(var(--text-base), 1.6vw, var(--text-md));
  font-weight: 300;
  color: color-mix(in srgb, #fff 84%, transparent);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}


/* ---------- evidence ---------- */

.evidence__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

.evidence__media { min-block-size: 320px; grid-column: span 2; }

.evidence-item h3 {
  font-size: var(--text-md);
  font-weight: 500;
  margin-block-end: 0.625rem;
}

.evidence-item p { color: var(--color-ink-soft); font-size: var(--text-base); }

.evidence-item--deep { background: var(--color-deep); color: var(--color-ink-inverse); }
.evidence-item--deep p { color: color-mix(in srgb, var(--color-ink-inverse) 72%, transparent); }


/* ---------- faq ---------- */

.faq__inner { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }

.faq__item { border-block-end: 1px solid var(--color-line); }
.faq__item:last-child { border-block-end: 0; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-block-size: 60px;
  padding-block: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(var(--text-base), 2vw, var(--text-md));
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s var(--ease);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--color-ink-soft); }

.faq__icon {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  /* The X icon turned 45° reads as a plus; opening turns it back to the X. */
  rotate: 45deg;
  transition: rotate 0.5s var(--ease), background-color 0.5s var(--ease);
}

.faq__icon svg { inline-size: 18px; block-size: 18px; }

.faq__item[open] .faq__icon { rotate: 0deg; background: var(--color-page); }

/* The answer grow is animated by GSAP (osmo ease) in the reveal script. Padding
   lives on the last child so the box can collapse to a true zero height. */
.faq__answer {
  overflow: hidden;
  color: var(--color-ink-soft);
  max-inline-size: var(--measure);
}
.faq__answer > :last-child { padding-block-end: 1.5rem; }

/* ---------- lead (white frame) ---------- */

.lead__inner { display: grid; gap: var(--grid-gap); align-items: stretch; }

.lead__media { min-block-size: 420px; }

/* Glass list card pinned to the bottom of the image slot. Dark glass, so it
   reads on a light photo as well as a dark one. */
.lead__aside {
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-deep) 58%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent);
}

.lead__aside h3 {
  font-size: var(--text-base);
  font-weight: 500;
  margin-block-end: 0.75rem;
}

.lead__aside h3 + ul { margin-block-end: 1.5rem; }
.lead__aside ul:last-child { margin-block-end: 0; }
.lead__aside p a { color: inherit; text-decoration: none; }
.lead__aside p a:hover { text-decoration: underline; }

.lead__aside ul {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.lead__aside li {
  position: relative;
  padding-inline-start: 1.25rem;
  margin-block-end: 0.4rem;
  font-size: var(--text-base);
  line-height: 1.3;
  color: color-mix(in srgb, #fff 84%, transparent);
}

.lead__aside li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--radius-pill);
  background: #fff;
}

/* Roomier than a standard card: the form column gets its own inset. */
.lead { --lead-pad: clamp(2rem, 5vw, 4.5rem); }
.lead__text { padding: var(--lead-pad) var(--lead-pad) 0; }
.lead__text .lede { margin-block-start: 1rem; }

.lead__form { display: grid; gap: 1.25rem; padding: var(--lead-pad); }

.field { display: grid; gap: 0.45rem; }
.field label { font-size: var(--text-base); font-weight: 500; }

/* Required mark. Decorative; the input carries the real `required`. */
.req { color: var(--color-danger); margin-inline-start: 0.2em; }

/* Multi-select as toggle buttons: the checkbox stays in the DOM for
   keyboard and screen readers, the label is the visible button. */
.field--choices { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.field--choices legend { padding: 0; margin-block-end: 0.45rem; font-size: var(--text-base); font-weight: 500; }

.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 46px;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.choice input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
}

.choice:hover { background: color-mix(in srgb, var(--color-surface-soft) 80%, var(--color-line)); }

.choice:has(input:checked) {
  background: var(--color-ink);
  color: #fff;
}

.choice:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 25%, transparent);
}

.field input:not([type="checkbox"]),
.field select {
  min-block-size: 54px;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: 14px;
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.field input:hover,
.field select:hover { background: color-mix(in srgb, var(--color-surface-soft) 80%, var(--color-line)); }

.field input:focus,
.field select:focus {
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ink) 10%, transparent);
  outline: none;
}

/* Consent checkbox: required on both forms, so the browser blocks sending until
   it is ticked. Native checkbox tinted with accent-color; no custom drawing. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.consent input {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.05em 0 0;
  accent-color: var(--color-ink);
  cursor: pointer;
}

.consent a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.consent--inverse { color: color-mix(in srgb, var(--color-ink-inverse) 70%, transparent); }
.consent--inverse input { accent-color: var(--color-ink-inverse); }

.lead__submit { justify-self: start; margin-block-start: 0.5rem; }
.lead__note { font-size: var(--text-base); color: var(--color-ink-soft); }
.lead__note a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.site-footer { padding-block: 0 clamp(2rem, 4vw, 3rem); }

/* Dark callback frame. Inside the container, so it takes the container width
   rather than the full-bleed frame width. */
.footer-cta {
  inline-size: 100%;
  display: grid;
  gap: 2rem;
  padding: var(--frame-pad);
}

.footer-cta__title {
  font-size: clamp(var(--text-md), 2.4vw, var(--text-lg));
  font-weight: 500;
  max-inline-size: 18ch;
  margin-block-end: 0.75rem;
  text-wrap: balance;
}

.footer-cta__text {
  font-size: var(--text-base);
  color: color-mix(in srgb, var(--color-ink-inverse) 72%, transparent);
  max-inline-size: 42ch;
}

.footer-cta__form { display: grid; gap: 0.6rem; align-content: center; }
.footer-cta__label { font-size: var(--text-base); }

/* Name, phone and send always sit on one line; the fields shrink to fit. */
.footer-cta__row { display: flex; flex-wrap: nowrap; gap: 0.6rem; align-items: center; }
.footer-cta__row .button-038 { flex: none; }

.footer-cta__row input {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 3em;
  padding-inline: 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 8%, transparent);
  color: var(--color-ink-inverse);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Phone fields are dir="ltr" so digits keep their order; "end" is the right edge
   there, which lines them up with the RTL page. */
input[type="tel"] { text-align: end; }

.footer-cta__row input::placeholder { color: color-mix(in srgb, var(--color-ink-inverse) 45%, transparent); }
.footer-cta__row input:focus {
  outline: none;
  background: color-mix(in srgb, #fff 12%, transparent);
  border-color: color-mix(in srgb, #fff 40%, transparent);
}


/* Link columns under the frame. */
.site-footer__inner {
  display: grid;
  gap: 2rem;
  padding-block-start: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--text-base);
}

.site-footer__brand {
  font-size: 1.125rem; /* sets the wordmark height */
  color: var(--color-ink);
  margin-block-end: 0.75rem;
}

.site-footer__tagline { color: var(--color-ink-soft); max-inline-size: 28ch; }

.site-footer__col {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  justify-items: start;
  color: var(--color-ink-soft);
}

.site-footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  margin-block-end: 0.25rem;
}

.site-footer__col a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.site-footer__col a:hover { color: var(--color-ink); }

/* ---------- hotspots ---------- */
/* Osmo "Product Hotspot Modal", restyled on the site tokens. Physical left/top from
   the original became logical inset-* so the site rule holds; hotspot positions are
   therefore measured from the inline-start edge (the right, in RTL) of the portrait. */

.hotspot__head { text-align: center; margin-block-end: 0; }
.hotspot__head .section-title,
.hotspot__head .lede { margin-inline: auto; }

/* Toggle switch for gender selection */
.hotspot__toggle-wrap {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
}

.toggle-switch {
  --toggle-count: 2;
  --toggle-padding: 4px;
  inline-size: auto;
  min-inline-size: 210px;
  max-inline-size: 260px;
  padding: var(--toggle-padding);
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(var(--toggle-count, 2), 1fr);
  background-color: color-mix(in srgb, var(--color-line) 80%, var(--color-ink));
  border: 0;
  border-radius: var(--radius-pill);
  display: inline-grid;
  position: relative;
  user-select: none;
}

.toggle-switch__bg {
  position: absolute;
  inset-block: var(--toggle-padding);
  inset-inline-start: var(--toggle-padding);
  inline-size: calc((100% - 2 * var(--toggle-padding)) / var(--toggle-count, 2));
  background-color: var(--color-surface);
  border-radius: var(--radius-pill);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RTL translation: index 0 is at inline-start (right in RTL), index 1 moves left (-100%) */
[dir="rtl"] .toggle-switch__bg {
  transform: translateX(calc(var(--toggle-active, 0) * -100%));
}
[dir="ltr"] .toggle-switch__bg {
  transform: translateX(calc(var(--toggle-active, 0) * 100%));
}

.toggle-switch__btn {
  z-index: 1;
  color: var(--color-ink-soft);
  background-color: transparent;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  transition: color 0.25s var(--ease);
  display: flex;
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.toggle-switch__btn:hover {
  color: var(--color-ink);
}

.toggle-switch__btn[data-toggle-active] {
  color: var(--color-ink);
  font-weight: 600;
}

.hotspot { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

/* Full-width band, faded out at the bottom. */
.hotspot-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  inline-size: 100%;
  /* Fixed to the height the 520px photo used to give, so the bigger photo below
     overflows into the fade instead of growing the section. */
  block-size: calc(min(50vw, 520px) * 1424 / 1049);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* The photo's own box, centred, a step larger than the band it sits in. */
.hotspot-area__canvas {
  position: relative;
  flex: none;
  inline-size: min(66%, 700px);
  aspect-ratio: 1049 / 1424;
  /* Nudged toward inline-start, which is the right in RTL. */
  inset-inline-start: -4%;
}

.hotspot-area__media { position: absolute; inset: 0; }

.cover-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Hotspot image crossfade. GSAP drives the opacity; no CSS transition here, or the
   two interpolate against each other and stutter. The class is the no-JS fallback. */
.hotspot-image {
  opacity: 0;
  pointer-events: none;
}

.hotspot-image.is--active {
  opacity: 1;
  pointer-events: auto;
}

/* Click anywhere on the portrait to close. */
.hotspot-area__close { position: absolute; inset: 0; }

.hotspot-area__collection,
.hotspot-area__list { position: relative; inline-size: 100%; block-size: 100%; }
.hotspot-area__collection { pointer-events: none; }

/* A zero-size anchor with the button centred on it: no transform, so no sign to
   flip when the writing direction changes. */
.hotspot-area__item {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

/* Male pins */
.hotspot-area__item.is--laser { inset-block-start: 22%; inset-inline-start: 67%; }  /* front hairline, temple */
.hotspot-area__item.is--cooling { inset-block-start: 11%; inset-inline-start: 54%; }  /* crown */
.hotspot-area__item.is--scan { inset-block-start: 22%; inset-inline-start: 38%; }  /* vertex, back */
.hotspot-area__item.is--research { inset-block-start: 30%; inset-inline-start: 51%; }  /* above the ear */

/* Female pins */
.hotspot-area__item.is--female-part { inset-block-start: 12%; inset-inline-start: 60%; }  /* part line, top */
.hotspot-area__item.is--female-noshave { inset-block-start: 38%; inset-inline-start: 40%; }  /* mid length, side */
.hotspot-area__item.is--female-hormones { inset-block-start: 17%; inset-inline-start: 76%; }  /* front hairline, temple */
.hotspot-area__item.is--female-scan { inset-block-start: 22%; inset-inline-start: 42%; }  /* crown, back */

.hotspot-plus-btn {
  flex: none;
  cursor: pointer;
  inline-size: 3.25em;
  block-size: 3.25em;
  padding: 1.05em;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-float), 0 0 0 6px color-mix(in srgb, #fff 45%, transparent);
  display: flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  transform: scale(1) rotate(-45deg);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  animation: hotspot-pulse 2.8s ease-in-out infinite;
}

/* Same glyph as images/icon-x.svg: hairline stroke, rotated 45deg to read as a plus. */
.hotspot-plus-btn svg { stroke-width: 1; }

/* A slow breath on the halo. Stops while the card is open. */
@keyframes hotspot-pulse {
  0%, 100% { box-shadow: var(--shadow-float), 0 0 0 6px color-mix(in srgb, #fff 45%, transparent); }
  50%      { box-shadow: var(--shadow-float), 0 0 0 12px color-mix(in srgb, #fff 18%, transparent); }
}

.hotspot-plus-btn:hover,
.hotspot-plus-btn[data-hotspot-status="active"] { transform: scale(1.1) rotate(45deg); }

.hotspot-plus-btn[data-hotspot-status="active"] {
  background: var(--color-deep);
  color: var(--color-ink-inverse);
  animation: none;
}

/* The side panel. Slides in from the inline-start edge (right, in RTL). */
.hotspot-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}

.hotspot-modal__side {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 30em;
  block-size: 100%;
  padding: var(--gutter);
  transition: transform 0.6s var(--ease);
  /* ponytail: translateX is physical. +100% is "off the right edge", which is the
     inline-start edge only in RTL. Flip the sign if the site ever goes LTR. */
  transform: translateX(100%) rotate(0.001deg);
}

[data-hotspot-modal-status="active"] .hotspot-modal__side { transform: translateX(0%) rotate(0.001deg); }

.hotspot-modal__tile {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-flow: column;
  flex: 1;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 54em;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  overflow: auto;
}

.hotspot-modal__collection { flex: 1; position: relative; overflow: hidden; }

.hotspot-modal__list {
  display: grid;
  grid-template-columns: 1fr;
  inline-size: 100%;
  block-size: 100%;
  position: relative;
}

.hotspot-modal__item {
  grid-area: 1 / 1;
  display: flex;
  flex-flow: column;
  padding: 0.75em 0.75em 0;
  position: relative;
}

/* Card transitions. "next" moves toward inline-end, which is the left in RTL, so the
   incoming card starts on the left (negative X) and the outgoing card leaves right. */
[data-hotspot-name] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

[data-hotspot-name][data-hotspot-status="not-active"] { opacity: 0; visibility: hidden; transform: translateX(0) rotate(0.001deg); }
[data-hotspot-name][data-hotspot-status="active"]     { opacity: 1; visibility: visible; transform: translateX(0) rotate(0.001deg); }
[data-hotspot-name][data-hotspot-status="transition-in-right"]  { opacity: 0; visibility: visible; transform: translateX(-1em) rotate(0.001deg); transition: none; }
[data-hotspot-name][data-hotspot-status="transition-in-left"]   { opacity: 0; visibility: visible; transform: translateX(1em) rotate(0.001deg); transition: none; }
[data-hotspot-name][data-hotspot-status="transition-out-right"] { opacity: 0; visibility: visible; transform: translateX(-1em) rotate(0.001deg); }
[data-hotspot-name][data-hotspot-status="transition-out-left"]  { opacity: 0; visibility: visible; transform: translateX(1em) rotate(0.001deg); }

.hotspot-modal__top {
  position: sticky;
  inset-block-start: 1.5em;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  inline-size: 100%;
  block-size: 0;
  padding-inline: 1.5em;
}

.hotspot-close-btn,
.hotspot-arrow-btn {
  cursor: pointer;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 2.75em;
  block-size: 2.75em;
  margin: 0;
  padding: 0.8625em;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
}

.hotspot-close-btn {
  pointer-events: auto;
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.hotspot-modal__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--color-placeholder);
}

.hotspot-modal__info {
  display: flex;
  flex-flow: column;
  flex: 1;
  gap: 1.25em;
  padding: 2em 1.25em;
}

.hotspot-modal__h {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hotspot-modal__p { color: var(--color-ink-soft); font-size: var(--text-base); line-height: 1.5; }
.hotspot-modal__p strong { color: var(--color-ink); font-weight: 500; }

.hotspot-modal__facts {
  list-style: none;
  margin: 0.25em 0 0;
  padding: 0;
  border-block-start: 1px solid var(--color-line);
}

.hotspot-modal__facts li {
  padding-block: 0.85em;
  border-block-end: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: 1.45;
}

.hotspot-modal__facts strong { color: var(--color-ink); font-weight: 500; }

.hotspot-modal__bottom { padding: 0 1.5em 1.5em; }

.hotspot-modal__controls { display: flex; justify-content: space-between; align-items: center; }

/* The arrow glyph points right. In RTL "next" points left, so next is the flipped one. */
.hotspot-arrow-btn { background: var(--color-deep); color: var(--color-ink-inverse); transform: scaleX(-1); }
.hotspot-arrow-btn.is--prev { background: var(--color-surface-soft); color: var(--color-ink); transform: none; }

.hotspot-modal__dots { display: flex; justify-content: center; align-items: center; }

.hotspot-dot {
  cursor: pointer;
  appearance: none;
  display: block;
  inline-size: 0.75em;
  block-size: 0.75em;
  margin: 0;
  padding: 0;
  border: 0.15625em solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: currentColor;
  color: var(--color-line);
  font: inherit;
}

.hotspot-dot[data-hotspot-control-status="active"] { color: var(--color-ink); }

@media (max-width: 759px) {
  .hotspot-area { block-size: calc(80vw * 1424 / 1049); }
  .hotspot-area__canvas { inline-size: 95%; }
  .hotspot-plus-btn { inline-size: 2.5em; block-size: 2.5em; padding: 0.8em; }
  .hotspot-modal__side { max-inline-size: 100%; }
}

/* ---------- articles: Osmo "Basic GSAP Slider (Watch CSS)" ---------- */
/* Resource CSS on logical properties (RTL), with the demo card swapped for
   .article-card. The slider is clipped to the container. */

/* The contact section above already ends with a full section gap. */
.articles { padding-block-start: 0; }

.articles__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.gsap-slider {
  position: relative;
  overflow: hidden;
}

.gsap-slider__collection { inline-size: 100%; }

.gsap-slider__list {
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
  backface-visibility: hidden;
  display: flex;
}

.gsap-slider__item {
  inline-size: calc(((100% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) / var(--slider-spv));
  margin-inline-end: var(--slider-gap);
  flex: none;
}

/* Setup */

[data-gsap-slider-init] {
  --slider-status: on; /* Turn slider on/off */
  --slider-spv: 3; /* Slides per view */
  --slider-gap: 1.5em; /* Slides gap */
}

@media screen and (max-width: 991px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 2.25;
    --slider-gap: 1.25em;
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 1.15;
    --slider-gap: 1em;
  }
}

[data-gsap-slider-item]:last-child { margin-inline-end: 0; }

[data-gsap-slider-list-status="grab"] { cursor: grab; }
[data-gsap-slider-list-status="grabbing"] { cursor: grabbing; }

/* Controls: round outline buttons beside the title. The chevrons already point
   the RTL way: prev points right (towards the start), next points left. */

.gsap-slider__controls {
  display: flex;
  gap: 0.5rem;
  flex: none;
}
.gsap-slider__controls[hidden] { display: none; }

.gsap-slider__control {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease);
}
.gsap-slider__control svg { inline-size: 100%; block-size: 100%; }
.gsap-slider__control:hover { border-color: var(--color-ink); }
.gsap-slider__control:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

[data-gsap-slider-control-status="not-active"] {
  opacity: 0.3;
  pointer-events: none;
}

/* Article card */

.article-card {
  display: grid;
  gap: 1rem;
  color: var(--color-ink);
  text-decoration: none;
}

.article-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-placeholder);
}

.article-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: scale 0.8s var(--ease);
}

.article-card:hover .article-card__media img { scale: 1.04; }

.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.article-card__meta span:first-child { color: var(--color-accent); font-weight: 500; }

.article-card__title {
  font-size: clamp(var(--text-base), 1.6vw, var(--text-md));
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

.article-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-media);
}

/* ---------- motion ---------- */

[data-reveal] { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- wider viewports ---------- */

@media (min-width: 760px) {
  .hero__bottom { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__trust-strip { grid-template-columns: repeat(3, minmax(0, 190px)); }
  .step-list { grid-template-columns: repeat(3, 1fr); }
  .lead__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proof__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__inner { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); align-items: start; }
  .footer-cta { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .section-head--split .lede { justify-self: end; }
  .faq__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .layered-slider__nav { position: absolute; inset-inline-start: 0; inset-block-end: 0; }
  .faq__inner .section-head { position: sticky; inset-block-start: calc(var(--header-h) + 3 * var(--gutter)); margin: 0; }
}

@media (min-width: 960px) {
  .evidence__grid { grid-template-columns: repeat(3, 1fr); }
  .evidence__media { grid-column: 1; grid-row: span 2; min-block-size: 0; }
}

/* ---------- narrow viewports ---------- */

@media (max-width: 759px) {

  /* Phone hero: the title is the whole first screen's message, so it takes the
     full measure at display size, on a deeper scrim that holds white type on
     the light part of the photo. */
  .hero__title {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
    font-weight: 600;
    line-height: 0.98;
    max-inline-size: none;
  }
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(22, 18, 16, 0.88) 0%, rgba(22, 18, 16, 0.55) 50%, rgba(22, 18, 16, 0.62) 100%);
  }
  .hero__lede { color: color-mix(in srgb, #fff 90%, transparent); }
  .hero__trust-strip { grid-template-columns: 1fr; }
  .trust-item { padding-inline: 0; padding-block: 0.75rem; }
  .trust-item + .trust-item { border-inline-start: 0; border-block-start: 1px solid color-mix(in srgb, #fff 28%, transparent); }

  .step { padding: 0.75rem; }

  /* Compare on phones: the feature column stays pinned at the start edge and the
     six treatments scroll beside it. Columns are sized so FoLix and one rival
     are fully visible and the next one peeks in, which says "scroll" by itself. */
  .compare__layout { padding-inline: 1rem; }
  .compare__head { padding-inline: 0.5rem; }
  .compare__card {
    padding: 0.5rem 0;
    background: var(--color-surface);
    border: 0;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 9rem; /* snap columns to just past the pinned one */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .compare__table th,
  .compare__table td {
    padding: 0.9rem 0.35rem;
    min-inline-size: 4.5rem;
    font-size: var(--text-sm);
  }
  .compare__table thead th { scroll-snap-align: start; }
  .compare__table thead th { font-size: 0.8125rem; padding-block: 1rem 0.6rem; }
  .compare__table tbody th,
  .compare__table thead td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-inline-size: 9rem; /* table cells honour min, not width */
    inline-size: 9rem;
    padding-inline: 0.85rem 0.5rem;
    background: var(--color-surface);
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .compare__price { font-size: 0.75rem; }
  .compare__price span[dir="ltr"] { white-space: nowrap; }

  /* Footer callback form: name, phone and send stack full width on a phone. */
  .footer-cta > * { min-inline-size: 0; }
  .footer-cta { gap: 1.5rem; }
  .footer-cta__row { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .footer-cta__row input { flex: none; inline-size: 100%; min-block-size: 3.25rem; }
  /* A <button> shrink-wraps its grid; give it one full-width track. */
  .footer-cta__row .button-038 { inline-size: 100%; grid-template-columns: minmax(0, 1fr); }

  /* Concern toggles: compact chips that sit two or three to a line.
     .field .choice outranks the .field label size rule. */
  .choices { gap: 0.45rem; }
  .field .choice {
    min-block-size: 38px;
    padding-inline: 0.85rem;
    font-size: 0.875rem;
  }
}

/* ---------- legal pages ---------- */
/* privacy.html, terms.html, accessibility.html. Same underlay nav and footer as the
   home page; the fixed nav header is cleared by the heading's top padding. */

.legal__head {
  max-inline-size: 60em;
  margin-inline: auto;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) clamp(1.5rem, 3vw, 2.5rem);
}

.legal__title {
  font-size: clamp(var(--text-xl), 4.6vw, var(--text-3xl));
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.legal__updated { margin-block-start: 1.25rem; color: var(--color-ink-soft); }

.legal { padding-block-end: var(--section-pad); }

/* Osmo "Table of Contents for Article". Resource CSS with physical properties
   turned logical and colours moved onto site tokens; active and depth states added. */
.toc-layout {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 60em;
  margin-inline: auto;
  display: flex;
  position: relative;
}

.toc-article {
  flex: 1;
  max-width: 40em;
}

.toc-article h2 {
  letter-spacing: -.01em;
  margin-top: 2em;
  margin-bottom: .75em;
  font-size: 2em;
  font-weight: 500;
  line-height: 1.2;
}

.toc-article h2:first-child { margin-top: 0; }

.toc-article p {
  margin-bottom: 1.5em;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.toc-article h3 {
  margin-top: 2em;
  margin-bottom: .75em;
  font-size: 1.25em;
  font-weight: 500;
}

.toc-article ul {
  margin-block: 0 1.5em;
  padding-inline-start: 1.25em;
}

.toc-article li {
  margin-bottom: 0.6em;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.toc-article a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.toc-sidebar {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 13.75em;
  display: flex;
  position: sticky;
  top: calc(var(--header-h) + 2 * var(--gutter));
}

.toc-hero__label { font-weight: 500; color: var(--color-ink); }

.toc-list {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.toc-link {
  color: var(--color-ink-soft);
  border-inline-start: 1px solid var(--color-line);
  padding-block: .4rem;
  padding-inline: 1em .5em;
  font-size: .875em;
  text-decoration: none;
  transition: all .25s;
}

.toc-link:hover { color: var(--color-ink); }
.toc-link[data-toc-depth="3"] { padding-inline-start: 2em; }
.toc-link[data-toc-status="active"] { color: var(--color-ink); border-inline-start-color: var(--color-accent); }

@media screen and (max-width: 767px) {
  .toc-layout { flex-flow: column; }

  .toc-sidebar {
    width: 100%;
    position: relative;
    top: 0;
  }
}

/* ---------- accessibility menu + cookie consent ---------- */
/* Ported from the wedo-site project onto this site's tokens and logical properties.
   The markup is injected by the widget script at the end of every page. Cookie card
   sits at the inline start (right, in RTL), the a11y button at the inline end. */

:root {
  /* High-contrast mode. Fixed values by design: they must not follow the brand. */
  --color-hc-ground: #000000;
  --color-hc-ink:    #FFFFFF;
  --color-hc-link:   #FFFF00;
  --font-readable:   Arial, 'Segoe UI', system-ui, sans-serif;
}

.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 10000;
  margin: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--color-deep);
  color: var(--color-ink-inverse);
  text-decoration: none;
  transform: translateY(-150%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.skip-link:focus { transform: none; opacity: 1; pointer-events: auto; }

.a11y-fab {
  position: fixed;
  inset-block-end: var(--gutter);
  inset-inline-end: var(--gutter);
  z-index: 9998;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-deep);
  color: var(--color-ink-inverse);
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab.is-hidden { opacity: 0; transform: scale(0.6) translateY(0.75rem); pointer-events: none; }
.a11y-fab svg { inline-size: 1.6rem; block-size: 1.6rem; }

.a11y-panel {
  position: fixed;
  inset-block-end: calc(var(--gutter) + 3.5rem);
  inset-inline-end: var(--gutter);
  z-index: 9999;
  inline-size: min(20rem, calc(100vw - 2.5rem));
  max-block-size: min(80vh, 36rem);
  overflow-y: auto;
  padding: 1.25rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.a11y-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.a11y-panel__title { margin-block-end: 0.25rem; font-size: 1.125rem; font-weight: 700; }
.a11y-panel__hint { margin-block-end: 1rem; font-size: 0.8125rem; color: var(--color-ink-soft); }

.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }

.a11y-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.4rem;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.a11y-opt:hover { border-color: var(--color-ink); }
.a11y-opt[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-surface-soft); }
.a11y-opt svg { inline-size: 1.3rem; block-size: 1.3rem; }
.a11y-opt__val { font-size: 0.7rem; color: var(--color-ink-soft); }

.a11y-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.75rem; }
.a11y-reset { flex: 1 1 auto; }
.a11y-close { flex: 0 0 auto; padding-inline: 0.85rem; }

/* Shared by the a11y panel and the cookie card. */
.a11y-btn,
.cc-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.a11y-btn:hover,
.cc-btn:hover,
.a11y-btn--primary,
.cc-btn--primary { background: var(--color-ink); color: var(--color-surface); }
.a11y-btn--primary:hover,
.cc-btn--primary:hover { background: var(--color-deep-soft); }

.cc-banner {
  position: fixed;
  inset-block-end: var(--gutter);
  inset-inline-start: var(--gutter);
  z-index: 9997;
  inline-size: min(30rem, calc(100vw - 2 * var(--gutter)));
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0.6s;
}
.cc-banner[data-show="true"] { opacity: 1; visibility: visible; transform: none; }

.cc-copy { flex: 1 1 auto; min-inline-size: 0; }
.cc-title { margin-block-end: 0.5rem; font-size: 1.25rem; font-weight: 500; line-height: 1.1; }
.cc-sub { font-size: 0.85rem; line-height: 1.4; color: var(--color-ink-soft); }
.cc-sub a { color: inherit; }
.cc-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

@media (max-width: 40em) {
  .cc-banner {
    inset-inline-end: var(--gutter);
    inline-size: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem;
  }
  .cc-btn { flex: 1 1 0; }
}

html.a11y-spacing .cc-banner,
html.a11y-spacing .cc-banner * { line-height: normal !important; letter-spacing: normal !important; word-spacing: normal !important; }

/* Applied states, set on <html> by the widget script. */

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html.a11y-readable-font,
html.a11y-readable-font * { font-family: var(--font-readable) !important; }

html.a11y-spacing *:not(.a11y-fab):not(.a11y-panel):not(.a11y-panel *) {
  line-height: 1.8 !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.16em !important;
}

html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 0.2em !important;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html.a11y-contrast,
html.a11y-contrast body { background: var(--color-hc-ground) !important; }
html.a11y-contrast *:not(svg):not(path):not(img):not(video) {
  background-color: transparent !important;
  color: var(--color-hc-ink) !important;
  border-color: var(--color-hc-ink) !important;
}
html.a11y-contrast a,
html.a11y-contrast a * { color: var(--color-hc-link) !important; }
html.a11y-contrast .a11y-panel,
html.a11y-contrast .cc-banner { background: var(--color-hc-ground) !important; outline: 1px solid var(--color-hc-ink); }

html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M5 3l14 8-6 1.5L9.5 19z'/%3E%3C/svg%3E") 4 4, auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .a11y-fab, .a11y-panel, .cc-banner { transition: none; }
}