/*
 * ATLEEQ landing page. Colours and fonts come from tokens.css and icons from
 * icons.css, both generated by scripts/build-website.cjs from the app's own
 * sources - never hard-code a brand colour here.
 */

/*
 * Motion tokens - the page's only timing values. Curve and ranges from the
 * `animate` skill (Emil Kowalski): strong ease-out for entrances, press
 * 100-160ms, stagger 30-80ms, marketing reveals may be longer.
 */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-press: 160ms;
  --duration-hover: 200ms;
  --duration-fade: 200ms;
  --duration-step: 450ms;
  --duration-entrance: 500ms;
  --duration-reveal: 600ms;
  --stagger: 60ms;
  --stagger-word: 40ms;
  --motion-distance-small: 12px;
  --motion-distance: 16px;
}

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

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
}

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

.container {
  width: min(1160px, 100% - 40px);
  margin-inline: auto;
}

.accent {
  color: var(--color-accent);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

/* Header - lies over the intro and scrolls away with it; it is never pinned. */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding-block: 16px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
}

.wordmark-small {
  font-size: 1.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--duration-hover) ease;
}

.site-nav a:hover {
  color: var(--color-text-primary);
}

.site-nav .nav-cta {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

/* Type and buttons */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow-info {
  color: var(--color-status-info);
}

.eyebrow-good {
  color: var(--color-status-good);
}

.eyebrow-warm {
  color: var(--color-meal-heading);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    background-color var(--duration-hover) ease,
    border-color var(--duration-hover) ease,
    transform var(--duration-press) var(--ease-out);
}

/* Press feedback: the button acknowledges the tap. */
.button:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.button-primary:hover {
  background: var(--color-accent-pressed);
}

.button-ghost {
  border: 1px solid var(--color-border-strong);
}

.button-ghost:hover {
  border-color: var(--color-text-secondary);
}

/* Intro */

.intro {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 120px 20px 40px;
  text-align: center;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.hero-title span {
  display: block;
}

.lead {
  color: var(--color-text-secondary);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 28px;
}

.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
}

.text-cta .i {
  font-size: 0.9em;
  transition: transform var(--duration-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .text-cta:hover .i {
    transform: translateX(3px);
  }
}

/*
 * Story. With JavaScript the section is eight screens tall and its stage
 * sticks to the viewport. main.js scrubs the intro (fades up) and the phone
 * (rises from under the headline and comes closer) with the scroll, then sets
 * data-step, which swaps the screen, the tab, the text and the dot. Without
 * JavaScript it is a column: intro, phone with the Today screen, texts.
 */

.story {
  position: relative;
  --phone-height: min(86vh, 820px);
}

.story-anchor {
  position: absolute;
  top: 0;
}

.story-stage {
  display: grid;
  justify-items: center;
  gap: 40px;
  padding: 0 20px 96px;
  background: radial-gradient(
    50% 45% at 50% 85%,
    color-mix(in srgb, var(--color-accent) 9%, transparent),
    transparent 70%
  );
}

.story-device {
  transform-origin: 50% 0;
  will-change: transform;
}

.caption {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.story-copy {
  display: grid;
  gap: 40px;
  max-width: 30rem;
}

.step {
  display: grid;
  gap: 12px;
}

/* Step labels: large, and each step has its own colour from the app's palette. */
.step .eyebrow {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  letter-spacing: 0.14em;
  color: var(--step-color);
}

.c1 {
  --step-color: var(--color-accent);
}

.c2 {
  --step-color: var(--color-status-warning);
}

.c3 {
  --step-color: var(--marker-drop-set);
}

.c4 {
  --step-color: var(--color-status-info);
}

.c5 {
  --step-color: var(--color-status-good);
}

.c6 {
  --step-color: var(--marker-partial-reps);
}

.c7 {
  --step-color: var(--marker-right);
}

.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 5.2vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.step-text {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  opacity: 0.86;
}

.story-dots {
  display: none;
}

.js .story {
  height: 800vh;
}

.js .story-anchor {
  top: 100vh;
}

.js .story-stage {
  perspective: 2200px;
  perspective-origin: 50% 20%;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  display: block;
  overflow: hidden;
}

.js .intro {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  padding-top: max(96px, 13vh);
  will-change: transform, opacity;
}

/* First paint: the phone glides up into place under the headline (main.js adds
   .is-in to the stage once the page is ready). */
.js .phone {
  opacity: 0;
  transform: translateY(90px);
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
  transition-delay: 250ms;
}

.js .is-in .phone {
  opacity: 1;
  transform: none;
}

.js .story-device {
  transform-style: preserve-3d;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc((100vh - var(--phone-height)) / 2);
  translate: -50% 0;
}

.js .caption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  transition: opacity var(--duration-step) var(--ease-out);
}

/* The note belongs to the tour, not to the intro. */
.js .story[data-step='0'] .caption {
  opacity: 0;
}

.js .story-copy {
  position: absolute;
  top: 50%;
  right: max(20px, (100% - 1160px) / 2);
  width: min(460px, 36%);
  translate: 0 -50%;
}

/*
 * Step text: the label slides in from the left, the title rises word by word
 * (main.js wraps each word in .w with its index --wi), then the sentence
 * follows. Leaving is one quick fade of the whole block.
 */
.js .step {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fade) ease;
}

.js .step .eyebrow {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity var(--duration-entrance) var(--ease-out),
    transform var(--duration-entrance) var(--ease-out);
}

.js .step .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(4px);
  transition:
    opacity var(--duration-entrance) var(--ease-out),
    transform var(--duration-entrance) var(--ease-out),
    filter var(--duration-entrance) var(--ease-out);
  transition-delay: calc(80ms + var(--stagger-word) * var(--wi, 0));
}

