/* Psychologist and psychotherapist, a demo to personalise (name, phone, address are placeholders).
   Direction: "One motif" (tasteskill v2, seed 1749258661); palette redrawn once to "Blush and aubergine".
   The motif is the breath: a circle that grows on the inhale. It is the hero disc, the mask of every photograph,
   the shape of the buttons, the notches of the coupon and the disc you breathe with.
   Type is Manrope because the dealt Albert Sans has no Cyrillic. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colour: blush ground, aubergine ink; the two swap as whole fields */
  --bg: #edccbe;
  --surface: #e6bfae;
  --surface-2: #dcae9c;
  --ink: #351a2b;
  --muted: #6c4857;
  --field: #351a2b;
  --field-ink: #f4dfd5;
  --field-muted: #d2adaa;
  --field-2: #4b2c3e;          /* a lighter step of the field: the coupon's inputs */
  --card-c: #c99a92;

  /* type: Manrope, five steps */
  --font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 0.95rem + 1.3vw, 2.125rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 1rem + 4.2vw, 5.75rem);

  /* space */
  --m: clamp(20px, 5vw, 80px);
  --section: clamp(72px, 7vw, 120px);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-body); line-height: 1.55;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: var(--m); top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- controls: the button is cut to the motif, a pill ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: var(--step-body); line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.pill:active { transform: scale(0.97); }
