/* Complete responsive sections stay in normal document flow. */
.care-day-section { padding-block: 80px; }
.care-section-kicker { color: var(--wine); font-size: 13px; font-weight: 700; }
.care-flow-stop { position: relative; background: var(--software-paper); }
.care-flutter-snapshot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.care-story.is-flow [data-care-section] {
  position: relative; width: min(1440px, calc(100% - 80px));
  height: var(--care-section-height); min-height: 0; margin: 0 auto;
  padding: 12px 0 calc(12px + var(--care-rest-space, 0px)); border: 0; box-sizing: border-box;
  scroll-margin-top: var(--care-section-top, 100px);
}
.is-flow .care-section-heading { margin: 0; max-width: none; }
.is-flow .care-section-heading h2 { font-size: clamp(28px,3vw,44px); line-height: 1.06; margin: 0 0 12px; }
.is-flow .care-section-heading p { font-size: 15px; line-height: 1.5; margin: 0; max-width: 660px; }
.is-flow .care-step { margin: 0 0 12px; font-size: 12px; }
.is-flow .care-note { font-size: 11px; line-height: 1.5 !important; margin: 0; }
.is-flow .care-note a { white-space: nowrap; }

/* The opening and hardware sections use the same generous type as Home. */
.is-flow .care-intro { display: flex; flex-direction: column; justify-content: center; }
.is-flow .care-intro h2 { font-size: clamp(48px,7vw,100px); margin: 20px 0 24px; }
.is-flow .care-intro > p:not(.software-eyebrow) { font-size: clamp(16px,1.6vw,23px); margin: 0; }
.is-flow .care-chapters { padding: 30px 0 0; gap: 28px; }
.is-flow .care-intro .software-eyebrow { font-size: 13px; margin: 0; }
.is-flow .care-hardware { display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 5% !important; }
.is-flow .care-hardware__body h2 { font-size: clamp(40px,5vw,72px); }
.is-flow .care-hardware__flow { margin: 0; }
.is-flow .care-hardware .care-note { margin: 0; }

/* All three learning steps remain readable alongside the live plot. */
.is-flow .care-personal { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 20px; }
.is-flow .care-personal > .care-section-heading { display: grid; grid-template-columns: 34px 1fr 1fr; align-items: center; gap: 20px; }
.is-flow .care-personal > .care-section-heading .care-step, .is-flow .care-personal > .care-section-heading h2 { margin: 0; }
.is-flow .care-personal > .care-section-heading h2 { font-size: clamp(25px,2.6vw,38px); }
.is-flow .care-learning-layout { height: 100%; min-height: 0; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(24px,5vw,90px); align-items: center; }
.is-flow .care-learning-copy { display: grid; gap: 24px; }
.is-flow .care-learning-copy article { display: block; min-height: 0; padding: 0; }
.is-flow .care-learning-copy h3 { font-size: clamp(22px,2vw,28px); margin: 0 0 8px; }
.is-flow .care-learning-copy p { font-size: clamp(14px,1.2vw,17px); margin: 0 0 8px; }
.is-flow .care-learning { position: static; height: 100%; min-height: 0; max-height: 600px; margin: 0; padding: 20px; display: flex; flex-direction: column; }
.is-flow .care-learning__top { font-size: 12px; }
.is-flow .care-fit-header { margin-top: 16px; font-size: 13px; }
.is-flow .care-fit-plot { flex: 1; min-height: 0; width: 100%; margin: 8px 0 0; }
.is-flow .care-plot-key { margin: 8px 0 12px; }
.is-flow .care-gradient { margin-top: 12px; }
.is-flow .care-learning figcaption { font-size: 11px; margin-top: 12px; }
.is-flow .care-learning-controls button { min-height: 36px; }
.is-flow .care-day-section { display: flex; flex-direction: column; justify-content: center; }
.is-flow .care-day-comparison { margin: 16px 0 0; padding: clamp(24px,4vw,64px); }
.is-flow .care-day-copy h3 { font-size: clamp(32px,4vw,54px); }
.is-flow .care-day-progress { display: none; }