.js .step .step-text {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--duration-entrance) var(--ease-out),
    transform var(--duration-entrance) var(--ease-out);
  transition-delay: 260ms;
}

.js .story[data-step='1'] .step[data-step='1'] :is(.eyebrow, .w),
.js .story[data-step='2'] .step[data-step='2'] :is(.eyebrow, .w),
.js .story[data-step='3'] .step[data-step='3'] :is(.eyebrow, .w),
.js .story[data-step='4'] .step[data-step='4'] :is(.eyebrow, .w),
.js .story[data-step='5'] .step[data-step='5'] :is(.eyebrow, .w),
.js .story[data-step='6'] .step[data-step='6'] :is(.eyebrow, .w),
.js .story[data-step='7'] .step[data-step='7'] :is(.eyebrow, .w) {
  opacity: 1;
  transform: none;
  filter: none;
}

.js .story[data-step='1'] .step[data-step='1'] .step-text,
.js .story[data-step='2'] .step[data-step='2'] .step-text,
.js .story[data-step='3'] .step[data-step='3'] .step-text,
.js .story[data-step='4'] .step[data-step='4'] .step-text,
.js .story[data-step='5'] .step[data-step='5'] .step-text,
.js .story[data-step='6'] .step[data-step='6'] .step-text,
.js .story[data-step='7'] .step[data-step='7'] .step-text {
  opacity: 0.86;
  transform: none;
}

.js .story-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--duration-step) var(--ease-out);
}

.js .story:not([data-step='0']) .story-dots {
  opacity: 1;
}

.js .story[data-step='0'] .story-dots {
  pointer-events: none;
}

/* Dots jump to a screen. The button is a 44px target; the dot is drawn inside. */
.story-dots button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.story-dots button::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-border-strong);
  transition:
    transform var(--duration-step) var(--ease-out),
    background-color var(--duration-step) ease;
}

@media (hover: hover) and (pointer: fine) {
  .story-dots button:hover::before {
    background: var(--color-text-secondary);
  }
}

/* The active step: one rule per step for the screen, tab, text and dot. */
.js .story[data-step='1'] :is([data-view='1'], .step[data-step='1']),
.js .story[data-step='2'] :is([data-view='2'], .step[data-step='2']),
.js .story[data-step='3'] :is([data-view='3'], .step[data-step='3']),
.js .story[data-step='4'] :is([data-view='4'], .step[data-step='4']),
.js .story[data-step='5'] :is([data-view='5'], .step[data-step='5']),
.js .story[data-step='6'] :is([data-view='6'], .step[data-step='6']),
.js .story[data-step='7'] :is([data-view='7'], .step[data-step='7']),
.js .story[data-step='0'] [data-view='1'] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.js .story[data-step='1'] [data-dot='1']::before,
.js .story[data-step='2'] [data-dot='2']::before,
.js .story[data-step='3'] [data-dot='3']::before,
.js .story[data-step='4'] [data-dot='4']::before,
.js .story[data-step='5'] [data-dot='5']::before,
.js .story[data-step='6'] [data-dot='6']::before,
.js .story[data-step='7'] [data-dot='7']::before {
  background: var(--step-color);
  transform: scaleX(3);
}

