/*
 * Deux marketing site: page styles.
 *
 * One stylesheet for both looks. Colours come from the --c-* names in
 * palettes.css; the shape language of each look (radii, borders, shadows,
 * fonts) is set once below as variables on [data-look], so the same rules
 * paint Soft (airy, soft shadows, a soft glow) and Bold (ink borders, hard
 * shadows, a dot grid). Phone screens live in phone.css.
 */

/* ---------- The shape language of each look ---------- */

[data-look="soft"] {
  --font-display: "Urbanist", "Urbanist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 22px;
  --r-card-lg: 32px;
  --r-tile: 20px;
  --r-icon: 16px;
  --r-btn: 999px;
  --r-chip: 999px;
  --r-seg: 18px;
  --r-seg-opt: 14px;
  --r-swatch: 24px;
  --bw: 0px;
  --bw-chip: 0px;
  --bw-hair: 1px;
  --icon-sw: 2.2;
  --sh-card: 0 18px 36px -26px var(--shadow);
  --sh-raised: 0 18px 36px -24px var(--shadow);
  --sh-btn: 0 16px 30px -16px var(--accent);
  --sh-btn-2: 0 8px 18px -12px var(--shadow);
  --sh-small: 0 8px 18px -12px var(--shadow);
  --sh-seg: 0 10px 30px -18px var(--shadow);
  --sh-phone: 0 44px 90px -40px var(--shadow), 0 0 0 1px var(--frame);
  --ground-repeat: no-repeat;
  --hdr-bg: var(--page);
  --hdr-bb: 1px solid var(--line);
  --h1-size: clamp(2.25rem, 1rem + 6.2vw, 4.5rem);
  --h1-ls: -0.035em;
  --h2-size: clamp(1.9rem, 1.15rem + 2.9vw, 3.1rem);
  --h2-ls: -0.03em;
  --fw-display: 800;
  --fw-strong: 800;
  --pv-r: 18px;
  --pv-bw: 0px;
  --pv-tex: none;
  --pv-row-r: 10px;
  --pv-row-bw: 0px;
  --pv-row-sh: none;
  --pv-deux-bg: var(--deux-soft);
  --pv-bubble-r: 10px;
  --pv-av-bw: 0px;
  --pv-line: var(--line);
  --pv-line-strong: var(--line-strong);
  --pv-av0: var(--pv0);
  --pv-av1: var(--pv1);
  --pv-av2: var(--pv2);
  --pv-bubble-bg: var(--accent);
  --pv-bubble-fg: var(--on-accent);
}

[data-look="bold"] {
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Space Grotesk", "Space Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 18px;
  --r-card-lg: 22px;
  --r-tile: 16px;
  --r-icon: 12px;
  --r-btn: 14px;
  --r-chip: 8px;
  --r-seg: 12px;
  --r-seg-opt: 9px;
  --r-swatch: 12px;
  --bw: 2.5px;
  --bw-chip: 2px;
  --bw-hair: 2px;
  --icon-sw: 2.8;
  --sh-card: 5px 5px 0 var(--ink);
  --sh-raised: 4px 4px 0 var(--ink);
  --sh-btn: 4px 4px 0 var(--ink);
  --sh-btn-2: 4px 4px 0 var(--ink);
  --sh-small: 3px 3px 0 var(--ink);
  --sh-seg: none;
  --sh-phone: 10px 10px 0 var(--ink);
  --ground-repeat: repeat;
  --hdr-bg: var(--card);
  --hdr-bb: 2.5px solid var(--ink);
  --h1-size: clamp(2.1rem, 1rem + 5.6vw, 4.2rem);
  --h1-ls: -0.03em;
  --h2-size: clamp(1.85rem, 1.1rem + 2.7vw, 2.9rem);
  --h2-ls: -0.025em;
  --fw-display: 800;
  --fw-strong: 700;
  --pv-r: 12px;
  --pv-bw: 2px;
  --pv-tex: radial-gradient(var(--dot) 1px, transparent 1.2px);
  --pv-row-r: 8px;
  --pv-row-bw: 1.5px;
  --pv-row-sh: 2px 2px 0 var(--ink);
  --pv-deux-bg: var(--deux);
  --pv-bubble-r: 6px;
  --pv-av-bw: 1.5px;
  --pv-line: var(--dot);
  --pv-line-strong: var(--ink);
  --pv-av0: var(--second);
  --pv-av1: var(--third);
  --pv-av2: var(--primary);
  --pv-bubble-bg: var(--primary);
  --pv-bubble-fg: var(--on-fill);
}

