/*
  NUTTR website styles
  One stylesheet, no build step, no external requests.
  Brand tokens are copied from NUTTR_Brand_Tokens.css (brand kit v1.0).

  Contrast notes (WCAG 2.2 AA):
  - Navy on off-white 13.8:1, navy on white 14.8:1.
  - --text-muted on off-white 6.6:1, on white 7.1:1, on stone 5.7:1.
  - Acorn tan is about 3.5:1 on off-white and 3.9:1 on navy, so it is used only for
    rules, bars, dots, list markers and numerals of 24px or more, never for body-size text.
*/

/* ---------- Font (self-hosted, SIL Open Font License: assets/fonts/OFL.txt) ---------- */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Brand tokens (NUTTR_Brand_Tokens.css) */
  --nuttr-navy: #0B2945;
  --nuttr-acorn-tan: #A77A49;
  --nuttr-off-white: #F8F7F4;
  --nuttr-stone: #E5E7EB;
  --nuttr-charcoal: #1E2730;
  --nuttr-font-heading: Manrope, Arial, sans-serif;
  --nuttr-font-body: Manrope, Arial, sans-serif;

  /* Site tokens */
  --white: #FFFFFF;
  --text: var(--nuttr-navy);
  --text-muted: #4A5A6B;
  --on-navy: #F8F7F4;
  --on-navy-muted: #C9CFD6;
  --navy-hover: #143B61;
  --tint: rgba(11, 41, 69, 0.06);
  --line: var(--nuttr-stone);

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;

  --container: 1120px;
  --measure: 68ch;
  --gutter: clamp(16px, 5vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --shadow-soft: 0 1px 2px rgba(11, 41, 69, 0.05), 0 12px 32px rgba(11, 41, 69, 0.07);
}

/* ---------- Base ---------- */

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

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nuttr-off-white);
  color: var(--text);
  font-family: var(--nuttr-font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--nuttr-font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nuttr-navy);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.14;
}

h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.3;
}

p,
ul,
ol,
dl {
  margin: 0 0 1em;
}

strong {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--nuttr-acorn-tan);
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

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

.on-navy :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--on-navy);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* ---------- Utilities ---------- */

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

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

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

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

.small {
  font-size: 0.9375rem;
}

.email {
  overflow-wrap: anywhere;
}

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

.skip-link {
  position: absolute;
  z-index: 100;
  top: 12px;
  left: var(--gutter);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--nuttr-navy);
  color: var(--on-navy);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}

.skip-link:focus {
  transform: none;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--nuttr-off-white);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 14px;
}

/* Clear space: the padding plus the artwork's own margin keep at least 0.5X free around the logo. */
.brand {
  display: block;
  flex: none;
  padding: 8px 4px 8px 0;
  line-height: 0;
  text-decoration: none;
}

.brand img {
  width: 152px;
  min-width: 120px; /* brand minimum for the horizontal lockup */
  height: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 1rem;
  text-decoration: none;
  color: var(--nuttr-navy);
}

.site-nav a:hover {
  background: var(--tint);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 7px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--nuttr-acorn-tan);
}

@media (max-width: 479px) {
  .site-header .container {
    padding-block: 8px 4px;
  }

  .brand img {
    width: 132px;
  }

  .site-nav {
    width: 100%;
  }

  .site-nav ul {
    margin-left: -12px;
  }

  .site-nav a {
    padding: 0 12px;
  }

  .site-nav a[aria-current="page"]::after {
    right: 12px;
    left: 12px;
  }
}

/* ---------- Type helpers ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nuttr-navy);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 40px;
  height: 4px;
  background: var(--nuttr-acorn-tan);
}

.lead {
  max-width: 36em;
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.55;
}

.tagline {
  margin-bottom: 0.75em;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--nuttr-navy);
}

.meta {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ---------- Buttons and badges ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 12px 22px;
  border: 1.5px solid var(--nuttr-navy);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button--primary {
  background: var(--nuttr-navy);
  color: var(--on-navy);
}

.button--primary:hover {
  border-color: var(--navy-hover);
  background: var(--navy-hover);
}

.button--secondary {
  background: transparent;
  color: var(--nuttr-navy);
}

.button--secondary:hover {
  background: var(--tint);
}

.on-navy .button--secondary {
  border-color: var(--on-navy);
  color: var(--on-navy);
}

.on-navy .button--secondary:hover {
  background: rgba(248, 247, 244, 0.1);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nuttr-navy);
}

.badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nuttr-acorn-tan);
}

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

.section {
  padding-block: var(--section);
}

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

.section--white {
  background: var(--white);
  border-block: 1px solid var(--line);
}

.on-navy {
  --line: rgba(248, 247, 244, 0.18);
  background: var(--nuttr-navy);
  color: var(--on-navy);
}

.on-navy h2,
.on-navy h3,
.on-navy .eyebrow {
  color: var(--on-navy);
}

.on-navy .muted {
  color: var(--on-navy-muted);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.section-head p:not(.eyebrow) {
  font-size: 1.125rem;
  color: var(--text-muted);
}

.on-navy .section-head p:not(.eyebrow) {
  color: var(--on-navy-muted);
}

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

.hero {
  padding-block: clamp(64px, 11vw, 136px) clamp(48px, 8vw, 104px);
}

.hero h1 {
  max-width: 24ch;
  margin-bottom: 0.45em;
}

/* Wide screens: break the home headline after "iPhone," (measured: 12.44em; with "built" 14.93em). */
@media (min-width: 900px) {
  .hero h1 {
    max-width: 13.5em;
    text-wrap: wrap;
  }
}

.hero--product {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 820px) {
  .hero--product {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.hero--product .app-icon {
  width: clamp(128px, 22vw, 224px);
}

@media (max-width: 819px) {
  .hero--product .app-icon {
    order: -1;
  }
}

/* ---------- Cards and grids ---------- */

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.card > :last-child {
  margin-bottom: 0;
}

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

.card--rule::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--nuttr-acorn-tan);
}

.card h3 {
  margin-bottom: 0.4em;
}

/* ---------- Featured app (home) ---------- */

.feature {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 760px) {
  .feature {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.feature .app-icon {
  width: clamp(112px, 16vw, 184px);
}

.feature h2 {
  margin-bottom: 0.2em;
}

.feature .badge {
  margin-bottom: 0;
}

.feature .actions {
  margin-top: 24px;
}

.app-icon {
  aspect-ratio: 1;
  height: auto;
  border-radius: 22.37%;
  box-shadow: 0 0 0 1px rgba(11, 41, 69, 0.08), 0 2px 4px rgba(11, 41, 69, 0.06), 0 16px 40px rgba(11, 41, 69, 0.12);
}

/* ---------- Two-column split ---------- */

.split {
  display: grid;
  gap: clamp(24px, 5vw, 64px);
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.split h2 {
  margin-bottom: 0;
}

.split p:not(.eyebrow) {
  font-size: 1.125rem;
}

.split p.small {
  font-size: 0.9375rem;
}

/* ---------- About band (home) ---------- */

.about {
  display: grid;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

@media (min-width: 860px) {
  .about {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.about-logo {
  width: clamp(150px, 20vw, 220px); /* stacked lockup minimum is 96px */
}

.about p {
  font-size: 1.125rem;
  color: var(--on-navy-muted);
}

.about .lead {
  color: var(--on-navy);
}

/* ---------- Definition lists ---------- */

.facts {
  margin: 32px 0 0;
  border-top: 1px solid var(--line);
}

.facts div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 2px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-weight: 600;
}

.facts dd {
  margin: 0;
}

.on-navy .facts dd {
  color: var(--on-navy-muted);
}

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

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--nuttr-acorn-tan);
}

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

/* ---------- Checklist (on navy) ---------- */

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.points h3 {
  margin-bottom: 0.35em;
}

.points p {
  margin: 0;
  color: var(--on-navy-muted);
}

/* ---------- Contact ---------- */

.email-lg,
.card .email-lg {
  color: var(--nuttr-navy);
}

.email-lg {
  font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.contact-card h3 {
  margin-bottom: 0.6em;
}

.contact-card .email-lg {
  margin-bottom: 0.5em;
}

/* ---------- Page heads and documents ---------- */

.page-head {
  padding-block: clamp(56px, 9vw, 112px) clamp(32px, 5vw, 56px);
}

.page-head h1 {
  max-width: 18ch;
}

.page-head .lead {
  color: var(--text-muted);
}

.doc {
  padding-bottom: var(--section);
}

.doc-layout {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 1000px) {
  .doc-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .toc {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

.toc {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.9375rem;
}

.toc h2 {
  margin-bottom: 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.toc ol {
  margin: 0;
  padding-left: 1.4em;
}

.toc li {
  padding: 3px 0;
}

.toc li::marker {
  color: var(--text-muted);
}

.toc a {
  text-decoration-color: transparent;
}

.toc a:hover,
.toc a:focus-visible {
  text-decoration-color: var(--nuttr-acorn-tan);
}

.prose {
  max-width: var(--measure);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: 2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.prose h3 {
  margin-top: 1.75em;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose li::marker {
  color: var(--nuttr-acorn-tan);
}

.prose a {
  overflow-wrap: anywhere;
}

.summary {
  margin-bottom: 8px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.prose .summary h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1.25rem;
}

.summary ul {
  margin: 0;
  padding-left: 1.25em;
}

.summary li + li {
  margin-top: 0.5em;
}

.summary li::marker {
  color: var(--nuttr-acorn-tan);
}

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

.support-contact {
  display: grid;
  gap: 24px 48px;
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 80px);
}

@media (min-width: 860px) {
  .support-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.support-contact ul {
  margin: 0 0 12px;
  padding-left: 1.25em;
  color: var(--text-muted);
}

.support-contact li + li {
  margin-top: 0.35em;
}

.support-contact li::marker {
  color: var(--nuttr-acorn-tan);
}

.faq-group {
  max-width: var(--measure);
}

.faq-group + .faq-group {
  margin-top: clamp(48px, 7vw, 80px);
}

.faq-group > h2 {
  margin-bottom: 16px;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
}

.faq-item {
  padding-block: 24px;
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item h3 {
  margin-bottom: 0.5em;
  font-size: 1.125rem;
}

.faq-item p {
  color: var(--text-muted);
}

.faq-item > :last-child {
  margin-bottom: 0;
}

/* ---------- 404 ---------- */

.not-found {
  padding-block: clamp(80px, 14vw, 160px);
}

.not-found .mark {
  width: 64px;
  height: 64px;
  margin-bottom: 32px;
}

/* ---------- Home ---------- */

.site-header--navy {
  border-bottom-color: transparent;
  background: var(--nuttr-navy);
}

.site-header--navy .site-nav a {
  color: var(--on-navy);
}

.site-header--navy .site-nav a:hover {
  background: rgba(248, 247, 244, 0.08);
}

.site-header--navy :focus-visible,
.home .skip-link:focus-visible {
  outline-color: var(--on-navy);
}

.home .skip-link {
  background: var(--nuttr-off-white);
  color: var(--nuttr-navy);
}

.vault {
  display: grid;
  place-items: center;
  min-height: 64vh;
  min-height: min(70svh, 760px);
  padding-block: clamp(48px, 7vw, 88px);
  text-align: center;
}

.vault-mark {
  display: block;
  width: clamp(88px, 11vw, 136px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.vault h1 {
  margin: 0 auto;
  font-size: clamp(1.875rem, 1.2rem + 2.7vw, 3.375rem);
  line-height: 1.08;
  color: var(--on-navy);
}

.vault h1 .line {
  display: block;
}

.container--home {
  width: min(100% - 2 * var(--gutter), 760px);
}

.eyebrow--center {
  justify-content: center;
  text-align: center;
}

.eyebrow--center::after {
  content: "";
  flex: none;
  width: 40px;
  height: 4px;
  background: var(--nuttr-acorn-tan);
}

.growing {
  padding-block: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 40px);
}

.growing-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.growing-card + .growing-card {
  margin-top: 16px;
}

.growing-card .app-icon {
  width: clamp(64px, 9vw, 88px);
}

.growing-card h3 {
  margin: 0 0 4px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
}

.growing-card p {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 599px) {
  .growing-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .growing-card .button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.correspondence {
  padding-block: clamp(40px, 6vw, 64px) clamp(80px, 11vw, 136px);
  text-align: center;
}

.correspondence .email-lg {
  margin: 0;
}

/* ---------- Stacks product page ----------
   Stacks' own branding (its icon colours, the system font and the app's iOS-blue tint) inside the NUTTR
   header and footer. Everything is scoped to body.stacks-page main.
   Contrast: #1D1D1F on white 16.8:1; #6E6E73 on white 5.1:1, on #F5F5F7 4.6:1, on #EEF6FD 4.6:1;
   white on #0071E3 4.7:1; #0066CC on white 5.6:1. Icon colours are decorative only.
   Screenshots are framed in Apple's own bezels before they go in: figure.s-shot > img.f-device (see README, "The FITTR page"). */

.stacks-page {
  --s-coral: #FC6267;
  --s-periwinkle: #9595FA;
  --s-sky: #C2E4FB;
  --s-amber: #FCBB33;
  --s-teal: #068880;
  --s-green: #6ECA9B;
  --s-blue: #0071E3;
  --s-blue-hover: #005BBB;
  --s-link: #0066CC;
  --s-ink: #1D1D1F;
  --s-ink-2: #6E6E73;
  --s-bg-2: #F5F5F7;
  --s-sky-bg: #EEF6FD;
  --s-line: #E3E3E8;
  --s-bezel: #1D1D1F;
  --s-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

.stacks-page main {
  background: #FFFFFF;
  color: var(--s-ink);
  font-family: var(--s-font);
  letter-spacing: -0.01em;
}

.stacks-page main h1,
.stacks-page main h2,
.stacks-page main h3 {
  font-family: var(--s-font);
  color: var(--s-ink);
  letter-spacing: -0.02em;
}

.stacks-page main h2 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
}

.stacks-page main h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.stacks-page main a {
  color: var(--s-link);
  text-decoration-color: rgba(0, 102, 204, 0.35);
}

.stacks-page main a:hover {
  text-decoration-color: currentColor;
}

.stacks-page main :focus-visible {
  outline-color: var(--s-blue);
}

.s-section {
  padding-block: clamp(64px, 9vw, 120px);
}

.s-section--gray {
  background: var(--s-bg-2);
}

.s-section--sky {
  background: var(--s-sky-bg);
}

.s-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.s-head > :last-child {
  margin-bottom: 0;
}

.s-head p:not(.s-eyebrow) {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--s-ink-2);
}

.s-eyebrow {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

.stacks-page main .s-h2-small {
  margin-bottom: 24px;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
}

/* Screenshots come framed in Apple's own bezels (drafts/frames/frame.py), one image per figure: .s-shot > img.f-device.
   Apple's rules: no CSS frame, shadow, filter or anything covering them. Widths are set so each screen stays the size
   it was in the old CSS frame (the bezel is a little thicker), 2026-10-05. */

.s-shot {
  container-type: inline-size;
  width: 250px;
  max-width: 100%;
  margin: 0;
}

.s-shot figcaption {
  margin-top: 18px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--s-ink-2);
  text-wrap: balance;
}

.s-shot figcaption strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--s-ink);
}

/* Hero */

.s-hero {
  overflow: hidden;
  padding-block: clamp(48px, 8vw, 104px) clamp(64px, 9vw, 120px);
}

.s-hero-grid {
  display: grid;
  gap: clamp(56px, 8vw, 104px);
  align-items: center;
}

@media (min-width: 880px) {
  .s-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.s-hero-art {
  width: clamp(88px, 9vw, 112px);
  height: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12)); /* as on the app's welcome screen */
}

.s-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--s-sky-bg);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--s-ink);
}

.s-pill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-blue);
}

.s-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(3.25rem, 2.1rem + 5vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.s-tagline {
  margin: 0 0 24px;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--s-ink-2);
}

.s-lead {
  max-width: 34em;
  margin: 0 0 20px;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
}

.s-meta {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--s-ink-2);
}

.s-meta span {
  white-space: nowrap;
}

.s-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.stacks-page main .s-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.stacks-page main .s-button--primary {
  background: var(--s-blue);
  color: #FFFFFF;
}

.stacks-page main .s-button--primary:hover {
  background: var(--s-blue-hover);
}

.stacks-page main .s-button--secondary {
  background: transparent;
  color: var(--s-link);
  /* A real border snaps to whole screen pixels; the old 1.5px inset shadow rendered unevenly on 3x iPhone screens.
     Padding is 1.5px less than .s-button's so the button keeps its size. */
  border: 1.5px solid currentColor;
  padding: 10.5px 22.5px;
}

.stacks-page main .s-button--secondary:hover {
  background: rgba(0, 113, 227, 0.06);
}

/* The welcome screen in its phone, with the icon's coral and periwinkle cards fanned behind it. */
.s-visual {
  position: relative;
  justify-self: center;
  width: clamp(240px, 27.1vw, 313px);
}

.s-visual::before,
.s-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0.67% 1.97%; /* the bezel image's phone body, without the side buttons */
  border-radius: 17.5% / 8.35%; /* the body's corners */
}

.s-visual::before {
  background: var(--s-coral);
  transform: rotate(-14deg) translate(-15%, 4%);
}

.s-visual::after {
  background: var(--s-periwinkle);
  transform: rotate(-6deg) translate(-7%, 1%);
}

.s-visual .s-shot {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* How it works */

.s-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 28px;
  background: #FFFFFF;
}

.s-step svg {
  width: 100%;
  height: auto;
  margin-bottom: 6px;
}

.s-step-n {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--s-ink);
}

