.mobile-day-intro { display: none; }

@media (max-width: 767px) {
  .page-wrapper {
    /* 18px at the approved 390px viewport; follows the shared fluid rem scale. */
    --mobile-section-copy-gap: 1.125rem;
    /* 15.5px at 390px, with the same continuous mobile progression. */
    --mobile-section-copy-font-size: max(15.5px, .96875rem);
    --mobile-section-indication-font-size: max(14.5px, .90625rem);
    --mobile-section-button-font-size: var(--mobile-section-copy-font-size);
    --mobile-section-subtitle-font-size: clamp(19px, 6vw, 26px);
    --mobile-section-subtitle-font-weight: 500;
    --mobile-section-copy-color: #a0a0a0;
  }
  .page-wrapper .section.is--tracker .tracker-row > .day.is--first {
    color: #fff !important;
  }
  .page-wrapper .section.is--tracker .tracker-row > .day.is--first[data-mobile-muted-habit] {
    color: rgba(255, 255, 255, .55) !important;
  }
  .page-wrapper .section.is--tracker {
    --mobile-tracker-muted-ink: var(--light-050, rgba(255, 255, 255, .5));
  }
  .page-wrapper .section.is--tracker .tracker-header .tracker-wrapper-mobile > .day:not(.the-day),
  .page-wrapper .section.is--tracker .tracker-header > .day.is-purge {
    color: var(--mobile-tracker-muted-ink);
  }
  .page-wrapper .section.is--tracker .tracker-row .tracker-wrapper-mobile > .tracker-checkbox:not(.is--button),
  .page-wrapper .section.is--tracker .tracker-row > .tracker-checkbox.is--last {
    border-color: var(--mobile-tracker-muted-ink);
    opacity: 1;
  }
  .page-wrapper .section.is--tracker .tracker-row .tracker-wrapper-mobile > .tracker-checkbox:not(.is--button) .tracker-checkbox-inside {
    background-color: var(--mobile-tracker-muted-ink);
  }
  .page-wrapper .mobile-day-intro__copy,
  .page-wrapper .mobile-programme__intro,
  .page-wrapper .section.is--tracker .mobile-tracker-copy > .wrapper-p .text-section,
  .page-wrapper .mobile-tree-redesign__copy-text,
  .page-wrapper .container.is--map .t-p {
    color: var(--mobile-section-copy-color);
  }
  .page-wrapper .section.is--tracker .mobile-tracker-copy > .wrapper-p .text-section,
  .page-wrapper .mobile-tree-redesign__copy-text,
  body .page-wrapper .mobile-tree-redesign__formula-text,
  .page-wrapper .container.is--map .t-p {
    font-size: var(--mobile-section-copy-font-size);
  }
  .mobile-day-intro {
    --day-intro-top-gap: clamp(40px, 8svh, 68px);
    /* Extra space revealed by Safari stays below the composition, so the
       cycle does not recenter while the browser bar opens or closes. */
    --day-intro-bottom-gap: calc(var(--day-intro-top-gap) + max(0px,
      var(--mobile-screen-height, var(--mobile-stable-viewport-height, 100svh))
      - var(--mobile-stable-viewport-height, 100svh)
    ));
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--mobile-stable-viewport-height, 100svh);
    padding: var(--day-intro-top-gap) var(--mobile-section-copy-inset, 25px) var(--day-intro-bottom-gap);
    background: var(--black);
    color: var(--blanc);
    font-family: Bourgeois, Arial, sans-serif;
    overflow-anchor: none;
  }
  .mobile-day-intro__title {
    flex: none;
    margin: 0;
    font-size: var(--mobile-section-title-font-size, 2.3rem);
    font-weight: inherit;
    line-height: .95;
    text-transform: uppercase;
  }
  .mobile-day-intro__title span { color: var(--yellow); }
  .mobile-day-intro__copy,
  .mobile-day-cycle__phrase {
    font-size: var(--mobile-section-copy-font-size);
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
  }
  .mobile-day-intro__copy {
    flex: none;
    margin: var(--mobile-section-copy-gap, 1.125rem) 0 0;
  }
  .mobile-day-intro__copy p { margin: 0; font: inherit; }
  .mobile-day-intro__copy p + p { margin-top: 1.25em; }
  .mobile-day-intro__moments {
    --day-cycle-diagram-width: 88%;
    width: 100%;
    flex: none;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cycle' 'readout';
    align-items: center;
    gap: 12px;
    position: relative;
    /* Share the free space below the paragraph above and below the cycle.
       Padding preserves a readable minimum gap on shorter screens. */
    margin-block: auto;
    padding-block: 24px 16px;
    text-align: center;
  }
  .mobile-day-intro__moments reboot-day-cycle {
    --rc-cycle-ring-gold: var(--yellow);
    grid-area: cycle;
    display: block;
    width: var(--day-cycle-diagram-width);
    max-width: 100%;
    aspect-ratio: 360 / 190;
    margin: 0 auto;
  }
  .mobile-day-cycle__readout {
    grid-area: readout;
    position: relative;
    /* Keep all three readouts aligned, 20px below their previous position. */
    top: calc(-3px + var(--mobile-section-subtitle-font-size) * .164);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    width: 100%;
    /* Reserve one heading, its gap and two description lines at every size. */
    height: calc(var(--mobile-section-subtitle-font-size) * 1.1 + var(--mobile-section-copy-font-size) * 2.5 + 8px);
    min-width: 0;
    /* Also halve the SVG's 10/360-width inset below the horizontal line. */
    margin: calc(var(--day-cycle-diagram-width) / -72) auto 0;
    text-align: center;
    opacity: 1;
  }
  .mobile-day-cycle__moment { grid-area: 1 / 1; width: 100%; min-width: 0; }
  .mobile-day-cycle__moment[hidden] { display: none !important; }
  .mobile-day-cycle__label {
    margin: 0;
    color: var(--yellow);
    font-size: var(--mobile-section-subtitle-font-size);
    font-weight: var(--mobile-section-subtitle-font-weight);
    line-height: 1.1;
    text-transform: uppercase;
  }
  .mobile-day-cycle__phrase {
    margin: 8px 0 0;
    color: var(--blanc);
    text-transform: uppercase;
    opacity: 1;
  }
  .mobile-day-intro .mobile-day-intro__origins {
    display: none;
    flex: none;
    margin-top: calc(16px + var(--mobile-experience-button-offset, 0px));
    align-items: flex-start;
  }
  .mobile-day-intro .mobile-day-intro__origins .hero-video-cta {
    width: 13rem;
    height: auto;
  }
  .mobile-day-intro .mobile-day-intro__origins .hero-video-cta__content { gap: .6rem; }
  .mobile-day-intro .mobile-day-intro__origins .hero-video-cta__title {
    letter-spacing: inherit;
    line-height: inherit;
  }
}