/* The headline fits its own column (container query units) where supported. */
@supports (width: 1cqi) {
  [data-look="soft"] {
    --h1-size: clamp(2.25rem, 13.5cqi, 4.75rem);
  }

  [data-look="bold"] {
    --h1-size: clamp(2.1rem, 12.5cqi, 4.4rem);
  }
}

/* ---------- Reset and base ---------- */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-page);
  background-image: var(--c-ground-img);
  background-size: var(--c-ground-size);
  background-repeat: var(--ground-repeat);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--c-text);
  text-wrap: balance;
}

h2 {
  font-size: var(--h2-size);
  line-height: 1.08;
  letter-spacing: var(--h2-ls);
}

h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--c-accent-text);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto;
}

:root {
  --gutter: clamp(16px, 4vw, 40px);
}

.wrap--narrow {
  width: min(100% - 2 * var(--gutter), 820px);
}

.vh,
.sw-seg__opt input,
.sw-dot input,
.look-card > input,
.opt > input {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-look="bold"] .only-soft,
[data-look="soft"] .only-bold {
  display: none !important;
}

.u-soft {
  display: var(--dd-soft);
}

.u-bold {
  display: var(--dd-bold);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Skip link ---------- */

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-btn);
  font-weight: 800;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* ---------- Drawn pieces: Deux, faces, icons ---------- */

.dx {
  display: inline-block;
  width: 46px;
  height: 33px;
  flex: none;
  overflow: visible;
}

.dx--brand {
  width: 40px;
  height: 29px;
}

.dx--44 {
  width: 44px;
  height: 31px;
}

.dx--46 {
  width: 46px;
  height: 33px;
}

.dx--hero {
  width: 120px;
  height: 86px;
}

.dxs-a {
  fill: var(--accent-soft);
  stroke: var(--accent);
}

.dxs-b {
  fill: var(--deux-soft);
  fill-opacity: 0.92;
  stroke: var(--deux);
}

.dxs-eye {
  fill: var(--text);
}

.dxs-mouth {
  fill: none;
  stroke: var(--text);
  stroke-linecap: round;
}

.dxb-a {
  fill: var(--primary);
  stroke: var(--ink);
}

.dxb-b {
  fill: var(--card);
  stroke: var(--ink);
}

.dxb-lens {
  fill: var(--third);
  stroke: var(--ink);
}

.dxb-eye {
  fill: var(--face);
}

.dxb-mouth {
  fill: none;
  stroke: var(--face);
  stroke-linecap: round;
}

/* People's faces (src/theme/v2/avatarArt.ts). These are drawn the same in every palette. */
:root {
  --face-feature: #22201F;
  --skin-a: #E3A87F;
  --hair-a: #2B2320;
  --shirt-a: #4F5BFF;
  --skin-b: #F1C9A5;
  --hair-b: #3B2F2A;
  --shirt-b: #FF6B8B;
}

.avs-shirt-a { fill: var(--shirt-a); }
.avs-skin-a { fill: var(--skin-a); }
.avs-hair-a { fill: var(--hair-a); }
.avs-shirt-b { fill: var(--shirt-b); }
.avs-skin-b { fill: var(--skin-b); }
.avs-hair-b { fill: var(--hair-b); }
.avs-feat { fill: var(--face-feature); }

.avs-mouth {
  fill: none;
  stroke: var(--face-feature);
  stroke-linecap: round;
}

.av {
  display: block;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}

.av--lg {
  width: 68px;
  height: 68px;
}

.avs-t0 { fill: var(--tint0); }
.avs-t1 { fill: var(--tint1); }
.avb-f0 { fill: var(--av0); stroke: var(--ink); }
.avb-f1 { fill: var(--av1); stroke: var(--ink); }
.avb-line { stroke: var(--face); }
.avb-eye { fill: var(--face); }

