/* A complete reading sequence is the baseline, including without JavaScript. */
.marketing-home .journey {
    --journey-scroll-ready: 0;
    --journey-top: 7rem;
    overflow-anchor: none;
}
/* Reserve each supplied phone's aspect ratio before its lazy image arrives. */
.marketing-home .journey-phone .screen { width: 100%; }
.marketing-home .journey-phone .screen img { width: 25rem; max-width: 100%; height: auto; max-height: none; aspect-ratio: 1530 / 3036; object-fit: contain; }
.marketing-home .journey-step > div:first-child { text-align: start; }
.marketing-home .journey-step { scroll-margin-block-start: calc(var(--journey-top) + 7rem); }
.marketing-home .journey-flow-controls .journey-controls {
    position: sticky;
    top: var(--journey-top);
    z-index: 5;
    background: #e9eee8;
}
.marketing-home .journey-control[data-current] { color: var(--teal); font-weight: 600; }
.marketing-home .journey-control[data-current] .journey-stop { border: 10px solid var(--teal); background: #f5c4a7; }
.marketing-home .journey-controls::after { transition: none; }
.marketing-home .journey-control > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
.marketing-home .journey[data-journey-mode='flow']:not(.journey-measuring) .journey-step + .journey-step { border-block-start: 1px solid #bbcabd; padding-block-start: 2rem; }

/* The pinned stage is measured with every actual, translated panel before use.
   Large type and complete captions remain; content is never cropped to fit. */
.marketing-home :is(.journey-measuring, .journey-sticky) .journey-sticky-header { margin-block-end: 1.25rem; }
.marketing-home :is(.journey-measuring, .journey-sticky) .journey-sticky-header .section-title {
    max-width: none;
    font-size: clamp(2rem, 3vw, 2.75rem);
    margin-block-end: .75rem;
}
.marketing-home :is(.journey-measuring, .journey-sticky) .journey-sticky-header .section-subtitle { max-width: none; }
.marketing-home :is(.journey-measuring, .journey-sticky) .journey-track .journey-step { min-height: 0; padding-block: .75rem; }
.marketing-home .journey-measuring .journey-step { grid-area: 1 / 1; visibility: hidden; }
.marketing-home .journey-sticky .journey-track { min-height: var(--journey-panel-height); }
.marketing-home .journey-sticky .journey-pin { height: var(--journey-pin-height); }
.marketing-home .journey-sticky .journey-viewport {
    position: sticky;
    top: var(--journey-top);
    height: auto;
    overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
    .marketing-home .journey *, .marketing-home .journey *::before, .marketing-home .journey *::after { animation: none; transition: none; }
}

/* The complete phone shares four rows with the left-hand story. Subgrid keeps
   the heading, route controls and body on one baseline without a second header
   stack above the image. Browsers without subgrid keep all five flow panels. */
@supports (grid-template-rows: subgrid) {
 .marketing-home .journey { --journey-scroll-ready: 1; }
}
@media (min-width: 1000px) {
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-viewport { display: grid; grid-template-columns: minmax(0,1fr) 25rem; grid-template-rows: auto auto auto minmax(0,1fr); --journey-stage-gap: clamp(2rem,4vw,4rem); gap: 0 var(--journey-stage-gap); max-width: var(--container-max); padding-inline: var(--container-padding); margin-inline: auto; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-sticky-header { position:relative;z-index:2;grid-column: 1; grid-row: 1; width:100%; max-width:none; padding:0; margin:0 0 1.5rem; align-self:start; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-controls { position:relative;z-index:2;grid-column:1; grid-row:2; width:100%; max-width:none; padding:0; margin:0 0 1rem; align-self:start; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-controls::before,
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-controls::after { left:10%;right:10%; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-control { font-size:.9375rem; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-track { display:contents; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-track .journey-step { display:grid; grid-column:1/-1; grid-row:1/5; grid-template-columns:subgrid; grid-template-rows:subgrid; column-gap:var(--journey-stage-gap); row-gap:0; padding:0; min-height:0; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-track .journey-step[hidden] { display:none; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-step > div:first-child { grid-column:1;grid-row:3;align-self:start;max-width:none;padding:0; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-phone { display:contents; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-phone::before { display:none; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-phone .screen { grid-column:2;grid-row:1/5;align-self:center; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-phone .screen img { display:block; width:25rem; height:auto; max-height:none; }
 .marketing-home :is(.journey-measuring,.journey-sticky) .journey-screen-caption { grid-column:1;grid-row:4;text-align:start;margin:1rem 0 0;align-self:start;font-size:.8125rem;line-height:1.5; }
}

@media (max-width: 760px) {
 .marketing-home .journey-phone .screen img { width: 22rem; }
}

@media (max-width: 600px) {
 .marketing-home .journey-control { padding-inline: 0; }
}