/*
 * Phone drawing. Every size inside is in em of the phone, so the whole drawing
 * scales as one. Layouts follow the app's screens; values are examples.
 */

/* A titanium frame, a thin black bezel, side keys and a glass highlight. The
   frame greys are the device's own material, not brand colours. */
.phone {
  --metal-light: #8a919c;
  --metal: #3a3f47;
  --metal-dark: #16181c;
  position: relative;
  height: var(--phone-height);
  aspect-ratio: 9 / 19.5;
  padding: 0.22em;
  font-size: calc(var(--phone-height) / 46);
  border-radius: 3.1em;
  background: linear-gradient(
    135deg,
    var(--metal-light) 0%,
    var(--metal) 14%,
    var(--metal-dark) 48%,
    var(--metal) 82%,
    var(--metal-light) 100%
  );
  box-shadow:
    inset 0 0 0 0.06em rgb(255 255 255 / 0.25),
    0 2.6em 5em rgb(0 0 0 / 0.65),
    0 0.8em 1.6em rgb(0 0 0 / 0.5),
    0 0 12em color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* Black bezel between the frame and the screen. */
.phone::before {
  content: '';
  position: absolute;
  inset: 0.22em;
  border-radius: 2.9em;
  background: #050506;
}

.key {
  position: absolute;
  width: 0.28em;
  border-radius: 0.2em;
  background: linear-gradient(90deg, var(--metal-dark), var(--metal-light), var(--metal));
}

.key-action {
  left: -0.22em;
  top: 12%;
  height: 4%;
}

.key-up {
  left: -0.22em;
  top: 19%;
  height: 7.5%;
}

.key-down {
  left: -0.22em;
  top: 28%;
  height: 7.5%;
}

.key-power {
  right: -0.22em;
  top: 22%;
  height: 11%;
}

.island {
  position: absolute;
  top: 1.25em;
  left: 50%;
  z-index: 3;
  width: 5.6em;
  height: 1.65em;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 0.08em #111;
}

.screen {
  position: relative;
  margin: 0.38em;
  height: calc(100% - 0.76em);
  border-radius: 2.6em;
  background: var(--color-background);
  overflow: hidden;
  font-size: 1em;
  line-height: 1.35;
}

/* Content fades out under the floating tab bar. */
.screen::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 6.5em;
  pointer-events: none;
  background: linear-gradient(transparent, var(--color-background) 55%);
}

/* Glass highlight across the screen. */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgb(255 255 255 / 0.07) 0%,
    rgb(255 255 255 / 0.02) 30%,
    transparent 31%
  );
}

.view {
  position: absolute;
  inset: 0;
  padding: 3.6em 1em 5.4em;
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.js .view {
  opacity: 0;
  transform: translateY(1em) scale(0.985);
  transition:
    opacity var(--duration-step) var(--ease-out),
    transform var(--duration-step) var(--ease-out);
}

/* Content keeps its size and runs on under the tab bar, as a long screen does. */
.view > * {
  flex-shrink: 0;
}

html:not(.js) .view:not([data-view='1']) {
  display: none;
}

.date {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1em;
  line-height: 1;
}

.round {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.icons {
  display: flex;
  gap: 0.7em;
  color: var(--color-text-secondary);
  font-size: 1.1em;
}

.card {
  display: grid;
  gap: 0.45em;
  padding: 0.85em;
  border-radius: 1.15em;
  background: var(--color-surface);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
}

.card-head .i {
  font-size: 1.05em;
}

.end {
  margin-left: auto;
  color: var(--color-text-muted);
}

.t-acc {
  color: var(--color-accent);
}

.t-info {
  color: var(--color-status-info);
}

.t-good {
  color: var(--color-status-good);
}

.status {
  color: var(--color-accent);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.big {
  font-weight: 700;
  font-size: 1em;
}

.muted,
.cols small,
.section,
.caption-small {
  color: var(--color-text-muted);
  font-size: 0.72em;
}

.list {
  display: grid;
  gap: 0.2em;
  font-size: 0.78em;
}

.list p {
  display: flex;
  justify-content: space-between;
}

.list span:last-child {
  color: var(--color-text-secondary);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  justify-self: start;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: 0.78em;
}

.pill-wide {
  align-self: stretch;
  margin-top: auto;
  padding-block: 0.9em;
}

.pill-small {
  padding: 0.45em 0.85em;
}

.cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4em;
}

.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cols p {
  display: grid;
}

.cols b {
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

.cols small {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.66em;
}

.dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--color-status-good);
}

.dot-acc {
  background: var(--color-accent);
}

.down {
  color: var(--color-status-good);
}

/* Active workout */

.nav-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82em;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--color-accent);
}