.ic {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-sw);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Header and the look switcher ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-page);
  border-bottom: var(--hdr-bb);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  [data-look="soft"] .site-header {
    background: color-mix(in srgb, var(--c-page) 84%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

[data-look="bold"] .site-header {
  background: var(--c-surface);
}

.header-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  text-decoration: none;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: var(--fw-display);
  letter-spacing: -0.03em;
  line-height: 1;
}

.nav {
  display: none;
}

.nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--r-chip);
  color: var(--c-text-2);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.nav a:hover {
  background: var(--c-surface);
  color: var(--c-text);
}

[data-look="bold"] .nav a:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

@media (min-width: 960px) {
  .nav {
    display: flex;
    gap: 2px;
    margin-left: auto;
  }
}

.switcher {
  position: relative;
  display: flex;
  align-items: center;
}

/* Without JavaScript the radios could not change anything: do not show them. */
html:not(.js) .switcher {
  display: none;
}

.switcher__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-text);
  font: 800 0.9375rem/1 var(--font-text);
  box-shadow: var(--sh-small);
  cursor: pointer;
}

.switcher__swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--r-swatch);
  background: var(--c-accent);
  border: var(--bw-chip) solid var(--c-ink);
}

[data-look="soft"] .switcher__swatch {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4.5px var(--c-line);
}

[data-look="bold"] .switcher__swatch {
  border-radius: 6px;
}

.switcher__panel {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sw-seg,
.sw-dots {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sw-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sw-seg {
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-seg);
  background: var(--c-surface);
  box-shadow: var(--sh-seg);
  border: var(--bw-chip) solid var(--c-ink);
}

.sw-seg__opt {
  position: relative;
  display: block;
  cursor: pointer;
}

.sw-seg__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-seg-opt);
  color: var(--c-text-2);
  font-weight: 800;
  font-size: 0.875rem;
  border: var(--bw-chip) solid transparent;
}

.sw-seg__opt input:checked + span {
  background: var(--c-text);
  color: var(--c-bg);
}

[data-look="bold"] .sw-seg__opt input:checked + span {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-ink);
  box-shadow: 2px 2px 0 var(--c-ink);
}

.sw-seg__opt input:focus-visible + span,
.sw-dot input:focus-visible + .sw-dot__sw {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.sw-dots {
  gap: 0;
}

.sw-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.sw-dot__sw {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--swatch);
}

[data-look="bold"] .sw-dot__sw {
  border-radius: 6px;
  box-shadow: none;
  border: 2px solid var(--c-ink);
}

.sw-dot input:checked + .sw-dot__sw {
  box-shadow: 0 0 0 3px var(--c-page), 0 0 0 5px var(--c-text);
}

[data-look="bold"] .sw-dot input:checked + .sw-dot__sw {
  box-shadow: 3px 3px 0 var(--c-ink);
  transform: translate(-1px, -1px);
}

[data-look="soft"] .sw-dots--bold,
[data-look="bold"] .sw-dots--soft {
  display: none;
}

/* Small screens: the switcher is one button that opens a panel. */
@media (max-width: 719.98px) {
  .js .switcher__toggle {
    display: inline-flex;
  }

  .js .switcher__panel {
    display: none;
  }

  .js .switcher.is-open .switcher__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: min(300px, calc(100vw - 2 * var(--gutter)));
    padding: 18px;
    border: var(--bw) solid var(--c-ink);
    border-radius: var(--r-card);
    background: var(--c-surface);
    box-shadow: var(--sh-raised);
  }

  .js .switcher.is-open .sw-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 8px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--c-muted);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .js .switcher.is-open .sw-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .js .switcher.is-open .sw-seg .sw-label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
  }

  .js .switcher.is-open .sw-seg__opt span {
    width: 100%;
    height: 44px;
    border: var(--bw-chip) solid transparent;
  }

  .js .switcher.is-open .sw-seg__opt input:not(:checked) + span {
    background: var(--c-surface-alt);
  }

  .js[data-look="bold"] .switcher.is-open .sw-seg__opt span {
    border-color: var(--c-ink);
  }

  .js .switcher.is-open .sw-dots {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .js .switcher.is-open .sw-dots .sw-label {
    flex: 0 0 100%;
  }

  .js .switcher.is-open .sw-dot {
    width: 48px;
    height: 48px;
  }

  .js .switcher.is-open .sw-dot__sw {
    width: 32px;
    height: 32px;
  }
}