.s-step:nth-child(1) .s-step-n {
  background: rgba(252, 98, 103, 0.2);
}

.s-step:nth-child(2) .s-step-n {
  background: rgba(149, 149, 250, 0.26);
}

.s-step:nth-child(3) .s-step-n {
  background: rgba(6, 136, 128, 0.16);
}

.s-step h3,
.s-step p {
  margin: 0;
}

.s-step p {
  color: var(--s-ink-2);
}

/* A closer look: a row of screenshots that scrolls sideways, lined up with the page container on the left.
   Add or remove an <li> to add or remove a screenshot. */

.s-gallery {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  padding-block: 8px 24px;
}

.s-gallery:focus-visible {
  outline-offset: -3px;
}

.s-gallery-list {
  display: flex;
  gap: clamp(20px, 3vw, 32px);
  width: max-content;
  margin: 0;
  padding: 0 max(var(--gutter), (100% - var(--container)) / 2);
  list-style: none;
}

.s-gallery-list > li {
  scroll-snap-align: start;
}

.s-gallery .s-shot {
  width: clamp(208px, 62.5vw, 261px);
}

/* Features and privacy tiles */

.s-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.s-features--four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.s-feature {
  padding: clamp(24px, 3vw, 30px);
  border-radius: 24px;
  background: var(--s-bg-2);
}

.s-section--gray .s-feature {
  background: #FFFFFF;
}

.s-feature h3 {
  margin: 0 0 8px;
}

.s-feature p {
  margin: 0;
  color: var(--s-ink-2);
}

.s-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 14px;
}

.s-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-icon--coral {
  background: rgba(252, 98, 103, 0.16);
  color: #D93F45;
}

.s-icon--periwinkle {
  background: rgba(149, 149, 250, 0.22);
  color: #5A5AD8;
}

.s-icon--sky {
  background: var(--s-sky);
  color: #0062C4;
}

.s-icon--amber {
  background: rgba(252, 187, 51, 0.26);
  color: #A86A00;
}

.s-icon--teal {
  background: rgba(6, 136, 128, 0.14);
  color: #057068;
}

.s-icon--green {
  background: rgba(110, 202, 155, 0.28);
  color: #2C7A52;
}

.s-icon--white {
  background: #FFFFFF;
  color: var(--s-blue);
}

.s-note {
  max-width: 46rem;
  margin: 28px 0 0;
  font-size: 0.9375rem;
  color: var(--s-ink-2);
}

/* How stacking works: the five points from the app's page, with its screenshot beside them. */

.s-stacking {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

@media (min-width: 880px) {
  .s-stacking {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.s-howlist {
  display: grid;
  gap: 22px;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-howlist li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.s-howlist .s-icon {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 12px;
}

.s-howlist .s-icon svg {
  width: 24px;
  height: 24px;
}

.stacks-page main .s-howlist h3 {
  margin: 0 0 2px;
  font-size: 1.125rem;
}

.s-howlist p {
  margin: 0;
  color: var(--s-ink-2);
}

/* A row with a heading and no second line sits centered on its icon. */
.s-howlist .s-howlist-solo {
  align-items: center;
}

.stacks-page main .s-howlist .s-howlist-solo h3 {
  margin: 0;
}

/* The point the app highlights: safe to tap Delete. */
.s-howlist .s-howlist-key {
  margin-inline: -16px;
  padding: 16px;
  border-radius: 18px;
  background: #FFFFFF;
}

.s-howlist-key .s-icon--white {
  background: var(--s-sky-bg);
}

@media (max-width: 479px) {
  .s-howlist .s-howlist-key {
    margin-inline: -10px;
    padding: 14px 10px;
  }
}

.s-shot--side {
  justify-self: center;
  width: clamp(229px, 25vw, 281px);
}

.s-shot--side figcaption {
  margin: 18px 0 0; /* under the screenshot */
  text-align: center;
}

.s-soon {
  display: block;
  width: fit-content;
  margin: 0 auto 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--s-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Details and questions */

.s-split {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}

@media (min-width: 900px) {
  .s-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.s-facts {
  margin: 0;
}

.s-facts div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  gap: 2px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--s-line);
}

.s-facts div:first-child {
  border-top: 1px solid var(--s-line);
}

.s-facts dt {
  font-weight: 600;
}

.s-facts dd {
  margin: 0;
  color: var(--s-ink-2);
}

@media (max-width: 479px) {
  .s-facts div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.s-faq {
  margin: 0 0 28px;
}

.s-faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--s-line);
}

.s-faq-item:last-child {
  border-bottom: 1px solid var(--s-line);
}

.stacks-page main .s-faq-item h3 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
}

.s-faq-item p {
  margin: 0;
  color: var(--s-ink-2);
}

/* Coming soon */

.s-cta-grid {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

@media (min-width: 880px) {
  .s-cta-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.s-cta-icon {
  width: clamp(72px, 8vw, 96px);
  margin-bottom: 28px;
}

.stacks-page main .s-cta h2 {
  margin-bottom: 12px;
}

.s-cta-text {
  max-width: 30em;
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--s-ink-2);
}

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

.site-footer {
  padding-block: clamp(48px, 7vw, 72px) 32px;
  background: var(--nuttr-navy);
  color: var(--on-navy-muted);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.footer-brand {
  display: block;
  flex: none;
  padding: 4px 0;
  line-height: 0;
}

.footer-brand img {
  width: 140px;
  min-width: 120px;
  height: auto;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--on-navy);
  text-decoration: none;
}

.footer-nav a:hover {
  background: rgba(248, 247, 244, 0.08);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(248, 247, 244, 0.16);
  font-size: 0.9375rem;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  color: var(--on-navy);
}

@media (max-width: 479px) {
  .footer-nav ul {
    margin-left: -12px;
  }
}

/* ---------- Print ---------- */

@media print {
  body {
    background: #FFFFFF;
    color: #000000;
  }

  .skip-link,
  .site-nav,
  .footer-nav,
  .footer-brand,
  .about-logo,
  .actions,
  .toc {
    display: none !important;
  }

  .on-navy,
  .site-footer,
  .section--white,
  .card,
  .feature,
  .summary {
    background: none !important;
    color: #000000 !important;
    box-shadow: none !important;
  }

  .on-navy h2,
  .on-navy h3,
  .on-navy .muted,
  .on-navy p,
  .on-navy dd {
    color: #000000 !important;
  }

  .doc-layout {
    display: block;
  }
}

/* Stacks page, 2026-10-02 rewrite: Free / Private strip, standalone details, larger hero phone on small screens */

.s-promise {
  padding-block: 0 clamp(40px, 6vw, 72px);
}

.s-promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.s-promise-item {
  padding: clamp(18px, 3vw, 28px);
  border-radius: 22px;
  background: var(--s-bg-2);
}

.s-promise-item h2 {
  margin: 0 0 6px;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--s-ink);
}

.s-promise-item p {
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.4;
  color: var(--s-ink-2);
}

.s-details {
  max-width: 760px;
}

@media (max-width: 879px) {
  .s-visual {
    width: clamp(250px, 68.8vw, 313px);
  }
}

/* 2026-10-02: the header has a single link now, so on phones it stays on the logo's row */
@media (max-width: 479px) {
  .site-header .container {
    flex-wrap: nowrap;
    padding-block: 10px;
  }

  .site-nav {
    width: auto;
  }

  .site-nav ul {
    margin-left: 0;
    margin-right: -12px;
  }
}

/* 2026-10-02: compact step cards on phones */
@media (max-width: 599px) {
  .s-step {
    padding: 20px;
  }

  .s-step svg {
    width: auto;
    height: 116px;
    margin-bottom: 0;
  }
}

/* 2026-10-02: lighter section rhythm, closer to Apple's spacing on iPhone; merged closing block */
.s-section {
  padding-block: clamp(48px, 6.5vw, 88px);
}

.s-hero {
  padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6.5vw, 88px);
}

.s-head {
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

.s-promise {
  padding-block: 0 clamp(32px, 4.5vw, 56px);
}

.s-cta-facts {
  max-width: 32rem;
  margin-top: clamp(24px, 3.5vw, 36px);
}

/* 2026-10-02: Support and Terms read in a centered column, like Apple's support pages */
.container--read {
  width: min(100% - 2 * var(--gutter), 46rem);
}

.container--read .prose {
  max-width: none;
}

/* 2026-10-02: step illustrations fill the top of each card edge to edge on a tinted panel (replaces the compact phone rule) */
.s-step {
  gap: 12px;
  padding: 0 0 clamp(20px, 3vw, 28px);
  overflow: hidden;
}

.s-step svg {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 0 6px;
  padding: clamp(14px, 3vw, 22px) clamp(10px, 2vw, 18px) clamp(4px, 1vw, 8px);
  background: var(--s-sky-bg);
}

.s-step > :not(svg) {
  margin-inline: clamp(20px, 3vw, 28px);
}

@media (max-width: 599px) {
  .s-step {
    padding: 0 0 20px;
  }

  .s-step svg {
    width: 100%;
    height: auto;
  }
}

/* Beta: the closing block's Join the beta button sits under the heading. */
.s-cta-actions { margin-top: clamp(16px, 2.5vw, 24px); }

/* Scoring: what raises and lowers a photo's score, beside What Stacks Sees (screenshot 13). */
.s-score-lists {
  display: grid;
  gap: 16px;
  max-width: 38rem;
}
@media (min-width: 600px) {
  .s-score-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s-score-list {
  padding: 18px 20px 20px;
  border-radius: 18px;
  background: #FFFFFF;
}
/* On a white section the cards are gray instead, so they still read as cards. */
.s-section:not(.s-section--gray):not(.s-section--sky) .s-score-list { background: var(--s-bg-2); }
.stacks-page main .s-score-list h4 {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--s-ink);
}
.s-score-list ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-score-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  line-height: 1.4;
  color: var(--s-ink);
}
/* The + and − are drawn as bars, not typed, so they sit exactly in the middle of the circle (a font's own
   spacing put the characters a pixel low). */
.s-score-list li::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.s-score-list--up li::before {
  background-color: rgba(110, 202, 155, 0.28);
  background-image: linear-gradient(#2C7A52, #2C7A52), linear-gradient(#2C7A52, #2C7A52);
  background-size: 10px 2px, 2px 10px;
}
.s-score-list--down li::before {
  background-color: rgba(252, 98, 103, 0.16);
  background-image: linear-gradient(#D93F45, #D93F45);
  background-size: 10px 2px;
}

/* ---------- FITTR page (2026-10-05) ----------
   The Stacks page system (body.stacks-page.fittr-page) with screenshots already framed in Apple's own bezels:
   iPhone 18 Pro in Burgundy and Apple Watch Ultra in natural titanium with the Anchor Blue Ocean Band
   (drafts/frames/frame.py). Apple's rules: show the bezels as they are. So no CSS frame, shadow, filter, tilt or
   overlap on these images, and nothing drawn behind them like Stacks' fanned cards. */

.f-device {
  display: block;
  width: 100%;
  height: auto;
}

.fittr-page .s-hero-art {
  filter: none; /* .app-icon gives the icon its corners and shadow */
}

/* Hero: the phone and the watch at the same moment of a workout, side by side. The watch's middle sits at about
   62% of the phone's height. (A margin in % is a share of the row's width.) */
.f-hero-devices,
.f-pair {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  justify-self: center;
  margin: 0;
}

.f-hero-devices,
.f-pair {
  width: min(100%, 440px); /* the pairs beside section text match the hero's size */
}

.f-hero-devices .f-phone,
.f-pair .f-phone {
  width: 58.5%;
}

.f-hero-devices .f-watch,
.f-pair .f-watch {
  width: 38.6%;
  margin-top: 43.3%;
}


@media (min-width: 880px) {
  .f-hero-devices,
  .f-pair {
    width: clamp(400px, 38vw, 480px);
  }
}

/* Walkthrough: every slot is a phone's size, so the captions line up. A watch sits in the middle of its slot. */
.f-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1350 / 2760;
}

.f-slot .f-watch {
  width: 72%;
}

/* A watch beside a section's text. The bezel is 600 px wide, so it stays small enough to look sharp. */
.f-side-watch {
  justify-self: center;
  width: 210px;
  margin: 0;
}

/* A phone beside a section's text */
.f-side-phone {
  justify-self: center;
  width: clamp(220px, 22vw, 260px);
  margin: 0;
}

.fittr-page .s-head p + p {
  margin-top: 1em;
}

.f-text {
  margin-bottom: 0;
}

/* Progress you can see: the trends, each with History's green up arrow. */
.f-trends {
  display: grid;
  gap: 12px;
  max-width: 36rem;
  margin: 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--s-bg-2);
  list-style: none;
}

.f-trends li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  line-height: 1.4;
}