.link-strong {
  font-weight: 700;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4em;
  color: var(--color-accent);
  font-size: 0.7em;
  font-weight: 700;
}

.timer {
  color: var(--color-text-secondary);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.thumb {
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.55em;
  background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-border));
}

.sets {
  display: grid;
  gap: 0.3em;
  font-size: 0.74em;
  font-variant-numeric: tabular-nums;
}

.sets p {
  display: grid;
  grid-template-columns: 2.2em 1fr 3em 2.6em 2.4em 1.5em;
  align-items: center;
  gap: 0.3em;
  padding: 0.35em 0.3em;
  border-radius: 0.6em;
  background: var(--color-surface-elevated);
}

.sets .sets-head {
  background: none;
  color: var(--color-text-muted);
  font-size: 0.9em;
}

.sets p span:nth-child(2) {
  color: var(--color-text-muted);
}

.m {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 0.55em;
  background: var(--color-surface-sunken);
  font-weight: 700;
}

/* Set marker colours (constants/colors.ts, darkMarkerColors). */
.m-warm {
  color: var(--marker-warm-up);
}

.m-drop {
  color: var(--marker-drop-set);
}

.ok {
  color: var(--color-status-good);
  font-size: 1.25em;
}

.sets .i-ellipse-outline {
  color: var(--color-border-strong);
  font-size: 1.25em;
}

.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  padding: 0.5em;
  border-radius: 0.7em;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: 0.75em;
}

/* Nutrition */

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.week p {
  display: grid;
  justify-items: center;
  gap: 0.2em;
}

.week small {
  color: var(--color-text-muted);
  font-size: 0.6em;
  font-weight: 700;
}

/* Day ring: progress (--p) drawn with a conic gradient, the day number inside,
   a small calorie-status badge, the selected day filled, a dot under today. */
.mini {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--color-background) 78%, transparent 80%),
    conic-gradient(var(--color-status-good) var(--p), var(--color-surface-elevated) 0);
  font-size: 0.66em;
  font-weight: 700;
}

.mini-sel {
  background:
    radial-gradient(closest-side, var(--color-surface-elevated) 78%, transparent 80%),
    conic-gradient(var(--color-accent) var(--p), var(--color-border) 0);
}

.flag {
  position: absolute;
  right: -0.35em;
  top: -0.3em;
  display: grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  font-size: 0.8em;
  font-style: normal;
  color: var(--color-on-accent);
}

.flag.on {
  background: var(--color-status-good);
}

.flag.over {
  background: var(--color-status-warning);
}

.flag.under {
  background: var(--color-status-info);
}

.week .today::after {
  content: '';
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--color-accent);
}

.summary {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1em;
}

.ring-big {
  display: grid;
  place-items: center;
  width: 6.4em;
  height: 6.4em;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--color-surface) 82%, transparent 84%),
    conic-gradient(var(--color-accent) var(--p), var(--color-surface-elevated) 0);
  text-align: center;
}

.ring-big span {
  display: grid;
}

.ring-big b {
  font-size: 1.25em;
  line-height: 1;
}

.ring-big small {
  color: var(--color-text-muted);
  font-size: 0.6em;
}