/* ---------- Buttons and small pieces ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-btn);
  font: 800 1.0625rem/1.1 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: var(--sh-btn);
}

.btn--ghost {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-btn-2);
}

@media (max-width: 559.98px) {
  .cta .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  [data-look="soft"] .btn:hover {
    transform: translateY(-2px);
  }

  [data-look="bold"] .btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--c-ink);
  }
}

.chip {
  display: inline-block;
  padding: 6px 12px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: var(--r-chip);
  background: var(--c-surface-alt);
  color: var(--c-text-2);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
}

[data-look="bold"] .chip {
  background: var(--c-warm);
  color: var(--c-on-warm);
  transform: rotate(-2deg);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--c-accent-text);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

[data-look="bold"] .eyebrow {
  padding: 5px 11px;
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  background: var(--eb, var(--c-accent));
  color: var(--c-on-accent);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.875rem;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--c-ink);
}

#how .eyebrow { --eb: var(--c-accent); }
#helper .eyebrow { --eb: var(--c-deux); }
#looks .eyebrow { --eb: var(--c-calm); }
#private .eyebrow { --eb: var(--c-warm); }
#faq .eyebrow { --eb: var(--c-accent); }

[data-look="bold"] #helper .eyebrow { color: var(--c-on-deux-fill); }
[data-look="bold"] #looks .eyebrow { color: var(--c-on-calm); }
[data-look="bold"] #private .eyebrow { color: var(--c-on-warm); }

.lead {
  color: var(--c-text-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.fine {
  margin-top: 18px;
  color: var(--c-text-2);
  font-size: 0.9375rem;
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
}

.section--tight {
  padding-block: clamp(16px, 3vw, 40px);
}

.section-head {
  max-width: 740px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}

.section-head h2 {
  margin-bottom: 16px;
}

.section-head--left {
  margin-inline: 0;
  text-align: left;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 96px);
}

.hero__deco .deco {
  position: absolute;
  z-index: 0;
  overflow: visible;
  fill: var(--c-calm);
  stroke: var(--c-ink);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hero__deco .deco--star {
  width: 96px;
  height: 96px;
  top: 28px;
  right: 6%;
  transform: rotate(12deg);
}

.hero__deco .deco--squiggle {
  width: 130px;
  height: 38px;
  left: 48%;
  top: 26px;
  fill: none;
  stroke-width: 5;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero__copy {
  container-type: inline-size;
  max-width: 600px;
}

.hero h1 {
  margin-bottom: 22px;
  font-size: var(--h1-size);
  line-height: 1.02;
  letter-spacing: var(--h1-ls);
}

.hero .lead {
  max-width: 34em;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
}

.hl {
  color: var(--c-accent-text);
}

[data-look="bold"] .hl {
  display: inline-block;
  padding: 0 0.16em 0.06em;
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: 5px 5px 0 var(--c-ink);
  transform: rotate(-2deg);
  margin-top: 0.08em;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.cta--center {
  justify-content: center;
}

.hero__visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding: 0 0 12px;
}

.hero__phone {
  position: relative;
  z-index: 1;
}

.hero__phone--b {
  margin-top: 56px;
}

.hero__ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__ring::before,
.hero__ring::after {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  width: 62%;
  border: var(--ring-bw, 0) solid var(--c-ink);
}

.hero__ring::before {
  left: -6%;
  top: 2%;
  background: var(--c-accent-soft);
  opacity: 0.85;
}

.hero__ring::after {
  right: -6%;
  top: 22%;
  background: var(--c-deux-fill);
  opacity: 0.85;
}

[data-look="bold"] .hero__ring {
  --ring-bw: 3px;
}

[data-look="bold"] .hero__ring::before {
  background: var(--c-accent);
  opacity: 1;
}

[data-look="bold"] .hero__ring::after {
  background: var(--c-deux);
  opacity: 1;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 56px;
  }
}

@media (max-width: 639.98px) {
  .hero__visual {
    grid-template-columns: minmax(0, 340px);
    justify-content: center;
  }

  .hero__phone--a {
    display: none;
  }

  .hero__phone--b {
    margin-top: 0;
  }

  .hero__ring::before,
  .hero__ring::after {
    width: 78%;
  }

  .hero__deco .deco--star {
    top: 14px;
    right: 3%;
    width: 64px;
    height: 64px;
  }

  .hero__deco .deco--squiggle {
    display: none;
  }
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  overflow: hidden;
  padding: 0 26px 30px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.step__art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 156px;
  margin: 0 -26px 26px;
  background: var(--art, var(--c-accent-soft));
  border-bottom: var(--bw) solid var(--c-ink);
}

.step--1 { --art: var(--c-accent-soft); }
.step--2 { --art: var(--c-calm); }
.step--3 { --art: var(--c-deux-fill); }

.step--2 .step__art {
  padding-left: 36px;
}

.step__num {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  font: var(--fw-display) 1.1rem/1 var(--font-display);
  box-shadow: var(--sh-small);
}

[data-look="bold"] .step__num {
  border-radius: 10px;
  transform: rotate(-6deg);
}

.step h3 {
  margin-bottom: 10px;
}

.step p {
  color: var(--c-text-2);
}

.step .chip {
  margin-top: 16px;
}

.step__qr {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: 16px;
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-small);
}

[data-look="bold"] .step__qr {
  border-radius: 12px;
  transform: rotate(-4deg);
}

.step__qr .ic {
  width: 34px;
  height: 34px;
}

.step__bubbles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(260px, 82%);
}

.step__bubbles .bub {
  max-width: 82%;
  margin: 0;
  padding: 10px 14px;
  font-size: 0.9375rem;
  line-height: 1.35;
}

@media (max-width: 859.98px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin-inline: auto;
  }

  .step--3 {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 11px);
  }
}

@media (max-width: 599.98px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }

  .step--3 {
    grid-column: auto;
    width: auto;
  }
}

/* ---------- The helper ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

.feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.feature__stage {
  position: relative;
  padding: 58px 18px 30px;
  background: var(--stage, var(--c-accent-soft));
  border-bottom: var(--bw) solid var(--c-ink);
}

.feature--a { --stage: var(--c-accent-soft); }

@supports (background: color-mix(in srgb, red 50%, blue)) {
  [data-look="soft"] .feature--a {
    --stage: color-mix(in srgb, var(--accent-soft), var(--accent) 12%);
  }
}
.feature--b { --stage: var(--c-calm); }
.feature--c { --stage: var(--c-deux-fill); }

.feature__body {
  padding: 24px 26px 30px;
}

.feature__body h3 {
  margin-bottom: 10px;
}

.feature__body p {
  color: var(--c-text-2);
}

.feature__hint {
  margin-top: 12px;
  color: var(--c-muted);
  font-size: 0.9375rem;
  font-weight: 700;
}

.tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  padding: 5px 11px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: var(--r-chip);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: var(--sh-small);
}

[data-look="bold"] .tag {
  color: var(--c-text);
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
}

.helper-notes {
  display: grid;
  gap: 8px;
  max-width: 680px;
  margin: 40px auto 0;
  color: var(--c-muted);
  font-size: 0.9375rem;
  text-align: center;
}

@media (max-width: 1039.98px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin-inline: auto;
    gap: 26px;
  }

  .feature--c {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 13px);
  }
}

@media (max-width: 719.98px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }

  .feature--c {
    grid-column: auto;
    width: auto;
  }
}

/* ---------- Make it yours ---------- */

