/* The homepage: what it alone draws (its shared pieces: styles/site/site.css) */

/* ── Hero: the words on the left, the app on a screen and on a phone on the right ── */
.hp-hero { padding: 56px 24px 112px; background: var(--bg); overflow: hidden; }
.hp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hp-title {
  font-size: clamp(44px, 4.7vw, 64px);   /* 64 at most: "down to the gram." holds on its line in the column */
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0 0 28px;
}
.hp-title-line { display: block; }
.hp-sub { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 31em; margin: 0 0 36px; }
.hp-actions { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }
/* The pill has taken its place (same size, same spot): the button itself steps aside at once */
.mk-btn-primary.hp-cta-hidden { visibility: hidden; transition: none; }
.hp-badges { list-style: none; display: grid; grid-template-columns: repeat(3, max-content); gap: 10px; margin: 44px 0 0; padding: 0; }
.hp-badge { display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 16px; background: var(--ink); }   /* the ink of the "Get Started" beside them */
.hp-badge-icon { display: flex; color: var(--accent); flex-shrink: 0; }
.hp-badge strong { display: block; font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.25; white-space: nowrap; }
.hp-badge span { display: block; font-size: 12px; color: var(--night-dim); line-height: 1.35; white-space: nowrap; }
/* The app as it is, in its light theme: the Overview on a computer (a wide dark bezel, running off the
   right edge, its side bar opened), and in front, low on the left, a phone — a recipe about to be added
   to lunch, the calories of the day — whose foot runs out of view, faded (no need to see all of it;
   what it shows is never cut: its card is at the top of its screen) */
.hp-devices { position: relative; padding: 0 0 64px 64px; }
.hp-desk {
  width: 820px; max-width: none;
  padding: 14px; border-radius: 24px; background: #1B1B1E;
  border: 1px solid rgba(17,17,19,0.1);
  box-shadow: 0 50px 90px -40px rgba(17,17,19,0.45), 0 10px 30px rgba(17,17,19,0.1);
}
.hp-desk img { display: block; width: 100%; height: auto; border-radius: 11px; }
.hp-phone-slot {
  position: absolute; left: 0; bottom: 0; width: 250px; aspect-ratio: 1 / 2.06; overflow: hidden;   /* the recipe and its photo, whole; the day to the carbs; the fat shows through the fade, nothing under it */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);   /* the fade in proportion: the same at every size */
          mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
.hp-phone {
  width: 100%; aspect-ratio: 734 / 1614;   /* the screen (720 × 1600) and its frame */
  padding: 7px; border-radius: 38px; background: var(--night);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.hp-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 31px; }