.summary-side {
  display: grid;
  gap: 0.5em;
}

.summary-side p {
  display: grid;
}

.summary-side small,
.macros small {
  color: var(--color-text-muted);
  font-size: 0.66em;
}

.macros {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em;
}

.macros p {
  display: grid;
  gap: 0.2em;
}

.macros b {
  font-size: 0.7em;
}

.bar {
  height: 0.3em;
  border-radius: 1em;
  background: var(--color-surface-elevated);
}

.bar-p {
  background: linear-gradient(90deg, var(--color-accent) 74%, var(--color-surface-elevated) 0);
}

.bar-c {
  background: linear-gradient(90deg, var(--color-status-info) 70%, var(--color-surface-elevated) 0);
}

.bar-f {
  background: linear-gradient(
    90deg,
    var(--color-status-warning) 74%,
    var(--color-surface-elevated) 0
  );
}

.section {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.2em;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meal-card {
  display: grid;
  gap: 0.25em;
  padding: 0.55em 0.8em;
  border-radius: 0.9em;
  background: var(--color-surface);
}

.meal-head,
.food {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.meal-head span {
  flex: 1;
  color: var(--color-meal-heading);
  font-weight: 700;
  font-size: 0.82em;
}

.meal-head small {
  color: var(--color-text-secondary);
  font-size: 0.7em;
  font-weight: 700;
}

.meal-head .i {
  color: var(--color-text-muted);
  font-size: 0.8em;
}

.food {
  padding-top: 0.25em;
  border-top: 1px solid var(--color-border);
  font-size: 0.72em;
}

.food span {
  flex: 1;
}

.food small {
  color: var(--color-text-muted);
}

.food b {
  min-width: 2.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.add {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.85em;
}

/* Progress */

.segment {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.2em;
  border-radius: 999px;
  background: var(--color-surface);
  text-align: center;
  font-size: 0.72em;
  font-weight: 700;
  color: var(--color-text-muted);
}

.segment span {
  padding: 0.4em;
  border-radius: 999px;
}

.segment .on {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.chips {
  display: flex;
  gap: 0.4em;
  overflow: hidden;
}

.chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex: none;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: 0.68em;
  font-weight: 600;
}

.line {
  width: 100%;
  height: 3.2em;
}

.line polyline {
  fill: none;
  stroke: var(--color-status-good);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4em;
  height: 3.6em;
}

.bars span {
  flex: 1;
  height: var(--h);
  border-radius: 0.35em 0.35em 0.15em 0.15em;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-soft));
}

/* Social */

.stories {
  display: flex;
  gap: 0.55em;
}

.av {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7em;
  height: 2.7em;
  flex: none;
  border-radius: 50%;
  background: var(--color-surface-elevated);
  box-shadow:
    0 0 0 0.15em var(--color-background),
    0 0 0 0.3em var(--color-accent);
  font-weight: 700;
  font-size: 0.85em;
}

.av-me {
  box-shadow: none;
}

.av-me em {
  position: absolute;
  right: -0.15em;
  bottom: -0.15em;
  display: grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75em;
  font-style: normal;
}

.av-1 {
  background: var(--color-status-info-soft);
  color: var(--color-status-info);
}

.av-2 {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.av-3 {
  background: var(--color-status-good-soft);
  color: var(--color-status-good);
}

.av-4 {
  background: var(--color-status-warning-soft);
  color: var(--color-status-warning);
}

.av-sm {
  width: 2em;
  height: 2em;
  box-shadow: none;
  font-size: 0.75em;
}

.compose p {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text-muted);
  font-size: 0.8em;
}

.post-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.82em;
}

.post-head small {
  color: var(--color-text-muted);
}

.shared {
  padding: 0.75em;
  border-radius: 0.8em;
  background: linear-gradient(140deg, var(--color-accent-soft), var(--color-surface-elevated));
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 1em;
  color: var(--color-text-secondary);
  font-size: 0.78em;
}

.post-actions span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.t-crit {
  color: var(--color-status-critical);
}

.post-text {
  font-size: 0.8em;
}