.looks {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 960px) {
  .looks {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
  }
}

.looks__try {
  margin-top: 22px;
  color: var(--c-text);
  font-weight: 800;
}

.looks__facts {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
  color: var(--c-text-2);
}

.looks__facts li {
  position: relative;
  padding-left: 26px;
}

.looks__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-deux);
}

[data-look="bold"] .looks__facts li::before {
  border-radius: 4px;
}

.picker {
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 600px;
  justify-self: center;
  padding: clamp(14px, 3vw, 26px);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.pk-looks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

.look-card {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.look-card__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 8px 8px 14px;
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

[data-look="bold"] .look-card__box {
  border: 2.5px solid var(--c-ink);
  border-radius: 16px;
}

.look-card input:checked + .look-card__box {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2.5px var(--c-accent), var(--sh-card);
}

[data-look="bold"] .look-card input:checked + .look-card__box {
  border-color: var(--c-ink);
  box-shadow: 5px 5px 0 var(--c-ink);
  transform: translate(-2px, -2px);
}

.look-card input:focus-visible + .look-card__box {
  outline: 3px solid var(--c-focus);
  outline-offset: 4px;
}

.look-card__name {
  margin-top: 8px;
  padding: 0 6px;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-display);
  line-height: 1.2;
}

.look-card__blurb {
  padding: 0 6px;
  color: var(--c-text-2);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}

/* The two look previews (each one carries its own data-look and data-palette). */
.pv {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 168px;
  padding: 11px 10px;
  border: var(--pv-bw) solid var(--ink, var(--c-ink));
  border-radius: var(--pv-r);
  background-color: var(--c-bg);
  background-image: var(--pv-tex);
  background-size: 10px 10px;
  color: var(--c-text);
  font-family: var(--font-text);
  overflow: hidden;
}

.pv-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-text);
}