.f-trends li::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(110, 202, 155, 0.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%232C7A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5V1.8M2.2 5.6 6 1.8l3.8 3.8'/%3E%3C/svg%3E") center / 12px 12px no-repeat; /* drawn, so it sits exactly in the middle */
}

/* Also in FITTR */
.f-also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f-also li {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--s-bg-2);
  line-height: 1.35;
}

.stacks-page main .f-also h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.f-also p {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--s-ink-2);
}

/* The four ways to start a plan, in a row under "Just lift." with a small label */
.stacks-page main .f-ways-title {
  margin: clamp(40px, 5vw, 64px) 0 14px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

@media (min-width: 480px) {
  .f-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .f-ways {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.s-section--gray .f-also li {
  background: #FFFFFF;
}

/* ---------- Projects and Menu Maid ----------
   Projects: apps NUTTR built but hasn't released, shown on the homepage under the apps, with "Projects" in every
   footer and nothing in the top bar. Menu Maid (a small Mac app, not released, October 14, 2026) is the first: its
   page at menumaid/ is on the Stacks page system. The icon is the in-progress one from the Menu Maid project; the drawn
   menu bar is a stand-in until there are screenshots. */

.menumaid-page .s-hero-art {
  filter: none; /* .app-icon gives the icon its corners and shadow */
}

/* The menu bar, drawn: the tidy bar, then the same bar with every icon shown. */
.mm-demo {
  display: grid;
  gap: 20px;
  width: min(100%, 440px);
  margin: 0;
  justify-self: center;
}

@media (min-width: 880px) {
  .mm-demo {
    width: clamp(400px, 38vw, 480px);
  }
}

.mm-demo p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

.mm-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2.4vw, 18px);
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: #1D1D1F;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 500;
}

.mm-bar svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-arrow {
  font-size: 1.375rem;
  line-height: 1;
  padding-bottom: 2px;
}

.mm-glyph {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.eyebrow.growing-next {
  margin-top: clamp(44px, 5vw, 60px);
}

/* ---------- HUD Map (draft project page, 2026-10-14, local only) ----------
   The head-up display is drawn: a dark pane with a turn arrow and the distance, then the three steps a turn travels. */
.hudmap-page .s-hero-art {
  filter: none; /* .app-icon gives the icon its corners and shadow */
}

.hud-demo {
  display: grid;
  gap: 18px;
  width: min(100%, 440px);
  margin: 0;
  justify-self: center;
}

@media (min-width: 880px) {
  .hud-demo {
    width: clamp(400px, 38vw, 480px);
  }
}

.hud-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  aspect-ratio: 16 / 7;
  border-radius: 22px;
  background: radial-gradient(120% 140% at 50% 0%, #22344A 0%, #0E1724 60%, #070C14 100%);
  color: #8FE3FF;
}

.hud-glass svg {
  width: clamp(72px, 9vw, 96px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(143, 227, 255, 0.55));
}

.hud-dist {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 0 10px rgba(143, 227, 255, 0.45);
}

.hud-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

.hud-chain li {
  padding: 5px 10px;
  white-space: nowrap;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.hud-chain .hud-to {
  padding: 0;
  background: none;
  box-shadow: none;
  color: #A1A1A6;
}

/* Five steps in the story: the fourth and fifth number badges, after the first three's colors. */
.hud-steps .s-step:nth-child(4) .s-step-n {
  background: rgba(240, 174, 40, 0.24);
}

.hud-steps .s-step:nth-child(5) .s-step-n {
  background: rgba(48, 176, 92, 0.2);
}

@media (max-width: 420px) {
  .hud-chain {
    flex-direction: column;
    gap: 2px;
  }

  .hud-chain .hud-to {
    transform: rotate(90deg);
  }
}

/* ---------- Personal Projects menu in the top bar (2026-10-14) ----------
   A <details> menu after Stacks and FITTR: Menu Maid and HUD Map with their icons. "Personal" drops on phones. */
.nav-menu {
  position: relative;
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--nuttr-navy);
  cursor: pointer;
  list-style: none;
}

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

.nav-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}

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

.nav-menu summary:hover {
  background: var(--tint);
}

.nav-menu--current summary {
  background-image: linear-gradient(var(--nuttr-acorn-tan), var(--nuttr-acorn-tan));
  background-repeat: no-repeat;
  background-size: calc(100% - 28px) 2px;
  background-position: 14px calc(100% - 7px);
}

.site-header--navy .nav-menu summary {
  color: var(--on-navy);
}

.site-header--navy .nav-menu summary:hover {
  background-color: rgba(248, 247, 244, 0.08);
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  display: grid;
  gap: 2px;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(15, 30, 50, 0.16);
}

.site-nav .nav-menu-panel a,
.site-header--navy .site-nav .nav-menu-panel a {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--nuttr-navy);
  white-space: nowrap;
}

.site-nav .nav-menu-panel a:hover,
.site-header--navy .site-nav .nav-menu-panel a:hover {
  background: var(--tint);
}

.site-nav .nav-menu-panel a[aria-current="page"] {
  background: var(--tint);
  font-weight: 600;
}

.site-nav .nav-menu-panel a[aria-current="page"]::after {
  display: none;
}

.nav-menu-panel img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

@media (max-width: 479px) {
  .nav-long {
    display: none;
  }

  /* Three items on the logo's row (the logo keeps its 120 px brand minimum): a smaller gap, tighter links. */
  .site-header .container {
    column-gap: 10px;
  }

  .site-nav ul {
    flex-wrap: nowrap;
    gap: 0;
  }

  .site-nav a,
  .nav-menu summary {
    padding: 0 8px;
    font-size: 0.9375rem;
  }

  .nav-menu summary {
    gap: 6px;
  }

  .site-nav a[aria-current="page"]::after {
    right: 8px;
    left: 8px;
  }

  .nav-menu--current summary {
    background-size: calc(100% - 16px) 2px;
    background-position: 8px calc(100% - 7px);
  }
}

/* 2026-10-16: the panel is a list inside .site-nav, so the top bar's ".site-nav ul" rules reached it too and beat its
   own layout (a row with no padding, and on phones no wrapping and a negative margin). On phones the projects sat side
   by side and ran out of the panel. This puts the panel's own layout back, with bigger rows on phones and the panel's
   right edge lined up with the page. The menu is called "Labs" since the same day (it was "Personal Projects", and
   "Projects" on phones, so .nav-long is no longer used in the top bar). */
.site-nav .nav-menu-panel {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
}

@media (max-width: 479px) {
  .site-nav .nav-menu-panel {
    right: 12px; /* the menu's list runs 12px into the gutter on phones */
    min-width: 236px;
  }

  .site-nav .nav-menu-panel a {
    min-height: 48px;
    font-size: 1.0625rem;
  }

  .nav-menu-panel img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
}

/* HUD Map's story sits on a white section, so its icon tiles get a light fill. */
.hud-story .s-icon--white {
  background: #F2F2F5;
}

/* HUD Map's story: "Why it was hard" beside "How it came together" on a computer. */
.hud-two {
  display: grid;
  gap: 36px 56px;
}

@media (min-width: 880px) {
  .hud-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.hud-two .s-eyebrow {
  margin-bottom: 18px;
}

/* ---------- Personal project pages (local draft, 2026-10-16) ----------
   HUD Map, Davevite and Menu Maid on one layout: the hero, then "A personal project." (why it was made and why it
   won't be released) on a gray band, then the screenshots with an "Also in" list, then the details. Screenshots are
   framed like FITTR's (drafts/frames/frame.py) and use its gallery and list. */

.davevite-page .s-hero-art {
  filter: none; /* .app-icon gives the icon its corners and shadow */
}

/* Two paragraphs in one card */
.s-feature p + p {
  margin-top: 0.75em;
}

/* A white section right after another white one (Menu Maid's privacy): the first one's spacing is enough. */
.s-section.pp-follow {
  padding-top: 0;
}

/* HUD Map's hero: a drawing from the driver's seat, with the turn on the windshield and HUD Map on the car's screen. */
.hud-scene {
  width: min(100%, 560px);
  margin: 0;
  justify-self: center;
}

.hud-scene img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(11, 18, 30, 0.08), 0 18px 40px rgba(11, 18, 30, 0.16);
}

@media (min-width: 880px) {
  .hud-scene {
    width: clamp(440px, 44vw, 580px);
  }
}

/* Davevite's hero: the host's phone (burgundy) and the guest's (black) for the same night, the guest's a little lower. */
.dv-hero {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 3vw, 28px);
  width: min(100%, 470px);
  margin: 0;
  justify-self: center;
}

.dv-hero > .f-device {
  width: calc(50% - clamp(6px, 1.5vw, 14px));
}

.dv-hero > .f-device + .f-device {
  margin-top: 10%;
}

@media (min-width: 880px) {
  .dv-hero {
    width: clamp(400px, 38vw, 470px);
  }
}

/* HUD Map's "Under the hood.": a dark band with the drawing of how a turn travels (assets/hudmap/how-it-works.svg),
   the three numbered steps under it and a row of numbers. */
.s-section.hud-how {
  background: #0B1220;
}

.stacks-page main .hud-how h2,
.stacks-page main .hud-how h3 {
  color: #FFFFFF;
}

.hud-how .s-head {
  max-width: 52rem;
}

.hud-how .s-head p:not(.s-eyebrow) {
  color: #A3B3C6;
}

.hud-diagram {
  margin: 0;
}

.hud-diagram img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #22314A;
  border-radius: 22px;
}

.hud-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hud-legend li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid #22314A;
  border-radius: 20px;
  background: #121B2A;
}

.hud-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #8FE9FF;
  color: #0B1220;
  font-size: 0.9375rem;
  font-weight: 700;
}

.hud-kicker {
  margin: 4px 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8FE9FF;
}

.hud-legend h3 {
  margin: 0 0 8px;
}

.hud-legend p:last-child {
  margin: 0;
  color: #A3B3C6;
}

.hud-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid #22314A;
}

.hud-specs dt {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #8FE9FF;
}

.hud-specs dd {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #A3B3C6;
}


/* Davevite's features, after its few screenshots. */
.dv-features {
  margin-top: clamp(48px, 6vw, 72px);
}

/* ---------- Homepage (draft, 2026-10-16) ----------
   Davis picked header 3 from the mockups ("that slids through tahts soooo cool"): a navy top where one line changes
   from project to project, then Stacks and FITTR each across the whole width, then Labs with a picture each. NUTTR isn't
   only apps (Davis: "its really just around solving problems"), so the line says "builds things". */

.home-hero {
  padding-block: clamp(72px, 10vw, 128px);
  text-align: center;
}

.home-hero .home-lead {
  margin: 0;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #FFFFFF;
}