/* A workout photo, drawn: a dark gym-light gradient with the barbell glyph. */
.photo {
  position: relative;
  display: grid;
  place-items: center;
  height: 9em;
  border-radius: 0.8em;
  overflow: hidden;
  background:
    radial-gradient(
      70% 80% at 30% 20%,
      color-mix(in srgb, var(--color-accent) 45%, transparent),
      transparent 60%
    ),
    radial-gradient(
      60% 70% at 85% 90%,
      color-mix(in srgb, var(--color-status-info) 35%, transparent),
      transparent 60%
    ),
    linear-gradient(160deg, var(--color-surface-elevated), var(--color-surface-sunken));
}

.photo > .i {
  font-size: 4.5em;
  color: color-mix(in srgb, var(--color-text-primary) 85%, transparent);
  transform: rotate(-12deg);
  filter: drop-shadow(0 0.15em 0.3em rgb(0 0 0 / 0.5));
}

.photo-tag {
  position: absolute;
  left: 0.6em;
  bottom: 0.6em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  font-size: 0.66em;
  font-weight: 700;
}

/* Coaching */

.row {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.7em;
}

.row .av {
  box-shadow: none;
}

.row p {
  display: grid;
  font-size: 0.85em;
}

.row small {
  color: var(--color-text-muted);
  font-size: 0.82em;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.3em;
  font-size: 0.82em;
}

.sw {
  position: relative;
  width: 2.6em;
  height: 1.55em;
  border-radius: 999px;
  background: var(--color-border-strong);
}

.sw::after {
  content: '';
  position: absolute;
  top: 0.18em;
  left: 0.18em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

.sw-on {
  background: var(--color-status-good);
}

.sw-on::after {
  left: 1.22em;
  background: var(--color-text-primary);
}

/* Training home, workout and coaching details */

.t-warm {
  color: var(--color-meal-heading);
}

.up {
  color: var(--color-status-good);
}

.action {
  margin-left: auto;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.75em;
}

.segment-3 {
  grid-template-columns: repeat(3, 1fr);
}

.program {
  display: grid;
  gap: 0.3em;
  padding-block: 0.25em;
}

.program p {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8em;
}

.program b {
  flex: 1;
}

.program small {
  color: var(--color-text-secondary);
}

.program .i {
  color: var(--color-text-muted);
}

.track {
  height: 0.28em;
  border-radius: 1em;
  background: var(--color-surface-elevated);
  overflow: hidden;
}

.track span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.compact {
  gap: 0.3em;
  padding-block: 0.6em;
}

.summary-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.74em;
  font-variant-numeric: tabular-nums;
}

.summary-line .m {
  width: 1.6em;
  height: 1.6em;
}

.summary-line .i {
  margin-left: auto;
  font-size: 1.2em;
}

.summary-line .i-ellipse-outline {
  color: var(--color-border-strong);
}

.target {
  color: var(--color-text-muted);
}

.target .i {
  margin-left: 0;
  font-size: 1em;
}

.heat {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25em;
}

.heat span {
  aspect-ratio: 1;
  border-radius: 0.25em;
  background: var(--color-surface-elevated);
}

.heat .h1 {
  background: var(--color-status-good-soft);
}

.heat .h2 {
  background: color-mix(in srgb, var(--color-status-good) 55%, var(--color-surface));
}

.heat .h3 {
  background: var(--color-status-good);
}

.shared-record {
  background: linear-gradient(140deg, var(--color-accent-soft), var(--color-status-warning-soft));
}

.coach-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.2em;
}

.coach-head p {
  display: grid;
}

.coach-head .title {
  font-size: 1.6em;
}

.coach-head small {
  color: var(--color-text-muted);
  font-size: 0.72em;
}

.av-lg {
  width: 3.2em;
  height: 3.2em;
  box-shadow: none;
}

.caption-acc {
  color: var(--color-accent);
  font-size: 0.68em;
  font-weight: 700;
}

.muted-cap {
  color: var(--color-text-muted);
  font-size: 0.68em;
}

.pill-wide-soft {
  justify-self: stretch;
  padding-block: 0.6em;
}

/* Floating tab bar: icons only, the active tab is an orange pill. */

.tabbar {
  position: absolute;
  left: 50%;
  bottom: 1.1em;
  z-index: 2;
  display: flex;
  gap: 0.1em;
  padding: 0.35em;
  translate: -50% 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
  box-shadow: 0 0.6em 1.6em rgb(0 0 0 / 0.4);
}