.pv-deux {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: var(--pv-row-bw) solid var(--c-ink);
  border-radius: var(--pv-row-r);
  background: var(--pv-deux-bg);
  box-shadow: var(--pv-row-sh);
}

.pv-deux .dx {
  width: 22px;
  height: 16px;
}

.pv-line,
.pv-l {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--pv-line);
}

.pv-deux .pv-line {
  flex: 1;
}

.pv-line--strong,
.pv-l--strong {
  background: var(--pv-line-strong);
}

.pv-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv-av {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  border: var(--pv-av-bw) solid var(--c-ink);
  border-radius: 50%;
}

.pv-av--0 { background: var(--pv-av0); }
.pv-av--1 { background: var(--pv-av1); }
.pv-av--2 { background: var(--pv-av2); }

.pv-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.pv-l {
  height: 5px;
}

.w45 { width: 45%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }

.pv-bubble {
  align-self: flex-end;
  margin-top: 2px;
  padding: 5px 8px;
  border: var(--pv-row-bw) solid var(--c-ink);
  border-radius: var(--pv-bubble-r);
  background: var(--pv-bubble-bg);
  color: var(--pv-bubble-fg);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}

.pk-colours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.pk-legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--c-text);
  font-size: 0.9375rem;
  font-weight: 800;
}

[data-look="soft"] .pk-colours--bold,
[data-look="bold"] .pk-colours--soft {
  display: none;
}

.opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  cursor: pointer;
}

.opt__chip {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-swatch);
  background: var(--bg);
}

[data-look="bold"] .opt__chip {
  border: 2px solid var(--c-ink);
}

.opt__sw {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--swatch);
}

[data-look="bold"] .opt__sw {
  border: 2px solid var(--ink);
  border-radius: 6px;
}

.opt input:checked + .opt__chip {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2.5px var(--c-accent);
}

[data-look="bold"] .opt input:checked + .opt__chip {
  border-color: var(--c-ink);
  box-shadow: 3px 3px 0 var(--c-ink);
  transform: translate(-1px, -1px);
}

.opt input:focus-visible + .opt__chip {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.opt__name {
  color: var(--c-text-2);
  font-size: 0.8125rem;
  font-weight: 800;
}

.opt input:checked ~ .opt__name {
  color: var(--c-text);
}

/* ---------- Private by design ---------- */

.trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  list-style: none;
}

.trust-card {
  padding: 26px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.trust-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: var(--r-icon);
  background: var(--tile, var(--c-accent-soft));
  color: var(--tile-fg, var(--c-on-accent-soft));
}

[data-look="bold"] .trust-icon {
  transform: rotate(-4deg);
}

.trust-icon .ic {
  width: 24px;
  height: 24px;
}

.trust-card--1 { --tile: var(--c-accent-soft); --tile-fg: var(--c-on-accent-soft); }
.trust-card--2 { --tile: var(--c-calm); --tile-fg: var(--c-on-calm); }
.trust-card--3 { --tile: var(--c-deux-fill); --tile-fg: var(--c-deux-text); }
.trust-card--4 { --tile: var(--c-warm); --tile-fg: var(--c-on-warm); }
.trust-card--5 { --tile: var(--c-accent); --tile-fg: var(--c-on-accent); }
.trust-card--6 { --tile: var(--c-calm); --tile-fg: var(--c-on-calm); }