/* ── Three key values: a block opens at a time, its bar fills, then the next; the screen follows ── */
.hp-values { padding: 120px 24px; background: linear-gradient(180deg, #EEF7F2 0%, var(--bg) 70%); }
.hp-values-head { text-align: center; margin: 0 auto 64px; max-width: 760px; }
.hp-values-head .mk-lead { margin: 18px auto 0; text-align: center; }
/* Three findings of research, side by side (the same as the sign-up), the button under them */
.hp-proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hp-values-foot { display: flex; justify-content: center; margin-top: 40px; }
.hp-proofs-note { grid-column: 1 / -1; margin: 0; text-align: center; }
.hp-proofs-note { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.hp-proof { display: flex; flex-direction: column; min-width: 0; padding: 28px; border-radius: 24px; background: var(--card); box-shadow: 0 18px 44px rgba(17,17,19,0.06); }
.hp-proof .mk-h3 { margin-bottom: 18px; text-wrap: balance; }
.hp-proof-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.hp-proof-big { margin: 18px 0 4px; font-size: 34px; font-weight: 500; letter-spacing: -0.03em; color: var(--text); }
.hp-proof-src { margin: auto 0 0; padding-top: 14px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp-proof-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.hp-proof-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hp-proof-legend span::before { content: ""; width: 14px; height: 4px; border-radius: 2px; background: var(--danger); }
.hp-proof-legend .is-us::before { background: var(--accent); }
.hp-proof-legend em { margin-left: auto; font-size: 12px; font-style: normal; font-weight: 400; color: var(--text-muted); }
.hp-proof-chart { display: block; width: 100%; height: auto; overflow: visible; }
.hp-c-grid { stroke: var(--border-hov); stroke-width: 1.5; stroke-dasharray: 3 5; }
.hp-c-axis { stroke: var(--text); stroke-width: 1.5; }
.hp-c-them { fill: none; stroke: var(--danger); stroke-width: 3.5; stroke-linecap: round; }
.hp-c-us { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.hp-c-dot { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.hp-c-dot.is-them { stroke: var(--danger); }
.hp-c-dot.is-end { fill: var(--accent); }
.hp-proof-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.hp-pbars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 210px; margin-bottom: 18px; }
.hp-pbar { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: var(--bg-2); }
.hp-pbar-name { flex: 1; padding: 12px 8px; text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.hp-pbar-fill { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; border-radius: 16px; background: var(--track); font-size: 20px; color: var(--text); }
.hp-pbar.is-us .hp-pbar-fill { background: var(--ink); color: var(--accent); }
.hp-pbar-fill.h30 { height: 30%; } .hp-pbar-fill.h33 { height: 33%; } .hp-pbar-fill.h42 { height: 42%; } .hp-pbar-fill.h66 { height: 66%; }
.hp-proof.is-seen .hp-pbar-fill { animation: hpBarGrow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: bottom; }
@keyframes hpBarGrow { from { transform: scaleY(0.25); } }

/* ── Night band: what Slyra stands on ── */
.hp-pillars { padding: 104px 24px; background: var(--night); }
.hp-pillars-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; text-align: center; }
.hp-pillar-icon {
  width: 92px; height: 92px; margin: 0 auto 26px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: radial-gradient(circle at 30% 25%, rgba(0,245,160,0.28), rgba(0,245,160,0.04) 62%), #18181B;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 24px 48px -20px rgba(0,245,160,0.35);
}
.hp-pillar h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; }
.hp-pillar p { font-size: 15px; line-height: 1.6; color: var(--night-dim); margin: 0 auto; max-width: 30ch; }

/* ── Everything in one place: the words on the left, what each looks like in the app on the right ── */
.hp-all { padding: 120px 24px; background: var(--bg-2); }
.hp-all-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.hp-all-list { list-style: none; margin: 0; padding: 0; }
.hp-all-word {
  display: inline-block; padding: 2px 0; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: clamp(38px, 5.4vw, 72px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.16;
  color: var(--text); opacity: 0.45; text-align: left; transition: opacity 0.3s;
}
.hp-all-word:hover { opacity: 0.75; }
.hp-all-word.is-on { opacity: 1; }
.hp-all-word.is-on span { background: linear-gradient(transparent 62%, var(--mint-mark) 62%, var(--mint-mark) 92%, transparent 92%); }
.hp-all-cards { position: relative; min-height: 400px; isolation: isolate; }
/* A stack of cards: the one shown in front, a card behind it (::after). A word chosen, the card behind comes
   out of the stack — up, over the top of the one in front — and lands in front with what the word names;
   the one that was in front sinks back into the stack (is-rising / is-sinking, set by the script) */
.hp-all-card {
  position: absolute; inset: 0 0 auto 0; padding: 26px; border-radius: 22px; background: var(--night); color: #fff;
  box-shadow: 0 40px 70px -40px rgba(17,17,19,0.6); font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none; transform-origin: 50% 0;
}
.hp-all-card > * { opacity: 0; transition: opacity 0.22s ease; }
.hp-all-card.is-on { opacity: 1; pointer-events: auto; z-index: 3; }
.hp-all-card.is-on > * { opacity: 1; transition: opacity 0.3s ease 0.34s; }   /* what it shows, once it is in front */
.hp-all-card.is-rising { animation: hp-card-rise 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.hp-all-card.is-sinking { opacity: 1; z-index: 2; animation: hp-card-sink 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes hp-card-rise {
  0%   { transform: translateY(40px) scale(0.93); background-color: #26262A; z-index: 1; }
  45%  { transform: translateY(-46px) scale(0.97) rotate(-1.5deg); z-index: 1; }
  55%  { z-index: 3; }
  100% { transform: none; background-color: var(--night); z-index: 3; }
}
@keyframes hp-card-sink {
  0%   { transform: none; }
  70%  { opacity: 1; }
  100% { transform: translateY(40px) scale(0.93); background-color: #26262A; opacity: 0; }
}
.hp-all-cards::after {   /* the card behind: the stack */
  content: ''; position: absolute; left: 24px; right: 24px; top: 40px; height: 278px; border-radius: 22px; background: #26262A; z-index: -1;
}
.hp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.hp-card-head span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-dim); }
.hp-card-head strong { font-size: 15px; font-weight: 700; color: var(--accent); }
.hp-card-big { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 0 0 6px; }
.hp-card-big small { font-size: 16px; font-weight: 500; color: var(--night-dim); letter-spacing: 0; }
.hp-card-note { font-size: 13.5px; color: var(--night-dim); margin: 0 0 18px; }
.hp-card-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hp-card-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14.5px; }
.hp-card-row > span:last-child { color: var(--night-dim); }
.hp-card-row .hp-bar { grid-column: 1 / -1; }
.hp-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.1); overflow: hidden; }
.hp-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--accent); }
.hp-card-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--night-line); font-size: 14.5px; }
.hp-card-line:last-of-type { border-bottom: none; }
.hp-card-line span:last-child { color: var(--night-dim); white-space: nowrap; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 12px; border-radius: 100px; background: rgba(0,245,160,0.14); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.hp-glasses { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 18px; }
.hp-glasses i { display: block; height: 38px; border-radius: 4px 4px 9px 9px; background: rgba(255,255,255,0.1); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.hp-glasses i.is-full { background: #7099A8; }
.hp-spark { display: block; width: 100%; height: 110px; margin: 10px 0 14px; overflow: visible; }

/* ── Night: progress, in cards ── */
.hp-night { padding: 120px 24px 112px; background: var(--night); }
.hp-night .mk-h2 { color: #fff; text-align: center; margin: 0 auto 64px; }
.hp-bento {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  grid-template-areas: "goal day micro" "sport pro share";
}
.hp-tile {
  background: linear-gradient(180deg, #1B1B1E, #141416); border-radius: 22px;   /* no border: the ground of the card is enough */
  padding: 26px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px;
}
.hp-tile-ui { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-bottom: 22px; }
.hp-tile h3 { font-size: 23px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; }
.hp-tile > p { font-size: 14.5px; line-height: 1.6; color: var(--night-dim); margin: 0; }
.hp-tile--goal { grid-area: goal; } .hp-tile--day { grid-area: day; } .hp-tile--micro { grid-area: micro; }
.hp-tile--sport { grid-area: sport; } .hp-tile--share { grid-area: share; }
.hp-pro { grid-area: pro; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 24px; }
.hp-pro-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.12em; color: #fff; }
.hp-pro-mark img { width: 26px; height: 26px; object-fit: cover; object-position: center; }
.hp-pro p { font-size: 14.5px; line-height: 1.55; color: var(--night-dim); margin: 0; max-width: 26ch; }
.hp-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hp-marks span { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,0.06); font-size: 12.5px; font-weight: 600; }
.hp-marks span::before { content: '✓'; color: var(--accent); font-size: 12px; }
.hp-marks span.is-low::before { content: '↓'; color: #C08858; }
.hp-people { display: flex; align-items: center; margin-bottom: 16px; }
.hp-people i { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #141416; margin-left: -10px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; color: #111113; }
.hp-people i:first-child { margin-left: 0; }
.hp-meal { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.06); }
.hp-meal strong { display: block; font-size: 15px; font-weight: 600; }
.hp-meal span { font-size: 12.5px; color: var(--night-dim); }

/* ── Security ── */
.hp-safe { padding: 120px 24px; background: linear-gradient(180deg, #EEF7F2 0%, var(--bg) 60%); }
.hp-safe-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hp-safe .mk-h2 { margin-bottom: 26px; }
.hp-safe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hp-safe-item { display: flex; align-items: center; gap: 20px; padding: 14px 24px 14px 14px; background: var(--card); border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(17,17,19,0.25), 0 0 0 1px rgba(17,17,19,0.05); font-size: 16px; color: var(--text); }
.hp-safe-icon { width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px; background: var(--mint-soft); display: flex; align-items: center; justify-content: center; color: var(--text); }

/* ── Three steps, and the app on a phone ── */
/* a night band, like "Make progress, week after week": white words, the white button of the night */
.hp-steps { padding: 120px 24px; background: var(--night); }
.hp-steps-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.hp-steps .mk-h2 { color: #fff; margin-bottom: 44px; }
.hp-step-list { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.hp-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; }
.hp-step-num { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1B1B1E; box-shadow: 0 0 0 1px var(--night-line); color: var(--accent); font-size: 16px; font-weight: 700; }
.hp-step h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 8px 0 4px; }
.hp-step p { font-size: 15px; line-height: 1.6; color: var(--night-dim); margin: 0; max-width: 40ch; }
/* The founder: the photo (or the initials) on the left; their words, their name and LinkedIn on the right */
.hp-founder { padding: 120px 24px; background: var(--mint-wash); }
.hp-founder-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; align-items: center; max-width: 1000px; }
.hp-founder-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--panel); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(17,17,19,0.06); }
.hp-founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-founder-initials { font-size: 88px; font-weight: 500; letter-spacing: -0.05em; color: var(--text); }
.hp-founder .mk-h2 { margin-bottom: 26px; }
.hp-founder-quote { margin: 0; }
.hp-founder-quote p { margin: 0; max-width: 34em; font-size: 20px; line-height: 1.55; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.hp-founder-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 24px 0 28px; font-size: 15px; color: var(--text-dim); }
.hp-founder-who strong { font-size: 16px; font-weight: 600; color: var(--text); }
.hp-founder-sep { color: var(--text-muted); }
.hp-founder-in-logo { flex-shrink: 0; }
/* Step 2 on a computer: the Objectives of the app in its dark theme, in a frame of the night a shade lighter
   (no hairline), running off the right edge of the screen, its foot fading into the band; its mint glow kept
   above the band (isolation). The band clips what runs past the screen. */
.hp-steps { overflow: hidden; }
.hp-steps-desk { position: relative; isolation: isolate; }
.hp-steps-desk::before { content: ''; position: absolute; inset: -60px -40px -40px -80px; z-index: -1; background: radial-gradient(closest-side, rgba(0,245,160,0.16), transparent); }
.hp-steps-screen {
  width: calc(100% + max(24px, (100vw - 1120px) / 2));   /* to the right edge of the screen, whatever its width */
  aspect-ratio: 1.45 / 1; max-height: 580px; overflow: hidden; padding: 14px 0 0 14px; border-radius: 24px 0 0 0; background: #1B1B1E;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.hp-steps-screen img { display: block; width: 100%; height: auto; border-radius: 11px 0 0 0; }

/* ── FAQ ── */
.hp-faq { padding: 112px 24px 104px; background: var(--bg); }

/* ── Closing call: night, and the app rising at the bottom ── */
.hp-final { padding: 120px 24px 0; background: var(--night); overflow: hidden; text-align: center; }
.hp-final .mk-h2 { color: #fff; font-size: clamp(36px, 5.2vw, 64px); margin: 0 auto 20px; max-width: 16ch; }
.hp-final .mk-lead { color: var(--night-dim); margin: 0 auto 36px; text-align: center; }
.hp-final-shot { max-width: 1000px; margin: 72px auto 0; border-radius: 22px 22px 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); border-bottom: none; box-shadow: 0 -30px 80px -30px rgba(0,245,160,0.25); height: 420px; }
.hp-final-shot img { display: block; width: 100%; height: auto; }

/* ── The hero button that becomes the header: a pill of the same size, laid over it, that rises with
      the page and sweeps to the middle (slowly, then fast, then it settles), then opens at the top.
      top, left and --mn-p (0 → 1, how far it has flown) are set by the script of the page. ── */
.hp-mininav {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ink);
  border-radius: 100px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  /* no shadow on the ground, like the button; it grows as the pill lifts off */
  box-shadow: 0 10px 34px rgba(0,0,0,calc(0.24 * var(--mn-p, 1))), 0 2px 8px rgba(0,0,0,calc(0.12 * var(--mn-p, 1)));
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  will-change: top, left;
  transition: background 0.3s ease, padding 0.2s ease;
}
.hp-mininav.mn-visible { visibility: visible; pointer-events: auto; }
.hp-mininav.mn-expanded { background: var(--ink); padding: 5px; }
.hp-mininav-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  max-width: 0; overflow: hidden; opacity: 0; margin-left: 0; margin-right: 0;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease, margin-right 0.25s ease;
}
.hp-mininav.mn-expanded .hp-mininav-dot {
  max-width: 10px; opacity: 1; margin-left: 16px; margin-right: 8px;
  transition: max-width 0.24s ease 0.04s, opacity 0.2s ease 0.07s, margin-left 0.24s ease 0.04s, margin-right 0.24s ease 0.04s;
}
.hp-mininav-left {
  display: flex; align-items: center; gap: 2px; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
  transition: max-width 0.32s cubic-bezier(0.34, 1.1, 0.64, 1) 0.02s, opacity 0.2s ease 0.07s, padding 0.3s ease 0.02s;
  padding-left: 0; padding-right: 0;
}
.hp-mininav.mn-expanded .hp-mininav-left { max-width: 340px; opacity: 1; padding-left: 2px; padding-right: 6px; }
.hp-mininav-link {
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.6); text-decoration: none;
  padding: 7px 12px; border-radius: 100px; transition: color 0.15s, background 0.15s; font-family: var(--font); flex-shrink: 0;
}
.hp-mininav-link:hover { color: #fff; background: transparent; }
.hp-mininav-btn {
  display: inline-flex; align-items: center; gap: 0; background: var(--ink); color: #fff; border: none; border-radius: 100px;
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.1px; cursor: pointer; flex-shrink: 0; padding: 15px 30px;
  transition: background 0.2s, color 0.28s ease, padding 0.25s ease;
}
.hp-mininav-btn::before {   /* the dot of the hero button (.mk-btn-dot) */
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  max-width: 8px; overflow: hidden; opacity: 1; margin-right: 9px;
  transition: max-width 0.2s ease, margin-right 0.2s ease, opacity 0.15s ease;
}
.hp-mininav.mn-expanded .hp-mininav-btn { color: var(--accent); padding: 10px 20px 10px 12px; transition: background 0.2s, color 0.22s ease 0.2s, padding 0.2s ease; }
.hp-mininav.mn-expanded .hp-mininav-btn::before { max-width: 0; margin-right: 0; opacity: 0; }
.hp-mininav-btn:hover { background: transparent; }
.hp-mininav-btn-arrow {
  display: inline-flex; align-items: center; opacity: 0; max-width: 0; overflow: hidden; margin-left: 0;
  transition: opacity 0.25s ease, max-width 0.25s ease, margin-left 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.hp-mininav.mn-expanded .hp-mininav-btn-arrow {
  opacity: 1; max-width: 20px; margin-left: 9px;
  transition: opacity 0.25s ease 0.38s, max-width 0.25s ease 0.35s, margin-left 0.25s ease 0.35s, transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
/* "Get Started": its arrow moves on under the pointer — the one movement kept on the buttons of the site */
.hp-mininav-btn:is(:hover, :focus-visible) .hp-mininav-btn-arrow { transform: translateX(4px); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "goal day" "micro sport" "share pro"; }
}
@media (max-width: 980px) {
  .hp-hero-grid, .hp-proofs, .hp-all-grid, .hp-safe-grid, .hp-steps-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-hero { padding-bottom: 80px; }
  .hp-devices { padding: 0 0 48px 40px; }
  .hp-desk { width: 100%; padding: 9px; border-radius: 18px; }
  .hp-desk img { border-radius: 9px; }
  .hp-phone-slot { width: 32%; min-width: 128px; }   /* (its top inside the box of the devices, on a phone too) */
  .hp-phone { border-radius: 30px; padding: 6px; }
  .hp-phone img { border-radius: 25px; }
  .hp-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-all-cards { min-height: 380px; }
  .hp-steps-grid { gap: 48px; }
  .hp-founder-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 640px) {
  .hp-founder { padding: 80px 16px; }
  .hp-steps-screen { width: calc(100% + 16px); padding: 9px 0 0 9px; border-radius: 18px 0 0 0; }
  .hp-steps-screen img { border-radius: 9px 0 0 0; }
  .hp-founder-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hp-founder-photo { width: 180px; }
  .hp-founder-initials { font-size: 60px; }
  .hp-founder-quote p { font-size: 18px; }
  .hp-hero { padding: 36px 16px 64px; }
  .hp-sub { font-size: 16.5px; }
  .hp-badges { margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .hp-devices { padding: 0 0 36px 24px; margin-top: 8px; }
  .hp-values, .hp-all, .hp-safe, .hp-steps, .hp-faq { padding: 80px 16px; }
  .hp-pillars, .hp-night { padding: 80px 16px; }
  .hp-final { padding: 80px 16px 0; }
  .hp-values-head { margin-bottom: 40px; }
  .hp-proof { padding: 20px; }
  .hp-pillars-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hp-all-word { font-size: 38px; }
  .hp-all-cards { min-height: 400px; }
  .hp-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "goal" "day" "micro" "sport" "share" "pro"; }
  .hp-tile { min-height: 0; }
  .hp-safe-item { font-size: 15px; padding-right: 16px; }
  .hp-safe-icon { width: 48px; height: 48px; }
  .hp-final-shot { height: 220px; margin-top: 48px; }
  /* The expanded pill keeps only its button: the links would run past the screen */
  .hp-mininav.mn-expanded .hp-mininav-left { max-width: 0; opacity: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-all-card, .hp-all-card > *, .hp-all-card.is-on > *, .hp-all-word { transition: none; }
  .hp-all-card.is-rising, .hp-all-card.is-sinking { animation: none; }
  .hp-proof.is-seen .hp-pbar-fill { animation: none; }
  .hp-mininav, .hp-mininav * { transition: none !important; }
}