.tabbar span {
  display: grid;
  place-items: center;
  width: 2.35em;
  height: 2.35em;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.95em;
  transition:
    background-color var(--duration-step) var(--ease-out),
    color var(--duration-step) ease;
}

.tabbar .i {
  grid-area: 1 / 1;
}

.tabbar .i:last-child {
  opacity: 0;
}

/* Active tab: main.js writes data-active on the tab bar. */
.tabbar[data-active='1'] [data-tab='1'],
.tabbar[data-active='2'] [data-tab='2'],
.tabbar[data-active='3'] [data-tab='3'],
.tabbar[data-active='4'] [data-tab='4'],
.tabbar[data-active='5'] [data-tab='5'],
.tabbar[data-active='6'] [data-tab='6'] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.tabbar[data-active='1'] [data-tab='1'] .i:first-child,
.tabbar[data-active='2'] [data-tab='2'] .i:first-child,
.tabbar[data-active='3'] [data-tab='3'] .i:first-child,
.tabbar[data-active='4'] [data-tab='4'] .i:first-child,
.tabbar[data-active='5'] [data-tab='5'] .i:first-child,
.tabbar[data-active='6'] [data-tab='6'] .i:first-child {
  opacity: 0;
}

.tabbar[data-active='1'] [data-tab='1'] .i:last-child,
.tabbar[data-active='2'] [data-tab='2'] .i:last-child,
.tabbar[data-active='3'] [data-tab='3'] .i:last-child,
.tabbar[data-active='4'] [data-tab='4'] .i:last-child,
.tabbar[data-active='5'] [data-tab='5'] .i:last-child,
.tabbar[data-active='6'] [data-tab='6'] .i:last-child {
  opacity: 1;
}

/* Closing */

.closing .eyebrow {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
}

.closing {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(80px, 10vw, 128px) 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-background), var(--color-accent-soft));
}

.closing-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.closing-text {
  color: var(--color-text-secondary);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

/* Store listings do not exist yet: plain labels, not links or buttons. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 10px 20px;
  border-radius: 14px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
  text-align: left;
}

.store .i {
  font-size: 1.6rem;
  color: var(--color-text-secondary);
}

.store span {
  display: grid;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
}

.store small {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
}

.text-link {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.site-footer {
  padding-block: 36px;
  border-top: 1px solid var(--color-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px 40px;
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 8px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: end;
  gap: 4px 28px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-text-primary);
}

.footer-credits {
  grid-column: 1 / -1;
}

.footer-note {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.site-nav a[aria-current='page'] {
  color: var(--color-text-primary);
}

/* Prečo ATLEEQ */

.why {
  padding-block: clamp(80px, 11vw, 140px) clamp(40px, 6vw, 80px);
}

.why-title {
  margin-bottom: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.why-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.why-card .i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--step-color) 16%, transparent);
  color: var(--step-color);
  font-size: 1.6rem;
}

.why-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
}

.why-card p {
  color: var(--color-text-secondary);
  font-size: 0.9875rem;
}

/* Document pages: privacy, terms, support, 404 */

.doc {
  padding: 132px 20px clamp(64px, 9vw, 112px);
}

.doc-inner {
  width: min(760px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.doc .eyebrow {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--step-color);
}

.doc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 7vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.doc-lead {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.45;
  opacity: 0.86;
}

.doc-note {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--color-status-warning-soft);
  border: 1px solid color-mix(in srgb, var(--color-status-warning) 40%, transparent);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.doc-note .i {
  flex: none;
  color: var(--color-status-warning);
  font-size: 1.4rem;
}

.doc-note b {
  color: var(--color-text-primary);
}

.doc-section {
  display: grid;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.doc-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.doc-section p,
.doc-section li {
  color: var(--color-text-secondary);
}

.doc-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
}

.doc-section b,
.doc-section em {
  color: var(--color-text-primary);
}

.doc a {
  color: var(--color-accent);
}

.todo {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--color-status-warning-soft);
  color: var(--color-status-warning);
  font-weight: 700;
}

