/* =====================================================================
   STIPRĖK PAKELIUI · STYLES
   ---------------------------------------------------------------------
   1. Fonts            9.  Home sections        17. Contact
   2. Tokens           10. Inner page hero      18. Legal pages
   3. Base             11. Story page           19. 404
   4. Layout           12. Programs page        20. Cookie banner
   5. Type helpers     13. Accordions           21. Placeholders, notes
   6. Buttons          14. Free tool            22. Motion
   7. Header           15. Resources            23. Reduced motion, print
   8. The trail        16. Footer               24. Diagnostic quiz
   25. Home: numbers, prices, how 1:1 works   26. Before checkout
   27. 1:1 application         28. Offers, challenge, technique
   29. Member zone and coach panel (an app)
   Light theme; every colour is a token in section 2.
   Mobile first. Desktop layout from 900px, full header nav from 1200px.
   ===================================================================== */


/* 1. FONTS — self-hosted (no requests to Google), SIL Open Font License
   ===================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  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;
}


/* 2. TOKENS: EVERY COLOUR OF THE SITE LIVES HERE
   ---------------------------------------------------------------------
   To change the look, change the values below. Nothing else in this
   file uses a fixed colour, except the small arrow in <select> boxes
   (section 14: change "%23c2410c" there to your --accent-text).

   Three accent options (each passes WCAG AA with the text used on it):
     A · bright orange (default)
         --accent: #ff5a1f; --accent-rgb: 255 90 31; --accent-text: #c2410c; --on-accent: #111111;
     B · rich green
         --accent: #15803d; --accent-rgb: 21 128 61; --accent-text: #15803d; --on-accent: #ffffff;
     C · electric blue
         --accent: #2563eb; --accent-rgb: 37 99 235; --accent-text: #1d4ed8; --on-accent: #ffffff;
     For B and C also set --dark-accent-text to a lighter tint (#4ade80 or #93b4ff).
   ===================================================================== */
:root {
  /* Light surfaces */
  --bg: #ffffff;               /* page background */
  --bg-alt: #f7f7f5;           /* every other section, to separate them */
  --surface: #f7f7f5;          /* cards on a white section */
  --surface-2: #ececea;        /* progress tracks, skeletons */
  --surface-on-alt: #ffffff;    /* cards on a --bg-alt section */
  --field-bg: #ffffff;         /* inputs, checkboxes */

  /* Text (contrast on white / on --bg-alt) */
  --ink: #111111;              /* headings, strong text: 18.9:1 */
  --text-body: #333333;        /* paragraphs: 12.6:1 */
  --text-muted: #5c5c57;       /* captions, hints: 6.7:1 / 6.3:1 */
  --placeholder: #767670;      /* input placeholders: 4.6:1 */

  /* The one accent colour */
  --accent: #ff5a1f;           /* buttons, the trail, highlights (fills and lines) */
  --accent-rgb: 255 90 31;     /* the same colour as numbers, for soft tints */
  --accent-text: #c2410c;      /* accent-coloured TEXT on light backgrounds: 5.2:1 */
  --on-accent: #111111;        /* text on accent buttons: 6.1:1 */

  /* Lines and controls */
  --ink-rgb: 17 17 17;
  --bg-rgb: 255 255 255;
  --line: rgb(var(--ink-rgb) / 0.1);
  --line-strong: rgb(var(--ink-rgb) / 0.2);
  --control-border: #8a8a85;   /* form controls: 3.5:1 (WCAG 1.4.11 needs 3:1) */
  --glow: rgb(var(--accent-rgb) / 0.35);
  --shadow: 0 18px 40px -24px rgb(var(--ink-rgb) / 0.28);

  /* Messages */
  --error: #b42318;            /* error text and borders: 6.6:1 */
  --fit-yes: #15803d;          /* green ticks in "Tai tau, jei…" */
  --fit-no: #dc2626;           /* red crosses in "Tai ne tau, jei…" */
  --error-bg: #fef3f2;
  --note-border: #b7791f;      /* developer notes, placeholders */
  --note-bg: #fff6dc;
  --note-text: #6b4400;

  /* Dark sections (footer, the "proof" section): see .theme-dark below */
  --dark-bg: #111111;
  --dark-bg-alt: #1a1a1a;
  --dark-surface: #1c1c1c;
  --dark-surface-2: #2a2a2a;
  --dark-ink: #ffffff;
  --dark-text-body: #d6d6d1;   /* 13.4:1 on --dark-bg */
  --dark-text-muted: #a8a8a2;  /* 7.9:1 */
  --dark-accent-text: #ff7a45; /* 7.3:1 */

  /* Logo mark and the mountain scenes (SVG fills) */
  --logo-far: #c9c9c3;
  --logo-mountain: #111111;
  --logo-shade: #3d3d3a;
  --logo-snow: #ffffff;
  --logo-path: var(--accent);
  --logo-figure: #111111;
  --logo-trees: #111111;
  --scene-far: #ebe9e5;          /* the farthest range */
  --scene-side-top: #d9d6d0;     /* side peaks: lit face */
  --scene-side: #c6c3bc;         /* side peaks: shadow face */
  --scene-lit-1: #77736c;        /* the mountain, lit facets top → bottom */
  --scene-lit-2: #66625c;
  --scene-lit-3: #57544f;
  --scene-lit-4: #4c4945;
  --scene-shade-1: #383532;      /* the mountain, shadow facets */
  --scene-shade-2: #2e2c29;
  --scene-shade-3: #262422;
  --scene-path: #f4f1ea;         /* the footpath on the mountain */
  --scene-mist: #ffffff;
  --scene-snow: #ffffff;
  --scene-snow-shade: #d8d5cf;
  --scene-ground-top: #f4f3ef;
  --scene-ground-bottom: #e8e6e1;
  --scene-pine: #2f2d2a;         /* front pines: shaded / lit half */
  --scene-pine-lit: #4a4743;
  --scene-pine-mid: #8d8a84;
  --scene-pine-mid-lit: #a3a09a;
  --scene-pine-far: #b9b6b0;
  --scene-pine-far-lit: #ccc9c3;
  --scene-hill: #e4e2dc;

  /* Calculator macro colours */
  --walker-arm: #c63d0c;        /* the walker's arms: darker than --accent */
  --walker-iron: #2b2b2b;       /* the barbell and dumbbells */
  --sign-quit: #d92d20;         /* red: the walker's boxing gloves */

  --macro-protein: #111111;
  --macro-carbs: var(--accent);
  --macro-fat: #bdbdb6;

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(3.4rem, 1.4rem + 8.4vw, 8.75rem);
  --fs-h1: clamp(2.9rem, 1.7rem + 5vw, 6rem);
  --fs-h2: clamp(2.35rem, 1.5rem + 3.3vw, 4.4rem);
  --fs-h3: clamp(1.55rem, 1.3rem + 0.9vw, 2.05rem);
  --fs-lead: clamp(1.15rem, 1.03rem + 0.45vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  /* Space */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --max: 1180px;
  --section: clamp(5.5rem, 3.5rem + 8vw, 11rem);
  --trail-pad: 1.85rem;        /* extra room on the trail side, small screens */
  --radius: 18px;
  --radius-sm: 10px;
  --header-h: 4.75rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);

  color-scheme: light;
}

/* A dark band: the same components, switched to the dark values above */
.theme-dark, .site-footer {
  --bg: var(--dark-bg);
  --bg-alt: var(--dark-bg-alt);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --field-bg: var(--dark-bg);
  --ink: var(--dark-ink);
  --text-body: var(--dark-text-body);
  --text-muted: var(--dark-text-muted);
  --accent-text: var(--dark-accent-text);
  --ink-rgb: 255 255 255;
  --bg-rgb: 17 17 17;
  --control-border: #8a8a85;
  --logo-far: #5a5a55;
  --logo-mountain: #e9e9e4;
  --logo-shade: #a8a8a2;
  --logo-snow: #ffffff;
  --logo-figure: #111111;
  --logo-trees: #e9e9e4;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text-body);
}

/* Every other section on a slightly darker white, so sections separate */
.section--alt { --bg: var(--bg-alt); --surface: var(--surface-on-alt); background: var(--bg); }


/* 3. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* While JavaScript fills in the text, keep the page invisible for a moment.
   A fallback animation reveals it anyway after 2.5 s. */
.js body { opacity: 0; animation: sp-failsafe 0s 2.5s forwards; }
.js.is-ready body { opacity: 1; animation: none; transition: opacity 0.5s var(--ease-soft); }
@keyframes sp-failsafe { to { opacity: 1; } }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-text);
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--accent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

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

::selection { background: var(--accent); color: var(--on-accent); }

/* <main> receives focus from the skip link; no outline needed on the whole page */
main:focus { outline: none; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; color: var(--on-accent); }

noscript p {
  max-width: 40rem;
  margin: 8rem auto;
  padding: 0 var(--gutter);
  color: var(--ink);
}


/* 4. LAYOUT
   ===================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(46rem + 2 * var(--gutter)); }

.section {
  position: relative;
  padding-block: var(--section);
}
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--flush-top { padding-top: 0; }

.section__head {
  position: relative;
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section__head h2 { font-size: var(--fs-h2); }
.section__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-body); max-width: 38rem; }

.split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

/* Small screens: leave room on the left for the trail */
@media (max-width: 899.98px) {
  .has-trail .container { padding-left: calc(var(--gutter) + var(--trail-pad)); }
  .has-trail .hero .container {
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + var(--trail-pad));
  }
}

.d-only { display: none !important; }
@media (min-width: 900px) {
  .d-only { display: revert !important; }
  .m-only { display: none !important; }
}


/* 5. TYPE HELPERS
   ===================================================================== */
.eyebrow {
  margin: 0;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }

/* The gold full stop that ends every page title.
   On Home and My story the trail starts from it. */
.title-dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.35em 0.04em var(--glow);
  vertical-align: 0;
}

.prose { max-width: 40rem; }
.prose p { color: var(--text-body); }
.prose p + p { margin-top: 1.1em; }

.check-list, .dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.dash-list li {
  position: relative;
  padding-left: 1.6rem;
}
.dash-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.8em;
  width: 0.85rem;
  height: 1px;
  background: var(--accent);
}


/* 6. BUTTONS AND LINKS
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.1rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9688rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0);
}
.btn--primary:hover {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 30px -14px rgb(var(--accent-rgb) / 0.6);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent-text); color: var(--ink); background: rgb(var(--accent-rgb) / 0.06); }

/* A button that scrolls down the page: the arrow points down */
.btn--down svg { transform: rotate(90deg); }
.btn--down:hover svg { transform: rotate(90deg) translateX(3px); }

.btn--sm { min-height: 2.5rem; padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.9688rem;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / 0.35);
  padding-bottom: 0.2em;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform 0.35s var(--ease); }
.link-arrow:hover { color: var(--ink); border-color: var(--ink); }
.link-arrow:hover svg { transform: translateX(4px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}


/* 7. HEADER
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0.75rem;
  left: 0;
  right: 0;
  z-index: 50;
  padding-inline: calc(var(--gutter) * 0.6);
  pointer-events: none;
}
.site-header__bar {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(var(--max) + 2.5rem);
  margin-inline: auto;
  min-height: 3.6rem;
  padding: 0.45rem 0.5rem 0.45rem 0.9rem;
  border-radius: 999px;
}
/* The frosted background lives on a pseudo-element so the mobile
   menu (position: fixed) can still cover the whole screen. */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid transparent;
  background: transparent;
  transition: background-color 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
}
.site-header.is-scrolled .site-header__bar::before {
  background: rgb(var(--bg-rgb) / 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 2.35rem; height: 2.35rem; flex: none; }
.brand__text { display: grid; gap: 0.2rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.brand__tag {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

.lang-switch {
  display: inline-flex;
  flex: none;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang-switch button {
  min-width: 2.35rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
/* Log in / member zone: always in the bar. A round icon on phones and
   tablets (the label is read out by screen readers), icon + label from 1200px. */
.header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: 600 0.875rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.header-login svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent-text); }
.header-login { border-color: rgb(var(--accent-rgb) / 0.55); }
.header-login:hover { border-color: var(--accent-text); color: var(--ink); background: rgb(var(--accent-rgb) / 0.06); }
.header-login__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Tablets have room for the label too */
@media (min-width: 600px) and (max-width: 1199.98px) {
  .header-login { width: auto; height: auto; min-height: 2.75rem; padding: 0.45rem 0.95rem 0.45rem 0.8rem; }
  .header-login__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* "Narių zona" in the open menu (phones and tablets; wide screens have it in the bar) */
.panel-login { align-self: flex-start; gap: 0.5rem; margin-top: -1rem; }
.panel-login svg { width: 1.1rem; height: 1.1rem; color: var(--accent-text); }
@media (min-width: 1200px) { .panel-login { display: none; } }

.menu-toggle__lines { position: relative; width: 1.05rem; height: 0.7rem; }
.menu-toggle__lines::before, .menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.menu-toggle__lines::before { top: 0; }
.menu-toggle__lines::after { top: calc(100% - 1.5px); }
.site-header.is-open .menu-toggle__lines::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.site-header.is-open .menu-toggle__lines::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Mobile: the panel is a full-screen menu */
.site-header__panel {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 2.5rem) calc(var(--gutter) + 0.5rem) 2.5rem;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft), visibility 0s linear 0.45s;
}
.site-header.is-open .site-header__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft), visibility 0s;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-nav a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 2vw, 2.6rem);
  line-height: 1.15;
  text-decoration: none;
}
.site-nav a[aria-current="page"] { color: var(--accent-text); font-style: italic; }
.site-nav { flex: 1; }
.header-cta { align-self: flex-start; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* A second language switch inside the menu, used only on very small screens */
.panel-lang { display: none; }

/* Small phones: tighten the header so everything fits down to 320px */
@media (max-width: 400px) {
  .site-header__bar { gap: 0.5rem; padding-left: 0.7rem; }
  .brand { gap: 0.5rem; }
  .brand__mark { width: 2rem; height: 2rem; }
  .brand__name { font-size: 1.12rem; }
  .brand__tag { font-size: 0.5rem; letter-spacing: 0.2em; }
  .lang-switch button { min-width: 2.15rem; padding-inline: 0.4rem; }
  .menu-toggle, .header-login { width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 359.98px) {
  .site-header__bar > .lang-switch { display: none; }
  .panel-lang { display: inline-flex; align-self: flex-start; }
}

@media (min-width: 1200px) {
  .menu-toggle { display: none; }
  .site-header__panel {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    padding: 0;
    background: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .site-nav { flex: none; }
  .site-nav ul { display: flex; gap: 1.35rem; }
  .site-nav a {
    position: relative;
    padding-block: 0.4rem;
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.2;
    transition: color 0.3s var(--ease);
  }
  .site-nav a:hover { color: var(--ink); }
  .site-nav a[aria-current="page"] { color: var(--ink); font-style: normal; }
  .site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.2rem;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--glow);
    transform: translateX(-50%);
  }
  .header-cta { align-self: auto; }
  .brand { margin-right: auto; }

  /* "Programs" stands out: an orange pill that pops in, then glows softly now and then */
  .site-nav a[href$="programs.html"] {
    margin-block: -0.15rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgb(var(--accent-rgb) / 0.1);
    box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45);
    color: var(--accent-text);
    font-weight: 600;
    animation: sp-nav-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.9s both, sp-nav-glow 3.2s ease-in-out 2s infinite;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .site-nav a[href$="programs.html"]:hover { background: var(--accent); color: var(--on-accent); }
  .site-nav a[href$="programs.html"]::after { display: none; }
}
/* Wide screens: "Log in" gets its label next to the icon */
@media (min-width: 1440px) {
  .site-header__bar { max-width: calc(var(--max) + 6rem); }
  .header-login { width: auto; height: auto; min-height: 2.5rem; padding: 0.45rem 0.95rem 0.45rem 0.8rem; }
  .header-login__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* Phones and tablets: in the open menu, "Programs" is orange */
.site-nav a[href$="programs.html"] { color: var(--accent-text); }
@keyframes sp-nav-pop {
  0% { transform: scale(0.75); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sp-nav-glow {
  0%, 70%, 100% { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45), 0 0 0 0 rgb(var(--accent-rgb) / 0); }
  35% { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.45), 0 0 0 6px rgb(var(--accent-rgb) / 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a[href$="programs.html"] { animation: none; }
}


/* 8. THE TRAIL (drawn by assets/js/trail.js)
   ===================================================================== */
.has-trail { position: relative; }
.has-trail .container { position: relative; z-index: 2; }

.trail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.trail__ghost {
  fill: none;
  stroke: var(--accent-text);
  stroke-opacity: 0.38;
  stroke-width: 1;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.trail__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The walker at the tip of the line: heavier at the top of the page,
   leaner and stronger the further down you scroll (drawn by trail.js) */
.trail__head {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;                 /* above the content, so stop markers and buttons never hide it */
  /* the figure's middle sits on the line: 50% across, 60.5% down its box */
  width: 36px;
  height: 45.6px;
  margin: -27.6px 0 0 -18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-soft), margin-top 0.4s var(--ease-soft);
  will-change: transform;
}
/* on the mountain the feet stand on the path */
.trail__head.is-climb { margin-top: -43.3px; }
@media (min-width: 900px) {
  .trail__head { width: 42px; height: 53.2px; margin: -32.2px 0 0 -21px; }
  .trail__head.is-climb { margin-top: -50.5px; }
}
@media (min-width: 1200px) {
  .trail__head { width: 50px; height: 63.3px; margin: -38.3px 0 0 -25px; }
  .trail__head.is-climb { margin-top: -60.1px; }
}
.trail__head.is-on { opacity: 1; }
.walker {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* a thin light outline, so the figure stays visible over the line and dark sections */
  filter: drop-shadow(0 0 1px var(--bg)) drop-shadow(0 0 1px var(--bg)) drop-shadow(0 3px 6px rgb(var(--accent-rgb) / 0.35));
}
.walker__body { fill: var(--accent); }
.walker__limb { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.walker__detail { fill: none; stroke: var(--bg); stroke-width: 0.9; stroke-linecap: round; }
.walker__iron { fill: var(--walker-iron); stroke: var(--walker-iron); }
.walker__rope { fill: none; stroke: var(--walker-iron); stroke-width: 1.1; stroke-linecap: round; }
.walker__rope--thick { stroke-width: 2.2; }
.walker__wheel { fill: none; stroke: var(--walker-iron); stroke-width: 2.2; }
.walker__spokes { fill: none; stroke: var(--walker-iron); stroke-width: 0.8; stroke-opacity: 0.6; }
.walker__frame { fill: none; stroke: var(--walker-iron); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.walker__far { opacity: 0.55; }
.walker__pack { fill: var(--walker-iron); }
.walker__flag { fill: var(--accent); stroke: var(--bg); stroke-width: 0.8; animation: sp-flag 1.6s ease-in-out infinite alternate; }
@keyframes sp-flag { from { transform: skewY(-6deg) scaleX(0.94); } to { transform: skewY(5deg) scaleX(1.04); } }
/* The path through the mountain scene: drawn by trail.js along the same curve as the line */
/* the footpath on the mountain: a thin pale trail under the line */
.trail__road { fill: none; stroke: var(--scene-path); stroke-opacity: 0.55; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.walker__arm { stroke: var(--walker-arm); }   /* a darker orange, so arms read in front of the body */
.walker__bicep { fill: var(--walker-arm); }
.walker__eyes { stroke-width: 0.7; }
.walker__stars { fill: var(--walker-arm); }
.walker__glove { fill: var(--sign-quit); stroke: var(--bg); stroke-width: 0.6; }

/* Good-habit signs on the line: orange discs with solid icons.
   The ones the walker hasn't reached yet are faint. */
.trail__marks { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.trail__mark {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 2.5px var(--bg), 0 6px 14px -6px rgb(var(--ink-rgb) / 0.45);
  opacity: 0.35;
  transition: opacity 0.4s var(--ease-soft);
}
.trail__mark svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
  transform: scale(0.82);
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.trail__mark .ic-line, .trail__mark .ic-cut-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trail__mark .ic-cut { fill: var(--bg); }
.trail__mark .ic-cut-line { stroke: var(--accent); stroke-width: 1.4; }
.trail__mark .ic-soft { opacity: 0.55; }
.trail__mark.is-on { opacity: 1; }
.trail__mark.is-on svg { transform: scale(1); }
/* sizes follow the room in the page margin */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .trail__mark { width: 24px; height: 24px; margin: -12px 0 0 -12px; box-shadow: 0 0 0 2px var(--bg), 0 4px 10px -5px rgb(var(--ink-rgb) / 0.45); }
  .trail__mark svg { width: 16px; height: 16px; }
}
@media (min-width: 1200px) {
  .trail__mark { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .trail__mark svg { width: 22px; height: 22px; }
}
@media (min-width: 1440px) {
  .trail__mark { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .trail__mark svg { width: 26px; height: 26px; }
}

/* Invisible guides the trail runs along. CSS decides the side. */
.trail-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  pointer-events: none;
  --lane-side: left;
}
.trail-lane--r-all { --lane-side: right; }
@media (min-width: 900px) {
  .trail-lane--r { --lane-side: right; }
}

/* Desktop: after a list of stops the trail runs straight down the middle
   before it turns, so it never cuts through the last item's text */
.list-exit { display: none; }
@media (min-width: 900px) {
  .list-exit { display: block; width: 0; height: 0; margin: 2.5rem auto 0; --trail-tangent: v; }
}

/* A small dot that marks where the trail passes on its own */
.trail-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
}


/* 9. HOME SECTIONS
   ===================================================================== */

/* — Hero — */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 3rem) clamp(4rem, 3rem + 4vw, 7rem);
}
.hero__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__glow::before {
  content: "";
  position: absolute;
  width: 70rem;
  height: 70rem;
  left: -18rem;
  top: -30rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.13), rgb(var(--accent-rgb) / 0.04) 55%, transparent);
}
/* A faint distant ridge on the horizon: the mountain the trail leads to */
.hero__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(4.5rem, 2.5rem + 7vw, 10rem);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.hero__ridge svg { width: 100%; height: 100%; }
.hero__inner { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.022em;
}
/* Puts the italic word on its own line, keeping the gold dot beside it */
.hero__title em::before { content: ""; display: block; }
.hero__lower {
  position: relative;
  display: grid;
  gap: 1.75rem;
  max-width: 34rem;
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 30ch; }
.hero__note { font-size: var(--fs-small); color: var(--text-muted); }
.hero__members {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  align-self: flex-start;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__members svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-text); }
.hero__members:hover { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.06); }

@media (min-width: 900px) {
  .hero__lower { margin-left: clamp(0rem, 8vw, 9rem); }
}

/* — Why change doesn't last: the loop — */
.why__text { position: relative; display: grid; gap: 1.5rem; }
.why__text h2 { font-size: var(--fs-h2); }
.why__out {
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  font-style: italic;
  line-height: 1.35;
}

.loop {
  position: relative;
  width: min(100%, 17rem);
  margin: 0 auto;
}
.loop__ring {
  --loop-entry: top;           /* where the trail joins the circle: top | top-ccw | right (see trail.js) */
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
}
/* Where the trail leaves the loop: straight down from the right side */
.loop__exit {
  --trail-tangent: v;
  position: absolute;
  left: 100%;
  top: calc(100% + 1.5rem);
  width: 0;
  height: 0;
}
.loop__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgb(var(--accent-rgb) / 0.4);
}
.loop__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.9rem);
  font-style: italic;
}
.loop__pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  margin: -0.825rem 0 0 -0.825rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font: 600 0.72rem/1 var(--font-body);
}
.loop__pin--1 { left: 50%; top: 0; }
.loop__pin--2 { left: 100%; top: 50%; }
.loop__pin--3 { left: 50%; top: 100%; }
.loop__pin--4 { left: 0; top: 50%; }