.home-cycle {
  position: relative;
  height: 1.3em;
  margin-top: clamp(14px, 2vw, 26px);
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.home-cycle span {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  color: #8FD2FF;
  opacity: 0;
  animation: home-cycle 13s infinite;
}

.home-cycle span:nth-child(2) { animation-delay: 2.6s; }
.home-cycle span:nth-child(3) { animation-delay: 5.2s; }
.home-cycle span:nth-child(4) { animation-delay: 7.8s; }
.home-cycle span:nth-child(5) { animation-delay: 10.4s; }

/* Centered on the capital height, the way Apple's symbols sit beside text (Davis, October 17: "the icons on the
   flipper still arent cenetered with the text in every case"; centering on all the ink, descenders included, left
   them about 0.1em low). */
.home-cycle img {
  position: relative;
  top: 0.026em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 24%;
}

@keyframes home-cycle {
  0% { opacity: 0; transform: translateY(14px); }
  4% { opacity: 1; transform: none; }
  17% { opacity: 1; transform: none; }
  21% { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cycle span { animation: none; }
  .home-cycle span:first-child { opacity: 1; }
}

/* The long lines wrap on phones, so the line gets room for two rows there. */
@media (max-width: 599px) {
  .home-cycle { height: 2.7em; font-size: 1.625rem; line-height: 1.3; }
  .home-cycle span { display: block; white-space: normal; text-align: center; }
  .home-cycle img { top: 0; display: inline-block; margin-right: 0.3em; vertical-align: -0.209em; }
}

/* Each app gets the whole width: its name, its tagline as the headline, its links and its screens rising from the
   bottom. Stacks first and biggest, since it's the public app (Davis). Apple's bezels: upright, no overlap. */
.home-app {
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 104px) 0;
  text-align: center;
  color: #1D1D1F;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

/* Each section is a gray panel with a white gap above it, as on Apple's homepage (Davis, October 17: "notice how
   apple has more firm lines like this"). */
.home main { background: #FFFFFF; }
.home-app,
.home-labs { margin-top: 12px; background: #F5F5F7; }

.home-app-name {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.home-app-name img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.home .home-app h2 {
  margin: 14px 0 0;
  font-family: inherit;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1D1D1F;
}

.home-app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-size: 1.125rem;
}

.home-app-links a {
  color: #0066CC;
  text-decoration: none;
}

.home-app-links .home-button {
  padding: 11px 22px;
  border-radius: 999px;
  background: #0071E3;
  color: #FFFFFF;
}

.home-app-links .home-note {
  color: #6E6E73;
}

.home-shots {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 2.5vw, 28px);
  height: clamp(300px, 34vw, 470px);
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
}

.home-shots .phone { width: clamp(150px, 20vw, 260px); }
.home-shots .phone + .phone { margin-top: 40px; }
.home-shots .phone + .phone + .phone { margin-top: 80px; }
.home-shots .watch { width: clamp(100px, 13vw, 170px); margin-top: clamp(80px, 11vw, 140px); }

@media (max-width: 599px) {
  .home-shots .phone:nth-child(3) { display: none; }
}

/* Labs: a picture and a line for each project. */
.home-labs {
  padding-block: clamp(56px, 8vw, 96px);
}

.home-labs .eyebrow {
  margin-bottom: 24px;
}

.home-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.home-lab {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: #FFFFFF;
  text-decoration: none;
  color: var(--nuttr-navy);
}

.home-lab-pic {
  display: grid;
  place-items: center;
  height: 200px;
  overflow: hidden;
  background: #0B1220;
}

.home-lab-pic--dv { align-items: start; padding-top: 24px; background: #EEF6FD; }
.home-lab-pic--dv img { width: 150px; }
.home-lab-pic--hud img { width: 100%; height: 100%; object-fit: cover; }
.home-lab-pic--mm img { width: 100%; height: 100%; object-fit: cover; }

.home-lab-text {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px 20px;
}

.home-lab-text img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.home .home-lab-text h3 {
  margin: 0;
  font-size: 1.125rem;
}

.home-lab-text p {
  margin: 2px 0 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ---------- Bento feature grids (2026-10-16) ----------
   Feature lists as a grid of tiles, from Davis's pick of the mockups ("holy crap I love that"). The big tiles show the
   feature itself (a text, a reminder, a count); the smaller extras share an "And more" tile. Each app colors its own
   tiles below the shared part. Apple's device frames stay whole: never cropped, tilted or overlapped. */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: 16px;
}

.bento-t {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  background: var(--s-bg-2);
}

/* :where() keeps this weak, so each app's tile colors still win */
:where(.s-section--gray) .bento-t {
  background: #FFFFFF;
}

.bento-t--wide {
  grid-column: span 2;
}

.bento-t--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.stacks-page main .bento-t h3 {
  margin: 0 0 6px;
  font-size: 1.125rem;
}

.bento-t p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--s-ink-2);
}

/* A small label over a tile's heading */
.bento-t .bento-k {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* One big number */
.bento-t .bento-num {
  margin: 6px 0 4px;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--s-ink);
}

.bento-num span {
  margin-left: 6px;
  font-size: 1.25rem;
}

/* And more: the smaller features as chips with a line icon */
.bento-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.bento-more li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
}

:where(.s-section--gray) .bento-more li {
  background: var(--s-bg-2);
}

.bento-more svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--s-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

@media (max-width: 599px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-t--wide,
  .bento-t--hero { grid-column: auto; grid-row: auto; }
}

/* Davevite: its own navy, cream and red. */
.dv-any {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px;
  align-items: center;
  background: #FFF9EF;
}

.stacks-page main .dv-any h3 {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1F2840;
}

.dv-any p:last-child {
  margin-top: 10px;
  font-size: 1.0625rem;
}

.dv-any .f-device {
  width: 200px;
}

.dv-texts {
  background: #1F2840;
}

.stacks-page main .dv-texts h3,
.dv-texts .bento-k {
  color: #FFF9EF;
}

.dv-texts p {
  color: #C9CFD6;
}

/* The typing dots and the message share one spot, so nothing moves when one becomes the other */
.dv-thread {
  display: grid;
  justify-items: end;
  align-items: end;
  margin-top: 14px;
}

.dv-thread > * {
  grid-area: 1 / 1;
}

.dv-texts .dv-bubble {
  max-width: 330px;
  margin: 0;
  padding: 12px 15px;
  border-radius: 20px 20px 6px 20px;
  background: #34C759;
  color: #FFFFFF;
  line-height: 1.35;
}

.dv-bubble span {
  opacity: 0.9;
}

.dv-timer {
  background: linear-gradient(160deg, #FFF4DD, #FFE5B3);
}

.dv-timer .bento-num {
  color: #A86A00;
}

/* Reminders: a notification */
.dv-rem {
  background: linear-gradient(160deg, #EEF6FD, #DCEBFA);
}

.dv-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(31, 40, 64, 0.12);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #1D1D1F;
}

.dv-note img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.dv-note b {
  display: block;
}

/* Questions: the answers so far */
.dv-bars {
  display: grid;
  gap: 8px;
  margin: 14px 0 12px;
}

.bento-t .dv-bars p {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1D1D1F;
}

.dv-bars i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 10px;
  background: rgba(229, 72, 77, 0.16);
}

.dv-bars span,
.dv-bars b {
  position: relative;
}

/* Who came: faces, with the no-show faded */
.dv-faces {
  display: flex;
  margin-bottom: 14px;
}

.dv-faces i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -7px;
  border: 3px solid var(--s-bg-2);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
}

/* The no-show: a solid light gray, not see-through, so the face beside it doesn't show through */
.dv-faces i.out {
  background: #DADDE3;
  color: #8E8E93;
}

.dv-came .bento-num {
  font-size: 3rem;
  color: #1F2840;
}

/* Group links: names to tap */
.dv-links {
  background: #FFF9EF;
}

.dv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.dv-chips li {
  padding: 6px 10px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1F2840;
}

.dv-chips em {
  margin-left: 6px;
  font-style: normal;
  color: #30A46C;
}

.dv-chips em.m {
  color: #B07D00;
}

/* A picture in Messages */
.dv-pic {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  align-items: center;
  background: #C96812; /* the link picture's orange (Dave's Percent Night); it was red for Movie night's */
}

.dv-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.stacks-page main .dv-pic h3 {
  color: #FFFFFF;
}

.dv-pic p {
  color: #FFF4EA;
}

/* On the gray band, the rows and faces that were white or gray switch to match the white tiles. */
:where(.s-section--gray) .bento-t .dv-bars p {
  background: var(--s-bg-2);
}

:where(.s-section--gray) .dv-faces i {
  border-color: #FFFFFF;
}

/* On a phone the hero keeps only the host's phone: the guest's page is in the "Any phone." tile just below (Davis:
   "a lot of imges in a close space on mobile"). */
@media (max-width: 599px) {
  .dv-hero > .f-device + .f-device { display: none; }
  .dv-hero > .f-device { width: min(64%, 250px); }
}

/* On a phone the guest's phone gets smaller, so "Any phone." keeps to one line. */
@media (max-width: 599px) {
  .dv-any { grid-template-columns: minmax(0, 1fr) 120px; }
  .stacks-page main .dv-any h3 { font-size: 1.75rem; }
  .dv-any .f-device { width: 120px; }
  .dv-pic { grid-template-columns: minmax(0, 1fr); }
}

/* On the narrowest screens (under 380 px) the guest's phone goes under the words, so nothing runs behind it. */
@media (max-width: 379px) {
  .dv-any { grid-template-columns: minmax(0, 1fr); }
  .dv-any .f-device { width: min(62%, 200px); justify-self: center; }
}
/* end: Bento feature grids (2026-10-16) */

/* ---------- Bento: Stacks (draft, 2026-10-16) ----------
   "Sort smarter, not photo by photo." as a grid (Davis: "too many sreenshots ... add a bento"). The menus are drawn
   with the app's own words; the two rows of photos are cut from screenshot 26, star and trash badges included. */

/* Keep only the best: two moments, each with its best photo starred and the rest marked for deleting */
.st-keep {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: #FFFFFF; /* the photo rows are cut from a white screen */
}

.bento-t .st-rows p {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--s-ink);
}

.st-rows img {
  display: block;
  width: 100%;
  height: auto;
}

.bento-t .st-rows img + p {
  margin-top: 14px;
}

.st-keep p + p {
  margin-top: 6px;
}

/* An iOS menu */
.st-menu {
  margin: 0 0 16px;
  padding: 4px 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 26px rgba(29, 29, 31, 0.12);
  list-style: none;
}

.st-menu li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 5px 12px;
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--s-ink);
}

.st-menu li + li.st-line {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--s-line);
}

.st-menu svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-menu .st-red {
  color: #FF3B30;
}

.st-sort {
  background: var(--s-sky-bg);
}

.st-hold {
  background: #F1F1FE;
}

.st-clear {
  background: #FFF1F1;
}

/* Stack in batches: the buttons under three selected moments */
.st-buttons {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.st-buttons span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #EDEDF0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--s-ink);
}

.st-buttons .st-blue {
  background: var(--s-blue);
  color: #FFFFFF;
}

.st-buttons .st-red {
  color: #FF3B30;
}

/* Keep Best Photo Only, done: what was deleted and kept */
.st-space {
  background: #ECF8F1;
}

.st-done {
  display: flex;
  gap: 28px;
  margin: 4px 0 14px;
}

.st-done div {
  text-align: center;
}

.bento-t .st-done b {
  display: block;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--s-ink);
}

.bento-t .st-done span {
  display: block;
  font-size: 0.875rem;
  color: var(--s-ink-2);
}

.bento-t .st-done em {
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: #2C7A52;
}

/* Stacked: the sheet after stacking several moments */
.st-stacked {
  background: #FFF7E6;
}

.st-sheet {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(29, 29, 31, 0.1);
}

.st-sheet i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #34C759;
}

.st-sheet i svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-sheet b {
  font-size: 1rem;
}

.st-sheet span {
  font-size: 0.8125rem;
  color: var(--s-ink-2);
}

.st-sheet .st-done-button {
  justify-self: stretch;
  margin-top: 8px;
  padding: 7px;
  border-radius: 999px;
  background: var(--s-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: #FFFFFF;
}

@media (max-width: 599px) {
  .st-keep { grid-template-columns: minmax(0, 1fr); }
}
/* end: Bento: Stacks (draft, 2026-10-16) */

/* ---------- Bento: HUD Map (draft, 2026-10-16) ----------
   "Also in HUD Map" as a grid (Davis: "we can reduce the screenshots on the hud map too for the bento"). The glass uses
   the hero drawing's cyan; the turn card, banners and buttons are drawn from the app's own screens and words, on the
   screenshots' drive to Riverbanks Zoo. */

/* Turns on the glass: the arrows the head-up display can show */
.hm-glass {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(120% 90% at 50% 20%, #1A2A44 0%, #0B1220 70%);
}

.stacks-page main .hm-glass h3 {
  color: #FFFFFF;
}

.hm-glass p {
  color: #A3B3C6;
}

.hm-glass svg {
  fill: none;
  stroke: #8FE9FF;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(143, 233, 255, 0.75));
}

.hm-turn {
  display: block;
  width: 132px;
  height: 150px;
  margin: 10px auto 18px;
  stroke-width: 5.5;
}

.hm-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.hm-set svg {
  width: 30px;
  height: 30px;
  stroke-width: 2;
  opacity: 0.8;
}

/* Follows the drive: the app's dark green turn card */
.hm-follow {
  background: #1B382F;
}

.hm-follow .bento-num {
  color: #FFFFFF;
}

.stacks-page main .hm-follow h3 {
  color: #FFFFFF;
}

.hm-follow p {
  color: #B9CFC6;
}

.bento-t .hm-card {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #1B382F;
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
}

.hm-spin {
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
}

/* Faster Route: the banner under the turn card */
.hm-traffic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: linear-gradient(160deg, #EEF6FD, #DCEBFA);
}

.hm-banner {
  padding: 14px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(11, 18, 32, 0.12);
}

.hm-banner b {
  display: block;
  font-size: 1rem;
}

.hm-banner > span {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--s-ink-2);
}

.hm-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.hm-buttons span,
.hm-go span {
  padding: 9px 10px;
  border-radius: 999px;
  background: #EDEDF0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--s-ink);
}

.hm-buttons .hm-blue,
.hm-go .hm-blue {
  background: #0A84FF;
  color: #FFFFFF;
}

/* Find Nearby: the categories and the closest gas */
.hm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.hm-chips span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
  font-weight: 600;
}