.doc-meta {
  padding-top: 12px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Support */

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition:
    border-color var(--duration-hover) ease,
    transform var(--duration-press) var(--ease-out);
}

.doc .contact-card {
  color: var(--color-text-primary);
}

.contact-card:hover {
  border-color: var(--color-border-strong);
}

.contact-card:active {
  transform: scale(0.99);
}

.contact-card > .i:first-child {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-status-info) 16%, transparent);
  color: var(--color-status-info);
  font-size: 1.5rem;
}

.contact-card span {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: 1.125rem;
}

.contact-card small {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.8125rem;
}

.faq-title {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-transform: uppercase;
}

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

.faq details {
  border-radius: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
  cursor: pointer;
}

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

/* Chevron drawn with borders; it flips when the answer opens. */
.faq summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-hover) var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq details p {
  padding: 0 20px 18px;
  color: var(--color-text-secondary);
}

/* 404 */

.not-found {
  display: grid;
  justify-items: center;
  gap: 18px;
  min-height: 80vh;
  align-content: center;
  text-align: center;
}

.not-found-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 22vw, 14rem);
  line-height: 0.85;
  color: var(--color-accent);
}

@media (max-width: 960px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: start;
  }
}

/*
 * One-time entrances: the hero on first load, the closing once as it scrolls
 * in. Only opacity, transform and filter move.
 */

/* Hero: staggered blurred rise - transitions.dev "Texts reveal" (free skill),
   timed with the motion tokens above. */
.js .hero-line {
  opacity: 0;
  transform: translateY(var(--motion-distance-small));
  filter: blur(3px);
  transition:
    opacity var(--duration-entrance) var(--ease-out),
    transform var(--duration-entrance) var(--ease-out),
    filter var(--duration-entrance) var(--ease-out);
  transition-delay: calc(var(--stagger) * var(--i, 0));
}

.js .hero-title .hero-line:first-child {
  --i: 1;
}

.js .hero-title .hero-line:nth-child(2) {
  --i: 2;
}

.js .lead.hero-line {
  --i: 3;
}

.js .cta-row.hero-line {
  --i: 4;
}

.js .is-shown .hero-line {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.js .reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--stagger) * var(--i, 0));
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Tablet and phone: the phone sits above the text instead of beside it. */

@media (max-width: 960px) {
  .story {
    --phone-height: min(64vh, 620px);
  }

  .js .story-device {
    top: 3vh;
  }

  .js .caption {
    left: 0;
    right: 0;
    bottom: 54px;
    font-size: 0.75rem;
  }

  .js .story-copy {
    top: auto;
    right: 20px;
    bottom: 80px;
    left: 20px;
    width: auto;
    max-width: 30rem;
    margin-inline: auto;
    translate: none;
    text-align: center;
  }

  .step {
    justify-items: center;
    gap: 8px;
  }

  .step-title {
    font-size: clamp(2rem, 8.5vw, 3rem);
  }

  .step-text {
    font-size: 1.0625rem;
  }

  .js .story-dots {
    bottom: 6px;
  }
}

@media (max-width: 960px) and (max-height: 700px) {
  .story {
    --phone-height: 58vh;
  }

  .step-text {
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {
  .wordmark {
    font-size: 1.5rem;
  }

  .site-nav a {
    padding-inline: 10px;
    font-size: 0.875rem;
  }

  .site-nav .nav-cta {
    padding-inline: 14px;
  }
}

/* The smallest phones: the logo already leads to the app tour. */
@media (max-width: 360px) {
  .site-nav a[href$='#aplikacia'] {
    display: none;
  }

  .cta-row .button {
    padding-inline: 20px;
    white-space: nowrap;
  }

  .js .intro {
    padding-top: 88px;
  }
}

/* Reduced motion: no zoom (main.js skips the transform), swaps and entrances
   become a short fade. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .hero-line,
  .js .reveal,
  .js .view,
  .js .step .eyebrow,
  .js .step .w,
  .js .step .step-text {
    transform: none;
    filter: none;
    transition: opacity var(--duration-fade) ease;
    transition-delay: 0s;
  }

  .button:active {
    transform: none;
  }

  .js .phone {
    transform: none;
    transition: opacity var(--duration-fade) ease;
  }
}