[data-look="bold"] .trust-card--3 { --tile-fg: var(--c-on-deux-fill); }

.trust-card h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.trust-card p {
  color: var(--c-text-2);
  font-size: 1rem;
}

.trust-links {
  margin-top: 28px;
  color: var(--c-text-2);
  text-align: center;
}

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

@media (max-width: 599.98px) {
  .trust {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Safety ---------- */

.safety {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: clamp(22px, 3.5vw, 36px);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card-lg);
  background: var(--c-calm);
  color: var(--c-on-calm);
  box-shadow: var(--sh-card);
}

.safety__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: var(--r-icon);
  background: var(--c-surface);
  color: var(--c-text);
}

.safety__icon .ic {
  width: 28px;
  height: 28px;
}

.safety h2 {
  margin-bottom: 12px;
  color: var(--c-on-calm);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
}

.safety p {
  max-width: 46em;
  color: var(--c-on-calm);
}

.safety p + p {
  margin-top: 14px;
}

.safety__link {
  color: var(--c-on-calm);
  font-weight: 800;
}

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

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

.faq {
  display: grid;
  gap: 14px;
}

.faq details {
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--sh-small);
}

.faq summary {
  position: relative;
  display: block;
  min-height: 60px;
  padding: 18px 72px 18px 24px;
  color: var(--c-text);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-card);
}

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

.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border: var(--bw-chip) solid var(--c-ink);
  border-radius: 50%;
  background:
    linear-gradient(var(--c-text), var(--c-text)) center / 12px 2.5px no-repeat,
    linear-gradient(var(--c-text), var(--c-text)) center / 2.5px 12px no-repeat,
    var(--c-surface-alt);
}

[data-look="bold"] .faq summary::after {
  border-radius: 9px;
  background:
    linear-gradient(var(--c-on-accent), var(--c-on-accent)) center / 13px 3px no-repeat,
    linear-gradient(var(--c-on-accent), var(--c-on-accent)) center / 3px 13px no-repeat,
    var(--c-accent);
}

.faq details[open] summary::after {
  background-size: 12px 2.5px, 0 0, auto;
}

[data-look="bold"] .faq details[open] summary::after {
  background-size: 13px 3px, 0 0, auto;
}

.faq__a {
  padding: 0 24px 22px;
  color: var(--c-text-2);
}

.faq__a p + p {
  margin-top: 12px;
}

/* ---------- Closing call ---------- */

.section--cta {
  padding-top: clamp(24px, 4vw, 48px);
}

.join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(36px, 6vw, 68px) clamp(20px, 4vw, 48px);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card-lg);
  background: var(--c-deux-fill);
  box-shadow: var(--sh-card);
  text-align: center;
}

.join h2 {
  color: var(--c-on-deux-fill);
}

.join .lead {
  max-width: 34em;
  color: var(--c-on-deux-fill-2);
}

.join .cta {
  margin-top: 10px;
}

.join .fine {
  margin-top: 0;
  color: var(--c-on-deux-fill-2);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(40px, 6vw, 64px) 0 44px;
  border-top: var(--bw-hair) solid var(--c-line);
}

.beta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 44px;
  padding: 22px 26px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-card-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.beta__title {
  font-size: 1.5rem;
}

.beta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.foot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
}

.foot-tag {
  margin-top: 12px;
  color: var(--c-text-2);
}

.foot-h {
  margin: 0 0 12px;
  color: var(--c-muted);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.foot-col ul {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.foot-col a {
  display: inline-block;
  padding: 6px 0;
  color: var(--c-text);
  font-weight: 700;
  text-decoration: none;
}

.foot-col a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}

.foot-small {
  margin-top: 40px;
  color: var(--c-muted);
  font-size: 0.875rem;
}

@media (max-width: 719.98px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479.98px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Not found page ---------- */

.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-block: clamp(64px, 14vw, 160px);
  text-align: center;
}

.lost h1 {
  font-size: clamp(2.25rem, 1rem + 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.lost .lead {
  max-width: 30em;
}