.hm-chips .hm-on {
  background: #0A84FF;
  color: #FFFFFF;
}

.hm-nearby svg,
.hm-places svg,
.hm-carplay svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hm-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hm-row + .hm-row {
  margin-top: -10px;
}

.hm-row i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #FFFFFF;
}

.bento-t .hm-row b {
  display: block;
  font-size: 0.9375rem;
  color: var(--s-ink);
}

.bento-t .hm-row span {
  display: block;
  overflow: hidden;
  font-size: 0.8125rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--s-ink-2);
}

.bento-t .hm-row em {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  color: var(--s-ink-2);
}

.bento-t .hm-row .hm-dir {
  padding: 6px 11px;
  border-radius: 999px;
  background: #0A84FF;
  color: #FFFFFF;
}

/* CarPlay: the Dashboard's Home and Work */
.hm-carplay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.hm-dash {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(160deg, #1C2636, #0F1520);
}

.hm-dash > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
}

.hm-dash i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

/* The passenger's screen */
.hm-passenger {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: #FFF7E6;
}

.hm-pass {
  padding: 16px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(11, 18, 32, 0.1);
}

.hm-pass b {
  display: block;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.hm-pass > span {
  display: block;
  margin: 2px 0 12px;
  font-size: 0.8125rem;
  color: var(--s-ink-2);
}

.hm-pass div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.hm-pass div span {
  padding: 8px 4px;
  border-radius: 12px;
  background: #EDEDF0;
  font-size: 0.75rem;
  white-space: nowrap;
  font-weight: 600;
  text-align: center;
}

/* The watch's arrival and the 3D map: the drawing beside the words */
.hm-arrival,
.hm-3d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.hm-arrival {
  background: #EEF0F3;
}

.hm-watch {
  margin: 0;
  padding: 12px;
  border-radius: 26px;
  background: #000000;
  color: #FFFFFF;
}

.hm-trip {
  padding: 16px 12px;
  text-align: center;
}

.bento-t .hm-trip span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #A1A1A6;
}

.hm-trip strong {
  display: block;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.bento-t .hm-trip em {
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: #30D158;
}

/* 3D map: a road with buildings and the car's arrow */
.hm-3d svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (max-width: 599px) {
  .hm-traffic,
  .hm-carplay,
  .hm-passenger,
  .hm-arrival,
  .hm-3d { grid-template-columns: minmax(0, 1fr); }
}
/* end: Bento: HUD Map (draft, 2026-10-16) */

/* ---------- Bento: FITTR (draft, 2026-10-16) ----------
   "Also in FITTR" as a grid (Davis: "change all teh features on all the pages that have one to the bento"). Colors from
   the icon: coral, lime, cyan and the dark bar. The lists, buttons and numbers are drawn from the app's own screens and
   the Push day in the marketing screenshots; nothing says how FITTR decides. */

/* Cardio, lifting and stretching: Today's list */
.ft-mix {
  background: linear-gradient(160deg, #EAF7FC, #D6EEF8);
}

.ft-list {
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}

.bento-t .ft-list .ft-sec {
  margin: 10px 4px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

.bento-t .ft-list .ft-sec:first-child {
  margin-top: 0;
}

.ft-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: #FFFFFF;
}

.ft-row + .ft-row {
  margin-top: 4px;
}

.ft-row i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E3F0FD;
}

.ft-row i img {
  display: block;
}

.ft-row i svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #0A84FF;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bento-t .ft-row b {
  display: block;
  font-size: 0.875rem;
  color: var(--s-ink);
}

.bento-t .ft-row span {
  display: block;
  font-size: 0.75rem;
  color: var(--s-ink-2);
}

.bento-t .ft-row em {
  padding: 3px 8px;
  border-radius: 999px;
  background: #EDEDF0;
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--s-ink-2);
}

.bento-t .ft-row .ft-purple {
  background: #F3E8FF;
  color: #AF52DE;
}

/* Warm-up sets: the W dots before the working sets */
.ft-warm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: #FDEEEE;
}

.ft-dots {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 14px;
}

.ft-dots i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #C7C7CC;
  border-radius: 50%;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  color: var(--s-ink-2);
}

.ft-dots .ft-w {
  width: 20px;
  height: 20px;
  border-color: #E07070;
  font-size: 0.625rem;
  color: #C24E4E;
}

.ft-dots .ft-bar {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  border: 0;
  border-radius: 0;
  background: #C7C7CC;
}

.ft-blue-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0A84FF;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #FFFFFF;
}

.ft-blue-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rate your effort: 1 to 10 */
.ft-effort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ft-scale {
  padding: 16px;
  border-radius: 20px;
  background: var(--s-bg-2);
  text-align: center;
}

.bento-t .ft-scale p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--s-ink);
}

.bento-t .ft-scale strong {
  display: block;
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--s-ink);
}

.bento-t .ft-scale span {
  display: block;
  margin-bottom: 10px;
  font-size: 0.875rem;
  color: var(--s-ink-2);
}

.ft-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  height: 44px;
}

.ft-bars i {
  width: 11px;
  border-radius: 3px;
}

.ft-bars i.ft-off {
  opacity: 0.22;
}

/* Beat your best */
.ft-best {
  background: #F1F9E6;
}

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

.ft-confetti i {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
}

.bento-t .ft-new {
  position: relative;
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(28, 43, 46, 0.1);
  font-size: 0.875rem;
  color: var(--s-ink);
}

.bento-t .ft-new em {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: #34C759;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  color: #FFFFFF;
}

.ft-best h3,
.ft-best p {
  position: relative;
}

/* Swap: a lift swiped to show Swap and Remove */
.ft-swipe {
  display: flex;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 14px;
}

/* The row has slid left, so the start of the name is off the edge, as on iPhone */
.ft-swipe b {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
  padding: 12px 12px 12px 0;
  background: var(--s-bg-2);
  font-size: 0.875rem;
  white-space: nowrap;
}

.ft-swipe > span {
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #FFFFFF;
}

.ft-swipe .ft-indigo {
  background: #5856D6;
}

.ft-swipe .ft-red {
  background: #FF3B30;
}

/* Export: the spreadsheet, with the words under it */
.ft-export > div:first-child {
  margin-bottom: 16px;
}

.ft-sheet {
  overflow: hidden;
  border: 1px solid var(--s-line);
  border-radius: 14px;
  font-size: 0.75rem;
}

.ft-sheet > div {
  display: grid;
  grid-template-columns: 1.05fr 1.8fr 1fr 0.55fr;
  margin: 0;
}

.ft-sheet > div + div {
  border-top: 1px solid var(--s-line);
}

.ft-sheet span {
  overflow: hidden;
  padding: 7px 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--s-ink);
}

.ft-sheet span + span {
  border-left: 1px solid var(--s-line);
}

.ft-sheet .ft-head {
  background: #F0F9EA;
  font-weight: 700;
}

.bento-t .ft-file {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

/* Fitbod import: what came over */
.ft-import {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: #16262A;
}

.stacks-page main .ft-import h3 {
  color: #FFFFFF;
}

.ft-import p {
  color: #A9BDC2;
}

.ft-imported {
  display: grid;
  gap: 8px;
}

.bento-t .ft-imported p {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  color: #FFFFFF;
}

.ft-imported b {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: #8BD846;
}

.ft-more svg {
  stroke: #0A84FF;
}

@media (max-width: 599px) {
  .ft-warm,
  .ft-effort,
  .ft-import { grid-template-columns: minmax(0, 1fr); }
  /* The spreadsheet drops its Date column on a phone, so the rest stays readable */
  .ft-sheet > div { grid-template-columns: 1.9fr 1fr 0.55fr; }
  .ft-sheet > div > span:first-child { display: none; }
  .ft-sheet span + span { border-left: 0; }
  .ft-sheet span + span + span { border-left: 1px solid var(--s-line); }
}

/* ---------- October 23, 2026: the features since October 16 ----------
   Six tiles from the FITTR session's list, Davis: "perfect!". The app's own words and symbols (render-symbols.swift);
   the route, splits and times are made up. */

/* Walks and runs, mapped: the route with its miles, and the splits */
.ft-runmap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.ft-map svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.ft-mile circle {
  fill: #FFFFFF;
  stroke: #0A84FF;
  stroke-width: 2;
}

.ft-mile text {
  font: 700 9.5px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  fill: #0A84FF;
  text-anchor: middle;
}

.ft-splits {
  margin-bottom: 14px;
}

.bento-t .ft-splits p,
.bento-t .ft-best-list p {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--s-ink-2);
}

.ft-splits div {
  display: grid;
  grid-template-columns: 14px 40px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 0.8125rem;
}

.ft-splits span {
  color: var(--s-ink-2);
}

.ft-splits b,
.ft-best-list b {
  color: var(--s-ink);
  font-variant-numeric: tabular-nums;
}

.ft-splits i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #0A84FF;
}

/* Your best efforts */
.ft-efforts {
  background: #F1F9E6;
}

.ft-best-list {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
}

.ft-best-list div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.875rem;
  color: var(--s-ink);
}

.ft-best-list div + div {
  border-top: 1px solid var(--s-line);
}

/* Share any workout and Quick Workout: the app's menus */
.ft-menu {
  margin: 0 0 16px;
  padding: 4px 0;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 26px rgba(29, 29, 31, 0.12);
  list-style: none;
}

.ft-menu li {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  font-size: 0.875rem;
  color: var(--s-ink);
}

.ft-menu li.ft-line {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--s-line);
}

.ft-menu img {
  display: block;
  flex: none;
}

.ft-quick {
  background: #EAF7FC;
}

/* Start from anywhere: the Start Workout control */
.ft-start {
  background: #16262A;
}

.stacks-page main .ft-start h3 {
  color: #FFFFFF;
}

.ft-start p {
  color: #A9BDC2;
}

.ft-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin: 6px 0 18px;
}

.ft-control i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #0A84FF;
}

.ft-control i img {
  width: 28px;
  height: 28px;
}

.bento-t .ft-control span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #FFFFFF;
}

/* Pick your split: one of three, marked with a tint, not a check (Davis: a check reads as picking several) */
.ft-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: #FDEEEE;
}

.ft-splits-pick {
  display: grid;
  gap: 8px;
}

.bento-t .ft-splits-pick p {
  margin: 0;
  padding: 11px 14px;
  border-radius: 14px;
  background: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--s-ink);
}

.bento-t .ft-splits-pick p.ft-on {
  background: #0A84FF;
  color: #FFFFFF;
}

@media (max-width: 599px) {
  .ft-runmap,
  .ft-split { grid-template-columns: minmax(0, 1fr); }
}
/* end: Bento: FITTR (draft, 2026-10-16) */

/* ---------- App Store badge (2026-10-16) ----------
   Stacks 1.0 went live on the App Store on October 16, 2026. Apple's "Download on the App Store" badge replaces "Join
   the beta": Apple's artwork as it ships, black on the light bands, linking to the App Store page. */

.app-store-badge {
  display: inline-block;
  line-height: 0;
}

.app-store-badge img {
  display: block;
  width: auto;
  height: 48px;
}
/* end: App Store badge (2026-10-16) */

/* ---------- Modules (2026-10-17) ----------
   Parts that work the same way across nuttr.co (Davis: "we want to start to create almost like modules that work in
   similar ways to use across our site"). Learned from how Apple's pages work, drawn in NUTTR's look; see
   Personal Project Pages/Website Modules.md. Each one has a still version for Reduce Motion. */

/* Step tour: a list of steps beside the phone. The open step shows its line and the phone changes with it; the steps
   move on every 5 seconds while the tour is on screen (Davis picked it over a slider: "I think I prefer the stepp
   list"). Built by tools/make-tours.py from a page's screenshot row, with modules.js. */
.step-tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 32px;
  background: #FFFFFF;
}

:where(.s-section:not(.s-section--gray)) .step-tour {
  background: var(--s-bg-2);
}

.step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  border-radius: 24px;
  background: var(--s-bg-2);
}

:where(.s-section:not(.s-section--gray)) .step-list li {
  background: #FFFFFF;
}

.step-list button {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
  color: var(--s-ink);
  cursor: pointer;
}

.step-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  font-size: 0.8125rem;
  color: var(--nuttr-navy);
  transition: background 0.3s ease, color 0.3s ease;
}

:where(.s-section:not(.s-section--gray)) .step-n {
  background: var(--s-bg-2);
}

.step-list li.is-on .step-n {
  background: var(--nuttr-navy);
  color: #FFFFFF;
}

/* The open step's line slides open; the bar under it fills over the step's 5 seconds. */
.step-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.step-list li.is-on .step-more {
  grid-template-rows: 1fr;
}

.step-more > div {
  overflow: hidden;
}

.stacks-page main .step-more p {
  margin: 0;
  padding: 0 18px 4px 58px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--s-ink-2);
}

.step-bar {
  height: 3px;
  margin: 12px 18px 16px 58px;
  border-radius: 3px;
  background: var(--s-line);
  overflow: hidden;
}

.step-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--nuttr-navy);
}

.step-tour.is-running li.is-on .step-bar i {
  animation: step-fill 5s linear forwards;
}

@keyframes step-fill {
  to { width: 100%; }
}

/* The phone (or watch) for the open step fades and settles in. */
.step-stage {
  display: grid;
  justify-items: center;
  align-items: center;
}

.step-stage > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(0.97) translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.step-stage > .is-on {
  opacity: 1;
  transform: none;
}

.step-stage .f-device {
  width: clamp(220px, 24vw, 290px);
}