/* Fit the complete daily app, including its own fixed navigation. */
.is-flow .care-daily { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; }
.is-flow .care-daily > .care-section-heading { display: grid; grid-template-columns: 34px 1fr 1fr; align-items: center; gap: 20px; }
.is-flow .care-daily > .care-section-heading .care-step, .is-flow .care-daily > .care-section-heading h2 { margin: 0; }
.is-flow .care-daily-stage { min-height: 0; height: 100%; padding: 6px; grid-template-columns: minmax(0,1fr) var(--care-device-width,250px) minmax(0,1fr); gap: clamp(20px,4vw,70px); }
.is-flow .care-design-notes { gap: 24px; }
.is-flow .care-design-notes strong { font-size: 18px; }
.is-flow .care-design-notes p { font-size: 14px; margin-top: 5px; }
.is-flow .care-calendar-receipt { padding: 0; }
.is-flow .care-calendar-receipt h3 { font-size: 30px; }
.is-flow .care-calendar-receipt p { font-size: 15px; }
.is-flow .care-receipt-symbol { width: 38px; height: 38px; font-size: 24px; margin-bottom: 20px; }
.software-page .is-flow .care-daily-stage .care-phone { width: var(--care-device-width); max-width: none; padding: 0; border-width: calc(8px * var(--care-device-scale)); border-radius: calc(44px * var(--care-device-scale)); margin: 0 auto; }
.is-flow .care-daily-stage .care-device-status { height: calc(36px * var(--care-device-scale)); padding-inline: calc(24px * var(--care-device-scale)); font-size: calc(11px * var(--care-device-scale)); }
.is-flow .care-daily-stage .care-phone__speaker { top: calc(7px * var(--care-device-scale)); width: calc(85px * var(--care-device-scale)); height: calc(23px * var(--care-device-scale)); }
.is-flow .care-daily-stage .care-device-home { height: calc(18px * var(--care-device-scale)); }
.is-flow .care-daily-stage .care-device-home::before { height: max(2px,calc(4px * var(--care-device-scale))); }
.is-flow .care-daily-stage .care-flutter-loading, .is-flow .care-daily-stage .care-calendar-sheet { top: calc(36px * var(--care-device-scale)); bottom: calc(18px * var(--care-device-scale)); }