.loop__stages {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.loop__stage {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.loop__stage-num {
  flex: none;
  color: var(--accent-text);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.1em;
}

@media (min-width: 900px) {
  .why__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .loop { width: clamp(14rem, 22vw, 19rem); margin-block: 4.5rem; }
  .loop__ring { --loop-entry: top-ccw; }   /* in at stop 1, then 2 left, 3 bottom, 4 right */
  .loop__exit { left: 0; top: calc(100% + 6rem); }  /* out from the left side */
  .loop__pin { display: none; }
  .loop__stages { position: absolute; inset: 0; margin: 0; display: block; }
  .loop__stage {
    position: absolute;
    display: grid;
    gap: 0.35rem;
    width: clamp(7.5rem, 10vw, 10rem);
    font-size: 0.95rem;
  }
  .loop__stage::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--accent);
  }
  .loop__stage:nth-child(1) { left: 50%; bottom: 100%; transform: translate(-50%, -2.6rem); text-align: center; justify-items: center; }
  .loop__stage:nth-child(1)::before { left: calc(50% - 4.5px); bottom: calc(-2.6rem - 4.5px); }
  .loop__stage:nth-child(4) { left: 100%; top: 50%; transform: translate(1.6rem, -50%); }
  .loop__stage:nth-child(4)::before { left: calc(-1.6rem - 4.5px); top: calc(50% - 4.5px); }
  .loop__stage:nth-child(3) { left: 50%; top: 100%; transform: translate(-50%, 1.4rem); text-align: center; justify-items: center; }
  .loop__stage:nth-child(3)::before { left: calc(50% - 4.5px); top: calc(-1.4rem - 4.5px); }
  .loop__stage:nth-child(2) { right: 100%; top: 50%; transform: translate(-1.6rem, -50%); text-align: right; justify-items: end; }
  .loop__stage:nth-child(2)::before { right: calc(-1.6rem - 4.5px); top: calc(50% - 4.5px); }
}

/* — My story in brief: moments along the trail — */
.moments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.75rem;
}
.moment { position: relative; display: grid; gap: 0.5rem; }
.moment__marker {
  --trail-tangent: v;
  position: absolute;
  left: calc((var(--gutter) + var(--trail-pad)) / -2);
  top: 0.45rem;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent-text);
  box-shadow: 0 0 0 5px var(--bg);
}
.moment__meta {
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.moment__title { font-size: var(--fs-h3); }
.moment__text { color: var(--text-body); font-size: var(--fs-small); }
/* each moment's photo (translations.js → storyMoments → photo) */
.moment__photo {
  width: 100%;
  max-width: 17rem;
  margin: 0.25rem 0 0.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.moment__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
@media (min-width: 900px) { .moment__photo { max-width: none; } }
.story-brief__foot { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }

.moments-wrap { position: relative; }
.moments-wrap .trail-lane.moments-wrap__exit { top: 6.6rem; bottom: auto; height: 2.5rem; }

/* Desktop: the markers sit in a shared band at the top, at different
   heights, so the trail waves through them without touching the text */
@media (min-width: 900px) {
  .moments { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2.25rem; }
  .moment { grid-template-rows: 7.5rem; align-content: start; }
  .moment__marker {
    --trail-tangent: h;
    position: relative;
    left: auto;
    top: auto;
    margin: 1rem 0 0;
    align-self: start;
  }
  .moment:nth-child(2) .moment__marker { margin-top: 4.75rem; }
  .moment:nth-child(3) .moment__marker { margin-top: 2rem; }
  .moment:nth-child(4) .moment__marker { margin-top: 5.75rem; }
}

/* — The system: five foundations — */
.stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}
.stop { position: relative; }
.stop__marker {
  position: absolute;
  left: calc((var(--gutter) + var(--trail-pad)) / -2);
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: -1.05rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 5px var(--bg);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1;
}
.stop__body { display: grid; gap: 0.45rem; }
.stop__title { font-size: var(--fs-h3); }
.stop__text { color: var(--text-body); font-size: var(--fs-small); max-width: 30rem; }
.stop__chips { gap: 0.4rem; margin-top: 0.35rem; max-width: 30rem; }
.stop__chips li { padding: 0.3rem 0.7rem; font-size: 0.8rem; background: var(--bg); }
.system__foot { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

@media (min-width: 900px) {
  .stops { gap: 2.25rem; }
  .stop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr);
    align-items: start;
  }
  .stop__marker {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    font-size: 1.45rem;
  }
  .stop:nth-child(odd) .stop__marker { transform: translateX(-1.6rem); }
  .stop:nth-child(even) .stop__marker { transform: translateX(1.6rem); }
  .stop:nth-child(odd) .stop__body { grid-column: 1; grid-row: 1; text-align: right; justify-items: end; padding-top: 0.35rem; }
  .stop:nth-child(odd) .stop__chips { justify-content: flex-end; }
  .stop:nth-child(even) .stop__body { grid-column: 3; grid-row: 1; padding-top: 0.35rem; }
  .system__foot { text-align: center; }
}

/* — Home, phones: the three offers side by side, swiped one at a time (the next one peeks in),
     shorter: no description and the first 3 bullets ("Plačiau" has the rest) — */
@media (max-width: 899.98px) {
  .home .depths--offers {
    grid-auto-flow: column;
    grid-auto-columns: min(90%, 22rem);
    gap: 0.85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 1rem 0;
    scrollbar-width: none;
  }
  .home .depths--offers::-webkit-scrollbar { display: none; }
  .home .depths--offers .depth { scroll-snap-align: start; padding: 1.25rem 1.2rem; gap: 0.6rem; }
  .home .depths--offers .depth__icon, .home .depths--offers .depth__desc { display: none; }
  .home .depths--offers .depth__bullets { gap: 0.4rem; }
  .home .depths--offers .depth__bullets li { font-size: 0.875rem; line-height: 1.4; }
  .home .depths--offers .depth__bullets li:nth-child(n+4) { display: none; }
  .home .depths--offers .depth__price-alt, .home .depths--offers .depth__live { font-size: 0.8125rem; }
  .depths__swipe { margin-top: 0.25rem; color: var(--text-muted); font-size: var(--fs-small); }
}

/* — Three depths: cards — */
.depths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .depths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.depth {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface));
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.depth:hover { border-color: var(--line-strong); }
.depth__icon { width: 2.6rem; height: 2.6rem; color: var(--accent-text); }
.depth__meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.depth__title { font-size: var(--fs-h3); }
.depth__desc { color: var(--text-body); font-size: var(--fs-small); }
.depth__foot { margin-top: auto; padding-top: 0.5rem; }

/* — Free tool call to action — */
.tool-cta {
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgb(var(--accent-rgb) / 0.08), transparent 70%),
    var(--bg);
}
.tool-cta__text { position: relative; display: grid; gap: 1.5rem; }
.tool-cta__text h2 { font-size: var(--fs-h2); }
.ticket {
  position: relative;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(var(--bg-rgb) / 0.6);
}
.ticket li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 1.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  line-height: 1.2;
}
.ticket li + li { border-top: 1px dashed var(--line); }
.ticket svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--accent-text); }

/* — Photo frames and placeholders —
   A real photo (img[data-photo]) stays out of sight until it has loaded,
   then replaces the placeholder (main.js → initPhotos). */
.photo { position: relative; margin: 0; display: grid; gap: 0.85rem; }
.photo:not(.has-photo) img[data-photo] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo.has-photo .photo-ph { display: none; }
.photo img { object-position: 50% 30%; background: var(--surface); }
.photo img[src$="before.jpg"] { object-position: 50% 8%; }
.photo img, .photo-ph {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  object-fit: cover;
}
.photo-ph {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px dashed rgb(var(--accent-rgb) / 0.45);
  background:
    repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / 0.05) 0 1px, transparent 1px 13px),
    var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: center;
}
.photo-ph svg { width: 2rem; height: 2rem; color: var(--accent-text); }
.photo figcaption {
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.proof__frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 0.5rem + 2vw, 2.5rem);
  max-width: 50rem;
  margin-inline: auto;
}
.proof__caption {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);
  line-height: 1.1;
  color: var(--ink);
}
.proof__note {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* — Client results (hidden until enabled in config.js) — */
.results-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) { .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.result-card {
  display: grid;
  gap: 1rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.result-card blockquote {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.3;
}
.result-card__name { color: var(--ink); font-weight: 600; }
.result-card__meta { color: var(--accent-text); font-size: var(--fs-small); }
.results__note { margin-top: 1.5rem; color: var(--text-muted); font-size: var(--fs-small); }
.results__more { margin-top: 1.5rem; }
.theme-dark .results__more .link-arrow { color: var(--dark-accent-text); }
/* rezultatai.html (4B): the empty note and the honest footnote */
.results-empty { display: grid; gap: 1.25rem; max-width: 40rem; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.results-empty p { margin: 0; color: var(--text-body); font-size: 1.125rem; }
.results-note { margin-top: 2rem; max-width: 46rem; color: var(--text-muted); font-size: var(--fs-small); }

/* — About — */
.about__photo { max-width: 26rem; }
.about__text { position: relative; display: grid; gap: 1.5rem; }
.about__text h2 { font-size: var(--fs-h2); }
.facts {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}
.facts li {
  display: flex;
  gap: 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-small);
}
.facts li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--accent);
}

/* — Final call to action and the mountain — */
.summit {
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
}
.summit__text {
  position: relative;
  display: grid;
  gap: 1.75rem;
  justify-items: center;
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.summit__text h2 { font-size: var(--fs-h2); }
.summit__text p { max-width: 34rem; color: var(--text-body); font-size: var(--fs-lead); line-height: 1.55; }
.summit__text .actions { justify-content: center; }
.summit__scene {
  position: relative;
  max-width: 1680px;
  margin: clamp(2rem, 1rem + 4vw, 4rem) auto 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.summit__scene > svg { width: 100%; height: clamp(21rem, 50vw, 47rem); }

/* The logo standing in the valley */
.summit__logo {
  position: absolute;
  left: 50%;
  bottom: clamp(0.6rem, 0.2rem + 1.6vw, 2rem);
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.summit__mark { width: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); height: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); margin-bottom: 0.2rem; }
.summit__name { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.4vw, 2.3rem); font-weight: 600; line-height: 1; white-space: nowrap; }
.summit__tag { color: var(--accent-text); font-size: clamp(0.6rem, 0.55rem + 0.25vw, 0.75rem); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 899.98px) {
  .summit__logo { bottom: 0.4rem; gap: 0.15rem; }
  .summit__mark { width: 2rem; height: 2rem; margin-bottom: 0; }
  .summit__name { font-size: 1.05rem; }
  .summit__tag { font-size: 0.5rem; letter-spacing: 0.24em; }
}

/* The hidden bonus sign: pops up beside the summit when the walker gets there.
   --peak-x / --peak-y are set by main.js (initBonus). */
.summit__bonus {
  position: absolute;
  left: var(--peak-x, 50%);
  top: var(--peak-y, 50%);
  z-index: 4;
  display: grid;
  gap: 0.55rem;
  width: min(19.5rem, calc(100% - 2rem));
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.35), 0 22px 48px -18px rgb(var(--ink-rgb) / 0.45);
  opacity: 0;
  transform: translate(3.25rem, -42%) scale(0.6);
  transform-origin: 0 50%;
  transition: opacity 0.35s var(--ease-soft), transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.summit__bonus[hidden] { display: none; }
.summit__bonus.is-in { opacity: 1; transform: translate(3.25rem, -42%) scale(1); }
/* a little notch pointing at the summit */
.summit__bonus::before {
  content: "";
  position: absolute;
  left: -7px;
  top: calc(42% - 7px);
  width: 14px;
  height: 14px;
  background: var(--bg);
  box-shadow: -1px 1px 0 0 rgb(var(--accent-rgb) / 0.35);
  transform: rotate(45deg);
}
.summit__bonus-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.summit__bonus-close:hover { background: var(--bg-alt); color: var(--ink); }
.summit__bonus-close svg { width: 1rem; height: 1rem; }
.summit__bonus-eyebrow { color: var(--accent-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.summit__bonus-title { padding-right: 1.5rem; color: var(--ink); font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.1; }
.summit__bonus-text { color: var(--text-body); font-size: 0.92rem; line-height: 1.45; }
.summit__bonus-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.2rem; }
.summit__bonus-code {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: 1.5px dashed var(--accent);
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.07);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  user-select: all;
}
.summit__bonus-copy { min-height: 2.6rem; padding-inline: 1rem; }
.summit__bonus-note { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.summit__bonus .link-arrow { justify-self: start; font-size: 0.9rem; }
/* Every screen: the card pops up in the middle of the screen, over a dimmed page */
.summit__bonus {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  transform: translate(-50%, -50%) scale(0.85);
  transform-origin: 50% 50%;
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.35), 0 22px 48px -18px rgb(var(--ink-rgb) / 0.45), 0 0 0 100vmax rgb(var(--ink-rgb) / 0.35);
}
.summit__bonus.is-in { transform: translate(-50%, -50%) scale(1); }
.summit__bonus::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .summit__bonus, .summit__bonus.is-in { transition: opacity 0.3s; }
}

/* Mountain drawings: colours come from the --scene-* and --logo-* tokens */
.sc-sky-top { stop-color: var(--accent); stop-opacity: 0; }
.sc-sky-bottom { stop-color: var(--accent); stop-opacity: 0.1; }
.sc-ground-top { stop-color: var(--scene-ground-top); }
.sc-ground-bottom { stop-color: var(--scene-ground-bottom); }
.sc-sun-core { stop-color: var(--accent); stop-opacity: 0.26; }
.sc-sun-mid { stop-color: var(--accent); stop-opacity: 0.08; }
.sc-sun-edge { stop-color: var(--accent); stop-opacity: 0; }
.sc-sundisc { fill: var(--accent); fill-opacity: 0.16; }
.sc-mist-0 { stop-color: var(--scene-mist); stop-opacity: 0; }
.sc-mist-1 { stop-color: var(--scene-mist); stop-opacity: 0.8; }
.sc-cloud { fill: var(--scene-mist); opacity: 0.85; }
.sc-birds { fill: none; stroke: var(--scene-pine); stroke-opacity: 0.5; stroke-width: 1.6; stroke-linecap: round; }
.sc-far2 { fill: var(--scene-far); }
.sc-m-lit { fill: var(--scene-side-top); }
.sc-m-shade { fill: var(--scene-side); }
.sc-l1 { fill: var(--scene-lit-1); }
.sc-l2 { fill: var(--scene-lit-2); }
.sc-l3 { fill: var(--scene-lit-3); }
.sc-l4 { fill: var(--scene-lit-4); }
.sc-s1 { fill: var(--scene-shade-1); }
.sc-s2 { fill: var(--scene-shade-2); }
.sc-s3 { fill: var(--scene-shade-3); }
.sc-main path { stroke-linejoin: round; }
.sc-rock { fill: none; stroke: var(--scene-snow); stroke-opacity: 0.12; stroke-width: 1.4; stroke-linecap: round; }
.sc-streak { fill: var(--scene-snow); fill-opacity: 0.4; }
.sc-snow { fill: var(--scene-snow); }
.sc-snow-shade { fill: var(--scene-snow-shade); }
.sc-rim { fill: none; stroke: var(--accent); stroke-opacity: 0.45; stroke-width: 1.6; stroke-linecap: round; }
.sc-flagset { transition: opacity 0.35s var(--ease-soft); }
.summit__scene.flag-taken .sc-flagset { opacity: 0; }
.sc-pole { fill: none; stroke: var(--ink); stroke-width: 1.8;  stroke-linecap: butt; }
.sc-flag { fill: var(--accent); transform-box: fill-box; transform-origin: 0 50%; animation: sp-flag 1.6s ease-in-out infinite alternate; }
.sc-hill { fill: var(--scene-hill); }
.sc-horizon { fill: none; stroke: var(--line); stroke-width: 1; }
/* pines: each group sets the light and shaded tone of its trees */
.sc-pine-l { fill: var(--pine-l); }
.sc-pine-r, .sc-pine-t { fill: var(--pine-r); }
.sc-pines-far { --pine-l: var(--scene-pine-far-lit); --pine-r: var(--scene-pine-far); }
.sc-pines-mid { --pine-l: var(--scene-pine-mid-lit); --pine-r: var(--scene-pine-mid); }
.sc-pines { --pine-l: var(--scene-pine-lit); --pine-r: var(--scene-pine); }
.ridge__line { fill: none; stroke: var(--accent-text); stroke-opacity: 0.3; stroke-width: 1; }
.ridge__snow { fill: var(--line-strong); }
.ridge__fill { fill: var(--bg); stroke: rgb(var(--accent-rgb) / 0.5); stroke-width: 1; }
.ridge__snow--bright { fill: var(--scene-snow); fill-opacity: 0.9; }


/* 10. INNER PAGE HERO
   ===================================================================== */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 7.5rem)) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50rem 26rem at 10% 0%, rgb(var(--accent-rgb) / 0.1), transparent 70%);
}
.page-hero__inner { position: relative; display: grid; gap: 1.5rem; }
.page-hero h1 { font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.02em; max-width: 15ch; }
.page-hero .lead { max-width: 36rem; }
.page-hero__lower { position: relative; display: grid; gap: 1.5rem; max-width: 38rem; }
/* A page heading with a photo (programs.html): text, then the photo; side by side on wide screens */
.page-hero__inner--photo { gap: 2rem; }
.page-hero__text { display: grid; gap: 1.5rem; }
.page-hero__photo { width: 100%; max-width: 24rem; }
@media (max-width: 899px) {
  /* a wider crop on phones, so the plans aren't pushed far down */
  .page-hero__photo { max-width: 34rem; }
  .page-hero__photo img, .page-hero__photo .photo-ph { aspect-ratio: 4 / 3; object-position: 50% 25%; }
}
@media (min-width: 900px) {
  .page-hero__inner--photo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem); }
  .page-hero__photo { justify-self: end; }
}
/* Two photos side by side (programs.html) */
.photo-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); max-width: 52rem; }
.photo-strip .photo figcaption { grid-column: 1 / -1; }


/* 11. STORY PAGE
   ===================================================================== */
.chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.chapter { position: relative; }
.chapter__marker {
  position: absolute;
  left: calc((var(--gutter) + var(--trail-pad)) / -2);
  top: 0.15rem;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent-text);
  box-shadow: 0 0 0 5px var(--bg);
}
.chapter__body { display: grid; gap: 0.85rem; max-width: 36rem; }
.chapter__meta {
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chapter__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.chapter__text p { color: var(--text-body); }
/* each chapter's photo (translations.js → storyChapters → photo): under the text on phones,
   on the empty side of the zigzag on wide screens */
.chapter__photo {
  width: 100%;
  max-width: 20rem;
  margin: 1.5rem 0 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.chapter__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
/* the trainer's qualification and the Sports Law link, under the chapters */
.story-qual { max-width: 36rem; margin: clamp(3rem, 2rem + 3vw, 4.5rem) auto 0; color: var(--text-muted); font-size: 0.9375rem; text-align: center; }
.story-qual a, .facts a { color: var(--accent-text); }

@media (min-width: 900px) {
  .chapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr);
    align-items: start;
  }
  .chapter__marker {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0.6rem 0 0;
  }
  .chapter:nth-child(odd) .chapter__marker { transform: translateX(-1.4rem); }
  .chapter:nth-child(even) .chapter__marker { transform: translateX(1.4rem); }
  .chapter:nth-child(odd) .chapter__body { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; justify-items: end; }
  .chapter:nth-child(even) .chapter__body { grid-column: 3; grid-row: 1; }
  .chapter__photo { grid-row: 1; margin: 0; max-width: 19rem; }
  .chapter:nth-child(odd) .chapter__photo { grid-column: 3; }
  .chapter:nth-child(even) .chapter__photo { grid-column: 1; justify-self: end; }
}

.lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lesson;
  border-top: 1px solid var(--line);
}
.lessons li {
  counter-increment: lesson;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.15rem);
  line-height: 1.2;
}
.lessons li::before {
  content: counter(lesson, decimal-leading-zero);
  color: var(--accent-text);
  font: 600 0.75rem/1 var(--font-body);
  letter-spacing: 0.14em;
}

.name-block {
  position: relative;
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
}
.name-block h2 { font-size: var(--fs-h2); }
.name-block p { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-body); }

.story-end {
  display: grid;
  gap: 1.75rem;
  justify-items: center;
  text-align: center;
}
.story-end h2 { font-size: var(--fs-h2); }
.story-end p { max-width: 32rem; font-size: var(--fs-lead); line-height: 1.55; }
.story-end__mark { position: relative; width: 7rem; height: 7rem; margin-top: 1.5rem; }
.story-end__mark svg { width: 100%; height: 100%; }
.story-end__mark span { position: absolute; left: 50%; bottom: 0.2rem; width: 0; height: 0; }
.gate-status {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: var(--fs-small);
}


/* 12. PROGRAMS PAGE
   ===================================================================== */
.depths--full .depth { gap: 1.25rem; }
.depth__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
  color: var(--ink);
}
.depth__price-value { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; }
.depth__price-pre, .depth__price-period { color: var(--text-muted); font-size: var(--fs-small); }
.depth__label {
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.depth__bullets { font-size: var(--fs-small); color: var(--text-body); }
.depth__fine { color: var(--text-muted); font-size: 0.8125rem; text-align: center; }
.depth__actions { display: grid; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; }

.fit {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit__col {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.fit__col--yes { border-color: rgb(var(--accent-rgb) / 0.5); box-shadow: inset 0 3px 0 var(--accent); }
.fit__col h3 { font-size: var(--fs-h3); }
.fit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.fit__list li { position: relative; padding-left: 2rem; color: var(--text-body); }
/* "This is for you": green ticks; "This isn't for you": red crosses */
.fit__col--yes li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.42em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--fit-yes);
  border-bottom: 2px solid var(--fit-yes);
  transform: rotate(-45deg);
}
.fit__col--no li::before, .fit__col--no li::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.78em;
  width: 0.9rem;
  height: 2px;
  background: var(--fit-no);
  transform: rotate(45deg);
}
.fit__col--no li::after { transform: rotate(-45deg); }

/* Ticked bullet lists (program cards) */
.check-list li { position: relative; padding-left: 1.75rem; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.45em;
  width: 0.8rem;
  height: 0.42rem;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}


/* 13. ACCORDIONS (curriculum, FAQ)
   ===================================================================== */
.acc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover .acc__title { color: var(--accent-text); }
.acc__num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
}
.acc__heading { display: grid; gap: 0.25rem; }
.acc__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  line-height: 1.15;
  transition: color 0.3s var(--ease);
}
.acc__sub { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.45; }
.acc__icon {
  position: relative;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.7rem;
  height: 1px;
  background: var(--accent-text);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease);
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__panel { padding: 0 0 1.75rem; }
.acc--plain summary { grid-template-columns: minmax(0, 1fr) auto; }
.acc--plain .acc__title { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
.acc--plain .acc__panel p { max-width: 42rem; color: var(--text-body); }

.module-detail { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .module-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 3.5rem; }
}
.module-detail__label {
  margin-bottom: 0.85rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.3;
}
.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 0.8rem; }
.steps-list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.6rem;
  color: var(--text-body);
  font-size: var(--fs-small);
}
.steps-list li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 600;
}


/* 14. FREE TOOL
   ===================================================================== */
.notice {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgb(var(--accent-rgb) / 0.06);
  color: var(--text-body);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.notice svg { width: 1.3rem; height: 1.3rem; color: var(--accent-text); margin-top: 0.1rem; }
.notice strong { color: var(--ink); }

.tool-layout { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .tool-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; gap: 4rem; }
  .tool-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.tool-aside { display: grid; gap: 1.5rem; }
.tool-aside__how { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.tool-aside__how h2 { font-size: 1.6rem; }
.tool-aside__how p { font-size: var(--fs-small); color: var(--text-body); }

.form { display: grid; gap: 2.75rem; }
.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: 1.25rem;
}
.fieldset legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem);
  line-height: 1.1;
}
.fieldset__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: 1.1rem;
  font-style: italic;
}
.fieldset__hint { margin-top: -0.5rem; color: var(--text-muted); font-size: var(--fs-small); }