.pill--light { background: var(--field-ink); color: var(--ink); }
.pill--small { min-height: 44px; padding: 0 20px; }
.link {
  text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover { background: var(--muted); color: var(--field-ink); }
  .pill--light:hover { background: #fff; color: var(--ink); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- hero: a dark ground and one giant disc, cropped by the right edge ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh; min-height: 640px; max-height: 1080px;
  background: var(--field); color: var(--field-ink);
  --disc: min(104svh, 66vw);
}
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px);
  padding: 22px var(--m);
}
.bar__mark { margin-right: auto; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.bar__nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.bar__nav .link { text-decoration-color: transparent; }
@media (hover: hover) and (pointer: fine) { .bar__nav .link:hover { text-decoration-color: currentColor; } }

.hero__disc {
  position: absolute; z-index: 1; width: var(--disc); aspect-ratio: 1;
  left: calc(87% - var(--disc) / 2); top: calc(58% - var(--disc) / 2);
  border-radius: 50%; overflow: hidden;
}
.hero__photo { width: 100%; height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* a neutral shade at the top of the disc, under the menu */
.hero__disc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 12, 20, 0.55) 0%, rgba(26, 12, 20, 0) 26%); /* taste-skill-ignore: neutral scrim under the menu on the photograph */
}
.hero__copy {
  position: absolute; z-index: 2; left: var(--m); top: 50%; transform: translateY(-46%);
  width: calc(87% - var(--disc) / 2 - var(--m) - 32px);
  container-type: inline-size;
}
/* sized by the room left of the disc, so it always holds two lines */
.hero__title { font-size: var(--step-display); font-size: min(var(--step-display), 11.4cqi); font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
.hero__lead { margin-top: 32px; max-width: 34ch; font-size: var(--step-body); color: var(--field-ink); }
.hero__acts { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero__breath { font-weight: 600; }

/* ---------- topics: the list on the left, one round picture on the right that follows the topic being read ---------- */
.topics {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: var(--section) var(--m) calc(var(--section) * 0.7);
  --c: min(40vw, 72svh, 640px);
}
.topics__text { grid-column: 1 / span 6; }
.topics__side { grid-column: 7 / -1; }
.topics__frame { position: sticky; top: max(24px, calc(50svh - var(--c) / 2)); width: min(var(--c), 100%); margin-left: auto; }
.topics__disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--surface-2); }
.topics__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms ease; }
.topics__pic.is-on { opacity: 1; }
.topics__title { font-size: var(--step-head); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.topics__group { margin-top: clamp(64px, 7vw, 96px); }
.topics__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 12px; }
.topics__name { font-size: var(--step-lead); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.topics__count { color: var(--muted); white-space: nowrap; }
.topics__list { list-style: none; padding: 0; }
/* the topics touch, so the one at the middle of the screen is always one of them */
.topic { padding: 20px 0 20px 36px; }
.topic__thumb { display: none; }
.topic__name { position: relative; font-size: calc(var(--step-body) * 1.25); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
/* a small circle marks the topic the picture belongs to; it fills like a breath */
.topic__name::before {
  content: ""; position: absolute; left: -36px; top: calc(0.65em - 7px); width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--ink); transform: scale(0.64);
  transition: transform 420ms var(--ease-out), background-color 200ms ease;
}
.topic.is-current .topic__name::before { background: var(--ink); transform: none; }
.topic__text { margin-top: 6px; max-width: 52ch; line-height: 1.55; }
.topics__more { margin-top: clamp(48px, 5vw, 72px); max-width: 52ch; }

/* ---------- about: an inset deep panel; the picture sits in the circle and is cropped by the panel ---------- */
.about { padding: 0 20px; }
.about__panel {
  position: relative; overflow: hidden; background: var(--field); color: var(--field-ink);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: clamp(48px, 5vw, 72px) calc(var(--m) - 20px) 0;
}
.about__title { grid-column: 1 / span 6; grid-row: 1; font-size: var(--step-head); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
.about__photo {
  grid-column: 1 / span 6; grid-row: 2; align-self: end;
  width: min(38vw, 560px); aspect-ratio: 1; margin-top: 56px; margin-bottom: calc(min(38vw, 560px) * -0.2);
  border-radius: 50%; overflow: hidden;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__text { grid-column: 8 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; padding-bottom: 72px; }
.about__block { max-width: none; }
.about__sub { font-size: var(--step-lead); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 14px; }
.about__block p + p { margin-top: 14px; }
.about__tbd { color: var(--field-muted); }

/* ---------- ways of working: a timetable of four rows — the way, what it is like, how long ---------- */
.ways {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
  padding: var(--section) var(--m);
}
.ways__title { grid-column: 1 / -1; margin-bottom: clamp(36px, 4vw, 56px); font-size: var(--step-head); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
.ways__list { grid-column: 1 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.way {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline;
  padding: 26px 0; border-top: 2px solid var(--ink);
}
.way:last-child { border-bottom: 2px solid var(--ink); }
.way__name { grid-column: 1 / span 4; font-size: var(--step-lead); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.way__text { grid-column: 5 / span 5; max-width: 46ch; line-height: 1.5; }
.way__time { grid-column: 10 / span 3; justify-self: end; font-size: var(--step-lead); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ways__foot { grid-column: 5 / span 5; margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ways__foot .link { font-weight: 600; }

/* ---------- steps: four tiles that grow, the circle inside each grows with them ---------- */
.steps { position: relative; padding: var(--section) var(--m); }
.steps__title { position: absolute; left: var(--m); top: var(--section); max-width: 7em; font-size: var(--step-head); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
.steps__row { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 10px; }
.step { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.step__tile { align-self: end; }
.step--1 { grid-column: 1 / span 2; }
.step--2 { grid-column: 3 / span 3; }
.step--3 { grid-column: 6 / span 3; }
.step--4 { grid-column: 9 / span 4; }
.step__tile { display: grid; place-items: center; overflow: hidden; container-type: size; }
.step--1 .step__tile { height: max(200px, 26svh); background: var(--surface); }
.step--2 .step__tile { height: max(270px, 36svh); background: var(--surface-2); }
.step--3 .step__tile { height: max(350px, 46svh); background: var(--card-c); }
.step--4 .step__tile { height: max(440px, 60svh); background: var(--field); }
.step__disc { width: min(86cqw, 72cqh); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.step__name { margin-top: 20px; font-size: var(--step-body); font-weight: 700; line-height: 1.3; }
.step__text { margin-top: 6px; max-width: 34ch; line-height: 1.55; }

/* ---------- prices: two fields that meet at a hard edge ---------- */
.prices { display: grid; grid-template-columns: 5fr 7fr; min-height: max(600px, 84svh); }
.plan { display: flex; flex-direction: column; padding: clamp(40px, 4vw, 64px) clamp(28px, 3vw, 48px); }
.plan--first { background: var(--surface-2); padding-left: var(--m); }
.plan--main { background: var(--field); color: var(--field-ink); padding-right: var(--m); }
.plan__name { font-size: var(--step-head); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.plan__who { margin-top: 20px; max-width: 26ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.plan__incl { margin-top: 28px; max-width: 46ch; color: var(--field-muted); }
.plan__foot { margin-top: auto; padding-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.plan__price { font-size: var(--step-display); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
.plan__per { display: inline-block; margin-left: 14px; font-size: var(--step-body); font-weight: 500; letter-spacing: 0; vertical-align: 0.2em; }

/* ---------- the inquiry: a coupon with two notches and a perforation ---------- */
.ask { padding: var(--section) var(--m); }
.coupon {
  position: relative; width: calc(100% * 10 / 12); margin: 0 auto;
  display: grid; grid-template-columns: 38fr 62fr;
  background: var(--field); color: var(--field-ink);
}
.coupon__body::before, .coupon__body::after {
  content: ""; position: absolute; left: -16.5px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--bg);
}
.coupon__body::before { top: -14px; }
.coupon__body::after { bottom: -14px; }
.coupon__stub { display: flex; flex-direction: column; gap: 24px; padding: 48px; }
.coupon__title { font-size: var(--step-lead); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.coupon__note { max-width: 34ch; color: var(--field-muted); }
.coupon__note .link { color: var(--field-ink); font-weight: 600; }
.coupon__body { position: relative; border-left: 5px dotted var(--bg); padding: 48px; }
.coupon__view { display: flex; flex-direction: column; gap: 10px; }
.field { display: block; }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: 0;
  background: var(--field-2); color: var(--field-ink);
}
.field input::placeholder { color: var(--field-muted); opacity: 1; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f4dfd5' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.field select option { background: var(--field); color: var(--field-ink); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--field-ink); outline-offset: 0; }
.coupon__hint { padding: 12px 18px; background: var(--field-2); color: var(--field-ink); font-size: var(--step-small); line-height: 1.5; }
.coupon__send {
  display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 6px; border: 0;
  background: var(--field-ink); color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.coupon__send:active { transform: scale(0.98); }
.coupon__send[disabled] { opacity: 0.7; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .coupon__send:hover { background: #fff; } }
.coupon__status { min-height: 1.4em; font-size: var(--step-small); color: var(--field-muted); }
.coupon__status:empty { min-height: 0; }
.coupon__panel-title { font-size: var(--step-lead); font-weight: 600; line-height: 1.15; }
.msg { display: block; padding: 16px 18px; background: var(--field-2); line-height: 1.5; }
.coupon__back {
  align-self: flex-start; margin-top: 4px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font-weight: 600; text-decoration: underline; text-underline-offset: 0.22em;
}
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- one minute of breathing: the disc is the breath ---------- */
.breathe { position: relative; height: clamp(600px, 80svh, 780px); overflow: hidden; --d: min(58svh, 44vw); }
.breathe__stage { position: absolute; left: 52%; top: 50%; width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%); }
.breathe__disc {
  position: absolute; inset: 0; border-radius: 50%; color: var(--field-ink); --fill: var(--field);
  display: grid; place-content: center; text-align: center;
  transform: scale(0.8); transition: transform 600ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.breathe__disc[data-tone="1"] { --fill: var(--muted); }
.breathe__disc[data-tone="2"] { --fill: var(--card-c); color: var(--ink); }
.breathe__shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.breathe__shape circle { fill: var(--fill); transition: fill 300ms ease; }
.breathe__disc { isolation: isolate; }
.breathe__disc[data-state="in"], .breathe__disc[data-state="hold-in"] { transform: scale(1); }
.breathe__disc[data-state="in"], .breathe__disc[data-state="out"] { transition: transform var(--dur, 4s) var(--ease-breath), background-color 300ms ease, color 300ms ease; }
/* the words do not scale with the breath */
.breathe__phase { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; transform: scale(1.25); }
.breathe__count { margin-top: 0.4em; font-size: var(--step-small); font-variant-numeric: tabular-nums; transform: scale(1.25); }
.breathe__disc[data-state="in"] .breathe__phase, .breathe__disc[data-state="hold-in"] .breathe__phase,
.breathe__disc[data-state="in"] .breathe__count, .breathe__disc[data-state="hold-in"] .breathe__count { transform: none; }
.breathe__disc[data-state="in"] .breathe__phase, .breathe__disc[data-state="out"] .breathe__phase,
.breathe__disc[data-state="in"] .breathe__count, .breathe__disc[data-state="out"] .breathe__count { transition: transform var(--dur, 4s) var(--ease-breath); }
.breathe__list { position: absolute; left: var(--m); bottom: calc(50% - var(--d) / 2); width: calc(52% - var(--d) / 2 - var(--m) - 24px); }
.breathe__title, .breathe__choices button { font-size: var(--step-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.breathe__title { color: var(--ink); }
.breathe__choices { margin-top: 12px; }
.breathe__choices { display: flex; flex-direction: column; align-items: flex-start; }
.breathe__choices button {
  padding: 4px 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer;
  transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.breathe__choices button[aria-checked="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.breathe__choices button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .breathe__choices button:hover { color: var(--ink); } }
.breathe__fact {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(52% + var(--d) / 2 + 32px); right: var(--m);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.breathe__note { font-size: var(--step-small); color: var(--muted); line-height: 1.5; }

/* ---------- questions: index cards filed in a drawer; the last part of the page ---------- */
main { position: relative; z-index: 1; background: var(--bg); }
.faq { position: relative; z-index: 0; background: var(--field); color: var(--field-ink); padding: var(--section) var(--m) 28px; }
.faq__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.faq__title { grid-column: 3 / span 8; font-size: var(--step-head); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 56px; }
.cards { grid-column: 3 / span 8; }
.card { position: relative; --card: var(--bg); }
.card + .card { margin-top: -40px; }
.card--b { --card: var(--surface-2); }
.card--c { --card: var(--card-c); }
.card__head { font-size: inherit; }
.card__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ink);
  text-align: left; cursor: pointer;
}
.card__tab {
  display: flex; align-items: center; justify-content: center;
  width: 200px; height: 40px; margin-left: calc(var(--k) * 120px);
  border-radius: 20px 20px 0 0; background: var(--card);
  font-size: var(--step-small); font-weight: 700;
}
.card__q {
  display: block; padding: 14px 28px 54px; background: var(--card);
  font-size: var(--step-body); font-weight: 700; line-height: 1.35;
  transition: padding-bottom 240ms var(--ease-out);
}
.card__a { margin-top: -1px; background: var(--card); color: var(--ink); padding: 1px 28px 54px; }
.card__a p { max-width: 54ch; }
.js .card__a { display: none; }
.js .card.is-open .card__a { display: block; }
.js .card.is-open .card__q { padding-bottom: 10px; }
@media (hover: hover) and (pointer: fine) { .card:not(.is-open) .card__btn:hover .card__q { padding-bottom: 60px; } }
.card__btn:focus-visible { outline: 3px solid var(--field-ink); outline-offset: 2px; }
.faq__end { grid-column: 3 / span 8; margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; }
.faq__call { color: var(--field-muted); }
.faq__phone { margin-left: 8px; font-size: var(--step-lead); font-weight: 600; color: var(--field-ink); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.faq__addr { color: var(--field-muted); }
.faq__legal { grid-column: 1 / -1; margin-top: clamp(64px, 7vw, 104px); font-size: var(--step-small); color: var(--field-muted); }
.faq :focus-visible { outline-color: var(--field-ink); }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .about__title { grid-column: 1 / -1; }
  .about__photo { grid-column: 1 / span 6; }
  .about__text { grid-column: 7 / -1; grid-row: 2; padding-top: 48px; }
  .steps__title { position: static; margin-bottom: 48px; max-width: none; }
  .topics { --c: min(40vw, 64svh); }
  .topics__text { grid-column: 1 / span 7; }
  .topics__side { grid-column: 8 / -1; }
  .way__name { grid-column: 1 / span 4; }
  .way__text { grid-column: 5 / span 6; }
  .way__time { grid-column: 11 / span 2; }
  .ways__foot { grid-column: 5 / span 6; }
  .breathe { --d: min(52svh, 44vw); }
  .faq__title, .cards, .faq__end { grid-column: 1 / -1; }
  .card__tab { width: 180px; margin-left: calc(var(--k) * 72px); }
}

/* ---------- the coupon stands upright below 900px ---------- */
@media (max-width: 900px) {
  .coupon { width: 100%; display: flex; flex-direction: column; }
  .coupon__body::before, .coupon__body::after { top: -16.5px; bottom: auto; }
  .coupon__body::before { left: -14px; }
  .coupon__body::after { left: auto; right: -14px; }
  .coupon__body { border-left: 0; border-top: 5px dotted var(--bg); }
}

/* ---------- the hero's upright composition: the disc rises from the bottom ---------- */
@media (max-width: 900px) {
  .hero { min-height: 640px; max-height: none; --disc: min(130vw, 108svh); }
  .hero__disc { left: calc(50% - var(--disc) / 2); top: 58svh; }
  .hero__disc::after { display: none; }
  .hero__copy { top: 15svh; transform: none; width: auto; right: var(--m); container-type: normal; }
  .hero__title { font-size: min(11.5vw, 5.5rem); }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 720px) {
  .bar { padding-block: 16px; }
  .bar__mark { font-size: var(--step-body); }
  .hero__title { font-size: 11.5vw; }
  .hero__lead { margin-top: 20px; font-size: 16px; }
  .hero__acts { margin-top: 24px; }

  /* no room for the picture beside the list: each topic carries its own small one */
  .topics { display: block; }
  .topics__side { display: none; }
  .topics__head { flex-wrap: wrap; margin-bottom: 8px; }
  .topic { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; }
  .topic__thumb { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  .topic__name { font-size: var(--step-body); font-weight: 700; }
  .topic__name::before { display: none; }

  .about { padding: 0 10px; }
  .about__panel { display: flex; flex-direction: column; padding: 40px calc(var(--m) - 10px) 0; }
  .about__text { padding: 36px 0 48px; gap: 36px; }
  .about__photo { order: 3; width: 86vw; align-self: center; margin: 0 0 -21.5vw; }

  .ways { display: block; }
  .ways__list { display: block; margin-top: 32px; }
  .way { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 20px 0; }
  .way__name, .way__time { grid-column: auto; }
  .way__text { grid-column: 1 / -1; grid-row: 2; }
  .ways__foot { margin-top: 28px; }

  .steps__row { display: flex; flex-direction: column; gap: 28px; }
  .step { display: flex; flex-direction: column; }
  .step__tile { align-self: stretch; }
  .step--1 .step__tile { height: 34vw; }
  .step--2 .step__tile { height: 46vw; }
  .step--3 .step__tile { height: 62vw; }
  .step--4 .step__tile { height: 78vw; }

  .prices { display: flex; flex-direction: column; min-height: 0; }
  .plan { min-height: 70svh; padding: 32px var(--m); }
  .plan--main { order: -1; }
  .plan__foot .pill { width: 100%; }

  .coupon__stub { padding: 32px 22px; gap: 20px; }
  .coupon__body { padding: 28px 22px 32px; }

  .breathe { height: auto; max-height: none; padding: var(--section) var(--m); display: flex; flex-direction: column; gap: 32px; --d: 86vw; }
  .breathe__stage { position: relative; left: auto; top: auto; transform: none; align-self: center; }
  .breathe__list, .breathe__fact { position: static; width: auto; transform: none; }

  .faq__inner { display: block; }
  .card + .card { margin-top: -36px; }
  .card__tab { width: 120px; margin-left: calc(var(--k) * 44px); }
  .card__q { padding: 12px 20px 48px; }
  .card__a { padding: 0 20px 48px; }
  .faq__end { margin-top: 40px; }
}

/* ---------- motion (no JS or reduced motion = everything visible and still) ---------- */
.lines .line { display: block; overflow: hidden; white-space: nowrap; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.lines [data-line] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* signature: the disc opens like a breath taken from its left edge while the picture settles from 1.12 */
  .js .shutter { clip-path: circle(0% at 20% 55%); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter > img { transform: scale(1.12); transition: transform 1600ms var(--ease-out); }
  .js .shutter.is-in { clip-path: circle(75% at 20% 55%); }
  .js .shutter.is-in > img { transform: none; }
  /* then the disc breathes with the page: in for 6, hold for 3, out for 6 */
  .js .hero.is-loaded .hero__disc { animation: breathe 15s var(--ease-breath) 1.4s infinite; }

  .js .lines [data-line] { transform: translateY(105%); }
  .js .is-loaded .lines [data-line] { animation: line-up 1000ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 120ms + 420ms); }
  .js [data-rise] { opacity: 0; transform: translateY(18px); }
  .js .is-loaded [data-rise] { animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 560ms); }

  .js [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* the round pictures open from their centre */
  .js .reveal-mask { clip-path: circle(0% at 50% 50%); transition: clip-path 1100ms var(--ease-in-out); }
  .js .reveal-mask.is-in { clip-path: circle(71% at 50% 50%); }
  /* the topic picture opens from the centre over the one before it, like the circle of a breath */
  .js .topics__pic { opacity: 1; clip-path: circle(0% at 50% 50%); transition: clip-path 760ms var(--ease-out); }
  .js .topics__pic.is-on { clip-path: circle(71% at 50% 50%); }
  /* the circles in the steps grow as their tile arrives */
  .js .step .step__disc { transform: scale(0.7); transition: transform 1200ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
  .js .step.is-in .step__disc { transform: none; }

  .js .card.is-open .card__a { animation: answer 320ms var(--ease-out); }
  .panel-in { animation: answer 260ms var(--ease-out); }
}

@keyframes breathe { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 60% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .breathe__disc, .breathe__disc[data-state] { transform: scale(0.8); transition: none; }
  .breathe__phase, .breathe__count { transform: none !important; transition: none !important; }
}