/* The care-team heading shares space with the three-device workspace. */
.care-story.is-flow .care-connected { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,3fr); grid-template-rows: minmax(0,1fr) auto; gap: 24px; }
.is-flow .care-connected > .care-section-heading { align-self: center; }
.is-flow .care-connected > .care-section-heading h2 { font-size: clamp(26px,2.4vw,38px); }
.is-flow .care-connected > .care-section-heading p { font-size: 14px; }
.is-flow .care-connected > .care-note { grid-column: 1; align-self: end; }
.is-flow .care-simulator-stop { grid-column: 2; grid-row: 1 / 3; height: 100%; min-height: 0; }
.is-flow .care-simulator-stage { height: 100%; min-height: 0; padding: 4px 4px 0; gap: 8px; }
.is-flow .care-simulator-stage .care-linked-team { display: none; }
.is-flow .care-simulator-stage .care-demo-controls { grid-template-columns: minmax(110px,.7fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(90px,.65fr); height: 64px; padding: 8px; gap: 7px; align-items: center; }
.is-flow .care-simulator-stage .care-demo-controls label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-flow .care-simulator-stage .care-demo-controls select { min-height: 40px; height: 40px; }
.is-flow .care-simulator-stage .care-demo-controls .care-action { font-size: 12px; padding: 7px; gap: 5px; }
.is-flow .care-simulator-stage .care-simulator-hint { display: none; }
.is-flow .care-simulator-stage .care-network { padding-top: 6px; gap: 16px; }
.is-flow .care-stage-footer { height: 36px; }
.is-flow .care-network-caption { border: 0; }

@media (max-width: 1100px) {
  .care-story.is-flow [data-care-section] { width: calc(100% - 48px); }
  .care-story.is-flow .care-connected { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; }
  .is-flow .care-connected > .care-section-heading { display: grid; grid-template-columns: 26px 1fr 1fr; align-items: center; gap: 16px; }
  .is-flow .care-connected > .care-section-heading .care-step, .is-flow .care-connected > .care-section-heading h2 { margin: 0; }
  .is-flow .care-connected > .care-section-heading h2 { font-size: 26px; }
  .is-flow .care-connected > .care-section-heading p { font-size: 12px; }
  .is-flow .care-simulator-stop { grid-column: 1; grid-row: 2; }
  .is-flow .care-connected > .care-note { grid-row: 3; }
  .is-flow .care-personal > .care-section-heading p, .is-flow .care-daily > .care-section-heading p { font-size: 13px; }
}
@media (max-width: 767px) {
  .care-story.is-flow [data-care-section] { width: calc(100% - 32px); padding-block: 8px calc(8px + var(--care-rest-space, 0px)); }
  .is-flow .care-intro h2 { font-size: clamp(40px,10vw,62px); }
  .is-flow .care-intro .software-eyebrow { font-size: 11px; }
  .is-flow .care-intro .care-purpose { margin-left: 9px; padding-left: 9px; }
  .is-flow .care-chapters { flex-direction: column; gap: 8px; padding-top: 24px; }
  .is-flow .care-personal, .is-flow .care-daily { gap: 12px; }
  .is-flow .care-personal > .care-section-heading, .is-flow .care-daily > .care-section-heading, .is-flow .care-connected > .care-section-heading { display: block; }
  .is-flow .care-section-heading .care-step { display: inline-block; margin: 0 0 6px !important; font-size: 10px; }
  .is-flow .care-section-heading h2 { font-size: 25px !important; margin: 0 0 8px !important; }
  .is-flow .care-section-heading h2 br { display: none; }
  .is-flow .care-section-heading p { font-size: 12px !important; }
  .is-flow .care-learning-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 12px; }
  .is-flow .care-learning-copy { gap: 12px; }
  .is-flow .care-learning-copy h3 { font-size: 18px; margin: 0 0 3px; }
  .is-flow .care-learning-copy p { font-size: 12px; line-height: 1.4; margin: 0 0 3px; }
  .is-flow .care-method, .is-flow .care-learning-copy .care-link { font-size: 10px; line-height: 1.4; padding: 0; }
  .is-flow .care-learning { padding: 10px; order: 0; }
  .is-flow .care-learning__top { font-size: 11px; }
  .is-flow .care-fit-header { margin-top: 8px; font-size: 11px; }
  .is-flow .care-fit-plot { margin-top: 4px; }
  .is-flow .care-plot-key { margin: 4px 0 6px; font-size: 9px; }
  .is-flow .care-gradient { display: none; }
  .is-flow .care-gradient span { padding: 5px; }
  .is-flow .care-learning figcaption { font-size: 9px; line-height: 1.4; margin-top: 8px; }
  .is-flow .care-day-comparison { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .is-flow .care-day-copy h3 { font-size: 33px; }
  .is-flow .care-day-copy p { font-size: 13px; }
  .is-flow .care-dose-preview { padding: 20px; }
  .is-flow .care-dose-preview strong { font-size: 60px; }
  .is-flow .care-daily-stage { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); grid-template-rows: auto minmax(0,1fr); gap: 12px; padding: 0; }
  .is-flow .care-design-notes { grid-column: 1 / 3; grid-row: 1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .is-flow .care-design-notes strong { font-size: 11px; display: block; }
  .is-flow .care-design-notes p { font-size: 10px; line-height: 1.4; }
  .is-flow .care-daily-stage .care-phone { grid-column: 1; grid-row: 2; }
  .is-flow .care-calendar-receipt { grid-column: 2; grid-row: 2; }
  .is-flow .care-calendar-receipt h3 { font-size: 22px; margin-top: 0; }
  .is-flow .care-calendar-receipt p { font-size: 12px; }
  .is-flow .care-receipt-symbol { margin-bottom: 12px; width: 30px; height: 30px; font-size: 20px; }
  .is-flow .care-note { font-size: 9px; }
  .care-story.is-flow .care-connected { gap: 8px; }
  .is-flow .care-connected > .care-section-heading .care-step { display: none; }
  .is-flow .care-simulator-stage { gap: 4px; padding: 0; }
  .is-flow .care-simulator-stage .care-linked-team { display: none; }
  .is-flow .care-simulator-stage .care-demo-controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 5px; padding: 6px; height: auto; }
  .is-flow .care-simulator-stage .care-demo-controls select { min-height: 34px; height: 34px; }
  .is-flow .care-simulator-stage .care-demo-controls label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .is-flow .care-simulator-stage .care-demo-controls .care-action { font-size: 10px; padding: 5px; min-height: 32px; }
  .is-flow .care-simulator-stage .care-role-tabs button { min-height: 30px; padding: 3px; }
  .is-flow .care-simulator-stage .care-simulator-hint { display: none; }
  .is-flow .care-simulator-stage .care-network { padding-top: 2px; }
  .is-flow .care-stage-footer, .is-flow .care-simulator-stage .care-network-caption { height: 26px; }
  .is-flow .care-hardware { padding: 24px !important; gap: 24px; }
  .is-flow .care-hardware__flow { font-size: 10px; gap: 8px; }
  .is-flow .care-hardware__body { display: block; }
  .is-flow .care-hardware__body h2 { font-size: 42px; margin: 0 0 24px; }
  .is-flow .care-hardware__body p { font-size: 15px; }
}
@media (max-height: 700px) and (min-width: 768px) {
  .is-flow .care-section-heading h2 { font-size: 27px; }
  .is-flow .care-learning { padding: 10px; order: 0; }
  .is-flow .care-fit-header, .is-flow .care-gradient, .is-flow .care-learning figcaption { margin-top: 8px; }
  .is-flow .care-day-comparison { padding: 28px; }
}