.step-stage .f-watch {
  width: clamp(160px, 17vw, 210px);
}

@media (max-width: 760px) {
  .step-tour { grid-template-columns: minmax(0, 1fr); }
  .step-stage { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .step-stage > *,
  .step-more,
  .step-n { transition: none; }
}

/* Arrival: each heading, line, tile and picture fades in and rises 24 px as it comes into view, 0.12 s after the one
   before. First lightened (Davis: "is it too much fading?"), then slowed so the motion shows (Davis: "maybe we slow the
   fade in down a bit so people can really appriciate it"). The hero and the details box at the bottom show at once
   (Davis: the details box with status and host app doesn't need to fade in). The homepage doesn't fade at all (Davis,
   October 19: "If homepage is going to have fade in effect it should have some purpose"); its flipper is its motion.
   The page's head script turns it on before the first paint, so nothing flashes; with Reduce Motion it
   stays off. Keep this list the same as ARRIVE in modules.js. :where() keeps the hidden state weak, so .arrived wins; the
   homepage test sits inside :where() too (outside it, it outranked .arrived and app pages stayed blank, October 19). */
html.arrive-on :where(body:not(.home)) main :where(.moment, .s-promise-item, .s-head > *, .s-h2-small,
  .f-ways-title, .eyebrow, .bento > *, .step-tour, .s-gallery-list > li, .s-features > *, .s-howlist > li,
  .s-score-lists > *, .f-also > li, .f-pair, .f-trends, .hud-diagram, .hud-legend > li) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--arrive-i, 0) * 0.12s);
}

html.arrive-on main .arrived {
  opacity: 1;
  transform: none;
}

/* Lock: a drawn lock above a privacy heading. The shackle starts open and snaps shut once, a moment after the section
   arrives; with Reduce Motion it's simply shut. */
.lock-moment {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  fill: var(--nuttr-navy);
  stroke: var(--nuttr-navy);
}

.lock-moment circle,
.lock-moment path:not(.lock-shackle) {
  fill: #FFFFFF;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
}

.lock-moment .lock-shackle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

html.arrive-on .lock-moment .lock-shackle {
  transform: translateY(-9px);
  transition: transform 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) 0.6s;
}

html.arrive-on .lock-moment.arrived .lock-shackle {
  transform: none;
}

/* The pictures at the top of a page fade in as each one loads (modules.js marks them) instead of popping in one by one
   after the words on a first visit (Davis: "the first load in still isn't great"). Only while arrival is on, so they
   show at once with Reduce Motion, or if the script doesn't load. */
html.arrive-on :is(.s-hero, .home-hero) img { transition: opacity 0.45s ease; }
html.arrive-on :is(.s-hero, .home-hero) img:not(.is-loaded) { opacity: 0; }

/* The homepage keeps still, apart from its flipper and one moment: the first app's phones pop up into place, one after
   another, as they come into view (Davis, October 19: "having the phones pop in or something could be cool for the
   first one then not for the rest"), gently: no bounce, a short rise and a slow fade ("The pop in on the phone is very
   abrupt"). modules.js marks them arrived once their pictures are ready. */
html.arrive-on .home .home-app--stacks .home-shots .phone { opacity: 0; transform: translateY(36px) scale(0.97); }
html.arrive-on .home .home-app--stacks .home-shots.arrived .phone {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease, transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.arrive-on .home .home-app--stacks .home-shots.arrived .phone:nth-child(2) { transition-delay: 0.2s; }
html.arrive-on .home .home-app--stacks .home-shots.arrived .phone:nth-child(3) { transition-delay: 0.4s; }
/* end: Modules (2026-10-17) */

/* ---------- Davevite moments (draft, 2026-10-17) ----------
   Davevite's own motion (Davis: "make those changes to Davevite so I can take a look"). In the step tour, "Next Up."
   plays a scene instead of a screenshot: the guests fill in, Drew can't come, and Gray Lawson moves from Next Up into
   the list as Invited. The names, pills and colors are the app's, from the Movie night screenshot. In the bento, the
   chips drop in, the poll bars grow, the text types in and the faces pop in, once, as each tile arrives. With Reduce
   Motion everything simply shows its final state. */

/* The scene: an app list, drawn */
.dv-scene {
  width: clamp(250px, 26vw, 310px);
  padding: 18px 14px;
  border-radius: 36px;
  background: #F2F2F7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(31, 40, 64, 0.16);
  font-size: 0.875rem;
  color: #1D1D1F;
}

.dv-scene .dv-scene-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.dv-scene ul,
.dv-scene ol {
  margin: 0;
  padding: 2px 12px;
  border-radius: 16px;
  background: #FFFFFF;
  list-style: none;
}

.dv-scene li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  font-weight: 600;
}

.dv-scene li + li {
  border-top: 1px solid #ECECEF;
}

.dv-scene li > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E04FA2;
}

.dv-scene li > i.b {
  background: #3E7BFA;
}

.dv-scene em {
  grid-column: 3;
  grid-row: 1;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
}