.field { display: grid; gap: 0.5rem; min-width: 0; }
.field__label { color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
.field__label small { color: var(--text-muted); font-weight: 400; }
.field__hint { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.45; }
.field__error { color: var(--error); font-size: 0.8125rem; font-weight: 600; }
.field__error:empty { display: none; }

.input, .select, .textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
/* The arrow colour is written into the image below (%23c2410c = #c2410c = --accent-text) */
.select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c2410c' stroke-width='1.5'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
.select option { background: var(--bg); color: var(--ink); }
.input:hover, .select:hover, .textarea:hover { border-color: rgb(var(--accent-rgb) / 0.6); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18);
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
[aria-invalid="true"] { border-color: var(--error) !important; }

.unit-input { position: relative; }
.unit-input .input { padding-right: 3.25rem; }
.unit-input__unit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

.grid-3 { display: grid; gap: 1rem; }
@media (min-width: 600px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-2 { display: grid; gap: 1rem; }
@media (min-width: 600px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Segmented choice (sex) */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  width: min(100%, 22rem);
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  color: var(--text-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.segmented input:checked + span { background: var(--accent); color: var(--on-accent); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Radio cards (activity, goal) */
.choices { display: grid; gap: 0.75rem; }
.choices--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__box {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 1rem 1.15rem 1rem 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.choice__box::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--control-border);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.choice__label { color: var(--ink); font-weight: 600; font-size: 0.9688rem; line-height: 1.3; }
.choice__desc { color: var(--text-muted); font-size: 0.8438rem; line-height: 1.45; }
.choice:hover .choice__box { border-color: var(--line-strong); }
.choice input:checked + .choice__box { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.09); }
.choice input:checked + .choice__box::before { border-color: var(--accent-text); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 9px var(--accent-text); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Food chips */
.food-groups { display: grid; gap: 1.5rem; }
.food-group__title {
  margin-bottom: 0.75rem;
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.food-group .chips { gap: 0.55rem; }
.food-group .chips li { padding: 0; border: 0; }   /* the pill is the chip itself, not the list item */
.chip { position: relative; display: inline-block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.3;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chip span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--control-border);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover span { border-color: var(--line-strong); }
.chip input:checked + span { border-color: var(--accent-text); color: var(--ink); background: rgb(var(--accent-rgb) / 0.1); }
.chip input:checked + span::before { background: var(--accent-text); border-color: var(--accent-text); }
.chip input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.form__submit { display: grid; gap: 0.85rem; justify-items: start; }
.form__summary { color: var(--error); font-size: var(--fs-small); font-weight: 600; }
.form__summary:empty { display: none; }

/* Results */
.calc-results { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.result-head {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(40rem 18rem at 100% 0%, rgb(var(--accent-rgb) / 0.12), transparent 70%),
    var(--surface);
}
@media (min-width: 900px) { .result-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.result-big { display: grid; gap: 0.5rem; }
.result-big__value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 2.5rem + 8vw, 8.5rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}
.result-big__unit { color: var(--accent-text); font-family: var(--font-display); font-size: 1.6rem; font-style: italic; }
.result-meta { display: grid; gap: 0.55rem; color: var(--text-body); font-size: var(--fs-small); }
.result-meta strong { color: var(--ink); font-weight: 600; }
.result-floor { margin-top: 1rem; }

.gate {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: var(--bg-alt);
}
@media (min-width: 900px) { .gate { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: start; } }
.gate__intro { display: grid; gap: 1rem; }
.gate__intro h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem); }
.gate__preview { display: grid; gap: 0.6rem; margin-top: 0.75rem; opacity: 0.5; filter: blur(3px); user-select: none; pointer-events: none; }
.gate__preview span { display: block; height: 0.85rem; border-radius: 999px; background: linear-gradient(90deg, var(--surface-2), rgb(var(--accent-rgb) / 0.25)); }
.gate__preview span:nth-child(2) { width: 82%; }
.gate__preview span:nth-child(3) { width: 64%; }
.gate__form { display: grid; gap: 1.1rem; }

.checkbox { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.75rem; align-items: start; cursor: pointer; color: var(--text-body); font-size: 0.875rem; line-height: 1.5; }
.checkbox input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: var(--field-bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.checkbox input::after {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  margin-top: -0.15rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s var(--ease);
}
.checkbox input:checked { background: var(--accent-text); border-color: var(--accent-text); }
.checkbox input:checked::after { transform: rotate(45deg) scale(1); }
.checkbox a { color: var(--accent-text); }

.plan__block--free { margin-top: 1.5rem; }
.plan { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); margin-top: 1.5rem; }
.plan__block { display: grid; gap: 1.5rem; }
.plan__block > h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.macros { display: grid; gap: 1rem; }
@media (min-width: 600px) { .macros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.macro {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.macro__label { color: var(--text-muted); font-size: var(--fs-small); display: flex; align-items: center; gap: 0.5rem; }
.macro__swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.macro__value { color: var(--ink); font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.macro__value small { font-size: 1.1rem; color: var(--text-muted); font-family: var(--font-body); }
.macro__pct { color: var(--accent-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; }
.macro-bar { display: flex; height: 0.6rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.macro-bar span { display: block; height: 100%; }
.sw-protein { background: var(--macro-protein); }
.sw-carbs { background: var(--macro-carbs); }
.sw-fat { background: var(--macro-fat); }

.meals { display: grid; gap: 1rem; }
@media (min-width: 900px) { .meals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meal {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.meal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.meal__title { font-size: 1.75rem; }
.meal__kcal { color: var(--accent-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.meal__items { list-style: none; margin: 0; padding: 0; display: grid; }
.meal__items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--line);
  color: var(--text-body);
  font-size: var(--fs-small);
}
.meal__items li span:last-child { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.day-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-body);
  font-size: var(--fs-small);
}
.day-total strong { color: var(--ink); }
.plan__fallback { color: var(--text-muted); font-size: var(--fs-small); }

/* Calculator: diet, food search, your own food */
.segmented--3 { width: min(100%, 30rem); }
.segmented--3 span { padding: 0.65rem 0.4rem; font-size: 0.875rem; line-height: 1.25; }
.food-search { display: grid; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.food-search__results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.food-search__results:empty { display: none; }
.food-search__hit {
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--accent-text);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.food-search__hit:hover { background: rgb(var(--accent-rgb) / 0.08); }
.food-search__none { color: var(--text-muted); font-size: var(--fs-small); }
.food-search__add { justify-self: start; }
.food-custom { display: grid; gap: 0.85rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.food-custom[hidden] { display: none; }
.food-custom__title { color: var(--ink); font-weight: 600; }

/* Calculator: 6-week outlook */
.projection__body { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
@media (min-width: 900px) { .projection__body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; } }
.projection__text { display: grid; gap: 0.75rem; color: var(--text-body); font-size: var(--fs-small); }
.projection__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); line-height: 1.1; }
.projection__arrow { color: var(--accent-text); }
.projection__chart svg { display: block; width: 100%; height: auto; }
.pj-grid { stroke: var(--line); stroke-width: 1; }
.pj-axis { fill: var(--text-muted); font-size: 12px; font-family: var(--font-body); }
.pj-band { fill: rgb(var(--accent-rgb) / 0.16); }
.pj-line { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pj-dot { fill: var(--bg); stroke: var(--accent-text); stroke-width: 2.5; }
.pj-dot--end { fill: var(--accent-text); }

/* Calculator: macro balance */
.macro-presets { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.preset { position: relative; display: block; cursor: pointer; }
.preset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.preset__box { display: grid; gap: 0.2rem; height: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.preset__name { color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.preset__desc { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.4; }
.preset:hover .preset__box { border-color: var(--line-strong); }
.preset input:checked + .preset__box { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.09); }
.preset input:focus-visible + .preset__box { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.macro-custom { display: grid; gap: 0.5rem; max-width: 34rem; }
.macro-custom[hidden] { display: none; }
.macro-custom__sum { color: var(--text-body); font-size: var(--fs-small); font-weight: 600; }
.macro-custom__sum.is-error { color: var(--error); }
.macro__range { color: var(--text-muted); font-size: 0.8125rem; }

/* Calculator: dishes in the sample day */
.meal__dish { color: var(--ink); font-weight: 600; margin-top: -0.4rem; }
.meal__items li.meal__extra { color: var(--text-muted); }
.meal__macros { color: var(--accent-text); font-size: 0.8125rem; font-weight: 600; }
.meal__how { color: var(--text-body); font-size: var(--fs-small); line-height: 1.55; }
.meal__how strong { color: var(--ink); }
.next-step {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line-strong);
  background: radial-gradient(40rem 20rem at 0% 100%, rgb(var(--accent-rgb) / 0.12), transparent 70%), var(--surface);
}
@media (min-width: 900px) { .next-step { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.next-step h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem); }
.next-step p { margin-top: 0.6rem; color: var(--text-body); }
.plan__tools { display: flex; flex-wrap: wrap; gap: 1rem; }


/* 15. RESOURCES
   ===================================================================== */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.filter__label { margin-right: 0.5rem; color: var(--text-muted); font-size: var(--fs-small); }
.filter button {
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--text-body);
  font: 600 0.875rem/1.2 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filter button:hover { border-color: var(--line-strong); color: var(--ink); }
.filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-text); color: var(--on-accent); }

.res-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.res-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.4s var(--ease);
}
.res-card:hover { border-color: var(--line-strong); }
.res-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(18rem 10rem at 30% 110%, rgb(var(--accent-rgb) / 0.2), transparent 70%),
    repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / 0.05) 0 1px, transparent 1px 14px),
    var(--bg-alt);
  color: var(--accent-text);
}
.res-card__thumb svg { width: 2.4rem; height: 2.4rem; }
.res-card__badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.85);
  border: 1px solid var(--line-strong);
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.res-card__body { display: grid; gap: 0.6rem; padding: 1.5rem; flex: 1; align-content: start; }
.res-card__meta { color: var(--accent-text); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.res-card__title { font-size: 1.6rem; line-height: 1.12; }
.res-card__text { color: var(--text-body); font-size: var(--fs-small); }
.res-card__link { margin-top: 0.5rem; justify-self: start; }
.res-empty { color: var(--text-muted); }
.res-card .t-video, .res-card .ic-video { display: none; }
.res-card[data-type="video"] .t-video, .res-card[data-type="video"] .ic-video { display: inline; }
.res-card[data-type="video"] .t-article, .res-card[data-type="video"] .ic-article { display: none; }
.res-card__thumb .ic-video, .res-card__thumb .ic-article { width: 2.4rem; height: 2.4rem; }
.res-card[data-type="video"] .res-card__thumb .ic-video { display: block; }
.res-card[data-type="article"] .res-card__thumb .ic-article { display: block; }


/* 16. FOOTER
   ===================================================================== */
.site-footer {
  position: relative;
  padding: clamp(4rem, 3rem + 4vw, 6.5rem) 0 2.5rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg), var(--bg-alt));
}
.site-footer__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(4.5rem, 3rem + 5vw, 8rem);
  pointer-events: none;
}
.site-footer__ridge svg { width: 100%; height: 100%; }
.home .site-footer__ridge { display: none; }
.site-footer__grid { display: grid; gap: 2.75rem; }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.site-footer__brand { display: grid; gap: 1.25rem; align-content: start; max-width: 22rem; }
.site-footer__brand .brand__mark { width: 3rem; height: 3rem; }
.site-footer__brand p { color: var(--text-muted); font-size: var(--fs-small); }
.footer-col h2 {
  margin-bottom: 1rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a, .footer-col button.link {
  color: var(--text-body);
  font-size: var(--fs-small);
  text-decoration: none;
}
.footer-col a:hover, .footer-col button.link:hover { color: var(--ink); }
button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-text);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.social a:hover { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.08); color: var(--ink); }
.social svg { width: 1.1rem; height: 1.1rem; }
.footer-col .lang-switch { margin-top: 1.25rem; }
.site-footer__bottom {
  display: grid;
  gap: 1rem;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}
@media (min-width: 900px) { .site-footer__bottom { grid-template-columns: minmax(0, 3fr) auto; align-items: start; gap: 3rem; } }
/* the seller's details (consumer law: who sells), on its own row */
.site-footer__seller { grid-column: 1 / -1; }
.quiz-footer__seller { margin-top: 0.5rem; }


/* 17. CONTACT
   ===================================================================== */
.contact-layout { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4.5rem; align-items: start; } }
.contact-form { display: grid; gap: 1.35rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.contact-form h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); margin-bottom: 0.5rem; }
.coaching-fields {
  display: grid;
  gap: 1.35rem;
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(var(--accent-rgb) / 0.05);
}
.coaching-fields h3 { font-size: 1.6rem; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.form-status:empty { display: none; }
.form-status.is-ok { border: 1px solid var(--accent); background: rgb(var(--accent-rgb) / 0.1); color: var(--ink); }
.form-status.is-error { border: 1px solid var(--error); background: rgb(var(--accent-rgb) / 0.08); color: var(--error); }
.contact-aside { display: grid; gap: 1.25rem; }
.aside-card { display: grid; gap: 0.75rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.aside-card h2, .aside-card h3 {
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.aside-card p { color: var(--text-body); font-size: var(--fs-small); }
.aside-card .big-link { color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; overflow-wrap: anywhere; }
.aside-card .big-link:hover { color: var(--accent-text); }


/* 18. LEGAL PAGES
   ===================================================================== */
.legal-layout { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 5rem; align-items: start; } }
.legal-toc { display: none; }
@media (min-width: 1000px) {
  .legal-toc { display: block; position: sticky; top: calc(var(--header-h) + 2rem); }
}
.legal-toc h2 {
  margin-bottom: 1rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.legal-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; counter-reset: toc; }
.legal-toc li { counter-increment: toc; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); font-size: 0.875rem; }
.legal-toc li::before { content: counter(toc) "."; color: var(--accent-text); }
.legal-toc a { color: var(--text-body); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); }
.legal { display: grid; gap: 2.75rem; max-width: 44rem; counter-reset: legal; }
.legal__updated { color: var(--text-muted); font-size: var(--fs-small); }
.legal-section { counter-increment: legal; display: grid; gap: 1rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal-section h2 { font-size: clamp(1.7rem, 1.45rem + 1vw, 2.25rem); }
.legal-section h2::before { content: counter(legal) ". "; color: var(--accent-text); }
.legal-section p, .legal-section li { color: var(--text-body); }
.legal-section ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.85rem; }
.legal-section li::marker { color: var(--accent-text); }
.legal-section strong { color: var(--ink); }


/* 19. 404
   ===================================================================== */
.notfound { min-height: 80vh; display: grid; align-items: center; }
.notfound .actions { margin-top: 1rem; }


/* 20. COOKIE BANNER
   ===================================================================== */
.cookie {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 60;
  display: grid;
  gap: 1rem;
  max-width: 27rem;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(var(--bg-rgb) / 0.97);
  box-shadow: var(--shadow);
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.55;
  transform: translateY(1rem);
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}
.cookie.is-visible { opacity: 1; transform: none; }
html.menu-open .cookie { visibility: hidden; }
@media (min-width: 600px) { .cookie { left: 1.25rem; bottom: 1.25rem; right: auto; } }
.cookie__title { color: var(--ink); font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; }
.cookie__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.cookie__actions .btn { min-height: 2.75rem; padding: 0.55rem 0.9rem; font-size: 0.8438rem; }
.cookie__actions--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cookie__actions--3 .btn { padding-inline: 0.5rem; }
.cookie__choose { display: grid; gap: 0.7rem; padding: 0.9rem 0 0.2rem; border-top: 1px solid var(--line); }
.cookie__choose .checkbox { font-size: 0.8438rem; line-height: 1.45; }
.cookie__choose .btn { min-height: 2.75rem; justify-self: start; font-size: 0.8438rem; }
.cookie__more { color: var(--accent-text); font-size: 0.8125rem; }


/* 21. PLACEHOLDERS AND DEVELOPER NOTES
   ===================================================================== */
mark.ph {
  padding: 0 0.18em;
  border-radius: 3px;
  background: var(--note-bg);
  box-shadow: inset 0 -1px 0 var(--note-border);
  color: var(--note-text);
  font-style: inherit;
}
.dev-note {
  padding: 0.75rem 1rem;
  border: 1px dashed var(--note-border);
  border-radius: var(--radius-sm);
  background: var(--note-bg);
  color: var(--note-text);
  font-size: 0.8125rem;
  line-height: 1.5;
}


/* 24. DIAGNOSTIC QUIZ (diagnostika.html, diagnostika-rezultatas.html)
   Same palette, one accent (gold), big bold uppercase grotesk headlines.
   ===================================================================== */
.quiz-page { display: flex; flex-direction: column; min-height: 100vh; }
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1rem var(--gutter);
}
.quiz-header .brand { margin-right: 0; }
.quiz-header__end { display: flex; align-items: center; gap: 0.6rem; }
.quiz-close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
}
.quiz-close svg { width: 1.1rem; height: 1.1rem; }
.quiz-close:hover { border-color: var(--accent-text); color: var(--ink); }
.quiz-main { flex: 1; display: flex; }
.quiz-footer { padding: 1.5rem var(--gutter) 2rem; color: var(--text-muted); font-size: 0.8125rem; text-align: center; }
.quiz-footer a, .quiz-footer button.link { color: var(--text-muted); font-size: inherit; }
.quiz-footer a:hover, .quiz-footer button.link:hover { color: var(--ink); }
.quiz {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem) var(--gutter) 4rem;
}
.quiz-chrome {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.9rem 1rem;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.quiz-back {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.quiz-back svg { width: 1.1rem; height: 1.1rem; }
.quiz-back:hover { border-color: var(--accent-text); }
.quiz-count { justify-self: end; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.quiz-progress { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.quiz-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.55s var(--ease); }
.quiz-stage.enter { animation: quiz-in 0.45s var(--ease) both; }
@keyframes quiz-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

.quiz-display {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.quiz-badge {
  display: inline-flex;
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.quiz-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  min-height: calc(100vh - 11rem);
  min-height: calc(100svh - 11rem);
  text-align: center;
}
.quiz-title { font-size: clamp(2.1rem, 0.9rem + 5.2vw, 4.7rem); max-width: 20ch; }
.quiz-title .accent { color: var(--accent-text); }
.quiz-sub { max-width: 34rem; color: var(--text-body); font-size: var(--fs-lead); line-height: 1.5; }
.quiz-actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.btn--xl { min-height: 3.75rem; padding: 1rem 2rem; font-size: 0.9688rem; letter-spacing: 0.08em; text-transform: uppercase; }
.quiz-author { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.quiz-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.quiz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.link-btn { padding: 0.6rem; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.link-btn:hover { color: var(--ink); }

.quiz-q {
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.4rem);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.7rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.quiz-q:focus { outline: none; }
.quiz-answers { display: grid; gap: 0.75rem; }
.quiz-answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 4rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--control-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: 600 1.0625rem/1.35 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.quiz-answer:hover { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.08); }
.quiz-answer:active { transform: scale(0.99); }
.quiz-answer[aria-pressed="true"] { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.16); }
.quiz-answer__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--control-border);
  border-radius: 50%;
}
.quiz-answer[aria-pressed="true"] .quiz-answer__mark { background: var(--accent-text); border-color: var(--accent-text); }
.quiz-answer[aria-pressed="true"] .quiz-answer__mark::after {
  content: "";
  width: 0.35rem;
  height: 0.62rem;
  margin-top: -0.12rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.quiz-answers--scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.quiz-answers--scale .quiz-answer { justify-content: center; min-height: 4.5rem; padding: 0.75rem 0.25rem; font-size: 1.5rem; text-align: center; }
.quiz-answers--scale .quiz-answer__mark { display: none; }
.quiz-scale-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; color: var(--text-muted); font-size: var(--fs-small); }
.quiz-label { margin: 0 0 0.75rem; color: var(--accent-text); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.quiz-text { max-width: 36rem; margin-bottom: 1.5rem; color: var(--text-body); }
.quiz-textarea { min-height: 9rem; }
.quiz-field-foot { display: flex; justify-content: space-between; gap: 1rem; }
.quiz-counter { margin: 0; color: var(--text-muted); font-size: 0.8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quiz-open .btn--xl, .quiz-form .btn--xl { justify-self: start; margin-top: 1.25rem; }
.quiz-note { margin-top: 0.9rem; color: var(--text-muted); font-size: var(--fs-small); }
.quiz-form { display: grid; gap: 1.1rem; }
.quiz-form .btn--xl { margin-top: 0.5rem; }
@media (max-width: 599.98px) {
  .btn--xl { width: 100%; }
  .quiz-open .btn--xl, .quiz-form .btn--xl { justify-self: stretch; }
}

/* Result page */
.result {
  display: grid;
  gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--gutter) 5rem;
}
.result-hero { display: grid; justify-items: start; gap: 1.25rem; }
.result-title { font-size: clamp(2.5rem, 1.1rem + 6vw, 5.4rem); color: var(--accent-text); }
.result-title:focus { outline: none; }
.result-tagline { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem); font-style: italic; line-height: 1.25; }
.result-intro { color: var(--text-body); font-size: var(--fs-lead); line-height: 1.6; }
.result-note { width: 100%; }
.result-answers-wrap { display: grid; gap: 0.6rem; }
.result-answers__label { color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.result-answers li { background: var(--bg); }
.result-also {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text-body);
  line-height: 1.55;
}
.result-h2 {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.result-h3 {
  margin: 0 0 1rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.result-lead { margin-bottom: 1.25rem; color: var(--text-body); font-size: var(--fs-lead); line-height: 1.55; }
.result-blockers { gap: 1rem; font-size: 1.0625rem; }
.result-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.result-tips li {
  position: relative;
  padding: 1.15rem 1.25rem 1.15rem 3.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.result-tips li::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 1.45rem;
  width: 0.8rem;
  height: 0.42rem;
  border-left: 1.5px solid var(--accent-text);
  border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg);
}
.result-next { display: grid; gap: 1.25rem; }
.result-next__title { font-size: clamp(2rem, 1rem + 4vw, 3.6rem); }
.result-next > .btn--xl { justify-self: start; }
.result-timeline { margin-top: 1rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 1.4rem 2.25rem;
  color: var(--text-body);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.75rem;
  bottom: -0.45rem;
  width: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.timeline li:last-child::before { display: none; }
.timeline li::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.3rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-text);
  background: var(--bg);
}
.timeline li:first-child, .timeline li:last-child { color: var(--ink); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.timeline li:first-child::after, .timeline li:last-child::after { background: var(--accent-text); box-shadow: 0 0 12px var(--glow); }
.offer-card {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(40rem 18rem at 100% 0%, rgb(var(--accent-rgb) / 0.12), transparent 70%), var(--surface);
}
.offer-card--quiet { border-color: var(--line); background: var(--surface); }
.offer-card .check-list { font-size: var(--fs-small); color: var(--text-body); }
.offer-card__price { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 2.3rem; line-height: 1; }
.offer-card__pre, .offer-card__per { color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-small); }
.offer-card .btn { justify-self: start; }
.offer-card__note { color: var(--text-muted); font-size: 0.875rem; }
.result-alt { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.result-card__name { color: var(--ink); font-weight: 600; }
.result-card__meta { color: var(--accent-text); font-size: var(--fs-small); }
.result-foot { display: grid; gap: 1.25rem; justify-items: start; }
.result-disclaimer { width: 100%; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.875rem; }
.result--empty { justify-items: start; gap: 1.5rem; }

/* Home: diagnostic section with a small preview of a question */
.diag-home__text { position: relative; display: grid; gap: 1.5rem; justify-items: start; }
.diag-home__text h2 { font-size: var(--fs-h2); }
.quiz-mock {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 26rem;
  justify-self: center;
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.quiz-mock .quiz-count { justify-self: start; margin: 0; }
.quiz-mock .quiz-progress span { width: 54%; }
.quiz-mock .quiz-q { margin: 0.25rem 0; font-size: 1.35rem; }
.quiz-mock .quiz-answer { min-height: 3.1rem; padding: 0.7rem 1rem; font-size: 0.9375rem; cursor: default; }

/* Home: the real quiz inside a card (data-embed) */
.diag-home .split { align-items: start; }
.quiz--embed {
  width: 100%;
  max-width: 30rem;
  justify-self: center;
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}
.quiz--embed .quiz-chrome { margin-bottom: 1.25rem; }
.quiz--embed .quiz-q { margin-bottom: 1.25rem; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }
.quiz--embed .quiz-answers { gap: 0.6rem; }
.quiz--embed .quiz-answer { min-height: 3.25rem; padding: 0.75rem 1rem; background: var(--field-bg); font-size: 0.9688rem; }
.quiz--embed .quiz-answer:hover { background: rgb(var(--accent-rgb) / 0.06); }
.quiz--embed .quiz-answer[aria-pressed="true"] { background: rgb(var(--accent-rgb) / 0.14); }
.quiz--embed .quiz-answers--scale .quiz-answer { min-height: 3.5rem; font-size: 1.25rem; }
.quiz--embed .quiz-text, .quiz--embed .quiz-note { font-size: var(--fs-small); }
.quiz--embed .quiz-text { margin-bottom: 1rem; }
.quiz--embed .btn--xl { width: 100%; }
.quiz--embed .quiz-open .btn--xl, .quiz--embed .quiz-form .btn--xl { justify-self: stretch; }
.quiz--embed .quiz-textarea { min-height: 7rem; }
@media (min-width: 900px) { .quiz--embed { min-height: 31rem; } }

/* Calculator results: a pointer to the diagnostic */
.diag-cta {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px dashed var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
}
@media (min-width: 900px) { .diag-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.diag-cta h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.diag-cta p { margin-top: 0.5rem; color: var(--text-body); }

/* Contact: note when fields were filled from the diagnostic */
.form-prefill {
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--ink);
  font-size: var(--fs-small);
}


/* 25. HOME: NUMBERS, PRICES ON CARDS, HOW 1:1 WORKS
   ===================================================================== */
.stats-band {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  border-block: 1px solid var(--line);
}
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 52rem; } }
.stat {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
}
.stat__value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.stat__label { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.4; }
.stats__quals {
  margin-top: 1.75rem;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.depth__price--sm { padding-block: 0.8rem; }
.depth__price--sm .depth__price-value { font-size: 1.95rem; }
.depth__price-alt { margin-top: -0.4rem; color: var(--text-body); font-size: var(--fs-small); line-height: 1.5; }
.depth__price-alt strong { color: var(--ink); }
.depth__badge {
  align-self: flex-start;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how__step {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.how__num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.how__title { font-size: var(--fs-h3); }
.how__meta { color: var(--accent-text); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.how__text { color: var(--text-body); font-size: var(--fs-small); }
.how__free { color: var(--accent-text); font-weight: 700; }
/* "* Bendro pobūdžio rekomendacijos…": underlined so it's really seen */
.disclaimer-note { color: var(--text-body); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.how__foot { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.how__price { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.25; }


/* 26. BEFORE CHECKOUT (the dialog built by main.js)
   ===================================================================== */
.checkout {
  width: min(100% - 2rem, 32rem);
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) + 4px);
  background: var(--bg);
  color: var(--text-body);
  box-shadow: 0 30px 80px -30px rgb(var(--ink-rgb) / 0.5);
}
.checkout::backdrop { background: rgb(var(--ink-rgb) / 0.55); }
.checkout__form { position: relative; display: grid; gap: 1rem; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
.checkout__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.checkout__close svg { width: 1.1rem; height: 1.1rem; }
.checkout__title { padding-right: 3rem; font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); }
.checkout__price { color: var(--text-body); font-size: var(--fs-lead); }
.checkout__price strong { color: var(--ink); font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
/* The key facts: price, payments, renewal, how to cancel, duration, what you need */
.checkout__facts {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.55rem 1rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.checkout__facts:empty { display: none; }
.checkout__facts dt { color: var(--text-muted); font-weight: 600; }
.checkout__facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .checkout__facts { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .checkout__facts dd + dt { margin-top: 0.55rem; }
}
.checkout__warn { padding: 0.75rem 1rem; border-left: 3px solid var(--accent-text); background: var(--note-bg, var(--bg-alt)); color: var(--ink); font-size: var(--fs-small); }
.checkout__small { color: var(--text-muted); font-size: 0.8125rem; }
.checkout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.checkout__note { color: var(--text-muted); font-size: 0.8125rem; }


/* 27. 1:1 APPLICATION (paraiska.html)
   ===================================================================== */
.apply-layout { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .apply-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4.5rem; align-items: start; }
  .apply-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.apply-main { display: grid; gap: 2rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.apply-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; }
.apply-steps li { flex: 1; display: grid; gap: 0.55rem; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
.apply-steps li::before { content: ""; height: 4px; border-radius: 999px; background: var(--surface-2); }
.apply-steps li.is-current, .apply-steps li.is-done { color: var(--ink); }
.apply-steps li.is-current::before, .apply-steps li.is-done::before { background: var(--accent); }
.apply-form { display: grid; gap: 1.35rem; }
/* phone: the country code (flag + code) beside the number */
.phone-input { display: flex; gap: 0.5rem; }
.phone-input__code { flex: none; width: 7.25rem; padding-right: 2rem; text-overflow: ellipsis; }
.phone-input .input { flex: 1; min-width: 0; }
.apply-form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.apply-form__head h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.apply-form__time { color: var(--accent-text); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.apply-form__text { color: var(--text-body); }
.apply-form h2:focus, .apply-done h2:focus, .nofit h2:focus { outline: none; }

fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 0.5rem; }
.options { display: grid; gap: 0.6rem; }
.options--row { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.option {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font-size: 0.9688rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.option input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.05rem 0 0;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: var(--field-bg);
  cursor: pointer;
}
.option input[type="radio"]:checked { border-color: var(--accent-text); box-shadow: inset 0 0 0 3px var(--field-bg), inset 0 0 0 9px var(--accent-text); }
.option input[type="checkbox"] { border-radius: 5px; }
.option input[type="checkbox"]::after {
  content: "";
  width: 0.32rem;
  height: 0.62rem;
  margin-top: -0.15rem;
  border: solid var(--field-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s var(--ease);
}
.option input[type="checkbox"]:checked { background: var(--accent-text); border-color: var(--accent-text); }
.option input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.option:hover { border-color: var(--accent-text); }
.option:has(input:checked) { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.06); }
.option:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.option input:focus-visible { outline: none; }

.nofit, .apply-done {
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 6px);
  background: var(--bg-alt);
}
.nofit h2, .apply-done h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.nofit p, .apply-done p { color: var(--text-body); }
.nofit .actions { margin-top: 0.25rem; }
.aside-card .aside-card__price { color: var(--ink); font-family: var(--font-display); font-size: 2rem; line-height: 1.05; }
.aside-card .aside-card__price-alt { color: var(--text-body); font-size: var(--fs-small); }
.aside-card .check-list { font-size: var(--fs-small); color: var(--text-body); }


/* 28. OFFERS: THE THREE CARDS, THE CHALLENGE PAGE, EXERCISE TECHNIQUE
   ===================================================================== */

/* — The three offer cards (home + programs page) — */
.depths--offers { align-items: stretch; }
.depths--offers .depth { gap: 0.9rem; }
.depth__bullets { margin: 0.25rem 0 0; }
.depth__actions { display: grid; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; }
.depth__more { justify-self: center; font-size: var(--fs-small); }
/* the challenge card stands out: orange frame, raised, solid badge */
.depth[data-featured] {
  border: 2px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 28px 60px -34px rgb(var(--accent-rgb) / 0.7);
}
.depth[data-featured] .depth__badge { background: var(--accent); color: var(--on-accent); }
/* only the featured card has a solid button; the others are outlined */
.depths--offers .depth:not([data-featured]) .btn--primary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.depths--offers .depth:not([data-featured]) .btn--primary:hover { background: var(--ink); color: var(--bg); }
@media (min-width: 900px) {
  .depths--offers { padding-top: 0.9rem; }
  .depths--offers .depth[data-featured] { transform: translateY(-0.9rem); }
}
/* "Next challenge: … · 12 places left of 30", with a live dot */
.depth__live, .offer-card__live {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--accent-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
}
.depth__live::before, .offer-card__live::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.5);
  animation: sp-live 2s ease-out infinite;
}
@keyframes sp-live {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / 0); }
}
.depths__unsure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 0.75rem;
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  color: var(--text-body);
  text-align: center;
}
/* "prices without VAT: not a VAT payer" (config.js → vat_registered) */
.depths__vat { margin-top: 1rem; color: var(--text-muted); font-size: 0.875rem; text-align: center; }

/* — Quiz result: the other two offers — */
.result-alt__grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .result-alt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offer-card--alt { align-content: start; }
.offer-card--alt .offer-card__price { font-size: 1.9rem; }

/* — Exercise cards — */
.ex-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.ex-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.ex-card[hidden] { display: none; }
.ex-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  background:
    radial-gradient(18rem 10rem at 70% 20%, rgb(var(--accent-rgb) / 0.18), transparent 70%),
    var(--bg-alt);
  cursor: pointer;
}
.ex-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-card__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 26px -10px rgb(var(--accent-rgb) / 0.8);
  transition: transform 0.3s var(--ease);
}
.ex-card__thumb:hover .ex-card__play, .ex-card__thumb:focus-visible .ex-card__play { transform: scale(1.08); }
.ex-card__play svg { width: 1.35rem; height: 1.35rem; margin-left: 3px; fill: currentColor; }
.ex-card__soon {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ex-card__body { display: grid; align-content: start; gap: 0.45rem; padding: 1rem 1.2rem 1.25rem; }
.ex-card__name { font-size: 1.35rem; line-height: 1.15; }
.ex-card__tags { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; color: var(--text-muted); font-size: 0.82rem; }
.ex-card__equip { color: var(--text-body); }
.ex-card__watch { justify-self: start; margin-top: 0.25rem; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ex-filters { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
@media (min-width: 700px) { .ex-filters { grid-template-columns: 2fr 1fr 1fr; } }
.ex-empty { margin-top: 1rem; color: var(--text-muted); }

/* — The technique video window — */
.technique {
  width: min(100% - 2rem, 48rem);
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) + 4px);
  background: var(--bg);
  color: var(--text-body);
  box-shadow: 0 30px 80px -30px rgb(var(--ink-rgb) / 0.5);
}
.technique::backdrop { background: rgb(var(--ink-rgb) / 0.7); }
.technique__inner { position: relative; display: grid; gap: 1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.technique__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.technique__close svg { width: 1.1rem; height: 1.1rem; }
.technique__eyebrow { margin: 0; }
.technique__title { padding-right: 3rem; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); }
.technique__stage {
  display: grid;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  border-radius: var(--radius-sm);
  background: #111;
}
.technique__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #111; }
.technique__soon {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: 1.5rem;
  background:
    radial-gradient(20rem 12rem at 70% 20%, rgb(var(--accent-rgb) / 0.16), transparent 70%),
    var(--bg-alt);
  color: var(--ink);
  text-align: center;
}
.technique__soon svg { width: 2.6rem; height: 2.6rem; color: var(--accent-text); fill: currentColor; }
.technique__soon-title { font-family: var(--font-display); font-size: 1.6rem; }
.technique__soon-text { max-width: 26rem; color: var(--text-body); font-size: var(--fs-small); }
.technique__stage > .technique__soon-text { place-self: center; color: #fff; }
.technique__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; }
.technique__controls[hidden] { display: none; }
.technique__speeds { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
.technique__speed {
  min-width: 3.2rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-body);
  font: 600 0.875rem var(--font-body);
  cursor: pointer;
}
.technique__speed[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.technique__loop { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; font-size: 0.9rem; cursor: pointer; }
.technique__loop input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.technique__text { display: grid; gap: 1.25rem; font-size: var(--fs-small); }
@media (min-width: 700px) { .technique__text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.technique__h3 {
  margin-bottom: 0.7rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* — Challenge page: hero and the status box — */
.ch-hero__inner { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 960px) { .ch-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.ch-hero__text { display: grid; gap: 1rem; justify-items: start; }
.ch-hero__theme { color: var(--accent-text); font-size: 1.1rem; font-weight: 600; }
.ch-facts { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; margin: 0.25rem 0 0; }
.ch-facts dt { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ch-facts dd { margin: 0.2rem 0 0; color: var(--ink); font-weight: 600; }
.ch-facts [hidden] { display: none; }
.ch-hero__coaching { color: var(--text-muted); font-size: var(--fs-small); }
.ch-status {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 30px 70px -40px rgb(var(--accent-rgb) / 0.8);
}
.ch-status > div { display: grid; gap: 0.9rem; }
.ch-status [hidden] { display: none; }
.ch-status__tag {
  justify-self: start;
  margin: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.12);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ch-status__tag[data-state="open"] { background: var(--accent); color: var(--on-accent); }
.ch-status__tag[data-state="full"] { background: var(--ink); color: var(--bg); }
.ch-status__label { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ch-status__seats { color: var(--ink); font-weight: 600; }
.ch-status__next { color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.ch-status__text { color: var(--text-body); font-size: var(--fs-small); }
.ch-status__alumni { padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.countdown__unit { display: grid; justify-items: center; gap: 0.2rem; padding: 0.75rem 0.25rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.countdown__num { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.countdown__label { color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* — Challenge page: what you get — */
.ch-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.ch-include { display: grid; align-content: start; gap: 0.55rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ch-include__icon { width: 2.2rem; height: 2.2rem; color: var(--accent-text); }
.ch-include__title { font-size: 1.35rem; line-height: 1.15; }
.ch-include__text { color: var(--text-body); font-size: var(--fs-small); }

/* — Challenge page: the weekly rhythm — */
.ch-rhythm { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ch-rhythm__item { display: grid; gap: 0.25rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .ch-rhythm__item { grid-template-columns: 17rem minmax(0, 1fr); }
  .ch-rhythm__when { grid-row: span 2; }
}
.ch-rhythm__when { color: var(--accent-text); font-size: var(--fs-small); font-weight: 600; }
.ch-rhythm__what { font-size: 1.35rem; line-height: 1.2; }
.ch-rhythm__note { color: var(--text-body); font-size: var(--fs-small); }

/* — Challenge page: the year — */
.ch-cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .ch-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ch-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ch-cal__item { display: grid; align-content: start; gap: 0.4rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ch-cal__item[data-state="running"], .ch-cal__item[data-state="open"] { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.ch-cal__item[data-state="done"] { opacity: 0.6; }
.ch-cal__when { color: var(--accent-text); font-size: 0.85rem; font-weight: 600; }
.ch-cal__name { font-size: 1.6rem; line-height: 1.1; }
.ch-cal__theme { color: var(--text-body); font-size: var(--fs-small); }
.ch-cal__tag {
  justify-self: start;
  margin-top: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-cal__item[data-state="open"] .ch-cal__tag, .ch-cal__item[data-state="running"] .ch-cal__tag { background: var(--accent); color: var(--on-accent); }

/* — Challenge page: results, contest — */
.ch-results__empty { max-width: 42rem; padding: 1.25rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-body); }
.ch-contest { display: grid; gap: 2rem; }
@media (min-width: 900px) { .ch-contest { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.ch-contest h2 { margin: 0.75rem 0 1rem; font-size: var(--fs-h2); }
.ch-contest__rules { padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text-body); }

/* — Challenge page: prices — */
.ch-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .ch-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ch-prices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ch-price { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ch-price--main { border: 2px solid var(--accent); background: var(--bg); box-shadow: 0 28px 60px -34px rgb(var(--accent-rgb) / 0.7); }
.ch-price__badge {
  justify-self: start;
  margin: 0 0 0.25rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-price__name { font-size: 1.35rem; line-height: 1.15; }
.ch-price__value { margin: 0.2rem 0; color: var(--ink); font-family: var(--font-display); font-size: 2.3rem; line-height: 1; }
.ch-price__note { color: var(--text-muted); font-size: var(--fs-small); }
.ch-price .btn { margin-top: auto; }
.ch-price__note { margin-bottom: 0.75rem; }
.ch-price .btn[hidden] { display: none; }
/* text + link in one line (no icon column like other .notice boxes) */
.ch-prices__closed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-top: 1.25rem; }
.ch-prices__closed[hidden] { display: none; }
.ch-prices__legal { max-width: 54rem; margin-top: 1.25rem; color: var(--text-muted); font-size: 0.85rem; }

/* — Challenge page: waiting list — */
.ch-wait { display: grid; gap: 0.9rem; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ch-wait h2 { font-size: var(--fs-h2); }
.ch-wait__next { color: var(--accent-text); font-weight: 600; }
.ch-wait__form { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .depth__live::before, .offer-card__live::before { animation: none; }
  .depths--offers .depth[data-featured] { transform: none; }
}


/* 29. MEMBER ZONE AND COACH PANEL (nariai.html, treneris.html)
   An app: a bottom menu on phones, a side menu from 900px.
   Built by members.js / coach.js (shared bits: members-ui.js).
   ===================================================================== */
.mz-page { background: var(--bg-alt); }
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  max-width: none;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.app-header__site { padding: 0.5rem 0.25rem; color: var(--text-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.app-header__site:hover { color: var(--ink); }
@media (max-width: 560px) {
  .app-header .brand__tag, .app-header__site { display: none; }
}
.mz-main { display: block; flex: 1; width: 100%; }
.mz { width: 100%; }
.mz [hidden] { display: none !important; }
/* spacing comes from the grid gaps, not from the site's paragraph rhythm */
.mz p + p, .mz-modal p + p { margin-top: 0; }
.mz-page .quiz-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.mz-ico { width: 1.25rem; height: 1.25rem; flex: none; }
.mz-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the frame */
.mz-app { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1240px; margin: 0 auto; }
.mz-side { display: none; }
.mz-view { min-width: 0; padding: 1.25rem var(--gutter) calc(6rem + env(safe-area-inset-bottom)); outline: none; }
.mz-view > * + * { margin-top: 1rem; }
.mz-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 -8px 24px -18px rgb(var(--ink-rgb) / 0.35);
}
.mz-tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  min-height: 3.6rem;
  padding: 0.45rem 0.15rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.mz-tab .mz-ico { width: 1.4rem; height: 1.4rem; }
.mz-tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-tab__lock { position: absolute; top: 0.3rem; right: calc(50% - 1.35rem); font-size: 0.625rem; }
.mz-tab[aria-current="page"] { color: var(--accent-text); }
.mz-tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.mz-focus .mz-tabbar, .mz-focus .mz-testbtn { display: none; }
.mz-focus .mz-view { padding-bottom: 8rem; }

@media (min-width: 900px) {
  .mz-app { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; padding: 1.5rem var(--gutter) 3rem; }
  .mz-side { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-self: start; max-height: calc(100vh - 7rem); overflow: auto; }
  .mz-tabbar { display: none; }
  .mz-view { padding: 0 0 3rem; }
  .mz-focus .mz-view { padding-bottom: 8rem; }
  .mz-page .quiz-footer { padding-bottom: 2rem; }
}
.mz-side__who { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.mz-avatar { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 0.875rem; font-weight: 700; }
.mz-side__name { color: var(--ink); font-weight: 700; line-height: 1.25; word-break: break-word; }
.mz-side__plan { color: var(--text-muted); font-size: 0.8125rem; }
.mz-side__list, .mz-side__foot { display: grid; gap: 0.1rem; margin: 0; padding: 0.4rem; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.mz-side__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-body);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mz-side__link .mz-ico { color: var(--text-muted); }
.mz-side__link:hover { background: var(--bg-alt); color: var(--ink); }
.mz-side__link[aria-current="page"] { background: rgb(var(--accent-rgb) / 0.12); color: var(--ink); font-weight: 700; }
.mz-side__link[aria-current="page"] .mz-ico { color: var(--accent-text); }
.mz-side__link__label { flex: 1; }
.mz-side__link__lock { font-size: 0.75rem; }
.mz-demo-badge { margin: 0; padding: 0.4rem 0.75rem; border: 1px solid var(--note-border); border-radius: var(--radius-sm); background: var(--note-bg); color: var(--note-text); font-size: 0.75rem; font-weight: 700; text-align: center; }

/* a screen */
.mz-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; }
.mz-page__titles { min-width: 0; }
.mz-page__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.mz-page__sub { margin-top: 0.35rem; color: var(--text-muted); }
.mz-page__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mz-hello__date { color: var(--text-muted); font-size: var(--fs-small); }
.mz-hello__date::first-letter { text-transform: uppercase; }
.mz-stack { display: grid; gap: 1rem; }
.mz-stack > * + * { margin-top: 0; }
.mz-section-title { margin: 0.75rem 0 0; color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; }
.mz-back { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.mz-back .mz-ico { width: 1rem; height: 1rem; }
.mz-back:hover { color: var(--ink); }
.mz-back + * { margin-top: 0.25rem !important; }

/* cards */
.mz-card { display: grid; align-content: start; gap: 0.85rem; min-width: 0; padding: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.mz-card > * { min-width: 0; }
.mz-card--accent { border-color: rgb(var(--accent-rgb) / 0.55); box-shadow: 0 18px 40px -32px rgb(var(--accent-rgb) / 0.9); }
.mz-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.mz-card__title { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.mz-muted { color: var(--text-muted); }
.mz-small { font-size: 0.8125rem; }
.mz-note { padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text-body); font-size: 0.875rem; }
.mz-note--accent { background: rgb(var(--accent-rgb) / 0.1); color: var(--ink); }
.mz-private { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text-muted); font-size: 0.8125rem; }
.mz-private .mz-ico { width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--accent-text); }
.mz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.mz-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--surface-2); color: var(--text-body); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.mz-badge--ok { background: #e7f6ec; color: #136c34; }
.mz-badge--accent { background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-text); }
.mz-badge--warn { background: var(--note-bg); color: var(--note-text); }
.mz-empty { display: grid; justify-items: center; gap: 1rem; padding: 2rem 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--text-muted); text-align: center; }
.mz-loading { padding: 0.5rem 0; color: var(--text-muted); font-size: var(--fs-small); }
.mz-bar { height: 0.5rem; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.mz-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.5s var(--ease); }
.mz-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; border: 1px solid rgb(var(--accent-rgb) / 0.4); border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / 0.1); color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.mz-hr { width: 100%; margin: 0.25rem 0; border: 0; border-top: 1px solid var(--line); }
.mz-x { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--text-muted); font: inherit; cursor: pointer; }
.mz-x .mz-ico { width: 1.05rem; height: 1.05rem; }
.mz-x:hover { border-color: var(--error); color: var(--error); }
.mz-x[disabled] { opacity: 0.35; cursor: default; }
.mz-danger { color: var(--error) !important; }
.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { background: #8f1c12; color: #fff; }
.btn.is-busy { opacity: 0.6; cursor: progress; }
.mz .btn:hover svg { transform: none; }
.mz-details summary { padding: 0.25rem 0; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.mz-details[open] summary { margin-bottom: 0.75rem; }
.mz-plain { margin: 0; padding: 0; list-style: none; }

/* sub-sections (Progress) and segmented buttons */
.mz-subnav { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: none; }
.mz-subnav::-webkit-scrollbar { display: none; }
.mz-subnav__item { flex: none; padding: 0.6rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text-body); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.mz-subnav__item[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.mz-seg { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 0.25rem; max-width: 100%; padding: 0.25rem; border-radius: 1.4rem; background: var(--surface-2); }
.mz-seg__btn { min-height: 2.5rem; padding: 0.4rem 0.9rem; border: 0; border-radius: 999px; background: none; color: var(--text-body); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.mz-seg__btn[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px rgb(var(--ink-rgb) / 0.15); }

/* forms */
.mz-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.mz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mz-report__section { margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--accent-text); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.mz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
/* Šiandien: today's macros against the targets */
.mz-macros-today { display: grid; gap: 0.6rem; margin: 0.75rem 0; }
@media (min-width: 700px) { .mz-macros-today { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; } }
.mz-mt { display: grid; gap: 0.3rem; }
.mz-mt__label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-small); color: var(--text-body); }
.mz-mt__label strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.mz-mt.is-hit .mz-mt__label strong { color: var(--accent-text); }
.mz-mt__bar { height: 0.4rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mz-mt__bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* the last onboarding step without a plan: the three ways to work together */
.mz-onb__plans { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.mz-onb__plans .mz-choice { display: grid; text-decoration: none; color: inherit; }
.mz-form-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 1rem; }
@media (min-width: 560px) {
  .mz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-form-row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
@media (min-width: 1100px) { .mz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mz-field--inline { max-width: 22rem; }
.mz-unit { position: relative; display: block; min-width: 0; }
.mz-unit .input { padding-right: 3rem; }
.mz-unit__label { position: absolute; top: 50%; right: 1rem; color: var(--text-muted); font-size: 0.875rem; transform: translateY(-50%); pointer-events: none; }
.mz-inline { display: flex; align-items: center; gap: 0.6rem; }
.mz-inline .mz-unit { flex: 1; }
.mz-scale { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mz-scale--wide { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 560px) { .mz-scale--wide { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 30rem; } }
.mz-scale__btn { min-width: 2.75rem; height: 2.75rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.mz-scale--wide .mz-scale__btn { min-width: 0; }
.mz-scale__btn:hover { border-color: var(--accent-text); }
.mz-scale__btn[aria-checked="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mz-scale__ends { display: flex; justify-content: space-between; max-width: 30rem; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.75rem; }
.mz-radios { display: grid; gap: 0.4rem; }
.mz-radio { display: flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 0.9375rem; cursor: pointer; }
.mz-radio input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--accent-text); }
.mz-radio:has(input:checked) { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.08); }
.mz-days-pick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mz-daybox { position: relative; display: block; }
.mz-daybox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mz-daybox span { display: grid; place-items: center; min-width: 2.9rem; height: 2.75rem; padding: 0 0.5rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; }
.mz-daybox input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mz-daybox input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.mz-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.mz .textarea { min-height: 5.5rem; }

/* getting in: log in, sign up, first-login questions */
.mz-auth { display: grid; justify-items: center; gap: 1rem; padding: clamp(1.25rem, 4vw, 3rem) var(--gutter) 4.5rem; }
.mz-auth__card { display: grid; gap: 1rem; width: 100%; max-width: 30rem; padding: clamp(1.4rem, 1rem + 2vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: 0 30px 70px -45px rgb(var(--ink-rgb) / 0.35); }
.mz-auth__card > * { min-width: 0; }
.mz-auth__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 1.7rem + 1.4vw, 2.6rem); line-height: 1.05; }
.mz-auth__lead { color: var(--text-body); }
.mz-auth__form { display: grid; gap: 1rem; }
.mz-auth__forgot { margin: -0.5rem 0 0; font-size: var(--fs-small); text-align: right; }
.mz-auth__forgot a, .mz-auth__switch a { color: var(--accent-text); font-weight: 600; }
.mz-auth__switch { color: var(--text-muted); font-size: var(--fs-small); text-align: center; }
.mz-auth__demo { max-width: 30rem; padding: 0.75rem 1rem; border: 1px solid var(--note-border); border-radius: var(--radius-sm); background: var(--note-bg); color: var(--note-text); font-size: 0.8125rem; }
.mz-auth__demo .link-btn { padding: 0; color: var(--note-text); font-size: inherit; font-weight: 700; }
.mz-or { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--text-muted); font-size: 0.8125rem; }
.mz-or::before, .mz-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mz-google { width: 100%; }
.mz-google svg { width: 1.2rem; height: 1.2rem; }
.mz-pass { position: relative; }
.mz-pass .input { padding-right: 3.25rem; }
.mz-pass__eye { position: absolute; top: 50%; right: 0.3rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; transform: translateY(-50%); }
.mz-pass__eye svg { width: 1.25rem; height: 1.25rem; }
.mz-pass__eye[aria-pressed="true"] { color: var(--accent-text); }
.mz-onb { max-width: 36rem; }
.mz-onb__progress { display: grid; gap: 0.35rem; }
.mz-onb__count { color: var(--text-muted); font-size: 0.75rem; }
.mz-onb__list { margin: 0.25rem 0; }
.mz-onb__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; }
.mz-onb__next { display: grid; justify-items: end; gap: 0.5rem; margin-left: auto; }
.mz-onb__next--two { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.mz-onb__targets { padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / 0.08); }
.mz-onb__kcal strong { color: var(--ink); font-family: var(--font-display); font-size: 2.2rem; }
.mz-choices { display: grid; gap: 0.5rem; }
.mz-choice { display: grid; gap: 0.1rem; min-height: 3rem; padding: 0.75rem 1rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mz-choice:hover { border-color: var(--accent-text); }
.mz-choice[aria-checked="true"] { border-color: var(--accent-text); background: rgb(var(--accent-rgb) / 0.1); box-shadow: inset 0 0 0 1px var(--accent-text); }
.mz-choice__title { font-weight: 700; }
.mz-choice__text { color: var(--text-muted); font-size: 0.8125rem; }

/* 🔒 */
.mz-lock { border-style: dashed; border-color: var(--line-strong); }
.mz-lock__head { display: flex; align-items: center; gap: 0.5rem; }
.mz-lock__icon { font-size: 1.05rem; }
.mz-lock .btn { justify-self: start; }
.mz-lockscreen { display: grid; justify-items: center; gap: 0.9rem; max-width: 34rem; margin: clamp(1rem, 4vw, 3rem) auto 0; padding: 2rem 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); text-align: center; }
.mz-lockscreen__icon { font-size: 2.6rem; line-height: 1; }
.mz-lockscreen__text { color: var(--text-body); }

/* today */
.mz-today { display: grid; gap: 1rem; }
.mz-today > div { display: grid; min-width: 0; }
@media (min-width: 700px) {
  .mz-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-today__wide { grid-column: 1 / -1; }
}
.mz-today__kicker { color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.mz-today__big { display: flex; align-items: center; gap: 0.35rem; color: var(--ink); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.mz-today__big .mz-ico { color: var(--accent-text); }
.mz-ring-row { display: flex; align-items: center; gap: 1rem; }
.mz-ring { flex: none; width: 4.5rem; height: 4.5rem; }
.mz-ring__track { fill: none; stroke: var(--surface-2); stroke-width: 7; }
.mz-ring__fill { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.mz-ring__text { fill: var(--ink); font: 700 13px var(--font-body); }
.mz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mz-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mz-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .mz-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mz-stat { display: grid; align-content: start; gap: 0.15rem; min-width: 0; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--text-muted); font-size: 0.8125rem; text-decoration: none; }
.mz-stat .mz-ico { width: 1.1rem; height: 1.1rem; color: var(--accent-text); }
.mz-stat strong { color: var(--ink); font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
a.mz-stat:hover { background: rgb(var(--accent-rgb) / 0.1); }

/* workouts: the calendar */
.mz-week { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.mz-week__sum { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.1rem; font-weight: 700; list-style: none; cursor: pointer; }
.mz-week__sum::-webkit-details-marker { display: none; }
.mz-week__sum::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.25s var(--ease); }
.mz-week[open] > .mz-week__sum::after { transform: rotate(225deg) translateY(-2px); }
.mz-week__title { flex: 1; color: var(--ink); }
.mz-week__count { color: var(--text-muted); font-size: 0.875rem; }
.mz-days { display: grid; gap: 0.5rem; margin: 0; padding: 0 0.75rem 0.75rem; list-style: none; }
.mz-day { display: grid; gap: 0.25rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.mz-day.is-next { background: rgb(var(--accent-rgb) / 0.08); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.5); }
.mz-day__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.mz-day__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--text-body); font-size: 0.875rem; font-weight: 700; }
.mz-day__mark .mz-ico { width: 1.1rem; height: 1.1rem; }
.mz-day.is-done .mz-day__mark { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mz-day__title { color: var(--ink); font-weight: 700; }
.mz-day .link-btn { justify-self: start; padding: 0.4rem 0; }
.mz-exlist { display: grid; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.mz-ex { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); background: var(--bg); }
.mz-ex__main { min-width: 0; }
.mz-ex__name { color: var(--ink); font-weight: 600; }
.mz-ex__dose { color: var(--text-muted); font-size: 0.875rem; }
.mz-ex__note { color: var(--text-body); font-size: 0.8125rem; font-style: italic; }
.mz-intro { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.mz-intro__item { padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); background: var(--bg-alt); }

/* workout mode */
.mz-wo__top { display: flex; align-items: center; gap: 0.75rem; }
.mz-wo__close { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; }
.mz-wo__close .mz-ico { width: 1.1rem; height: 1.1rem; }
.mz-wo__where { display: grid; flex: 1; gap: 0.35rem; }
.mz-wo__step { color: var(--text-muted); font-size: 0.8125rem; font-weight: 700; }
.mz-wo__video { overflow: hidden; border-radius: var(--radius); background: #111; }
.technique-inline { position: relative; display: grid; aspect-ratio: 16 / 9; max-height: 52vh; }
.technique-inline:has(.technique__soon) { aspect-ratio: auto; min-height: 10rem; }
.technique-inline .technique__soon { min-height: 100%; }
.technique-inline .technique__soon-title { font-size: 1.35rem; }
.technique-inline__speeds { position: absolute; right: 0.6rem; bottom: 3.4rem; border-color: rgb(255 255 255 / 0.35); background: rgb(17 17 17 / 0.55); }
.technique-inline__speeds .technique__speed { min-width: 2.75rem; min-height: 2.25rem; color: #fff; }
.technique-inline__speeds .technique__speed[aria-pressed="true"] { background: #fff; color: #111; }
.mz-wo__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.mz-wo__name { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1.05; }
.mz-wo__head .link-btn { padding: 0.4rem 0; color: var(--accent-text); font-weight: 600; }
.mz-wo__dose { margin-top: 0.25rem !important; color: var(--accent-text); font-weight: 700; }
.mz-wo__last { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-body); font-size: 0.875rem; }
.mz-wo__last .mz-ico { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--accent-text); }
.mz-sets { display: grid; gap: 0.4rem; }
.mz-sets__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2.9rem; align-items: center; gap: 0.5rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.mz-sets__row--head { padding: 0 0.4rem; border: 0; background: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mz-sets__row--head span:not(:first-child) { text-align: center; }
.mz-sets__row.is-done { border-color: rgb(var(--accent-rgb) / 0.45); background: rgb(var(--accent-rgb) / 0.1); }
.mz-sets__row.is-dirty { border-color: var(--note-border); }
.mz-sets__n { color: var(--ink); font-weight: 700; text-align: center; }
.mz-sets__in { min-height: 2.75rem; padding: 0.5rem; font-size: 1.0625rem; font-weight: 600; text-align: center; }
.mz-sets__check { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid var(--control-border); border-radius: 50%; background: var(--bg); color: var(--text-muted); cursor: pointer; }
.mz-sets__check .mz-ico { width: 1.2rem; height: 1.2rem; }
.mz-sets__check[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mz-sets__add { display: inline-flex; align-items: center; gap: 0.35rem; padding-left: 0; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.mz-sets__add .mz-ico { width: 1rem; height: 1rem; }
.mz-wo__nav { display: flex; justify-content: space-between; gap: 0.75rem; }
.mz-wo__nav .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .mz-wo__nav .btn { flex: 0 0 auto; } }
.mz-rest { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--ink); color: var(--bg); box-shadow: 0 -10px 30px -10px rgb(var(--ink-rgb) / 0.5); }
.mz-rest.is-over { background: var(--accent); color: var(--on-accent); }
.mz-rest__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; max-width: 40rem; margin: 0 auto; }
.mz-rest__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mz-rest__clock { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.mz-rest__btns { display: flex; gap: 0.4rem; }
.mz-rest__btn { min-width: 3rem; min-height: 2.75rem; padding: 0 0.8rem; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.mz-rest.is-over .mz-rest__btn { border-color: rgb(var(--ink-rgb) / 0.35); }
.mz-better { padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / 0.08); }
.mz-better__title { margin-bottom: 0.5rem; color: var(--ink); font-weight: 700; }

/* history */
.mz-history { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mz-hist { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.mz-hist__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 1rem; padding: 0.8rem 1rem; list-style: none; cursor: pointer; }
.mz-hist__sum::-webkit-details-marker { display: none; }
.mz-hist__date { display: grid; grid-row: span 2; align-content: center; min-width: 4.5rem; padding-right: 0.75rem; border-right: 1px solid var(--line); text-align: center; }
.mz-hist__date strong { color: var(--ink); font-size: 0.9375rem; }
.mz-hist__date span { color: var(--text-muted); font-size: 0.75rem; }
.mz-hist__title { color: var(--ink); font-weight: 700; }
.mz-hist__meta { color: var(--text-muted); font-size: 0.8125rem; }
.mz-hist__ex { display: grid; gap: 0.5rem; margin: 0; padding: 0 1rem 1rem; list-style: none; font-size: 0.875rem; }
.mz-hist__ex li { display: grid; gap: 0.1rem; }
.mz-hist__ex strong { color: var(--ink); }
.mz-hist__note { padding: 0 1rem 1rem; color: var(--text-body); font-size: 0.875rem; font-style: italic; }

/* charts and tables */
.mz-chart-wrap { display: grid; gap: 0.75rem; }
.mz-chart svg { display: block; width: 100%; height: auto; }
.mz-chart__grid { stroke: var(--line); stroke-width: 1; }
.mz-chart__label { fill: var(--text-muted); font-family: var(--font-body); font-size: 12px; }
.mz-chart__line { fill: none; stroke: rgb(var(--accent-rgb) / 0.55); stroke-width: 2; stroke-linejoin: round; }
.mz-chart__avg { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mz-chart__dot { fill: var(--accent); }
.mz-chart__empty { padding: 1.5rem 0; color: var(--text-muted); font-size: var(--fs-small); text-align: center; }
.mz-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; color: var(--text-muted); font-size: 0.8125rem; }
.mz-chart__legend strong { margin-left: auto; color: var(--ink); font-size: 1rem; }
.mz-chart__key::before { content: ""; display: inline-block; width: 1rem; height: 3px; margin-right: 0.4rem; border-radius: 2px; vertical-align: middle; }
.mz-chart__key--line::before { background: rgb(var(--accent-rgb) / 0.55); }
.mz-chart__key--avg::before { background: var(--ink); }
/* a second line on the same chart (the right arm / leg): dark and dashed */
.mz-chart__line2 { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.mz-chart__dot--line2 { fill: var(--ink); }
.mz-chart__key--line2::before { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px); }
.mz-chart__legend .mz-chart__key strong { margin-left: 0.15rem; font-size: 0.9375rem; }
.mz-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mz-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mz-table th, .mz-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.mz-table thead th { background: var(--bg-alt); color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.mz-table tbody tr:last-child th, .mz-table tbody tr:last-child td { border-bottom: 0; }
.mz-table tbody th { color: var(--ink); font-weight: 600; }
.mz-table .mz-x { width: 2.25rem; height: 2.25rem; }
.mz-entries { display: grid; margin: 0; padding: 0; list-style: none; }
.mz-entries li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.mz-entries li:last-child { border-bottom: 0; }
.mz-entries strong { color: var(--ink); }
.mz-notes { display: grid; gap: 0.35rem; margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; }

/* progress photos and before / after */
.mz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.6rem; }
.mz-gallery--sm { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.mz-photo { display: grid; gap: 0.35rem; margin: 0; }
.mz-photo img { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); background: var(--surface-2); object-fit: cover; }
.mz-photo figcaption { display: flex; align-items: center; gap: 0.35rem; color: var(--text-muted); font-size: 0.75rem; }
.mz-photo figcaption > span { flex: 1; }
.mz-photo__dl { color: var(--accent-text); font-weight: 600; }
.mz-photo .mz-x { width: 2rem; height: 2rem; }
.mz-gallery-day { display: grid; gap: 0.5rem; }
.mz-gallery-day + .mz-gallery-day { margin-top: 0.5rem; }
.mz-gallery-day__title { color: var(--ink); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; }
.mz-compare { --pos: 50%; position: relative; width: 100%; max-width: 26rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); user-select: none; touch-action: pan-y; }
.mz-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mz-compare__top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.mz-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.3); pointer-events: none; }
.mz-compare__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: #111; font-size: 1.1rem; box-shadow: 0 4px 14px rgb(var(--ink-rgb) / 0.3); transform: translate(-50%, -50%); }
.mz-compare__tag { position: absolute; top: 0.6rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgb(17 17 17 / 0.72); color: #fff; font-size: 0.75rem; font-weight: 600; pointer-events: none; }
.mz-compare__tag--before { left: 0.6rem; }
.mz-compare__tag--after { right: 0.6rem; }
.mz-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.mz-compare:focus-within { outline: 3px solid var(--accent-text); outline-offset: 3px; }

/* nutrition */
.mz-kcal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.mz-kcal strong { color: var(--ink); font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; }
.mz-kcal span { color: var(--text-muted); }
.mz-macros { display: grid; gap: 0.75rem; }
.mz-macro__top { display: flex; justify-content: space-between; margin-bottom: 0.3rem; font-size: 0.875rem; }
.mz-macro__top strong { color: var(--ink); }
.mz-macro__bar { height: 0.55rem; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.mz-macro__bar span { display: block; height: 100%; border-radius: inherit; }
.mz-macro--protein .mz-macro__bar span { background: var(--macro-protein); }
.mz-macro--fat .mz-macro__bar span { background: var(--macro-fat); }
.mz-macro--carbs .mz-macro__bar span { background: var(--macro-carbs); }

/* zoom and recordings */
.mz-zoom { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mz-card__head + .mz-zoom { padding-top: 0; border-top: 0; }
.mz-zoom.is-live { padding: 1rem; border: 1px solid rgb(var(--accent-rgb) / 0.55); border-radius: var(--radius-sm); }
.mz-countdown { color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-cal { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mz-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mz-chip { min-height: 2.5rem; padding: 0.35rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text-body); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.mz-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.mz-recs { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mz-rec { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.mz-rec > div { min-width: 0; }
.mz-rec__title { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.mz-rec__topics { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.mz-tag { padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text-muted); font-size: 0.75rem; }

/* weekly report, replies */
.mz-ci { display: grid; gap: 0.75rem; }
.mz-ci + .mz-ci { padding-top: 0.75rem; border-top: 1px solid var(--line); }
.mz-card.mz-ci + .mz-card.mz-ci { padding-top: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); border-top: 1px solid var(--line); }
.mz-ci__who { color: var(--ink); font-weight: 700; text-decoration: none; }
.mz-ci__who:hover { text-decoration: underline; }
.mz-ci__qa { display: grid; gap: 0.15rem; margin: 0; }
.mz-ci__qa dt { margin-top: 0.4rem; color: var(--text-muted); font-size: 0.8125rem; font-weight: 700; }
.mz-ci__qa dd { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-reply { padding: 0.9rem 1rem; border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / 0.08); }
.mz-reply__who { margin-bottom: 0.25rem; color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; }
.mz-reply__text { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* plans, payments */
.mz-plans { display: grid; gap: 1rem; }
@media (min-width: 1100px) { .mz-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.mz-plan { display: grid; gap: 0.8rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); scroll-margin-top: 6rem; }
.mz-plan.is-mine { border-color: #9fd9b1; }
.mz-plan.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.2); }
.mz-plan__name { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; }
.mz-plan__price { color: var(--ink); font-size: 1.125rem; font-weight: 700; }
.mz-plan__status { display: flex; align-items: center; gap: 0.4rem; color: #136c34; font-size: 0.875rem; font-weight: 600; }
.mz-plan__status .mz-ico { width: 1rem; height: 1rem; }
.mz-plan__list { font-size: 0.9375rem; }
.mz-plan__actions { display: grid; gap: 0.6rem; }
.mz-plan__actions .btn { justify-self: start; }
.mz-plan__actions .link-btn { justify-self: start; padding-left: 0; }
.mz-plan__next { color: var(--text-body); font-size: 0.875rem; }
.mz-stripe__price { font-size: 1.25rem; }
.mz-stripe__card { padding: 0.75rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 0.9375rem; }
.mz-portal__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.mz-portal__row:last-child { border-bottom: 0; }
.mz-portal__row > div { min-width: 0; }
.mz-portal__row.is-past { opacity: 0.6; }

/* "More" (phone) */
.mz-more { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.mz-more__link { display: flex; align-items: center; gap: 0.9rem; min-height: 3.25rem; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font-weight: 600; text-decoration: none; }
.mz-more__link > span:first-of-type { flex: 1; }
.mz-more__link .mz-ico { width: 1.3rem; height: 1.3rem; color: var(--accent-text); }
.mz-more__go .mz-ico { width: 1rem; height: 1rem; color: var(--text-muted); }

/* windows */
.mz-modal { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--text-body); box-shadow: 0 40px 100px -40px rgb(var(--ink-rgb) / 0.55); }
.mz-modal--wide { width: min(44rem, calc(100vw - 2rem)); }
.mz-modal::backdrop { background: rgb(var(--ink-rgb) / 0.55); }
.mz-modal__inner { position: relative; display: grid; gap: 0.9rem; padding: 1.5rem 1.4rem 1.4rem; }
.mz-modal__inner > * { min-width: 0; }
.mz-modal__close { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.mz-modal__close .mz-ico { width: 1.1rem; height: 1.1rem; }
.mz-modal__title { margin: 0; padding-right: 2.5rem; color: var(--ink); font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; }
.mz-modal__text { color: var(--text-body); }
.mz-modal__sub { margin: 0.5rem 0 0; color: var(--ink); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; }
.mz-modal__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.25rem; }

/* coach panel */
.mz-toolbar { display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .mz-toolbar { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: center; } }
.mz-people { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mz-person { display: grid; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.mz-person.is-inactive { box-shadow: inset 3px 0 0 var(--note-border); }
.mz-person__link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.4rem 0.75rem; color: inherit; text-decoration: none; }
.mz-person__link:hover .mz-person__name { text-decoration: underline; }
.mz-person__who { min-width: 0; }
/* break-word, not anywhere: "anywhere" lets the column shrink to one letter wide */
.mz-person__who p { overflow-wrap: break-word; }
.mz-person__who .mz-small { overflow-wrap: anywhere; }   /* a long email may still break, but doesn't set the width */
.mz-person__name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.mz-person__name { color: var(--ink); font-weight: 700; }
.mz-person__plans { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 0.3rem; }
.mz-person__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.1rem 0.75rem; margin: 0; font-size: 0.8125rem; }
.mz-person__facts dt { color: var(--text-muted); }
.mz-person__facts dd { margin: 0 0 0.3rem; color: var(--ink); font-weight: 600; }
.mz-person__facts dd.is-warn { color: var(--note-text); }
@media (min-width: 1100px) {
  /* the name column never gets narrower than ~16rem; the plan badges sit under the name */
  .mz-person { grid-template-columns: minmax(16rem, 1.2fr) minmax(0, 1.8fr); align-items: center; }
  .mz-person__plans { padding-left: calc(2.5rem + 0.75rem); }
  .mz-person__facts { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: auto auto; }
}
.mz-facts { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0; font-size: 0.9375rem; }
.mz-facts dt { color: var(--text-muted); }
.mz-facts dd { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-facts dd.is-warn { color: var(--note-text); font-weight: 600; }
.mz-notes-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.mz-note-item { display: grid; gap: 0.35rem; padding: 0.75rem 0.9rem; border: 1px solid rgb(183 121 31 / 0.3); border-radius: var(--radius-sm); background: var(--note-bg); }
.mz-note-item__text { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-note-item .link-btn { padding: 0.3rem 0; }
.mz-week-edit { gap: 0.75rem; }
.mz-day-edit { display: grid; gap: 0.6rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.mz-exedit { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mz-exedit__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 0.4rem; padding: 0.5rem; border-radius: var(--radius-sm); background: var(--bg); }
.mz-exedit__name { grid-column: 1 / -1; color: var(--ink); font-weight: 600; }
.mz-exedit__row > .input { min-height: 2.6rem; padding: 0.45rem 0.6rem; font-size: 0.9375rem; }
.mz-exedit__row > .input:nth-of-type(4) { grid-column: 1 / -1; }
.mz-exedit__move { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 0.35rem; }
.mz-exedit__head { display: none; }
@media (min-width: 1000px) {
  .mz-exedit__row, .mz-exedit__head { grid-template-columns: minmax(0, 1.6fr) 4.5rem 5.5rem 5.5rem minmax(0, 1.6fr) auto; }
  .mz-exedit__name, .mz-exedit__row > .input:nth-of-type(4), .mz-exedit__move { grid-column: auto; }
  .mz-exedit__head { display: grid; gap: 0.4rem; padding: 0 0.5rem; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
}

/* the demo's test tools */
.mz-testbtn { position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 41; padding: 0.5rem 0.85rem; border: 1px solid var(--note-border); border-radius: 999px; background: var(--note-bg); color: var(--note-text); font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px -10px rgb(var(--ink-rgb) / 0.5); }
.mz-shell .mz-testbtn { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .mz-shell .mz-testbtn { bottom: 1rem; } }

/* a short status message */
.mz-toast {
  position: fixed;
  left: 50%;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  z-index: 120;
  max-width: min(32rem, calc(100% - 2rem));
  padding: 0.8rem 1.2rem;
  border-radius: 1.4rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 16px 40px -18px rgb(var(--ink-rgb) / 0.6);
  opacity: 0;
  transform: translate(-50%, 1rem);
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft);
  pointer-events: none;
}
@media (min-width: 900px) { .mz-toast { bottom: 1.5rem; } }
.mz-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.mz-toast.is-bad { background: var(--error); }

/* 29b. Stage 4A: withdrawal, cancelling, contracts, consents, health questionnaire */
.mz-card--warn { border-color: var(--note-border); background: var(--note-bg); }
.mz-card--warn .mz-card__title { color: var(--note-text); }
.mz-note--warn { border-left: 3px solid var(--note-border); background: var(--note-bg); color: var(--note-text); }
.mz-note--warn a, .mz-note--warn .link-btn { color: var(--note-text); font-weight: 700; }
.mz-text-warn { color: var(--note-text); font-weight: 700; }
.mz-today__notices { display: grid; gap: 1rem; margin-bottom: 1rem; }
.mz-today__notices:empty { display: none; }
/* what was sent (the withdrawal receipt) */
.mz-dl { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0.5rem 0; }
.mz-dl dt { color: var(--text-muted); }
.mz-dl dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .mz-dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .mz-dl dd + dt { margin-top: 0.5rem; }
}
/* the health questionnaire: one question, then no / yes */
.mz-parq { display: grid; gap: 0.25rem; }
.mz-parq__q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.mz-parq__q:last-child { border-bottom: 0; }
.mz-parq__text { margin: 0; color: var(--ink); }
.mz-parq .mz-seg__btn { min-width: 3.5rem; min-height: 2.75rem; }
@media (max-width: 520px) { .mz-parq__q { grid-template-columns: minmax(0, 1fr); } }
/* the 1:1 injury form */
.mz-injuries { display: grid; gap: 0.75rem; }
.mz-injury { display: grid; gap: 0.75rem; margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mz-injury legend { padding: 0 0.35rem; color: var(--text-muted); font-size: 0.8125rem; font-weight: 700; }
/* the "Cancel subscription" window: the options, one after another */
.mz-cw__option { display: grid; gap: 0.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.mz-cw__option .mz-modal__sub { margin: 0; }
.mz-cw__option .mz-inline { flex-wrap: wrap; }
.mz-cw__option .mz-inline select { flex: 1 1 12rem; min-height: 2.75rem; }
.mz-cw__option .mz-chip { min-height: 2.75rem; }
/* consents: one box per place */
.mz-consents { display: grid; gap: 0.35rem; margin: 0 0 1rem; padding: 0; border: 0; }
.mz-consents legend { margin-bottom: 0.25rem; padding: 0; }
.mz-consents .checkbox { min-height: 2.75rem; align-items: center; }
.mz-contract .btn { flex: none; }
/* the demo inbox: read an email as it would arrive */
.mz-portal__row--mail > div { min-width: 0; flex: 1 1 16rem; }
.mz-mail summary { min-height: 2.75rem; display: flex; align-items: center; color: var(--accent-text); font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.mz-mail__body { max-height: 22rem; margin: 0.25rem 0 0; padding: 0.75rem; overflow: auto; border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--ink); font: 0.8125rem/1.5 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-zoom__rec { display: flex; align-items: center; gap: 0.35rem; }
.mz-zoom__rec .mz-ico, .mz-zoom__rec svg { width: 1rem; height: 1rem; flex: none; }
.mz-evidence li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.mz-evidence li > .mz-small { grid-column: 2; }
.mz-entries li.is-warn span { color: var(--note-text); font-weight: 600; }

/* 29c. Stage 3 in the member zone and coach panel: rating, testimonials, gift code, invoices, errors */
.mz-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin: 0.75rem 0 0.35rem; }
@media (min-width: 560px) { .mz-scale { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.mz-scale__btn { min-height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: 700 1rem var(--font-body); cursor: pointer; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.mz-scale__btn:hover, .mz-scale__btn:focus-visible { border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.08); }
.mz-scale__btn:disabled { opacity: 0.6; cursor: default; }
.mz-scale__ends { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.8125rem; }
.mz-gift-redeem { flex-wrap: wrap; }
.mz-gift-redeem .input { flex: 1 1 12rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mz-billing { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.mz-billing .btn { justify-self: start; }
.mz-testimonial { display: grid; gap: 0.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.mz-testimonial__text { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.2rem; font-style: italic; line-height: 1.35; overflow-wrap: anywhere; }
.mz-testimonial__photo:empty { display: none; }
.mz-testimonial__photo img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius-sm); }
.mz-mail__files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: 0.35rem 0 0; }
.mz-mail__files .link-btn { min-height: 2.75rem; }
.mz-err__msg { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.875rem; overflow-wrap: anywhere; }
.mz-entries li > .mz-small { grid-column: 1 / -1; }
/* real testimonials on the home page (with the author's website consent) */
.result-card__photo, .result-card__pair img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.result-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* 29d. 4B in the member zone and coach panel: notices, the coach away, tests,
   the if-then plan, backup workouts, lessons, voice / video replies, risk, numbers */
.mz-today > .mz-today__keep { display: grid; gap: 1rem; }
.mz-today > .mz-today__keep:empty { display: none; }
@media (min-width: 700px) { .mz-today__keep { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mz-today__keep > .mz-today__wide { grid-column: 1 / -1; } }
.mz-banner--away { display: grid; gap: 0.25rem; margin-bottom: 1rem; border-color: var(--note-border); background: var(--note-bg); color: var(--note-text); font-weight: 400; }
.mz-banner--away p { margin: 0; }
.mz-notices { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.mz-notice { display: grid; gap: 0.35rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.mz-notice:last-child { padding-bottom: 0; border-bottom: 0; }
.mz-notice__title { margin: 0; color: var(--ink); font-weight: 700; }
.mz-notice p { margin: 0; }
.mz-ift { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; line-height: 1.3; }
.mz-answer-time { margin: 0.25rem 0 0; }
.mz-wo__film { display: grid; gap: 0.35rem; justify-items: start; margin: 0.75rem 0; }
.mz-wo__film p { margin: 0; }
.mz-records li strong { color: var(--ink); white-space: nowrap; }
.mz-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.mz-badge-earned { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.mz-badge-earned p { margin: 0; }
.mz-badge-earned__icon { font-size: 1.5rem; line-height: 1; }
.mz-lesson { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.mz-lesson.is-locked { background: var(--bg-alt); color: var(--text-muted); }
.mz-lesson__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; min-height: 3rem; padding: 0.8rem 1rem; cursor: pointer; }
.mz-lesson__week { color: var(--accent-text); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mz-lesson__title { flex: 1 1 12rem; color: var(--ink); font-weight: 600; }
.mz-lesson.is-locked .mz-lesson__title { color: var(--text-muted); }
.mz-lesson__body { display: grid; gap: 0.75rem; padding: 0 1rem 1rem; justify-items: start; }
.mz-lesson__body p { margin: 0; }
.mz-media { display: grid; gap: 0.75rem; }
.mz-media__item { display: grid; gap: 0.35rem; }
.mz-media__item p { margin: 0; }
.mz-media__player { width: 100%; max-width: 28rem; }
video.mz-media__player { border-radius: var(--radius-sm); background: #000; }
.mz-media--coach { padding-top: 0.75rem; border-top: 1px dashed var(--line-strong); }
.mz-recorder { display: grid; gap: 0.5rem; }
.mz-recorder__on, .mz-recorder__done { display: grid; gap: 0.6rem; justify-items: start; }
.mz-recorder__live { width: 100%; max-width: 20rem; border-radius: var(--radius-sm); background: #000; }
.mz-recorder__state { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 600; }
.mz-recorder__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--error); }
@media (prefers-reduced-motion: no-preference) { .mz-recorder__dot { animation: sp-blink 1s steps(2, start) infinite; } }
@keyframes sp-blink { to { visibility: hidden; } }
.mz-recorder__clock { font-variant-numeric: tabular-nums; }
.mz-light { display: inline-block; flex: none; width: 0.75rem; height: 0.75rem; margin-right: 0.45rem; border-radius: 50%; vertical-align: 0.05em; box-shadow: 0 0 0 2px var(--bg); }
.mz-light--green { background: #1f9d55; }
.mz-light--yellow { background: #e0a100; }
.mz-light--red { background: var(--error); }
.mz-person--risk .mz-person__who { display: grid; gap: 0.15rem; }
.mz-action.is-off { opacity: 0.6; }
.mz-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 0.4rem; height: 9rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.mz-bars__item { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.2rem; height: 100%; min-width: 0; }
.mz-bars__bar { display: block; width: 100%; max-width: 2.5rem; border-radius: 4px 4px 0 0; background: rgb(var(--accent-rgb) / 0.75); }
.mz-bars__n { font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.mz-bars__label { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mz-table__delta { color: var(--accent-text); font-weight: 700; }
/* a short table that should fit a phone without sideways scrolling (the tests) */
.mz-table--fit th, .mz-table--fit td { padding: 0.5rem 0.45rem; white-space: normal; }
.mz-table--fit thead th { letter-spacing: 0.02em; }

/* 30. GIFT VOUCHERS (padovanok.html)
   ===================================================================== */
.gift-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .gift-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 4rem; } }
.gift-form { display: grid; gap: 1.35rem; }
.gift-options { display: grid; gap: 0.75rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.gift-legend { margin-bottom: 0.5rem; padding: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.gift-option { position: relative; display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.gift-option:hover { border-color: rgb(var(--accent-rgb) / 0.6); }
.gift-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gift-option input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--accent); }
.gift-option__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; min-width: 0; flex: 1; }
.gift-option__name { color: var(--ink); font-weight: 700; }
.gift-option__price { color: var(--ink); font-weight: 700; white-space: nowrap; }
.gift-option__note { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--fs-small); }
.gift-option__note:empty { display: none; }
.gift-rules { padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.gift-rules__title { margin: 0 0 0.6rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.gift-rules .check-list { gap: 0.45rem; font-size: var(--fs-small); }
.gift-rules__more { margin: 0.6rem 0 0; color: var(--text-muted); font-size: 0.875rem; }
.gift-rules__more:empty { display: none; }
.gift-form > .btn { justify-self: start; }
.gift-closed { margin: 0; }
/* the preview: the voucher as it will look */
.gift-preview { position: relative; }
@media (min-width: 960px) { .gift-preview { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.gift-preview__label { margin: 0 0 0.75rem; color: var(--text-muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.gift-card { display: grid; gap: 0.75rem; padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.gift-card__eyebrow { margin: 0; color: var(--accent-text); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.gift-card__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.05; }
.gift-card__product { margin: 0; color: var(--ink); font-weight: 700; }
.gift-card__message { margin: 0; color: var(--text-body); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; line-height: 1.3; }
.gift-card__from { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.gift-card__code { display: grid; gap: 0.35rem; margin-top: 0.5rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--bg-alt); }
.gift-card__code-label { color: var(--text-muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.gift-card__code-value { color: var(--ink); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.12em; }
.gift-card__valid { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
/* after paying */
.gift-done { display: grid; gap: 1rem; padding-block: 1rem 2rem; outline: none; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.gift-done h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.gift-done__code { margin: 0; color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; }
.gift-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }
/* how it works: three numbered steps (a real sequence) */
.gift-steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: gift; }
@media (min-width: 760px) { .gift-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.gift-steps li { counter-increment: gift; display: grid; gap: 0.4rem; }
.gift-steps li::before { content: counter(gift); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 700; }
.gift-steps h3 { margin: 0.35rem 0 0; font-size: 1.35rem; }
.gift-steps p { margin: 0; color: var(--text-body); }

/* 31. LINK IN BIO (nuorodos.html): light and still – no animations
   ===================================================================== */
.js.is-ready body.bio-page { transition: none; }
.bio-main { flex: 1; display: flex; justify-content: center; padding: 0.5rem var(--gutter) 2.5rem; }
.bio { width: 100%; max-width: 27rem; display: grid; justify-items: center; gap: 0.85rem; text-align: center; }
.bio__mark { width: 4.25rem; height: 4.25rem; }
.bio__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.4rem); line-height: 1.05; }
.bio__lead { margin: 0; max-width: 23rem; color: var(--text-body); }
.bio__links { display: grid; gap: 0.75rem; width: 100%; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.bio__link {
  display: grid; gap: 0.2rem; min-height: 4.25rem; padding: 0.9rem 1.15rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); text-align: left; text-decoration: none;
}
.bio__link:hover, .bio__link:focus-visible { border-color: var(--ink); }
.bio__link--first { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.bio__link--first:hover, .bio__link--first:focus-visible { border-color: var(--ink); }
.bio__link-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.bio__link-sub { font-size: 0.8438rem; line-height: 1.4; }
.bio__link-sub:empty { display: none; }
.bio__social { justify-content: center; margin-top: 0.4rem; }
.bio__more { margin: 0; font-size: 0.875rem; }
.bio__more a { color: var(--accent-text); }

/* 31b. COMPARE THE THREE OFFERS (programs.html, 4B)
   A real table; on a phone each feature takes a full line with the three
   answers under it, and the offer names stay at the top while scrolling. */
.compare__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.compare__table th, .compare__table td { padding: 0.9rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare__table thead th { vertical-align: bottom; border-bottom: 2px solid var(--ink); }
.compare__offer { display: block; color: var(--ink); font-weight: 700; line-height: 1.25; }
.compare__price { display: block; margin-top: 0.15rem; color: var(--accent-text); font-size: 0.875rem; font-weight: 600; }
.compare__table tbody th { color: var(--ink); font-weight: 600; }
.compare__table td { color: var(--text-body); }
.compare__yes svg { width: 1.3rem; height: 1.3rem; color: var(--accent-text); }
.compare__no { color: var(--text-muted); }
.compare__not th, .compare__not td { background: var(--bg-alt); }
.compare__not th { color: var(--accent-text); }
.compare__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.5rem; color: var(--text-body); }
@media (max-width: 699px) {
  .compare__table, .compare__table thead, .compare__table tbody { display: block; }
  .compare__table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare__table thead { position: sticky; top: calc(var(--header-h) + 0.75rem); z-index: 2; background: var(--bg); }
  .compare__corner { display: none; }
  .compare__table th, .compare__table td { padding: 0.6rem 0.45rem; font-size: 0.8438rem; }
  .compare__table tbody th { grid-column: 1 / -1; padding: 0.9rem 0.45rem 0.1rem; border-bottom: 0; font-size: 0.9375rem; }
  .compare__offer { font-size: 0.8438rem; }
  .compare__price { font-size: 0.8125rem; }
}

/* 22. MOTION
   ===================================================================== */
/* Scroll reveals: slow, soft, small. "fade" = opacity only (used for
   elements the trail passes through, so the line never misses them). */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in,
.js [data-reveal]:focus-within { opacity: 1; transform: none; }   /* never hide something that has keyboard focus */

/* Home hero: an orchestrated entrance once the text is ready */
/* PREVIEW: a quick fade instead of the 1.3 s staged entrance, so the first screen shows at once */
.js .hero [data-intro] { opacity: 0; }
.js.is-ready .hero [data-intro] { animation: sp-rise 0.35s ease-out forwards; }
.js .hero .title-dot { opacity: 0; transform: scale(0.2); }
.js.is-ready .hero .title-dot { animation: sp-dot 0.5s var(--ease) 0.2s forwards; }
@keyframes sp-rise { to { opacity: 1; transform: none; } }
@keyframes sp-dot {
  0% { opacity: 0; transform: scale(0.2); }
  60% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}


/* 23. REDUCED MOTION AND PRINT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js .hero [data-intro], .js .hero .title-dot { opacity: 1; transform: none; }
}

@media print {
  :root { --bg: #fff; }
  body { background: #fff !important; color: #222 !important; opacity: 1 !important; }
  .site-header, .site-footer, .cookie, .trail, .trail__head, .trail__marks, .page-hero::before,
  .no-print, .gate, .tool-layout, .notice, .skip-link { display: none !important; }
  .page-hero { padding: 0 0 1rem; }
  h1, h2, h3, .result-big__value, .macro__value, .meal__title { color: #111 !important; }
  .result-head, .macro, .meal, .day-total { background: none !important; border-color: #bbb !important; break-inside: avoid; }
  .meal__items li, .result-meta, .macro__label, .plan__fallback { color: #333 !important; }
  .meal__items li span:last-child, .result-meta strong { color: #111 !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  mark.ph { background: none; box-shadow: none; color: inherit; }
}

/* =====================================================================
   32. STAGE 2 IN THE MEMBER ZONE AND COACH PANEL: messages, the unread
   number, the consistency calendar, Zoom questions, recipes and meal plans,
   water, exercise swaps, the leaderboard, the contest, the story image
   ===================================================================== */
.mz-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; margin-left: auto; padding: 0 0.35rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.6875rem; font-weight: 700; line-height: 1; }
.mz-tab { position: relative; }
.mz-tab .mz-unread { position: absolute; top: 0.3rem; left: calc(50% + 0.35rem); margin: 0; }
.mz-more__link .mz-unread { margin-left: 0.5rem; }
/* the chat */
.mz-chat { display: grid; gap: 0.5rem; align-content: start; max-height: min(60vh, 34rem); overflow-y: auto; margin-bottom: 0.75rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); overscroll-behavior: contain; }
.mz-chat__empty { margin: 0; padding: 1rem 0.25rem; }
.mz-chat__day { justify-self: center; margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }
.mz-chat__msg { display: grid; gap: 0.3rem; justify-self: start; max-width: min(85%, 30rem); padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 1rem 1rem 1rem 0.25rem; background: var(--bg); color: var(--text-body); }
.mz-chat__msg.is-mine { justify-self: end; border-color: transparent; border-radius: 1rem 1rem 0.25rem 1rem; background: rgb(var(--accent-rgb) / 0.12); color: var(--ink); }
.mz-chat__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-chat__time { margin: 0; color: var(--text-muted); font-size: 0.6875rem; text-align: right; }
.mz-chat__file img, .mz-chat__file video { display: block; max-width: 100%; max-height: 18rem; border-radius: 0.6rem; }
.mz-chat__file audio { width: min(100%, 16rem); }
.mz-chat__file .mz-loading { margin: 0; font-size: 0.75rem; }
.mz-chat__compose { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: end; }
.mz-chat__compose .btn { grid-column: 1 / -1; justify-self: end; }
.mz-chat__compose > p { grid-column: 1 / -1; margin: 0; }
.mz-chat__input { min-height: 2.75rem; resize: vertical; }
.mz-chat__attach { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--control-border); border-radius: 50%; background: var(--field-bg); color: var(--ink); cursor: pointer; }
.mz-chat__attach svg { width: 1.25rem; height: 1.25rem; }
.mz-chat__attach:hover { border-color: var(--ink); }
@media (min-width: 700px) {
  .mz-chat__compose { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mz-chat__compose .btn { grid-column: auto; }
}
/* the coach's inbox */
.mz-threads { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mz-thread { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: inherit; text-decoration: none; }
.mz-thread:hover { border-color: var(--line-strong); }
.mz-thread__text { display: grid; flex: 1; gap: 0.15rem; min-width: 0; }
.mz-thread__text p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-thread__name { color: var(--ink); font-weight: 700; }
/* the consistency calendar: 16 columns (weeks) of 7 days */
.mz-heat-wrap { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; }
.mz-heat__days { display: grid; grid-template-rows: repeat(7, 0.85rem); gap: 0.2rem; color: var(--text-muted); font-size: 0.625rem; line-height: 0.85rem; }
.mz-heat { display: grid; grid-auto-flow: column; grid-auto-columns: 0.85rem; gap: 0.2rem; }
.mz-heat__col { display: grid; grid-template-rows: repeat(7, 0.85rem); gap: 0.2rem; }
.mz-heat__day { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; background: rgb(var(--ink-rgb) / 0.08); }
.mz-heat__day.is-1 { background: rgb(var(--accent-rgb) / 0.55); }
.mz-heat__day.is-2 { background: var(--accent); }
.mz-heat__day.is-future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.mz-heat__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.75rem; }
@media (min-width: 560px) {
  .mz-heat { grid-auto-columns: 1.05rem; }
  .mz-heat__col, .mz-heat__days { grid-template-rows: repeat(7, 1.05rem); }
  .mz-heat__days { line-height: 1.05rem; }
  .mz-heat .mz-heat__day { width: 1.05rem; height: 1.05rem; }
}
.mz-badge-earned.is-locked { border-style: dashed; background: transparent; }
.mz-badge-earned.is-locked .mz-badge-earned__icon { filter: grayscale(1); opacity: 0.45; }
/* the badges card: small tiles in groups, two side by side on a phone */
.mz-badges__group { margin: 1.25rem 0 0.6rem; color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.mz-badges--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); gap: 0.6rem; }
.mz-badges--grid .mz-badge-earned { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.75rem; }
.mz-badges--grid .mz-rec__title { font-size: 0.9375rem; line-height: 1.25; }
.mz-badges--grid .mz-small { font-size: 0.75rem; line-height: 1.35; }
.mz-celebrate { margin: 0; font-size: 2.75rem; line-height: 1; }
/* questions before a Zoom call */
.mz-qa { display: grid; gap: 0.6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.mz-qa__title { margin: 0; color: var(--ink); font-size: 1rem; }
.mz-qa > p { margin: 0; }
.mz-qa__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mz-qa__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.mz-qa__item.is-answered { opacity: 0.7; }
.mz-qa__body { display: grid; gap: 0.15rem; min-width: 0; }
.mz-qa__body p { margin: 0; overflow-wrap: anywhere; }
.mz-qa__vote { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.2rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.mz-qa__vote[aria-pressed="true"] { border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.12); color: var(--accent-text); }
.mz-qa__vote:disabled { cursor: default; opacity: 0.6; }
.mz-qa__arrow { font-size: 0.625rem; line-height: 1; }
.mz-qa__ask { display: grid; gap: 0.5rem; justify-items: start; }
.mz-qa__ask .field { width: 100%; margin: 0; }
/* recipes and meal plans */
.mz-recipes { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .mz-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mz-recipe { display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 4.5rem; padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mz-recipe:hover { border-color: var(--line-strong); }
.mz-recipe__img { flex: none; width: 4rem; height: 4rem; border-radius: 0.6rem; object-fit: cover; }
.mz-recipe__img--none { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-alt); color: var(--text-muted); }
.mz-recipe__img--none svg { width: 1.6rem; height: 1.6rem; }
.mz-recipe__text { display: grid; gap: 0.1rem; min-width: 0; }
.mz-recipe__meal { color: var(--accent-text); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mz-recipe__title { color: var(--ink); }
.mz-recipe__photo { display: block; width: 100%; max-height: 16rem; object-fit: cover; border-radius: var(--radius-sm); }
.mz-steps { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.25rem; }
.mz-shopping { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.mz-print__title { margin: 0 0 0.25rem; }
.mz-water { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mz-water__value { min-width: 4.5rem; color: var(--ink); font-size: 1.25rem; text-align: center; }
/* exercise swaps */
.mz-swap { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.25rem 0 0.5rem; }
.mz-swap svg { width: 1rem; height: 1rem; }
.mz-swap-note { margin: 0.25rem 0 0.5rem; }
.mz-swaps { display: grid; gap: 0.5rem; }
.mz-swap__opt { display: grid; gap: 0.3rem; justify-items: start; width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mz-swap__opt:hover { border-color: var(--ink); }
/* the leaderboard: the member's own row */
.mz-lb tr.is-me th, .mz-lb tr.is-me td { background: rgb(var(--accent-rgb) / 0.1); }
/* the contest: the consents */
.mz-consent-set { display: grid; gap: 0.35rem; margin: 0 0 0.75rem; padding: 0; border: 0; }
.mz-consent-set legend { margin-bottom: 0.25rem; color: var(--ink); font-weight: 600; }
/* the story image's preview */
.mz-story:empty { display: none; }
.mz-story__img { display: block; width: min(100%, 15rem); height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
/* how to install */
.mz-howto { display: grid; gap: 0.5rem; margin: 0; padding-left: 1.25rem; }
/* printing a meal plan: only the plan */
@media print {
  body.mz-printing .mz-side, body.mz-printing .mz-tabbar, body.mz-printing .site-header, body.mz-printing .site-footer,
  body.mz-printing .mz-page__head, body.mz-printing .mz-subnav, body.mz-printing .mz-back, body.mz-printing .mz-noprint,
  body.mz-printing .mz-testbtn, body.mz-printing .cookie { display: none !important; }
  body.mz-printing .mz-card { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}


/* 33. TASK 5: the choices after a challenge, the business summary, emails, Zoom imports
   ===================================================================== */
/* weeks 11–12: three ways to carry on */
.mz-offers { display: grid; gap: 0.75rem; margin: 0.25rem 0 0.75rem; }
.mz-offer { display: grid; gap: 0.35rem; justify-items: start; padding: 0.85rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg); }
.mz-offer__title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.mz-offer .mz-small { margin: 0; }
/* the coach's business summary */
.mz-funnel { display: grid; gap: 0.4rem; margin: 0 0 0.75rem; padding-left: 1.25rem; }
.mz-funnel strong { color: var(--ink); font-size: 1.05rem; }
.mz-seat { display: grid; gap: 0.35rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.mz-seat:first-of-type { border-top: 0; padding-top: 0; }
.mz-seat p { margin: 0; }
/* a badge next to a title (Zoom import, its status) */
.mz-rec__title .mz-badge { margin-left: 0.4rem; vertical-align: 0.1em; }
/* the demo inbox: the designed email, as a mail app shows it */
.mz-mail__frame { display: block; width: 100%; height: 34rem; margin-top: 0.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f1ece0; }
/* touch targets: on phones the small buttons are 44 px high too (WCAG 2.5.5, the 375 px check) */
@media (pointer: coarse), (max-width: 40rem) {
  .btn--sm, .mz-seg__btn { min-height: 2.75rem; }
  .mz-x { width: 2.75rem; height: 2.75rem; }
}


/* 34. TASK 6: for companies, the food diary, habits, the progression hint
   ===================================================================== */
/* imonems.html */
.b2b-grid { display: grid; gap: 2.5rem; }
.b2b-block h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.b2b-note { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.b2b-note h2 + p { margin-bottom: 1.5rem; }
.b2b-price { color: var(--ink); font-weight: 600; }
.b2b-vat { color: var(--text-muted); font-size: var(--fs-small); }
.b2b-size { max-width: 10rem; }
@media (min-width: 60rem) {
  .b2b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
/* the workout player: "+2.5 kg today" */
.mz-wo__hint { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / 0.1); color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.mz-wo__hint .mz-ico { flex: none; width: 1rem; height: 1rem; color: var(--accent-text); transform: rotate(-90deg); }
/* habits on "Šiandien" and their 4 weeks */
.mz-habits { display: grid; gap: 0.25rem; margin: 0.25rem 0 0.75rem; }
.mz-habit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; min-height: 2.75rem; }
.mz-habit__check { min-height: 2.75rem; align-items: center; }
.mz-habit__streak { color: var(--accent-text); font-size: var(--fs-small); font-weight: 600; }
.mz-habit-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; max-width: 18rem; margin: 0.25rem 0 0.5rem; }
.mz-habit-grid__day { aspect-ratio: 1; border-radius: 0.3rem; background: var(--surface-2); }
.mz-habit-grid__day.is-done { background: var(--accent); }
/* the food photo diary */
.mz-food { display: grid; gap: 1rem; }
.mz-food__item { display: grid; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.mz-food__img { display: block; width: 100%; max-height: 22rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.mz-food__text p { margin: 0 0 0.35rem; }
.mz-food__coach { margin: 0.25rem 0 0.5rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--accent); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
@media (min-width: 40rem) {
  .mz-food__item { grid-template-columns: 12rem 1fr; align-items: start; }
  .mz-food__img { height: 12rem; }
}
.mz-amb p { margin: 0 0 0.25rem; }
/* the coach's food photo list */
.mz-cfood { display: grid; gap: 1rem; }
.mz-cfood__item { display: grid; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.mz-cfood__item.is-new { border-color: var(--accent); }
@media (min-width: 40rem) { .mz-cfood__item { grid-template-columns: 10rem 1fr; } }

/* =====================================================================
   PREVIEW (optimised site): new home page parts and the sticky phone button
   ===================================================================== */
/* Hero: text and the photo side by side on wide screens, photo under the text on phones */
.hero--split { min-height: 0; padding-block: calc(var(--header-h) + 1.5rem) clamp(2.5rem, 2rem + 3vw, 5rem); }
.hero--split .hero__inner { gap: 1.75rem; align-items: center; }
.hero--split .hero__lower { margin-left: 0; gap: 1.25rem; max-width: 36rem; }
.hero--split .hero__title { font-size: clamp(2.6rem, 1.6rem + 4.5vw, 5.25rem); }
.hero__plain { font-size: var(--fs-lead); font-weight: 600; color: var(--ink); line-height: 1.4; max-width: 34ch; }
.hero--split .hero__lead { font-size: 1rem; color: var(--text-body); max-width: 40ch; }
.hero--split .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hero__photo { position: relative; width: 100%; max-width: 30rem; }
.hero__photo img, .hero__photo .photo-ph { aspect-ratio: 4 / 3; object-position: 50% 25%; }
.hero__badge {
  position: absolute; left: 0.85rem; bottom: 0.85rem;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 0.9375rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}
@media (min-width: 900px) {
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: clamp(2rem, 5vw, 5rem); }
  .hero__photo { justify-self: end; max-width: 26rem; }
  .hero__photo img, .hero__photo .photo-ph { aspect-ratio: 4 / 5; }
}
/* Proof strip: before/after next to the numbers */
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.proof-strip { display: grid; gap: 1.75rem; align-items: center; }
.proof__frames--sm { max-width: 26rem; gap: 0.75rem; margin: 0; }
.proof-strip__text { display: grid; gap: 0.9rem; }
.stats--inline { margin-top: 0.5rem; }
.proof-strip .stats__quals { margin-top: 0.5rem; }
@media (min-width: 900px) { .proof-strip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 4rem; } }
/* Three steps */
@media (min-width: 1000px) { .how--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The sticky button on phones: the page's one main action, always in reach */
.sticky-cta { display: none; }
@media (max-width: 899px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.94); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  body.has-sticky-cta { padding-bottom: 4.5rem; }
}/* PREVIEW, phones: a compact photo above the headline, so face + "135 → 75 kg" are on the first screen */
@media (max-width: 899px) {
  .hero--split .hero__photo { order: -1; max-width: none; }
  .hero--split .hero__photo img, .hero--split .hero__photo .photo-ph { aspect-ratio: 16 / 9; object-position: 50% 20%; }
  .hero--split .hero__inner { gap: 1.25rem; }
  .hero--split .hero__members { display: none; }   /* the header already has the member-zone button */
  .hero--split .hero__lead { font-size: 0.9375rem; }
}
/* the sticky button waits until the first screen's own button has scrolled away */
.sticky-cta { transition: transform 0.25s ease, opacity 0.25s ease; }
.sticky-cta.is-waiting { transform: translateY(110%); opacity: 0; pointer-events: none; }
/* PREVIEW: breathing room between the headline and the text under it */
.hero--split .hero__copy { display: grid; gap: 1.5rem; }
.hero--split .hero__lower { padding-top: 0.5rem; }

/* PREVIEW: the two free ways in */
.free-cards { display: grid; gap: 1rem; }
@media (min-width: 760px) { .free-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.free-card { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.free-card:hover { border-color: var(--accent-text); transform: translateY(-2px); }
.free-card__icon { width: 2rem; height: 2rem; color: var(--accent-text); }
.free-card h3 { font-size: var(--fs-h3); }
.free-card p { color: var(--text-body); }
/* PREVIEW: plans not open yet. A light layer over each plan card with a register-interest form (assets/js/interest.js).
   The top of the card (name, price) stays readable; the panel sits over the lower half. */
@media (min-width: 900px) {
  .depths--offers { grid-template-columns: repeat(2, minmax(0, 27rem)); justify-content: center; }   /* two plans now */
}
.depth.is-soon { position: relative; }
/* only the badge, icon, kind and name stay; price, text and what's included wait for the launch */
.depth.is-soon > :not(.depth__badge):not(.depth__icon):not(.depth__meta):not(.depth__title):not(.depth__bullets):not(div:has(> .depth__bullets)):not(.soon) { display: none !important; }
/* both cards line up: the badge moves to the corner, and the panel sits on top of
   the first six "what you get" lines, blurred so they read as texture, not text */
.depth.is-soon { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.depth.is-soon .depth__badge { position: absolute; top: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); right: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); }
.depth.is-soon .depth__icon { grid-row: 1; }
.depth.is-soon .depth__meta { grid-row: 2; }
.depth.is-soon .depth__title { grid-row: 3; }
.depth.is-soon > .depth__bullets, .depth.is-soon > div:has(> .depth__bullets) { grid-row: 4; grid-column: 1; }
.depth.is-soon > .soon { grid-row: 4; grid-column: 1; align-self: center; }   /* in the middle of the blurred lines */
.depth.is-soon .depth__bullets { display: grid; align-content: space-between; min-height: 31rem; }
.depth.is-soon > .depth__bullets, .depth.is-soon > div:has(> .depth__bullets) { filter: blur(6px); opacity: .5; user-select: none; pointer-events: none; padding-block: .5rem; }
.depth.is-soon .depth__bullets li:nth-child(n+7) { display: none; }
.depth.is-soon > .soon { position: relative; z-index: 2; }
.soon { display: block; }
.soon__panel {
  display: grid; gap: .55rem; padding: 1.2rem; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
.soon__badge {
  justify-self: start; margin: 0; padding: .3rem .75rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.soon__title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.soon__text { margin: 0; color: var(--text-body); font-size: .9375rem; }
.soon__form { display: grid; gap: .7rem; margin-top: .2rem; }
.soon__form .checkbox { font-size: .8125rem; }
.soon__form .form-status:empty { display: none; }/* home on phones: the swipe cards are short, so the panel drops the extra line and the visible label */
@media (max-width: 899.98px) {
  .home .soon__text { display: none; }
  .home .soon__panel { padding: 1rem; gap: .45rem; }
  .home .soon__form .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .home .soon__title { font-size: 1.3rem; }
}


/* PREVIEW: the comparison table shows prices and what's included, so it waits for the launch too */
#palyginimas { display: none; }
.depths__vat[data-vat-note] { display: none; }   /* PREVIEW: no prices shown until launch */

/* PREVIEW: softer page rhythm.
   1. Less empty space between sections.
   2. Sections melt into each other instead of hard edges: every change of background
      fades through white, and dark sections glow softly with a few warm sparks. */
:root {
  --section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --fade: clamp(3.5rem, 2.5rem + 4vw, 7rem);          /* light ↔ light-grey fades */
  --fade-dark: clamp(6rem, 4rem + 7vw, 12rem);          /* white ↔ dark fades: longer, like a horizon */
}
main > .section--alt {
  background: linear-gradient(to bottom, #ffffff 0, var(--bg-alt) var(--fade), var(--bg-alt) calc(100% - var(--fade)), #ffffff 100%);
}
main > .section.theme-dark {
  isolation: isolate;
  padding-block: calc(var(--section) * .6 + var(--fade-dark));
  background:
    radial-gradient(55% 35% at 50% 50%, rgb(var(--accent-rgb) / .10), transparent 70%),
    linear-gradient(to bottom, #ffffff 0, #2a2522 calc(var(--fade-dark) * .45), var(--dark-bg) var(--fade-dark),
                    var(--dark-bg) calc(100% - var(--fade-dark)), #2a2522 calc(100% - var(--fade-dark) * .45), #ffffff 100%);
}
/* warm sparks, only inside the dark part */
main > .section.theme-dark::before {
  content: ""; position: absolute; inset: var(--fade-dark) 0; z-index: -1; pointer-events: none; opacity: .7;
  background:
    radial-gradient(2px 2px at 8% 22%, #ffb37a, transparent), radial-gradient(1.5px 1.5px at 17% 68%, #ffd0a8, transparent),
    radial-gradient(2.5px 2.5px at 29% 12%, #ff9a5c, transparent), radial-gradient(1.5px 1.5px at 41% 84%, #ffc799, transparent),
    radial-gradient(2px 2px at 56% 30%, #ffb37a, transparent), radial-gradient(1.5px 1.5px at 63% 76%, #ffd0a8, transparent),
    radial-gradient(3px 3px at 74% 18%, #ff8a45, transparent), radial-gradient(1.5px 1.5px at 82% 58%, #ffc799, transparent),
    radial-gradient(2px 2px at 91% 34%, #ffb37a, transparent), radial-gradient(1.5px 1.5px at 96% 80%, #ffd0a8, transparent),
    radial-gradient(2px 2px at 35% 46%, #ff9a5c, transparent), radial-gradient(1.5px 1.5px at 4% 90%, #ffc799, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  main > .section.theme-dark::before { animation: sp-sparks 9s ease-in-out infinite alternate; }
}
@keyframes sp-sparks { from { transform: translateY(6px); opacity: .45; } to { transform: translateY(-6px); opacity: .8; } }
/* the footer rises out of the page the same way */
.site-footer {
  padding-top: calc(var(--fade-dark) + 2rem);
  background: linear-gradient(to bottom, var(--scene-ground-bottom) 0, #2a2522 calc(var(--fade-dark) * .45), var(--dark-bg) var(--fade-dark), var(--dark-bg) 100%);   /* starts in the mountain scene's ground colour */
}

/* PREVIEW round 3 */
/* member zone buttons: readable, slightly soft, not clickable */
.is-not-ready { filter: blur(.7px); opacity: .55; pointer-events: none; cursor: default; user-select: none; }
/* the "Atšauk bet kada" badge: centred at the top of the card */
.depth.is-soon .depth__badge { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
/* less empty space between sections, shorter fades */
:root {
  --section: clamp(2.75rem, 2rem + 3vw, 5rem);
  --fade: clamp(2.5rem, 2rem + 3vw, 5rem);
  --fade-dark: clamp(4.5rem, 3rem + 5vw, 8.5rem);
}
main > .section.theme-dark { padding-block: calc(var(--section) * .5 + var(--fade-dark) * .85); }
/* the black mountain line above the footer covered the last section's buttons: the footer now fades in instead */
.site-footer__ridge { display: none; }
.site-footer { background: linear-gradient(to bottom, #ffffff 0, #2a2522 calc(var(--fade-dark) * .45), var(--dark-bg) var(--fade-dark), var(--dark-bg) 100%); }
.home .site-footer { background: linear-gradient(to bottom, var(--scene-ground-bottom) 0, #2a2522 calc(var(--fade-dark) * .45), var(--dark-bg) var(--fade-dark), var(--dark-bg) 100%); }
/* no discount pop-up at the summit and no gift link while nothing is for sale */

.depths__vat { display: none; }
/* diagnostic result: "coming soon" instead of a price, what's included blurred */
.check-list.is-blurred { filter: blur(6px); opacity: .5; user-select: none; pointer-events: none; }
.offer-card__soon { margin: 0; color: var(--accent-text); font-weight: 700; font-size: .9375rem; }
/* PREVIEW: diagnostic questions with several answers */
.quiz-multi-hint { margin: -.25rem 0 .9rem; color: var(--accent-text); font-size: .9375rem; font-weight: 600; }
.quiz-next { margin-top: 1.25rem; }
.quiz-next:disabled { opacity: .45; cursor: not-allowed; }
.choice input[type="checkbox"] + .choice__box::before { border-radius: 5px; }   /* PREVIEW: goals tick like boxes, not dots */

/* PREVIEW: the diagnostic result sits in the middle of the screen */
.result { margin-inline: auto; }
.result-hero { justify-items: center; text-align: center; }
.result-hero .result-answers-wrap { justify-items: center; }
.result-hero .chips { justify-content: center; }
.result-next { justify-items: stretch; }
.result-next > .quiz-label, .result-next__title, .result-next > .result-lead { text-align: center; }
.result-block > .result-h2, .result-block > .result-lead { text-align: center; }
.result-foot { justify-items: center; text-align: center; }
/* plan cards in the result: "coming soon", the button and "more" in the middle */
.offer-card__soon, .offer-card > .btn, .offer-card > .link-arrow { justify-self: center; text-align: center; }
.offer-card > .btn { min-width: min(100%, 20rem); justify-content: center; }
.offer-card__name { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 500; text-align: center; }
.result-alt__grid { grid-template-columns: minmax(0, 1fr) !important; }   /* one other option: as wide as the first card */
.result-alt > .result-h3 { text-align: center; }
.quiz-main > #diag-result { width: 100%; max-width: 50rem; margin-inline: auto; align-self: center; }   /* PREVIEW: the result column in the middle on wide screens too */
/* member zone switch off (config.js → features.memberZone: false): its buttons are hidden */
.no-members .header-login, .no-members .panel-login, .no-members .hero__members, .no-members [data-member-link] { display: none !important; }
/* PREVIEW: "Diagnostika" in the menu stands out a little (the free lead magnet), softer than the orange button */
.site-nav a[href="diagnostika.html"] { color: var(--accent-text); }
@media (min-width: 900px) {
  .site-nav a[href="diagnostika.html"] {
    padding: .4rem .85rem; border-radius: 999px; font-weight: 600;
    background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .3);
    transition: background .2s, border-color .2s;
  }
  .site-nav a[href="diagnostika.html"]:hover { color: var(--accent-text); background: rgb(var(--accent-rgb) / .18); border-color: rgb(var(--accent-rgb) / .5); }
  .site-nav a[href="diagnostika.html"]::after { display: none; }
}

/* ---------- phones, round 1 ---------- */
@media (max-width: 1199.98px) {
  /* the menu: a narrow drawer from the right over a dimmed page, not a full-screen sheet */
  .site-header__panel {
    inset: 0 0 0 auto; width: min(80vw, 20rem);
    justify-content: flex-start; gap: 1.5rem;
    padding: calc(var(--header-h) + 1.75rem) 1.1rem 1.5rem;
    border-radius: 24px 0 0 24px; box-shadow: -24px 0 60px -24px rgb(0 0 0 / .45);
    opacity: 1; transform: translateX(105%);
    transition: transform .4s var(--ease-soft), visibility 0s linear .4s;
  }
  .site-header.is-open .site-header__panel { transform: none; transition: transform .4s var(--ease-soft), visibility 0s; }
  .site-header.is-open::after { content: ""; position: fixed; inset: 0; z-index: -2; background: rgb(17 17 17 / .4); pointer-events: auto; }   /* the header itself lets clicks through; the dimmed part must catch the tap that closes the menu */
  .site-nav ul { gap: .3rem; }
  .site-nav a { display: block; padding: .7rem .95rem; border-radius: 14px; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
  .site-nav a:active { background: rgb(var(--accent-rgb) / .08); }
  .site-nav a[aria-current="page"] { font-style: normal; color: var(--accent-text); }
  /* the same light orange "Diagnostika" as on a computer */
  .site-nav a[href="diagnostika.html"] { padding: .7rem .95rem; border-radius: 14px; font-weight: 600; color: var(--accent-text); background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .3); }
  .site-header__panel .header-cta { align-self: stretch; text-align: center; justify-content: center; }

  /* plan cards: one under the other (no sideways swipe), compact, the badge above the name */
  .depth.is-soon { padding-top: 3.4rem; }
  .depth.is-soon .depth__badge { top: 1.1rem; }
  .depth.is-soon .soon__panel { padding: 1rem; }
}
@media (max-width: 899.98px) {
  .depths--offers .depth.is-soon, .home .depths--offers .depth.is-soon { padding-top: 3.6rem; }
  .depths--offers .depth.is-soon > .depth__bullets, .depths--offers .depth.is-soon > div:has(> .depth__bullets) { align-self: start; }
}

/* ---------- phones, round 2 ---------- */
/* the seller's details (still placeholders) stay out of the footers; they are in the terms */
.site-footer__seller, .quiz-footer__seller { display: none; }
/* diagnostic: questions with several answers move on by themselves; this bar shows when */
.quiz-auto { height: 3px; margin-top: 1.1rem; border-radius: 3px; background: var(--line); overflow: hidden; }
.quiz-auto span { display: block; height: 100%; width: 0; background: var(--accent); }
.quiz-auto.is-running span { width: 100%; transition: width 1.8s linear; }
/* diagnostic result: "coming soon" + the button in a small panel in the middle of the card */
.offer-card__stack { display: grid; }
.offer-card__stack > * { grid-area: 1 / 1; }
.offer-card__stack > .check-list { align-self: stretch; display: grid; align-content: space-between; min-height: 18rem; }
.offer-card__panel {
  align-self: center; justify-self: center; position: relative; z-index: 1; width: min(100%, 22rem);
  display: grid; gap: .8rem; justify-items: center; text-align: center; padding: 1.25rem;
  border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
.offer-card__panel .btn { justify-self: stretch; justify-content: center; min-width: 0; }
@media (max-width: 899.98px) {
  /* menu: the orange button right under the links, not at the bottom of the drawer */
  .site-header__panel .site-nav { flex: 0 0 auto; }
  /* plans: cards swipe sideways again; the email box sits in the middle of each card */
  .home .depths--offers .depth.is-soon .depth__bullets { min-height: 19rem; padding-block: .5rem; }
  .depth.is-soon > .soon { grid-row: 4; align-self: center; }
}

/* the free-diagnostic card that pops up once per visit (main.js) */
.diag-pop {
  position: fixed; z-index: 45; right: 1rem; bottom: 1rem; width: min(calc(100vw - 2rem), 21rem);
  display: grid; gap: .55rem; padding: 1.25rem 1.25rem 1.1rem; border-radius: 22px;
  background: linear-gradient(135deg, #fff6f0, #ffeadd); border: 1px solid rgb(var(--accent-rgb) / .3);
  box-shadow: 0 24px 60px -24px rgb(var(--ink-rgb) / .45);
  opacity: 0; transform: translateY(1.5rem); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.diag-pop.is-in { opacity: 1; transform: none; }
.diag-pop__close { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: rgb(var(--ink-rgb) / .06); color: var(--ink); cursor: pointer; }
.diag-pop__close svg { width: .9rem; height: .9rem; }
.diag-pop__badge { justify-self: start; margin: 0; padding: .3rem .75rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.diag-pop__title { margin: 0; padding-right: 2rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.diag-pop__text { margin: 0 0 .25rem; color: var(--text-body); font-size: .9375rem; }
@media (max-width: 899.98px) {
  .diag-pop { left: 50%; right: auto; transform: translate(-50%, 1.5rem); bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
  .diag-pop.is-in { transform: translate(-50%, 0); }
  @media (prefers-reduced-motion: reduce) { .diag-pop, .diag-pop.is-in { transition: none; } }
}

/* phones and tablets: once you scroll down, the header shrinks to just the round menu button on the right */
@media (max-width: 1199.98px) {
  .site-header .brand, .site-header__bar > .lang-switch, .site-header .header-login { transition: opacity .25s ease, visibility .25s; }
  .site-header.is-scrolled:not(.is-open) .site-header__bar::before { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-scrolled:not(.is-open) .brand,
  .site-header.is-scrolled:not(.is-open) .site-header__bar > .lang-switch,
  .site-header.is-scrolled:not(.is-open) .header-login { opacity: 0; visibility: hidden; pointer-events: none; }
  .site-header.is-scrolled:not(.is-open) .menu-toggle { background: var(--bg); border-color: var(--line); box-shadow: var(--shadow); }
}

/* the diagnostic card: in the middle of the screen, over a dimmed page (phones and computers) */
.diag-pop-shade { position: fixed; inset: 0; z-index: 44; background: rgb(17 17 17 / .45); opacity: 0; transition: opacity .35s ease; }
.diag-pop-shade.is-in { opacity: 1; }
.diag-pop, .diag-pop.is-in { left: 50%; right: auto; top: 50%; bottom: auto; }
.diag-pop { transform: translate(-50%, calc(-50% + 1.5rem)); width: min(calc(100vw - 2rem), 24rem); padding: 1.6rem 1.5rem 1.4rem; }
.diag-pop.is-in { transform: translate(-50%, -50%); }
@media (max-width: 899.98px) {
  .diag-pop, .diag-pop.is-in { bottom: auto; }
  .diag-pop { transform: translate(-50%, calc(-50% + 1.5rem)); }
  .diag-pop.is-in { transform: translate(-50%, -50%); }
}

/* every screen: the compact header leaves the page clickable around the round button */
@media (max-width: 1199.98px) {
  .site-header.is-scrolled:not(.is-open) .site-header__bar { pointer-events: none; }
  .site-header.is-scrolled:not(.is-open) .menu-toggle { pointer-events: auto; }
}

/* computers: once you scroll down, the bar shrinks to the round menu button too,
   and the menu opens as the same side drawer as on phones */
@media (min-width: 1200px) {
  .site-header .brand, .site-header__bar > .lang-switch, .site-header .header-login, .site-header__panel { transition: opacity .25s ease, visibility .25s; }
  .site-header.is-scrolled .menu-toggle { display: inline-grid; margin-left: auto; }
  .site-header.is-scrolled:not(.is-open) .site-header__bar { pointer-events: none; }
  .site-header.is-scrolled:not(.is-open) .menu-toggle { pointer-events: auto; background: var(--bg); border-color: var(--line); box-shadow: var(--shadow); }
  .site-header.is-scrolled:not(.is-open) .site-header__bar::before { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-scrolled:not(.is-open) .brand,
  .site-header.is-scrolled:not(.is-open) .site-header__bar > .lang-switch,
  .site-header.is-scrolled:not(.is-open) .header-login,
  .site-header.is-scrolled:not(.is-open) .site-header__panel { opacity: 0; visibility: hidden; pointer-events: none; }
  /* the drawer */
  .site-header.is-scrolled .site-header__panel {
    position: fixed; inset: 0 0 0 auto; z-index: -1; width: 22rem;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.5rem;
    padding: calc(var(--header-h) + 2rem) 1.4rem 1.5rem; background: var(--bg);
    border-radius: 24px 0 0 24px; box-shadow: -24px 0 60px -24px rgb(0 0 0 / .45); overflow-y: auto;
    transform: translateX(105%); transition: transform .4s var(--ease-soft), visibility 0s linear .4s;
  }
  .site-header.is-scrolled.is-open .site-header__panel { transform: none; visibility: visible; opacity: 1; transition: transform .4s var(--ease-soft), visibility 0s; }
  .site-header.is-scrolled.is-open::after { content: ""; position: fixed; inset: 0; z-index: -2; background: rgb(17 17 17 / .4); pointer-events: auto; }
  .site-header.is-scrolled .site-nav ul { display: grid; gap: .3rem; }
  .site-header.is-scrolled .site-nav a { display: block; padding: .7rem .95rem; border-radius: 14px; font-size: 1.05rem; font-weight: 500; color: var(--ink); }
  .site-header.is-scrolled .site-nav a:hover { background: rgb(var(--accent-rgb) / .08); }
  .site-header.is-scrolled .site-nav a::after { display: none; }
  .site-header.is-scrolled .site-nav a[href="diagnostika.html"] { padding: .7rem .95rem; border-radius: 14px; }
  .site-header.is-scrolled .header-cta { align-self: stretch; text-align: center; justify-content: center; }
}