/* Feedback for the scroll distance spent reading a stationary composition. */
.care-rest-cue { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .care-story.is-flow { --care-rest-space: 1.5rem; }
  .care-rest-cue {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    height: 1.5rem; color: var(--wine); font-size: 10px; line-height: 1;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity 160ms ease;
  }
  .care-flow-stop[data-resting="true"] > .care-rest-cue { opacity: 1; }
  .care-rest-cue b { margin-left: 4px; font-weight: 400; }
  .care-rest-track { width: clamp(48px,6vw,88px); height: 2px; background: var(--software-line, #e5dadd); }
  .care-rest-track i {
    display: block; width: 100%; height: 100%; background: currentColor;
    transform: scaleX(var(--care-rest-progress, 0)); transform-origin: left;
  }
}

@media (max-width: 767px) and (max-height: 740px) {
  .is-flow .care-personal { gap: 8px; }
  .is-flow .care-personal .care-section-heading .care-step { display: none; }
  .is-flow .care-personal .care-section-heading h2 { font-size: 21px !important; margin-bottom: 6px !important; }
  .is-flow .care-personal .care-section-heading p { font-size: 11px !important; }
  .is-flow .care-learning-layout, .is-flow .care-learning-copy { gap: 8px; }
  .is-flow .care-learning-copy article { line-height: 1.3; }
  .is-flow .care-learning-copy h3 { font-size: 15px; }
  .is-flow .care-learning-copy p { font-size: 11px; line-height: 1.3; }
  .is-flow .care-learning-copy .care-method, .is-flow .care-learning-copy .care-link { display: block; font-size: 9px; line-height: 1.3; }
  .is-flow .care-learning-controls button { min-height: 30px; padding: 5px; font-size: 11px; }
}