.dv-scene .go { background: #E3F6EA; color: #2E9E57; }
.dv-scene .maybe { background: #FFF0E0; color: #E07A1F; }
.dv-scene .cant { background: #EDEDF0; color: #8E8E93; }
.dv-scene .inv { background: #E3EEFF; color: #2F6FE0; }

.dv-scene .dv-scene-sub {
  margin: 14px 4px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8E8E93;
}

/* The play: on while the "Next Up." step is open */
.step-stage > .dv-scene.is-playing .dv-guests li {
  animation: dv-drop 0.45s ease both;
  animation-delay: calc(var(--d) * 0.18s);
}

.dv-scene .cant { opacity: 0; }
.step-stage > .dv-scene.is-playing .dv-drew .go { animation: dv-out 0.3s ease 1.5s both; }
.step-stage > .dv-scene.is-playing .dv-drew .cant { animation: dv-in 0.3s ease 1.5s both; }
.step-stage > .dv-scene.is-playing .dv-guests li.dv-drew { animation: dv-drop 0.45s ease 0.54s both, dv-dim 0.4s ease 1.6s forwards; }

.dv-scene .dv-gray { display: none; }
.step-stage > .dv-scene.is-playing .dv-guests li.dv-gray { display: grid; animation: dv-arrive 0.6s ease 2.3s both; }
.dv-scene .dv-next li { overflow: hidden; }
.step-stage > .dv-scene.is-playing .dv-next li:first-child { animation: dv-leave 0.5s ease 2.2s forwards; }
/* Harper becomes the first row, so her divider goes with Gray (Davis: "a double line ... above harper") */
.step-stage > .dv-scene.is-playing .dv-next li:nth-child(2) { animation: dv-unborder 0.5s ease 2.2s forwards; }
@keyframes dv-unborder { to { border-top-color: transparent; } }

@keyframes dv-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes dv-in { to { opacity: 1; } }
@keyframes dv-out { to { opacity: 0; } }
@keyframes dv-dim { to { color: #8E8E93; } }
/* Gray's row stays collapsed until it slides in, so there's no empty gap while it waits (Davis: "a weird white gap") */
@keyframes dv-arrive { from { opacity: 0; max-height: 0; padding-block: 0; border-top-width: 0; transform: translateY(30px); background: #E3EEFF; }
  to { max-height: 40px; } }
.dv-scene .dv-guests li.dv-gray { overflow: hidden; }
@keyframes dv-leave { from { max-height: 40px; } to { opacity: 0; max-height: 0; padding-block: 0; border-width: 0; } }

/* The bento's small moments, once each tile has arrived */
html.arrive-on .dv-chips li { opacity: 0; }
html.arrive-on .arrived .dv-chips li { animation: dv-drop 0.45s ease both; animation-delay: calc(0.3s + var(--c, 0) * 0.15s); opacity: 1; }
.dv-chips li:nth-child(2) { --c: 1; }
.dv-chips li:nth-child(3) { --c: 2; }

html.arrive-on .arrived .dv-bars i { animation: dv-grow 0.9s ease 0.3s both; }
@keyframes dv-grow { from { width: 0; } }

/* Texts for every moment: the typing dots pop in at the message's corner, pulse, then turn into the message */
.dv-typing { display: none; }
html.arrive-on .dv-texts .dv-typing {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px 18px 6px 18px;
  background: #34C759;
  opacity: 0;
  transform-origin: 100% 100%;
}
html.arrive-on .dv-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
html.arrive-on .dv-texts .dv-bubble { opacity: 0; transform-origin: 100% 100%; }
html.arrive-on .arrived .dv-typing { animation: dv-typing 1.6s ease 0.45s both; }
html.arrive-on .arrived .dv-typing i { animation: dv-blink 0.6s ease-in-out 0.75s 2; }
html.arrive-on .arrived .dv-typing i:nth-child(2) { animation-delay: 0.9s; }
html.arrive-on .arrived .dv-typing i:nth-child(3) { animation-delay: 1.05s; }
html.arrive-on .arrived .dv-bubble { animation: dv-bubble 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) 1.85s both; opacity: 1; }
@keyframes dv-typing { 0% { opacity: 0; transform: scale(0.5); } 18%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.8); } }
@keyframes dv-blink { 50% { opacity: 0.35; } }
@keyframes dv-bubble { from { opacity: 0; transform: scale(0.6); } }

.dv-faces i:nth-child(2) { --f: 1; }
.dv-faces i:nth-child(3) { --f: 2; }
.dv-faces i:nth-child(4) { --f: 3; }
html.arrive-on .arrived .dv-faces i { animation: dv-pop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.3s + var(--f, 0) * 0.12s) both; }
html.arrive-on .arrived .dv-faces i.out { animation: dv-pop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.3s + var(--f, 0) * 0.12s) both, dv-fade 0.5s ease 1.4s both; }
@keyframes dv-pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes dv-fade { from { background: #3E7BFA; color: #FFFFFF; } }

@media (prefers-reduced-motion: reduce) {
  .dv-scene .cant { opacity: 1; }
  .dv-scene .dv-drew .go { display: none; }
  .dv-scene .dv-gray { display: grid; }
  .dv-scene .dv-next li:first-child { display: none; }
  .dv-scene .dv-next li:nth-child(2) { border-top-color: transparent; }
}

/* "Your spot is ready.": the guest's page, drawn to match Davevite's own (Davevite/server/guest/template.html, from
   the Davevite session): the flap opens, then the invitation rises out of the envelope, between the coral lining and the
   folds, so the folds cover its lower part (Davis: "nail the letter interference overlap"). The hold bar counts down;
   the sprinkles and the sheet stay still, as on the real page (its confetti comes only after I'm In). Sizes, colors and
   timings are the page's, with the envelope scaled to the scene. */
.dv-guest {
  overflow: hidden;
  width: clamp(260px, 26vw, 300px);
  border-radius: 36px;
  background: #1C2740;
  box-shadow: 0 18px 40px rgba(22, 29, 48, 0.3);
  color: #FFF9EF;
  --navy: #2D466A; --navy-l: #344F76; --navy-r: #293F61; --navy-f: #3C587E; --flap: #3A5782; --coral: #FF776D; --cream: #FFF9EF; --ink: #243246;
}

.dv-g-top {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 13px 14px 11px;
  background: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dv-g-top svg { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; }
.dv-g-top b { margin-left: auto; padding: 3px 8px; border-radius: 8px; background: var(--coral); font-size: 0.875rem; font-variant-numeric: tabular-nums; color: #FFFFFF; }

.dv-g-stage { position: relative; height: 300px; overflow: hidden; }
.dv-guest .dv-g-brand { position: absolute; top: 14px; left: 0; right: 0; margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-align: center; color: rgba(255, 255, 255, 0.8); }

.dv-g-bits i { position: absolute; display: block; opacity: 0.9; }
.dv-g-bits .dot { width: 6px; height: 6px; border-radius: 50%; }
.dv-g-bits .cap { width: 4px; height: 12px; border-radius: 2px; }

.dv-g-env { position: absolute; left: 50%; bottom: 18px; width: 280px; height: 171px; margin-left: -140px; isolation: isolate; perspective: 900px; transform: scale(0.8); transform-origin: 50% 100%; }
.dv-g-env > div { position: absolute; }
.dv-g-env .back { z-index: 1; inset: 0; border-radius: 0; background: var(--navy); }
.dv-g-env .lining { z-index: 2; left: 0; right: 0; top: 0; height: 52%; background: #EC655C; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dv-g-env .letter { z-index: 3; left: 15px; right: 15px; top: 10px; height: 151px; padding: 17px 14px 0; border-radius: 10px; background: var(--cream); color: var(--ink); text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); transform: translateY(-131px) rotate(-3deg); }
.dv-g-env .letter b { display: block; margin-top: 2px; font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-size: 1.75rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.dv-g-env .letter i { display: block; width: 32px; height: 1px; margin: 10px auto; background: #DCD4C4; }
.dv-g-env .letter span { display: block; color: #4B5668; font-size: 0.8125rem; line-height: 1.45; }
.dv-g-env .letter em { display: block; margin-top: 7px; color: var(--navy); font-size: 0.5625rem; font-style: normal; font-weight: 800; letter-spacing: 0.14em; opacity: 0.8; }
.dv-g-env .fold { z-index: 4; inset: 0; border-radius: 0 0 14px 14px; }
.dv-g-env .fold.l { background: var(--navy-l); clip-path: polygon(0 0, 50% 38%, 0 100%); }
.dv-g-env .fold.r { background: var(--navy-r); clip-path: polygon(100% 0, 50% 38%, 100% 100%); }
.dv-g-env .fold.f { background: var(--navy-f); clip-path: polygon(0 100%, 50% 38%, 100% 100%); }
.dv-g-env .flap { z-index: 0; left: 0; right: 0; top: 0; height: 52%; background: var(--coral); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: rotateX(180deg); transform-origin: top; }
.dv-g-env .back { border-radius: 0 0 14px 14px; }

.dv-g-sheet { display: grid; gap: 4px; padding: 16px 14px 18px; border-radius: 22px 22px 0 0; background: #F2F3F6; color: #1F2840; font-size: 0.75rem; }
.dv-g-sheet em { justify-self: start; padding: 3px 9px; border-radius: 999px; background: #E3F6EA; font-style: normal; font-weight: 700; color: #2E9E57; }
.dv-g-sheet b { margin-top: 4px; font-size: 1.0625rem; letter-spacing: -0.01em; }
.dv-g-sheet span { color: #5B6475; }
.dv-g-sheet u { margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--navy); font-weight: 600; text-align: center; text-decoration: none; color: #FFFFFF; }

/* The play, Davevite's own timings: the flap opens (0.7 s after 0.35 s), the top corners square off, the card rises */
.step-stage > .dv-guest.is-playing .dv-g-env .flap { animation: dvg-flap 0.7s 0.35s ease-in-out both; }
.step-stage > .dv-guest.is-playing .dv-g-env :is(.back, .lining, .fold.l, .fold.r) { animation: dvg-square 0.7s 0.35s ease-in-out both; }
.step-stage > .dv-guest.is-playing .dv-g-env .letter { animation: dvg-rise 0.9s 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes dvg-flap {
  0% { z-index: 5; background: var(--flap); transform: rotateX(0); border-radius: 14px 14px 0 0; }
  49.9% { z-index: 5; background: var(--flap); transform: rotateX(89.8deg); border-radius: 14px 14px 0 0; }
  50% { z-index: 0; background: var(--coral); transform: rotateX(90deg); border-radius: 0; }
  100% { z-index: 0; background: var(--coral); transform: rotateX(180deg); border-radius: 0; }
}
@keyframes dvg-square { 0%, 50% { border-top-left-radius: 14px; border-top-right-radius: 14px; } 100% { border-top-left-radius: 0; border-top-right-radius: 0; } }
@keyframes dvg-rise { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-131px) rotate(-3deg); } }

/* Until a scene plays it holds its first frame, so the finished state never shows first (Davis, on Stacks: "the end of
   the animation shows first then starts"): no guests on the list yet, and the card sealed in its envelope. Only with
   motion on; otherwise the finished state shows. */
html.arrive-on .step-stage > .dv-scene:not(.is-playing) .dv-guests li { opacity: 0; }
html.arrive-on .step-stage > .dv-guest:not(.is-playing) .dv-g-env .flap { z-index: 5; background: var(--flap); transform: rotateX(0); border-radius: 14px 14px 0 0; }
html.arrive-on .step-stage > .dv-guest:not(.is-playing) .dv-g-env :is(.back, .lining, .fold.l, .fold.r) { border-top-left-radius: 14px; border-top-right-radius: 14px; }
html.arrive-on .step-stage > .dv-guest:not(.is-playing) .dv-g-env .letter { transform: translateY(0) rotate(0deg); }
/* end: Davevite moments (draft, 2026-10-17) */

/* ---------- Stacks moments (draft, 2026-10-17) ----------
   Stacks' tour as a scene instead of screenshots (Davis: "show an animation of multiple photos coming together,
   getting stacked and merged into one"). Four photos of the dog in the tulips, in the app's own order (IMG_2939, the
   photo Stacks picks as best, first). The tour's steps drive it through tools/modules.js, which sets data-step:
   1 Moments: a camera-roll grid slides into one pile. 2 Swipe: the pile fans out best first, and the extra photo goes.
   3 Cover photo: the keepers stack with the best on top, starred. 4 Stacked: the stack shrinks into one tile in the
   photo library, with a burst badge and its count (Davis: "the key part ... is they become one burst in your
   photolibrary").
   Nothing here says how the best is picked. With Reduce Motion each step simply shows its final state. */

.st-scene {
  position: relative;
  width: clamp(280px, 30vw, 340px);
  aspect-ratio: 32 / 42;
}

.st-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(29, 29, 31, 0.18);
  transform: var(--pile);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}

.st-card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

/* Where each photo sits, per step: a grid, a pile, a fan, a stack and a neat stack. The extra one (c4) leaves. */
.st-card.c1 { z-index: 4; --grid: translate(-50%, -50%) translate(-56%, -56%) scale(0.8); --pile: translate(-50%, -50%) rotate(-3deg);
  --fan: translate(-50%, -50%) translate(-64%, 4%) rotate(-9deg) scale(0.88); --stack: translate(-50%, -50%);
  --neat: translate(-50%, -50%) translate(-3%, -3%); }
.st-card.c2 { z-index: 3; --grid: translate(-50%, -50%) translate(56%, -56%) scale(0.8); --pile: translate(-50%, -50%) translate(5%, -3%) rotate(4deg);
  --fan: translate(-50%, -50%) translate(-21%, 0) rotate(-3deg) scale(0.88); --stack: translate(-50%, -50%) translate(5%, 4%) rotate(3deg);
  --neat: translate(-50%, -50%) translate(1%, 1%); }
.st-card.c3 { z-index: 2; --grid: translate(-50%, -50%) translate(-56%, 56%) scale(0.8); --pile: translate(-50%, -50%) translate(-5%, 3%) rotate(-7deg);
  --fan: translate(-50%, -50%) translate(21%, 0) rotate(3deg) scale(0.88); --stack: translate(-50%, -50%) translate(9%, 8%) rotate(6deg);
  --neat: translate(-50%, -50%) translate(5%, 5%); }
.st-card.c4 { z-index: 1; --grid: translate(-50%, -50%) translate(56%, 56%) scale(0.8); --pile: translate(-50%, -50%) translate(6%, 4%) rotate(8deg);
  --fan: translate(-50%, -50%) translate(64%, 4%) rotate(9deg) scale(0.88);
  --out: translate(-50%, -50%) translate(70%, 75%) rotate(18deg) scale(0.8); }

[data-step="2"] .st-card { transform: var(--fan); }
[data-step="3"] .st-card { transform: var(--stack); }
[data-step="4"] .st-card { transform: var(--lib); }
:is([data-step="3"], [data-step="4"]) .st-card.c4 { transform: var(--out); opacity: 0; }

/* The play, while the scene is on screen (modules.js adds .is-playing) */
/* From the last step back to the first, the library clears before the four photos fade in and gather (Davis: "the
   flow from 4 to one has some overlap") */
[data-step="1"] .st-scene.is-playing .st-card { animation: st-gather 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
/* Until it plays, step 1 holds its first frame (no photos yet), so the finished pile never shows first and then jumps
   back (Davis: "the end of the animation shows first then starts"). Only with motion on; otherwise the pile shows. */
html.arrive-on [data-step="1"] .st-scene:not(.is-playing) .st-card { transform: var(--grid); opacity: 0; transition: none; }
[data-step="2"] .st-scene.is-playing .st-card.c4 { animation: st-out 0.7s ease 2s forwards; }
@keyframes st-gather { 0% { transform: var(--grid); opacity: 0; } 25% { transform: var(--grid); opacity: 1; } 100% { transform: var(--pile); opacity: 1; } }
@keyframes st-out { from { transform: var(--fan); opacity: 1; } to { transform: var(--out); opacity: 0; } }

/* Badges, as the app shows them: the star on the best photo, the trash on the one that goes, the stack's count */
.st-card > i {
  position: absolute;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
  transform: scale(0.6);
}

.st-card svg {
  width: 16px;
  height: 16px;
}

.st-star,
.st-trash {
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.st-star { background: #FFC300; }
.st-star svg { fill: #FFFFFF; }
.st-trash { background: #FF3B30; }
.st-trash svg { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.st-count {
  top: 8px;
  right: 8px;
  gap: 4px;
  grid-auto-flow: column;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.55);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  color: #FFFFFF;
}

.st-count svg { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linejoin: round; }

[data-step="2"] .st-card.c4 .st-trash,
:is([data-step="3"], [data-step="4"]) .st-card.c1 .st-star,
[data-step="4"] .st-card.c1 .st-count { opacity: 1; transform: none; }
[data-step="2"] .st-card.c4 .st-trash { transition-delay: 1.2s; }
[data-step="3"] .st-card.c1 .st-star { transition-delay: 0.9s; }
[data-step="4"] .st-card.c1 .st-count { transition-delay: 1s; }

/* Step 4: the photo library around the burst. The stack becomes the middle tile of a 3 x 3 grid. */
.st-card.c1 { --lib: translate(-50%, -50%) scale(0.66); }
.st-card.c2 { --lib: translate(-50%, -50%) translate(2%, 2%) scale(0.66); }
.st-card.c3 { --lib: translate(-50%, -50%) translate(4%, 4%) scale(0.66); }
.st-library {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.st-library img, .st-library span {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  object-fit: cover;
}
[data-step="4"] .st-library { opacity: 1; transition: opacity 0.6s ease 0.5s; }
[data-step="4"] .st-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 9px; }
[data-step="4"] .st-card img { border-radius: 9px; }
[data-step="4"] .st-card.c1 .st-star { opacity: 0; }
.st-count { top: 6px; left: 6px; right: auto; }

@media (prefers-reduced-motion: reduce) {
  .st-card, .st-card > i { transition: none; }
  .st-scene.is-playing .st-card { animation: none !important; }
  [data-step="2"] .st-card.c4 { opacity: 0.4; }
}

/* The beta, under the hero's buttons (Davis, October 19): a quiet line, with the App Store badge staying the one main
   action */
.s-beta { margin: 14px 0 0; font-size: 0.9375rem; color: var(--s-ink-2, #6E6E73); }
.s-beta a { color: var(--s-link, #0066CC); text-decoration: none; white-space: nowrap; }
.s-beta a:hover { text-decoration: underline; }

/* Clean Up (Stacks 1.2, October 23, 2026) is a second tour, on the light blue band between "Pick. Swipe. Stack." (gray)
   and "Knows a good photo when it sees one." (white). Its panel is white with gray steps, as the first tour's is on gray. */
#clean-up .step-tour { background: #FFFFFF; }
#clean-up .step-list li { background: var(--s-bg-2); }
/* end: Stacks moments (draft, 2026-10-17) */

/* ---------- FITTR moments (draft, 2026-10-17) ----------
   FITTR's own motion (Davis: "seems like there is a ton of opportunity is the fitter page to show elements moving like
   hr zones"). Drawn from the app's own screens: the watch's heart rate with its zone pill, History's trends and the
   workout list. Each plays once as its piece arrives (modules.js); numbers count up to the app's values. Nothing says how
   FITTR decides anything. With Reduce Motion everything shows its final state. */

/* Progress you can see: History's trends, drawn (the second copy of that screenshot is gone) */
.ft-history {
  width: clamp(270px, 27vw, 320px);
  margin: 0;
  padding: 20px 14px;
  border-radius: 36px;
  background: #F2F2F7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(22, 38, 42, 0.14);
  justify-self: center;
}

.ft-history .ft-h-title {
  margin: 0 6px 10px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1D1D1F;
}

.ft-history .ft-h-sub {
  margin: 0 6px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8E8E93;
}

.ft-history ul {
  margin: 0;
  padding: 2px 12px;
  border-radius: 16px;
  background: #FFFFFF;
  list-style: none;
}

.ft-history li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1D1D1F;
}

.ft-history li + li {
  border-top: 1px solid #ECECEF;
}

.ft-history li i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #34C759;
}

.ft-history li i svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ft-history li em {
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 500;
  color: #8E8E93;
}

html.arrive-on .ft-history.arrived li { animation: ft-in 0.5s ease both; }
html.arrive-on .ft-history.arrived li i { animation: ft-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.ft-history li:nth-child(1), .ft-history li:nth-child(1) i { animation-delay: 0.35s !important; }
.ft-history li:nth-child(2), .ft-history li:nth-child(2) i { animation-delay: 0.5s !important; }
.ft-history li:nth-child(3), .ft-history li:nth-child(3) i { animation-delay: 0.65s !important; }
.ft-history li:nth-child(4), .ft-history li:nth-child(4) i { animation-delay: 0.8s !important; }
.ft-history li:nth-child(5), .ft-history li:nth-child(5) i { animation-delay: 0.95s !important; }

/* The elliptical warm-up, live: the heart rate climbs, the zone steps up and the 10 minutes fill */
.ft-row.ft-live {
  position: relative;
  overflow: hidden;
}

/* Stronger than the row's own span style, which puts every span on its own line */
.bento-t .ft-row .ft-hr {
  display: flex;
  gap: 0;
  align-items: center;
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1D1D1F;
}

.bento-t .ft-row .ft-hr span { display: inline; font-size: inherit; color: inherit; }

/* One space between the number and bpm, a little more before the zone; the zone is only its own colored pill */
.bento-t .ft-row .ft-hr [data-count] { margin: 0 0.3em 0 5px; }
.bento-t .ft-row .ft-zone { margin-left: 7px; padding: 0; border-radius: 0; background: none; }

.ft-hr svg {
  width: 12px;
  height: 12px;
  fill: #FF3B30;
}

.ft-zone {
  display: inline-grid;
  font-style: normal;
}

.ft-zone s {
  grid-area: 1 / 1;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
}

.ft-zone .z2 { background: #30D158; color: #FFFFFF; opacity: 0; }
.ft-zone .z3 { background: #FFD60A; color: #1D1D1F; opacity: 0; }
.ft-zone .z4 { background: #FF9F0A; color: #1D1D1F; }

.ft-live .ft-progress {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: #0A84FF;
  text-decoration: none;
}

html.arrive-on .arrived .ft-zone .z2 { animation: ft-show 0.3s ease 0s both, ft-hide 0.3s ease 0.9s forwards; }
html.arrive-on .arrived .ft-zone .z3 { animation: ft-show 0.3s ease 0.9s both, ft-hide 0.3s ease 1.8s forwards; }
html.arrive-on .arrived .ft-zone .z4 { animation: ft-show 0.3s ease 1.8s both; }
html.arrive-on .arrived .ft-hr svg { animation: ft-beat 0.9s ease-in-out 3; }
html.arrive-on .arrived .ft-live .ft-progress { animation: ft-fill 2.6s linear 0.2s both; }

/* Warm-up sets: the W dots fill, then set 1 is up */
html.arrive-on .arrived .ft-dots .ft-w { animation: ft-wfill 0.35s ease forwards; }
html.arrive-on .arrived .ft-dots .ft-w:nth-child(1) { animation-delay: 0.45s; }
html.arrive-on .arrived .ft-dots .ft-w:nth-child(2) { animation-delay: 0.95s; }
html.arrive-on .arrived .ft-dots i:nth-child(4) { animation: ft-current 0.35s ease 1.45s forwards; }

/* Rate your effort: the bars rise, then the 7 lands (the 7 counts up in modules.js) */
html.arrive-on .arrived .ft-bars i { animation: ft-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ft-bars i:nth-child(2) { animation-delay: 0.06s !important; }
.ft-bars i:nth-child(3) { animation-delay: 0.12s !important; }
.ft-bars i:nth-child(4) { animation-delay: 0.18s !important; }
.ft-bars i:nth-child(5) { animation-delay: 0.24s !important; }
.ft-bars i:nth-child(6) { animation-delay: 0.3s !important; }
.ft-bars i:nth-child(7) { animation-delay: 0.36s !important; }
.ft-bars i:nth-child(8) { animation-delay: 0.42s !important; }
.ft-bars i:nth-child(9) { animation-delay: 0.48s !important; }
.ft-bars i:nth-child(10) { animation-delay: 0.54s !important; }

/* Beat your best: confetti, then the New Best pill */
html.arrive-on .arrived .ft-confetti i { animation: ft-confetti 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ft-confetti i:nth-child(2) { animation-delay: 0.05s !important; }
.ft-confetti i:nth-child(3) { animation-delay: 0.1s !important; }
.ft-confetti i:nth-child(4) { animation-delay: 0.15s !important; }
.ft-confetti i:nth-child(5) { animation-delay: 0.2s !important; }
.ft-confetti i:nth-child(6) { animation-delay: 0.25s !important; }
.ft-confetti i:nth-child(7) { animation-delay: 0.3s !important; }
.ft-confetti i:nth-child(8) { animation-delay: 0.35s !important; }
html.arrive-on .arrived .ft-new em { animation: ft-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s both; }

/* Swap: the row slides open to show Swap and Remove */
.ft-swipe > span { max-width: 100px; overflow: hidden; white-space: nowrap; }
html.arrive-on .arrived .ft-swipe > span { animation: ft-reveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }

/* Export: the spreadsheet's rows fill in */
html.arrive-on .arrived .ft-sheet > div:not(.ft-head) { animation: ft-in 0.4s ease both; }
html.arrive-on .arrived .ft-sheet > div:nth-child(2) { animation-delay: 0.3s; }
html.arrive-on .arrived .ft-sheet > div:nth-child(3) { animation-delay: 0.5s; }
html.arrive-on .arrived .ft-sheet > div:nth-child(4) { animation-delay: 0.7s; }

@keyframes ft-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ft-pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes ft-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes ft-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes ft-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } }
@keyframes ft-fill { from { width: 0; } to { width: 100%; } }
@keyframes ft-wfill { to { background: #E07070; border-color: #E07070; color: #FFFFFF; } }
@keyframes ft-current { to { border-color: #0A84FF; color: #0A84FF; } }
@keyframes ft-rise { from { height: 3px; } }
@keyframes ft-confetti { from { opacity: 0; transform: translateY(-36px) rotate(0deg); } 40% { opacity: 1; } }
@keyframes ft-reveal { from { max-width: 0; padding-inline: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ft-zone .z2, .ft-zone .z3 { display: none; }
}

/* Every set on your wrist: the Lock Screen and the watch side by side, never overlapping. The rest before set 3 counts
   down on the Lock Screen (modules.js ticks the clock; the bar shrinks with it), then a double tap on the watch flashes
   Log Set 3 and the third dot fills with a check. Positions are the screenshots' own pixels, as percentages. */
.ft-pair {
  display: flex;
  gap: 5%;
  align-items: center;
  justify-content: center;
  width: min(100%, 490px);
}

.ft-pair-phone,
.ft-pair-watch {
  position: relative;
  flex: none;
  container-type: inline-size;
  line-height: 0;
}

.ft-pair-phone { width: 55%; }
.ft-pair-watch { width: 39.6%; }

.step-stage .ft-pair .f-device {
  width: 100%;
  height: auto;
}

.ft-pair i,
.ft-pair b {
  position: absolute;
  display: block;
}

/* The clock: SF Pro Rounded Bold 32 pt in the Live Activity, right-aligned where the app sets it */
.ft-pair-patch { left: 71.1%; top: 68.9%; width: 17.8%; height: 3.7%; background: #000000; }
.ft-pair-clock {
  right: 12.56%;
  top: 69.04%;
  font: 700 7.11cqw/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0091FF;
}

/* The rest bar: 73 of 90 seconds left */
.ft-pair-bar { left: 12%; top: 76.3%; width: 75.8%; height: 0.44%; border-radius: 999px; background: #1C1C1C; overflow: hidden; }
.ft-pair-bar i { position: static; width: 81.1%; height: 100%; border-radius: inherit; background: #0091FF; }

/* Log Set 3's flash, and the check that fills the third dot */
.ft-pair-press { left: 20.33%; top: 58.23%; width: 59.33%; height: 11.46%; border-radius: 999px; background: #FFFFFF; opacity: 0; }
.ft-pair-check {
  left: 55.25%;
  top: 52.4%;
  width: 6.83%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #30D158;
  box-shadow: 0 0 0 0.6cqw #05060F;
  opacity: 0;
}
.ft-pair-check svg { width: 100%; height: 100%; fill: none; stroke: #001800; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.step-stage > .ft-pair.is-playing .ft-pair-bar i { animation: ft-rest 73s linear forwards; }
.step-stage > .ft-pair.is-playing .ft-pair-press { animation: ft-press 0.65s ease 2.6s both; }
.step-stage > .ft-pair.is-playing .ft-pair-check { animation: ft-logged 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 3.25s both; }

@keyframes ft-rest { from { width: 81.1%; } to { width: 0; } }
@keyframes ft-press { 0%, 100% { opacity: 0; } 18% { opacity: 0.3; } 42% { opacity: 0.04; } 64% { opacity: 0.3; } }
@keyframes ft-logged { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .step-stage > .ft-pair.is-playing * { animation: none !important; }
}
/* end: FITTR moments (draft, 2026-10-17) */

/* ---------- HUD Map moments (draft, 2026-10-17) ----------
   HUD Map's bento comes alive as each tile arrives (Davis: "you can work on that and the menu maid page too"). The
   hero drawing and "Under the hood." stay as they are; Davis likes their animation. Each tile plays once, except the
   Rerouting spinner, which spins like the app's. With Reduce Motion everything shows its final state. */

/* Turns on the glass: the big arrow draws itself, then the arrows the glass can show light up one by one */
.hm-glass .hm-turn path { stroke-dasharray: 80; }
html.arrive-on .arrived.hm-glass .hm-turn path { animation: hm-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; }
html.arrive-on .arrived.hm-glass .hm-set li { animation: hm-light 0.5s ease both; }
.hm-set li:nth-child(1) { animation-delay: 1.2s !important; }
.hm-set li:nth-child(2) { animation-delay: 1.35s !important; }
.hm-set li:nth-child(3) { animation-delay: 1.5s !important; }
.hm-set li:nth-child(4) { animation-delay: 1.65s !important; }
.hm-set li:nth-child(5) { animation-delay: 1.8s !important; }
.hm-set li:nth-child(6) { animation-delay: 1.95s !important; }
.hm-set li:nth-child(7) { animation-delay: 2.1s !important; }

/* Follows the drive: the distance counts down (modules.js); Rerouting spins */
.hm-follow .bento-num b { font: inherit; }
.hm-spin { animation: hm-spin 0.9s linear infinite; }

/* Keeps up with traffic: the Faster Route banner drops in, then Accept pulses */
html.arrive-on .arrived .hm-banner { animation: hm-drop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }
html.arrive-on .arrived .hm-buttons .hm-blue { animation: hm-pulse 0.6s ease 1.3s both; }

/* Find Nearby, Places, CarPlay and the passenger's screen: their rows and buttons come in one by one */
html.arrive-on .arrived :is(.hm-chips > span, .hm-row, .hm-dash > div, .hm-pass div span) {
  animation: hm-in 0.45s ease both;
}
.hm-chips > span:nth-child(2), .hm-row + .hm-row, .hm-dash > div:nth-child(2),
.hm-pass div span:nth-child(2) { animation-delay: 0.15s !important; }
.hm-chips > span:nth-child(3), .hm-pass div span:nth-child(3) { animation-delay: 0.3s !important; }
html.arrive-on .arrived .hm-nearby .hm-row { animation-delay: 0.5s !important; }
html.arrive-on .arrived .hm-nearby .hm-row + .hm-row { animation-delay: 0.65s !important; }

/* 3D map: the car's arrow glides up the road */
html.arrive-on .arrived .hm-3d .hm-car { animation: hm-glide 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both; }

@keyframes hm-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes hm-light { from { opacity: 0.12; filter: none; } }
@keyframes hm-spin { to { transform: rotate(360deg); } }
@keyframes hm-drop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes hm-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
@keyframes hm-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes hm-glide { from { transform: translateY(26px); } }

@media (prefers-reduced-motion: reduce) {
  .hm-spin { animation: none; }
}

/* Heads up.: the watch gives its tap before the turn (a small pulse, never a tilt), and the traffic light the directions
   name pulses on the iPhone's map, at its spot in the screenshot (299, 359 of 600 x 1227) */
.step-stage > .hm-tap.is-playing { animation: hm-tap 1s ease 1.1s 2; }

.hm-shot {
  position: relative;
  line-height: 0;
}

.hm-ping {
  position: absolute;
  left: 49.83%;
  top: 29.26%;
  width: 9%;
  aspect-ratio: 1;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.45), inset 0 0 0 1px rgba(10, 132, 255, 0.45);
  translate: -50% -50%;
  opacity: 0;
}

.step-stage > .hm-shot.is-playing .hm-ping { animation: hm-ping 1.5s ease-out 0.7s 2; }
.step-stage > .hm-shot.is-playing .hm-ping + .hm-ping { animation-delay: 1.2s; }

@keyframes hm-tap { 0%, 34%, 100% { transform: none; } 12% { transform: scale(1.03); } 24% { transform: scale(0.995); } }
@keyframes hm-ping { 0% { opacity: 0.95; transform: scale(0.45); } 100% { opacity: 0; transform: scale(1.7); } }

@media (prefers-reduced-motion: reduce) {
  .step-stage > .hm-tap.is-playing,
  .step-stage > .hm-shot.is-playing .hm-ping { animation: none; }
}
/* end: HUD Map moments (draft, 2026-10-17) */

/* ---------- Menu Maid moments (draft, 2026-10-17) ----------
   Menu Maid's hero shows what it does, on a loop: a pointer clicks Menu Maid's », the icons to its left tuck away and »
   turns to «, then a click on « brings them back. The label above follows: Shown, Hidden, Shown. It replaces the two
   still bars. With Reduce Motion the bar simply shows every icon. */

.mm-live .mm-label {
  display: inline-grid;
}

.mm-live .mm-label span,
.mm-live .mm-arrow span {
  grid-area: 1 / 1;
}

.mm-live .mm-arrow {
  position: relative;
  display: inline-grid;
}

.mm-live .mm-icons {
  display: inline-flex;
  flex: none;
  gap: clamp(12px, 2.4vw, 18px);
  max-width: 160px;
  overflow: hidden;
}

.mm-live .mm-hidden,
.mm-live .mm-show {
  opacity: 0;
}

/* The pointer, the Mac's own shape */
.mm-cursor {
  position: absolute;
  top: 55%;
  left: 40%;
  width: 18px;
  height: 18px;
  opacity: 0;
  pointer-events: none;
}

.mm-bar .mm-cursor svg {
  width: 18px;
  height: 18px;
  fill: #FFFFFF;
  stroke: #1D1D1F;
  stroke-width: 1;
}

html:not(.arrive-on) .mm-live * { animation: none !important; }
.mm-live .mm-icons { animation: mm-icons 7s ease-in-out infinite; }
.mm-live .mm-hide, .mm-live .mm-shown { animation: mm-first 7s ease-in-out infinite; }
.mm-live .mm-show, .mm-live .mm-hidden { animation: mm-second 7s ease-in-out infinite; }
.mm-live .mm-cursor { animation: mm-cursor 7s ease-in-out infinite; }

@keyframes mm-icons {
  0%, 26% { max-width: 160px; opacity: 1; }
  34%, 66% { max-width: 0; opacity: 0; }
  74%, 100% { max-width: 160px; opacity: 1; }
}
@keyframes mm-first { 0%, 28% { opacity: 1; } 31%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes mm-second { 0%, 28% { opacity: 0; } 31%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes mm-cursor {
  0%, 10% { opacity: 0; transform: translate(14px, 10px); }
  18% { opacity: 1; transform: none; }
  23% { transform: scale(0.8); }
  27% { transform: none; opacity: 1; }
  36%, 52% { opacity: 0; }
  60% { opacity: 1; transform: none; }
  65% { transform: scale(0.8); }
  69% { transform: none; opacity: 1; }
  78%, 100% { opacity: 0; transform: translate(14px, 10px); }
}
/* end: Menu Maid moments (draft, 2026-10-17) */