/* Ordinary scroll advances the phone; the whole story stays readable beside it. */
.conversion-home .sms-story {
  --sms-stage-height: calc(100svh - var(--site-header-height, 78px));
  position: relative;
  background: var(--mu-dark-deep);
  color: #f4f8fb;
  border-block: 1px solid var(--mu-dark-line);
  scroll-margin-top: 16px;
  font-family: 'Nunito', system-ui, sans-serif;
}
.sms-story * { box-sizing: border-box; }
.sms-story button { font-family: inherit; }
.sms-story [hidden] { display: none !important; }
.sms-track { position: relative; overflow-anchor: none; height: calc(var(--sms-stage-height) * 5.2); scroll-margin-top: 16px; }
.sms-stage { position: sticky; top: var(--site-header-height, 78px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(35px, 5vw, 88px); height: var(--sms-stage-height); padding: 30px 0; isolation: isolate; }
.sms-stage-ambient { position: absolute; inset: 0 -3vw; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 76% 48%, var(--mu-dark-glow), transparent 62%); }
.sms-stage-ambient::after { content: ''; position: absolute; inset: 0; opacity: var(--sms-warmth, 0); background: radial-gradient(ellipse at 76% 48%, #69a67d38, transparent 62%); }
.sms-copy { position: relative; min-width: 0; max-width: 500px; align-self: center; z-index: 2; }
.sms-story-heading { margin-bottom: 23px; }
.sms-eyebrow { margin: 0 0 15px; color: #98b2c2; font: 800 10px/1.3 'Nunito', sans-serif; letter-spacing: .12em; }
.conversion-home .sms-story-heading h2 { margin: 0; color: #f4f8fb; font: 800 clamp(34px, 3.65vw, 50px)/1.06 'Nunito', system-ui, sans-serif; letter-spacing: -.045em; }
.sms-story-heading h2 span { color: #90d6f5; }
.sms-events { position: relative; }
.sms-event { position: relative; min-width: 0; padding: 12px 0 14px 38px; }
.sms-event::before { content: ''; position: absolute; left: 11px; top: 40px; bottom: -10px; width: 1px; background: #385260; pointer-events: none; }
.sms-event:last-child::before { display: none; }
.sms-event::after { content: ''; position: absolute; inset: 0 -12px 0 -11px; z-index: -1; border-radius: 11px; pointer-events: none; }
.sms-event:has(> button[aria-current='step'])::after { background: linear-gradient(90deg, #79bada12, #79bada03); }
.sms-event-marker { position: absolute; top: 16px; left: 0; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #496a7c; border-radius: 50%; color: #c4d9e5; background: #102835; font-size: 10px; font-weight: 800; }
.sms-event-marker svg { display: none; }
.sms-event:has(> button[aria-current='step']) .sms-event-marker { border-color: #9bdbfa; background: #9bdbfa; color: #123248; box-shadow: 0 0 0 4px #9bdbfa14; }
.sms-event:has(> button[data-sms-passed='true']) .sms-event-marker { border-color: #6da8bc; background: #214755; color: #c4e9f0; }
.sms-event:has(> button[data-sms-passed='true']) .sms-event-marker > span { display: none; }
.sms-event:has(> button[data-sms-passed='true']) .sms-event-marker > svg { display: block; }
.sms-event:has(> button[data-sms-passed='true'])::before { background: #6098ac; }
.sms-event[data-sms-scene='3']:has(> button[aria-current='step']) .sms-event-marker { background: #b4e0bd; border-color: #b4e0bd; color: #274d35; box-shadow: 0 0 0 4px #b4e0bd14; }
.sms-event > .sms-event-time { margin: 0 0 3px; color: #8aa7b8; font-size: 9px; font-weight: 800; line-height: 1.3; letter-spacing: .075em; }
.conversion-home .sms-event h3 { margin: 0; color: #e3edf3; font: 800 clamp(18px, 1.65vw, 21px)/1.23 'Nunito', sans-serif; letter-spacing: -.022em; }
.sms-event:has(> button[aria-current='step']) h3 { color: #a2dffa; }
.sms-event[data-sms-scene='3']:has(> button[aria-current='step']) h3 { color: #b4e0bd; }
.sms-event > .sms-event-summary { margin: 4px 0 0; max-width: 42ch; color: #afc3cf; font-size: 13px; line-height: 1.45; letter-spacing: -.005em; }
.sms-event > .sms-event-proof { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #9ebead; font-size: 11px; line-height: 1.4; }
.sms-event-proof svg { flex-shrink: 0; color: #a3caba; }
.sms-purchase-trail { display: flex; align-items: center; gap: 8px; margin: 9px 0 0; color: #7895a5; font-size: 10px; line-height: 1.4; }
.sms-purchase-trail i { font-style: normal; color: #506d7e; }
/* Cumulative, not a spotlight. A checkout is progress, so every step already
   passed STAYS lit; lighting only the current one made the rail read as four
   unrelated states flicking on and off rather than a purchase completing. */
.sms-story[data-sms-purchase-phase='cart'] [data-sms-trail='cart'],
.sms-story[data-sms-purchase-phase='checkout'] :is([data-sms-trail='cart'],[data-sms-trail='checkout']),
.sms-story[data-sms-purchase-phase='order'] :is([data-sms-trail='cart'],[data-sms-trail='checkout'],[data-sms-trail='order']),
.sms-story[data-sms-purchase-phase='counted'] [data-sms-trail] { color: #b4e0bd; }

/* Only the step that JUST landed pops, so the eye is pulled along the rail
   one beat at a time instead of the whole line changing at once. */
@keyframes sms-trail-pop { 0% { transform: scale(.88); opacity: .5; } 60% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.sms-purchase-trail span { display: inline-block; transition: color 220ms ease; }
.sms-story[data-sms-purchase-phase='cart'] [data-sms-trail='cart'],
.sms-story[data-sms-purchase-phase='checkout'] [data-sms-trail='checkout'],
.sms-story[data-sms-purchase-phase='order'] [data-sms-trail='order'],
.sms-story[data-sms-purchase-phase='counted'] [data-sms-trail='counted'] { animation: sms-trail-pop 380ms cubic-bezier(.22,1,.36,1) both; }

/* The money is the payoff — it earns a touch more weight than the steps that
   led to it. */
.sms-story[data-sms-purchase-phase='counted'] [data-sms-trail='counted'] { color: #d7f5de; font-weight: 700; }
/* Keyed to 'order' when that was the last phase. 'counted' now follows it, so
   both phases have to hold the tick or the order un-completes at the payoff. */
.sms-story:is([data-sms-purchase-phase='order'],[data-sms-purchase-phase='counted']) .sms-event[data-sms-scene='3'] .sms-event-marker > span { display: none; }
.sms-story:is([data-sms-purchase-phase='order'],[data-sms-purchase-phase='counted']) .sms-event[data-sms-scene='3'] .sms-event-marker > svg { display: block; }
.sms-event-jump { position: absolute; inset: 0 -12px 0 -11px; z-index: 1; width: calc(100% + 23px); border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; }
.sms-event-jump:hover { border-color: #87c1df33; }
.sms-event-jump:focus-visible { outline: 2px solid #9eddf9; outline-offset: 2px; }
.sms-story-foot { margin-top: 15px; padding-top: 16px; border-top: 1px solid #ffffff14; }
.sms-story-foot > p { display: flex; align-items: center; gap: 8px; margin: 0; color: #a9c2d1; font-size: 11px; line-height: 1.4; }
.sms-story-foot > p > span:first-child { font-size: 15px; }
.sms-jump-hint { color: #7f9cac; }
.sms-story-foot > small { display: block; margin-top: 9px; color: #7994a4; font-size: 9px; line-height: 1.4; }
.sms-mobile-thread { display: none; }

/* Real proportions, layered titanium edges, a single stable viewing surface. */
.sms-phone-pane { --sms-phone-height: min(660px, calc(var(--sms-stage-height) - 84px)); width: calc(var(--sms-phone-height) * .515); position: relative; min-width: 0; justify-self: center; margin: 0; perspective: 1300px; }
.sms-phone-light { position: absolute; inset: -12% -48% -4%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, var(--mu-dark-light) 0, var(--mu-dark-light-soft) 39%, transparent 69%); pointer-events: none; }
.sms-phone-light::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #6aa77b30, transparent 65%); opacity: var(--sms-complete, 0); }
.sms-phone-light::before { content: ''; position: absolute; width: 77%; height: 14%; left: 12%; bottom: 0; border-radius: 50%; background: radial-gradient(ellipse, #020b10b3, transparent 67%); }
.sms-device { position: relative; width: 100%; height: var(--sms-phone-height); padding: 8px; border: 1px solid #8596a0; border-radius: 49px; background: linear-gradient(105deg, #8c9ca6 0, #24313b 1%, #73818c 2%, #121d24 3.1%, #26343e 49%, #101921 95.5%, #8997a0 97.5%, #2e3c47 99%); box-shadow: inset 0 0 0 2px #020a10, 0 0 0 1px #1d2d38, 8px 13px 27px #00000045, 0 32px 50px #020d154d; transform: translateY(14px) rotateY(-7deg) rotateZ(1deg); transform-style: preserve-3d; }
.sms-device::before { content: ''; position: absolute; inset: 3px; border: 1px solid #91a2ad4d; border-radius: 45px; pointer-events: none; }
.sms-device::after { content: ''; position: absolute; inset: 8px; border: 1px solid #000; border-radius: 40px; pointer-events: none; z-index: 10; }
.sms-device-key { position: absolute; width: 3px; border: 1px solid #526572; background: linear-gradient(90deg, #a3b1b9, #31434f); border-radius: 2px; left: -4px; }
.sms-device-silent { top: 85px; height: 19px; }
.sms-device-volume { top: 122px; height: 58px; }
.sms-device-power { top: 154px; height: 61px; left: auto; right: -4px; background: linear-gradient(90deg, #273844, #7b8c97); }
.sms-screen { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; border-radius: 40px; overflow: clip; background: #f7f8fa; color: #20252c; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.sms-hardware { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; flex: 0 0 43px; padding: 0 21px 1px; background: rgb(247 248 250 / calc(1 - var(--sms-lock-phase, 0))); color: color-mix(in srgb, #14212a, #edf7fa calc(var(--sms-lock-phase, 0) * 100%)); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sms-hardware > [data-sms-clock] { opacity: calc(1 - var(--sms-lock-phase, 0)); }
.sms-island { display: flex; align-items: center; justify-content: flex-end; position: absolute; width: 90px; height: 24px; left: 50%; top: 9px; transform: translateX(-50%); padding-right: 11px; border: 1px solid #050d11; border-radius: 22px; background: linear-gradient(135deg, #03070b, #07121b); box-shadow: inset 0 1px 1px #233746; }
.sms-island b { width: 7px; height: 7px; border: 2px solid #162b3d; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #527a95, #102d45 50%, #050d19); box-shadow: 0 0 0 1px #02070c; }
.sms-screen-layers { position: relative; flex: 1; min-height: 0; background: #f7f8fa; }
.sms-screen-layer { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.sms-screen-layer:not(.sms-cart-screen), .sms-notification, [data-sms-motion='reminder'], [data-sms-motion='question'], [data-sms-motion='typing'], [data-sms-motion='answer'], [data-sms-motion='check'] { opacity: 0; }
.sms-cart-screen { overflow: hidden; background: radial-gradient(ellipse at 12% 100%, #789990, transparent 68%), linear-gradient(155deg, #233e4a, #406c74); }
/* Narration sits on the phone wallpaper, outside the store she has left. */
.sms-cart-departure { position: absolute; inset: 13px 12px auto; display: grid; justify-items: center; gap: 7px; color: #f5f5e9; text-align: center; }
.sms-departure-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 3px; border: 1px solid #f0cc983d; border-radius: 50%; background: #efc58e16; color: #edcf9f; }
.sms-cart-departure > strong { font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.sms-cart-departure > p { margin: 0; color: #bfd3d1; font-size: 12px; line-height: 1.4; }
.sms-cart-browser { position: absolute; inset: 124px 18px 25px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ffffff80; border-radius: 18px; background: #fffef7; box-shadow: 0 18px 32px #0a242e55, 0 2px 4px #08202d29; transform-origin: center 70%; }
.sms-cart-browser .sms-shop-header { flex-basis: 45px; height: 45px; padding: 12px 16px; }
.sms-cart-browser .sms-shop-header > span { font-size: 17px; }
.sms-cart-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 16px 13px; color: #364f3c; }
.sms-cart-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sms-cart-title > strong { font: 500 24px/1.1 Georgia, serif; letter-spacing: -.035em; }
.sms-cart-title > span { color: #7b8774; font-size: 10px; }
.sms-cart-item { display: flex; align-items: center; gap: 15px; }
.sms-cart-item > img { display: block; width: 86px; height: 108px; border-radius: 7px; object-fit: cover; background: #d3d3bf; }
.sms-cart-item > div { display: grid; gap: 7px; }
.sms-cart-item strong { font-size: 13px; line-height: 1.25; font-weight: 500; }
.sms-cart-item div > span { font-size: 10px; color: #7a8574; }
.sms-cart-item b { font-size: 13px; font-weight: 500; }
.sms-cart-item .sms-cart-quantity { display: flex; justify-content: space-between; width: 64px; padding: 4px 7px; border: 1px solid #dfe2d8; border-radius: 4px; color: #53614c; }
.sms-cart-checkout { margin-top: auto; padding-top: 18px; }
.sms-cart-subtotal { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e4e5dc; padding: 13px 0; font-size: 12px; }
.sms-cart-subtotal > strong { font-size: 15px; font-weight: 600; }
.sms-cart-checkout > p { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 0; color: #92734c; font-size: 10px; line-height: 1.3; }
.sms-cart-checkout > p::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ba9663; }
.sms-story[data-sms-step='0'] :is(.sms-hardware,.sms-home-bar) { background: #233e4a; color: #edf7fa; }
.sms-story[data-sms-step='0'] .sms-home-bar::after { background: #edf7fa; }
.sms-shop-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 19px; height: 53px; flex: 0 0 53px; color: #364f3c; background: #fafaf4; border-bottom: 1px solid #dfe2d8; }
.sms-shop-header > span { font: 600 20px/1 Georgia, serif; letter-spacing: .18em; }
.sms-sample-checkout { display: flex; align-items: center; justify-content: space-between; border-radius: 5px; background: #3d5940; color: #fff; padding: 12px 13px; font-size: 11px; font-weight: 500; }
.sms-sample-checkout span { font-size: 17px; line-height: 1; }
.sms-browser-address { display: flex; flex: 0 0 34px; justify-content: center; align-items: center; gap: 5px; padding: 9px 16px; color: #63736f; background: #e9eeeb; font-size: 10px; }
.sms-browser-address > span:last-child { margin-left: auto; }
.sms-browser-address svg { margin-left: auto; }

/* Returning from the message opens a real cart, then a separate checkout.
   Both use the same store, item and totals as the abandoned cart. */
.sms-return-screen { background: #fffef7; }
.sms-checkout-screen, .sms-inline-shop.sms-payment-sheet { background: #eff2f6; color: #263746; }
.sms-payment-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 39px; padding: 11px 18px; border-bottom: 1px solid #dbe1e8; background: #f8fafc; color: #304351; }
.sms-payment-header > span { font: 600 13px/1 Georgia, serif; letter-spacing: .14em; }
.sms-payment-header > small { display: flex; align-items: center; gap: 5px; color: #637686; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.sms-payment-sheet > .sms-browser-address { background: #e6ebf1; color: #71818f; }
.sms-return-content, .sms-checkout-content { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 14px 18px; color: #364f3c; line-height: 1.3; }
.sms-shop-back { align-self: flex-start; appearance: none; margin: 0 0 12px; padding: 3px 0; border: 0; background: transparent; color: #647461; font-size: 11px; line-height: 1.2; cursor: pointer; }
.sms-return-content h4, .sms-checkout-content h4 { margin: 0; color: #364f3c; font: 500 27px/1.05 Georgia, serif; letter-spacing: -.035em; }
.sms-story .sms-shop-intro { margin: 5px 0 18px; color: #7a8574; font-size: 11px; line-height: 1.3; }
.sms-checkout-content { color: #263746; }
.sms-checkout-content .sms-shop-back { color: #65798b; }
.sms-checkout-content h4 { color: #263746; font: 650 23px/1.1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.sms-checkout-content .sms-shop-intro { color: #7a8997; margin-bottom: 15px; }
.sms-return-item { display: flex; align-items: center; gap: 17px; }
.sms-return-item > img { width: 84px; height: 105px; object-fit: cover; border-radius: 7px; background: #e6e4d6; }
.sms-return-item > div { display: grid; gap: 8px; }
.sms-return-item strong { font-size: 14px; font-weight: 500; }
.sms-return-item span { color: #7a8574; font-size: 11px; }
.sms-return-item b { font-size: 17px; font-weight: 500; }
.sms-free-delivery { display: flex; align-items: center; gap: 6px; margin-top: 13px; padding: 10px 0; color: #51744b; font-size: 10px; line-height: 1.3; }
.sms-free-delivery svg { flex-shrink: 0; }
.sms-shop-bottom { margin-top: auto; padding-top: 14px; }
.sms-shop-totals { display: grid; gap: 10px; margin-bottom: 17px; font-size: 11px; line-height: 1.3; color: #75806c; }
.sms-shop-totals > div { display: flex; align-items: center; justify-content: space-between; }
.sms-shop-totals b { color: #476341; font-weight: 500; }
.sms-shop-totals .sms-shop-total { padding-top: 11px; border-top: 1px solid #e1e4d9; color: #53694c; }
.sms-shop-total strong { font-size: 22px; font-weight: 500; line-height: 1.1; color: #364f3c; letter-spacing: -.025em; }
button.sms-sample-checkout { width: 100%; min-height: 43px; border: 1px solid #334e35; font-family: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; box-shadow: inset 0 1px #ffffff10; }
button.sms-sample-checkout:hover { background: #304a34; }
.sms-continue-checkout { position: relative; transform: scale(calc(1 - var(--sms-checkout-tap, 0) * .025)); }
.sms-place-order { position: relative; justify-content: center; gap: 8px; transform: scale(calc(1 - var(--sms-order-tap, 0) * .035)); }
.sms-place-order::after, .sms-continue-checkout::after { content: ''; position: absolute; inset: 3px; border: 1px solid #e4f1e088; border-radius: 3px; opacity: var(--sms-order-tap, var(--sms-checkout-tap, 0)); pointer-events: none; }
.sms-shop-note { display: block; margin-top: 9px; color: #8c9586; text-align: center; font-size: 9px; line-height: 1.3; }
.sms-checkout-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-block: 1px solid #dce2e9; }
.sms-checkout-item img { width: 32px; height: 40px; object-fit: cover; border-radius: 5px; }
.sms-checkout-item > div { display: grid; flex: 1; gap: 5px; }
.sms-checkout-item strong { font-size: 12px; font-weight: 500; }
.sms-checkout-item span { color: #7f8e9a; font-size: 10px; }
.sms-checkout-item > b { font-size: 12px; font-weight: 500; }
.sms-checkout-details { display: grid; gap: 9px; padding-top: 14px; }
.sms-checkout-details > div { display: grid; gap: 7px; padding: 12px; border: 1px solid #dbe2ea; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px #2d405106; }
.sms-checkout-details span { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #738392; font-size: 9px; }
.sms-checkout-details em { color: #548574; font-size: 8px; font-style: normal; }
.sms-checkout-details strong { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; }
.sms-checkout-details small { color: #7d8c99; font-size: 10px; }
.sms-checkout-details i { display: grid; place-items: center; padding: 5px 4px; border: 1px solid #dce3ee; border-radius: 3px; background: #f8faff; color: #35527c; font: italic 700 8px/1 Arial, sans-serif; }
.sms-payment-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 13px; padding-top: 12px; border-top: 1px solid #d7dfe7; }
.sms-payment-total > div { display: grid; gap: 4px; font-size: 11px; }
.sms-payment-total small { color: #7c8d9b; font-size: 9px; }
.sms-payment-total > strong { display: flex; align-items: baseline; gap: 4px; color: #273d50; font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.04em; }
.sms-payment-total > strong > span { color: #7e8e9b; font-size: 8px; font-weight: 500; letter-spacing: 0; }
.sms-checkout-content .sms-place-order { background: #233e57; border-color: #233e57; border-radius: 7px; }
.sms-checkout-content .sms-place-order:hover { background: #182f45; }
.sms-checkout-content .sms-shop-note { color: #82909d; }
.sms-inline-messages { display: flex; flex-direction: column; gap: 13px; }
.sms-inline-shop { overflow: hidden; border-radius: 14px; background: #fffef7; color: #364f3c; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.sms-inline-replay { display: block; width: 100%; padding: 15px; border: 0; border-top: 1px solid #dde6d9; background: #f8fbf7; color: #4b7254; font-size: 12px; cursor: pointer; }
.sms-story :is(.sms-shop-back,.sms-sample-checkout,.sms-example-url,.sms-inline-replay):focus-visible { outline: 2px solid #208bc1; outline-offset: 3px; }
.sms-story [data-sms-screen-title]:focus { outline: none; }
.sms-lock-screen { inset: -43px 0 -15px; overflow: hidden; background: #254759; }
.sms-lock-wallpaper { position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 10%, #78afbe 0, #568596 28%, transparent 62%), radial-gradient(ellipse at 80% 100%, #b3bfac 0, #769a96 30%, #254e61 74%); }
.sms-lock-wallpaper::before { content: ''; position: absolute; width: 145%; height: 79%; left: -60%; bottom: -22%; border-radius: 50%; background: linear-gradient(140deg, #a6bdb16b, #b6c9bb70 56%, #e0e5cb7a 70%, transparent); box-shadow: 16px 0 1px #c7d6c154, 27px 0 1px #b7cbbe33; transform: rotate(-22deg); }
.sms-lock-clock { position: relative; display: grid; justify-items: center; gap: 5px; padding-top: 67px; color: #e8f4f3; }
.sms-lock-clock > span { font-size: 13px; font-weight: 500; letter-spacing: -.015em; }
.sms-lock-clock > strong { font: 600 67px/.98 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.065em; }
.sms-lock-bottom { position: absolute; left: 25px; right: 25px; bottom: 41px; display: flex; justify-content: space-between; color: #d7e4e4; }
.sms-lock-bottom span { display: grid; place-items: center; width: 35px; height: 35px; background: #1f414d65; border: 1px solid #ecf6f209; border-radius: 50%; }
/* A contact notification, with the same store identity as the open thread.
   The frosted surface is painted once; no live backdrop filter during scrubbing. */
.sms-notification { position: absolute; left: 11px; right: 11px; top: 164px; z-index: 4; padding: 13px 14px 14px; background: linear-gradient(135deg, #f4f7f2f2, #e4ede7eb); box-shadow: 0 8px 25px #133e4824, inset 0 1px #ffffffb3; border: 1px solid #f4fbf58c; border-radius: 23px; color: #263536; }
.sms-notification-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.sms-notification-avatar { position: relative; display: block; flex: 0 0 38px; height: 38px; }
.sms-notification-avatar > img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 1px 3px #65532c18; }
.sms-message-icon { position: absolute; right: -3px; bottom: -2px; border-radius: 5px; outline: 2px solid #eef3ec; box-shadow: 0 1px 2px #20533725; }
.sms-notification-sender { display: grid; gap: 3px; }
.sms-notification-sender > strong { font-size: 15px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.sms-notification-sender > span { font-size: 10px; line-height: 1.2; color: #6c7b76; }
.sms-notification-head > small { align-self: flex-start; margin: 3px 0 0 auto; color: #788780; font-size: 10px; }
.sms-notification-content { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.sms-notification-content > p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
.sms-notification-photo { display: block; width: 64px; height: 72px; object-fit: cover; object-position: 44% 50%; background: #d4cbb8; border: 1px solid #8e9b8729; border-radius: 9px; }
.sms-chat-screen { background: #fff; }
.sms-contact { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 11px; flex: 0 0 75px; border-bottom: 1px solid #e2e5e8; background: #f7f8fa; color: #217feb; }
.sms-contact > span { font: 300 35px/1 Arial, sans-serif; }
.sms-contact > div { display: grid; justify-items: center; gap: 4px; }
.sms-avatar { display: block; width: 33px; height: 33px; border-radius: 50%; background: #faf3e6; box-shadow: 0 1px 3px #65532c12; }
.sms-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.sms-contact strong { color: #20252c; font-size: 12px; font-weight: 500; }
.sms-contact strong > span { color: #8c969e; padding-left: 2px; }
.sms-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 13px; padding: 14px 12px 10px; }
.sms-message-time { margin: 0 0 4px; color: #9298a0; font-size: 10px; text-align: center; }
.sms-bubble { width: fit-content; max-width: 94%; padding: 11px 13px; border-radius: 18px; font: 400 15px/1.38 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.018em; }
.sms-bubble p { margin: 0; }
.sms-bubble p + p { margin-top: 5px; }
.sms-reminder-body { display: grid; grid-template-columns: minmax(0, 1fr) 55px; align-items: center; gap: 10px; }
.sms-message-photo { display: block; width: 55px; height: 64px; object-fit: cover; object-position: 44% 50%; border-radius: 7px; background: #d4cbb8; }
.sms-incoming { background: #eceef1; color: #242d34; border-bottom-left-radius: 5px; align-self: flex-start; transform-origin: left bottom; }
.sms-outgoing { background: #197fee; color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; transform-origin: right bottom; }
.sms-story button.sms-example-url { display: block; width: fit-content; max-width: 100%; appearance: none; border: 0; padding: 3px 0; background: transparent; color: #0869d4; margin-top: 3px; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.sms-answer-slot .sms-example-url { position: relative; width: fit-content; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sms-answer-slot .sms-example-url::before { content: ''; position: absolute; inset: -3px -5px; border: 1px solid #197fee45; border-radius: 5px; background: #197fee0d; box-shadow: 0 0 0 3px #197fee0a; opacity: var(--sms-cart-link-progress, 0); pointer-events: none; }
.sms-bubble small { display: block; color: #848990; margin-top: 6px; font-size: 9px; line-height: 1.4; letter-spacing: 0; }
.sms-answer-slot { display: grid; min-width: 0; }
.sms-answer-slot > * { grid-area: 1 / 1; align-self: start; }
.sms-typing { display: flex; align-items: center; gap: 4px; width: 54px; min-height: 34px; }
.sms-typing i { width: 6px; height: 6px; border-radius: 50%; background: #96a0aa; }
.sms-typing i:nth-child(2) { transform: translateY(-2px); background: #74818e; }
.sms-compose { display: flex; align-items: center; flex: 0 0 44px; gap: 10px; padding: 3px 12px 8px; color: #b0b7c0; }
.sms-compose > span { font: 300 28px/1 Arial, sans-serif; }
.sms-compose > div { position: relative; display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; padding: 4px 5px 4px 11px; border: 1px solid #d3d9df; border-radius: 20px; font-size: 13px; }
.sms-compose [data-sms-compose-placeholder] { opacity: calc(1 - var(--sms-draft-visible, 0)); }
.sms-draft { position: absolute; left: 11px; right: 32px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; width: auto; color: #222e38; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; opacity: var(--sms-draft-visible, 0); }
.sms-draft > i { display: block; flex: 0 0 1.5px; height: 17px; margin-left: 1px; background: #1983ef; border-radius: 1px; }
.sms-compose b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, #dce0e6, #197fee calc(var(--sms-send-active, 0) * 100%)); color: white; font: 600 20px/1 Arial, sans-serif; transform: scale(calc(.94 + var(--sms-send-active, 0) * .06)); }
.sms-order-screen { background: #f1faee; }
.sms-order-screen .sms-shop-header { background: #f1faee; border-color: #d1e6cf; }
.sms-order { flex: 1; display: flex; flex-direction: column; padding: 28px 20px 14px; text-align: center; color: #36573f; background: linear-gradient(165deg, #e6f6df, #f8fbf7 65%); }
.sms-order-seal { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; border: 1px solid #b8d9be; background: linear-gradient(155deg, #67c760, #399e57); color: #fff; box-shadow: inset 0 1px #f2fff4; }
.sms-order-seal::before { content: ''; position: absolute; inset: -6px; border: 1px solid #88b9943b; border-radius: 50%; transform: scale(calc(.8 + var(--sms-complete, 0) * .2)); opacity: var(--sms-complete, 0); }
.sms-order-seal[data-sms-motion] path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sms-check-progress, 0)); }
.sms-order-eyebrow { color: #7a987c; font-size: 8px; letter-spacing: .12em; margin-bottom: 9px; }
.sms-order > strong { font: 800 29px/1.1 'Nunito', sans-serif; letter-spacing: -.04em; }
.sms-order > p { margin: 8px 0 27px; color: #859380; font-size: 11px; }
.sms-order-details { min-height: 0; }
.sms-order-item { display: flex; align-items: center; gap: 10px; padding-block: 15px; border-block: 1px solid #dde6d9; text-align: left; }
.sms-order-item img { width: 35px; height: 43px; border-radius: 5px; object-fit: cover; }
.sms-order-item > div { display: grid; gap: 5px; flex: 1; }
.sms-order-item strong { font-size: 11px; font-weight: 500; }
.sms-order-item div span { font-size: 9px; color: #81907d; }
.sms-order-item > b { font-size: 13px; font-weight: 500; }
.sms-order-shipping { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; color: #879681; font-size: 10px; }
.sms-order-shipping b { font-size: 11px; font-weight: 500; color: #4d724f; }
.sms-order-total { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #dde6d9; color: #617a5e; font-size: 10px; }
.sms-order-total strong { font: 500 35px/1 Georgia, serif; color: #37583c; letter-spacing: -.045em; }
.sms-order > small { margin-top: auto; padding-top: 23px; font-size: 9px; color: #97a192; }
.sms-home-bar { position: relative; z-index: 7; height: 15px; flex: 0 0 15px; background: rgb(247 248 250 / calc(1 - var(--sms-lock-phase, 0))); }
.sms-home-bar::after { content: ''; position: absolute; width: 33%; height: 4px; background: color-mix(in srgb, #18252d, #edf7fa calc(var(--sms-lock-phase, 0) * 100%)); border-radius: 4px; left: 33.5%; top: 5px; }
.sms-phone-pane figcaption { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; color: #638294; margin-top: 20px; font-size: 10px; white-space: nowrap; }
.sms-caption-dot { width: 4px; height: 4px; border-radius: 50%; background: #6e98ae; }
.sms-close { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 47px 0 58px; border-top: 1px solid #ffffff17; }
.conversion-home .sms-close h3 { margin: 0 0 13px; color: #e7f1f8; font: 700 clamp(26px, 2.6vw, 38px)/1.12 'Nunito', sans-serif; letter-spacing: -.035em; }
.sms-close p { max-width: 49ch; margin: 0; color: #90a9ba; font-size: 15px; line-height: 1.6; }
.sms-close .button { flex-shrink: 0; justify-content: center; min-height: 49px; padding: 13px 20px; font-size: 15px; }
.sms-noscript { color: #9db7c8; padding-bottom: 30px; }

@media (min-width: 761px) and (min-height: 641px) and (max-height: 780px) {
  .sms-stage { padding-block: 20px; gap: 32px; }
  .sms-phone-pane { --sms-phone-height: calc(var(--sms-stage-height) - 55px); }
  .sms-story-heading { margin-bottom: 15px; }
  .sms-eyebrow { margin-bottom: 11px; }
  .conversion-home .sms-story-heading h2 { font-size: clamp(32px, 3.3vw, 42px); }
  .sms-event { padding-block: 9px 10px; }
  .sms-event-marker { top: 13px; }
  .sms-event::before { top: 37px; bottom: -7px; }
  .conversion-home .sms-event h3 { font-size: 18px; }
  .sms-event > .sms-event-summary { font-size: 12px; }
  .sms-event > .sms-event-proof { font-size: 10px; margin-top: 4px; }
  .sms-story-foot { margin-top: 10px; padding-top: 12px; }
  .sms-story-foot > small { margin-top: 6px; }
  .sms-hardware { flex-basis: 35px; padding-inline: 18px; font-size: 11px; }
  .sms-island { width: 78px; height: 21px; top: 7px; }
  .sms-contact { flex-basis: 59px; padding-block: 0 7px; }
  .sms-avatar { width: 27px; height: 27px; font-size: 19px; }
  .sms-avatar img { width: 100%; height: 100%; }
  .sms-contact strong { font-size: 10px; }
  .sms-thread { gap: 9px; padding: 10px 9px 5px; }
  .sms-bubble { padding: 9px 10px; font-size: 15px; line-height: 1.3; }
  .sms-bubble small { margin-top: 4px; font-size: 8px; }
  .sms-message-time { margin-bottom: 1px; font-size: 9px; }
  .sms-compose { flex-basis: 36px; padding-bottom: 3px; }
  .sms-compose > div { font-size: 11px; }
  .sms-shop-header { flex-basis: 43px; height: 43px; padding-block: 12px; }
  .sms-shop-header > span { font-size: 17px; }
  .sms-cart-departure { top: 9px; gap: 5px; }
  .sms-departure-icon { width: 26px; height: 26px; margin-bottom: 2px; }
  .sms-cart-departure > strong { font-size: 17px; }
  .sms-cart-departure > p { font-size: 11px; }
  .sms-cart-browser { inset: 103px 13px 15px; border-radius: 14px; }
  .sms-cart-browser .sms-shop-header { flex-basis: 35px; height: 35px; padding-block: 8px; }
  .sms-cart-browser .sms-shop-header > span { font-size: 15px; }
  .sms-cart-content { padding: 11px 13px 9px; }
  .sms-cart-title { margin-bottom: 12px; }
  .sms-cart-title > strong { font-size: 21px; }
  .sms-cart-item { gap: 11px; }
  .sms-cart-item > img { width: 65px; height: 82px; }
  .sms-cart-item > div { gap: 5px; }
  .sms-cart-item strong { font-size: 12px; }
  .sms-cart-checkout { padding-top: 12px; }
  .sms-cart-subtotal { padding-block: 9px; }
  .sms-cart-checkout .sms-sample-checkout { padding: 9px 10px; font-size: 10px; }
  .sms-cart-checkout > p { margin-top: 7px; font-size: 9px; }
  .sms-browser-address { flex-basis: 29px; font-size: 9px; padding-block: 7px; }
  .sms-return-content, .sms-checkout-content { padding: 11px 14px; }
  .sms-payment-header { flex-basis: 34px; padding: 9px 14px; }
  .sms-payment-header > span { font-size: 12px; }
  .sms-payment-header > small { font-size: 8px; }
  .sms-checkout-content { padding-block: 9px; }
  .sms-shop-back { font-size: 10px; margin-bottom: 7px; }
  .sms-return-content h4, .sms-checkout-content h4 { font-size: 23px; }
  .sms-story .sms-shop-intro { font-size: 10px; margin: 4px 0 11px; }
  .sms-checkout-content .sms-shop-intro { display: none; }
  .sms-checkout-content h4 { margin-bottom: 9px; font-size: 20px; }
  .sms-return-item { gap: 12px; }
  .sms-return-item > img { width: 61px; height: 76px; }
  .sms-return-item strong { font-size: 12px; }
  .sms-return-item span { font-size: 10px; }
  .sms-return-item b { font-size: 15px; }
  .sms-free-delivery { margin-top: 7px; padding-block: 7px; font-size: 9px; }
  .sms-shop-bottom { padding-top: 9px; }
  .sms-shop-totals { gap: 6px; margin-bottom: 10px; font-size: 10px; }
  .sms-shop-totals .sms-shop-total { padding-top: 8px; }
  .sms-shop-total strong { font-size: 19px; }
  button.sms-sample-checkout { min-height: 38px; padding: 10px; font-size: 11px; }
  .sms-shop-note { margin-top: 7px; font-size: 8px; }
  .sms-checkout-item { gap: 8px; padding-block: 8px; }
  .sms-checkout-item img { width: 26px; height: 33px; }
  .sms-checkout-item strong, .sms-checkout-item > b { font-size: 11px; }
  .sms-checkout-details { gap: 7px; padding-top: 10px; }
  .sms-checkout-details > div { gap: 4px; padding: 8px 10px; border-radius: 7px; }
  .sms-checkout-details strong { font-size: 11px; }
  .sms-checkout-details small { font-size: 9px; }
  .sms-payment-total { padding-top: 9px; margin-bottom: 10px; }
  .sms-payment-total > strong { font-size: 20px; }
  .sms-payment-total > div { font-size: 10px; gap: 3px; }
  .sms-payment-total small { font-size: 8px; }
  .sms-lock-screen { top: -35px; }
  .sms-lock-clock { padding-top: 56px; }
  .sms-lock-clock strong { font-size: 60px; }
  .sms-notification { top: 143px; padding: 11px 12px 13px; }
  .sms-notification-head { gap: 8px; margin-bottom: 10px; }
  .sms-notification-avatar { flex-basis: 33px; height: 33px; }
  .sms-notification-content { grid-template-columns: minmax(0, 1fr) 52px; gap: 9px; }
  .sms-notification-content > p { font-size: 13px; }
  .sms-notification-photo { width: 52px; height: 63px; }
  .sms-order { padding: 15px 16px 9px; }
  .sms-order-seal { height: 36px; width: 36px; margin-bottom: 10px; }
  .sms-order-seal svg { width: 22px; }
  .sms-order > strong { font-size: 25px; }
  .sms-order > p { margin-bottom: 14px; }
  .sms-order-item { padding-block: 10px; }
  .sms-order-item img { width: 29px; height: 36px; }
  .sms-order-shipping { padding-block: 11px; }
  .sms-order-total { padding-top: 10px; }
  .sms-order-total strong { font-size: 28px; }
  .sms-order > small { padding-top: 14px; font-size: 8px; }
  .sms-phone-pane figcaption { margin-top: 13px; font-size: 9px; }
}

/* Each action has a visible finger, contact ring and button press. These are
   scrubbed by the same timeline as the screens, and never catch pointer events. */
.sms-tap-cue { position:absolute; z-index:4; width:38px; height:38px; right:22%; top:calc(50% - 13px); pointer-events:none; opacity:0; transform-origin:15px 9px; }
.sms-tap-cue>svg { position:absolute; width:26px; height:32px; left:11px; top:8px; filter:drop-shadow(0 3px 3px #052d4059); }
.sms-tap-cue>i { position:absolute; width:31px; height:31px; left:0; top:0; border:2px solid #3aa4e6; border-radius:50%; background:#b7e6ff80; box-shadow:0 0 0 6px #61b9ee30; }
.sms-example-url { position:relative; }
.sms-answer-slot .sms-example-url { transform:scale(calc(1 - var(--sms-cart-link-progress, 0) * .025)); transform-origin:left center; }
.sms-example-url .sms-tap-cue { right:-9px; top:6px; }
.sms-story button.sms-sample-checkout:active { transform:scale(.96); background:#28482f; }
.sms-story .sms-example-url:active { color:#075aa8; transform:scale(.97); }
.sms-phone-beat { position:absolute; inset:-37px -35px auto; text-align:center; color:#bad9e7; font:800 12px/1.3 'Nunito',sans-serif; letter-spacing:.02em; }
/* Same reason as the step-3 tick: green once the order lands, and it stays. */
.sms-story:is([data-sms-purchase-phase='order'],[data-sms-purchase-phase='counted']) .sms-phone-beat { color:#b5e9ad; }
.sms-sale-note { position:absolute; z-index:12; left:-100px; bottom:87px; width:222px; padding:19px 21px 16px; border:1px solid #b7e7a7; border-radius:16px; background:linear-gradient(145deg,#eaffdf,#d5f3d2); color:#244f31; box-shadow:0 20px 55px #010d1c55,0 3px 0 #a8d5a9; opacity:0; pointer-events:none; }
.sms-sale-kicker { display:flex; align-items:center; gap:6px; color:#4c7953; font-size:9px; line-height:1.3; font-weight:900; letter-spacing:.05em; }
.sms-sale-kicker i { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#367744; color:white; font-style:normal; font-size:10px; }
.sms-sale-note>strong { display:block; margin:8px 0 6px; color:#245f33; font:900 61px/1 'Nunito',sans-serif; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.sms-story .sms-sale-note>p { margin:0; color:#3e6545; font:800 15px/1.3 'Nunito',sans-serif; letter-spacing:-.01em; }
.sms-sale-note>small { display:block; margin-top:12px; color:#65896c; font:9px/1.3 'Nunito',sans-serif; }
.sms-sale-sparks { position:absolute; z-index:11; top:30%; left:50%; pointer-events:none; }
.sms-sale-sparks>i { position:absolute; width:8px; height:12px; border-radius:2px; background:#a5e593; opacity:0; }
.sms-sale-sparks>i:nth-child(2n) { background:#f2d67b; width:9px; height:9px; border-radius:50%; }
.sms-sale-sparks>i:nth-child(3n) { background:#85d4f6; width:6px; height:13px; }
@media (min-width:761px) and (max-width:1100px) {
  .sms-sale-note { left:-33px; bottom:65px; width:202px; padding:15px 17px; }
  .sms-sale-note>strong { font-size:54px; }
}
@media (min-width:761px) and (min-height:641px) and (max-height:780px) {
  .sms-phone-beat { top:-23px; font-size:10px; }
  .sms-sale-note { bottom:57px; width:194px; padding:14px 16px; }
  .sms-sale-note>strong { font-size:51px; }
  .sms-story .sms-sale-note>p { font-size:13px; }
}

/* A complete, deliberately composed transcript when a handset would be too
   small. It also serves reduced-motion readers and works before JS loads. */
@media (max-width: 760px), (max-height: 640px), (prefers-reduced-motion: reduce) {
  .sms-track { height: auto; }
  .sms-stage { position: relative; top: auto; display: block; height: auto; padding: 0; }
  .sms-stage-ambient, .sms-phone-pane, .sms-event-jump, .sms-story-foot > p { display: none; }
  .sms-copy { max-width: 680px; margin-inline: auto; padding: 43px 0 30px; }
  .sms-story-heading { margin-bottom: 28px; }
  .conversion-home .sms-story-heading h2 { font-size: clamp(34px, 7vw, 48px); }
  .sms-eyebrow { margin-bottom: 17px; }
  .sms-events { height: auto; }
  .sms-story .sms-event { padding: 24px 0 30px 34px; }
  .sms-event::before { top: 52px; bottom: -20px; }
  .sms-event::after { display: none; }
  .sms-event-marker { top: 28px; }
  .sms-event > .sms-event-time { font-size: 10px; margin-bottom: 6px; }
  .conversion-home .sms-event h3 { font-size: clamp(22px, 5.4vw, 27px); color: #e3edf3; }
  .sms-event > .sms-event-summary { font-size: 15px; margin-top: 9px; }
  .sms-event > .sms-event-proof { font-size: 12px; margin-top: 12px; align-items: flex-start; }
  .sms-event-proof svg { margin-top: 2px; }
  .sms-event:has(> button[aria-current='step']) .sms-event-marker { background: #102835; border-color: #496a7c; color: #c4d9e5; box-shadow: none; }
  .sms-story-foot { margin-top: 0; padding-top: 16px; }
  .sms-story-foot > small { font-size: 11px; }
  .sms-mobile-thread { display: flex; flex-direction: column; gap: 13px; margin-top: 25px; padding: 20px; max-width: 400px; border: 1px solid #385360; border-radius: 24px; background: linear-gradient(145deg, #1d3849, #132b3b); }
  .sms-mobile-sender { margin: 0 0 5px; color: #839eae; font-size: 10px; }
  .sms-mobile-thread .sms-bubble { max-width: 96%; font-size: 15px; line-height: 1.4; }
  .sms-mobile-thread.sms-inline-flow:has(.sms-inline-shop:not([hidden])) { padding: 0; }
  .sms-mobile-thread .sms-inline-shop { border-radius: 22px; }
  .sms-inline-shop .sms-return-content, .sms-inline-shop .sms-checkout-content { padding: 18px; }
  .sms-inline-shop .sms-shop-bottom { margin-top: 12px; }
  .sms-inline-shop .sms-shop-note { font-size: 10px; }
  .sms-inline-shop button.sms-sample-checkout { min-height: 44px; }
  .sms-inline-shop .sms-shop-back { min-height: 27px; font-size: 12px; }
  .sms-inline-flow:not(:has([data-sms-inline-panel='messages'])) [data-sms-action='messages'] { display: none; }
  .sms-purchase-trail { display: none; }
  .sms-mobile-thread .sms-order { border-radius: 13px; padding: 23px 18px 20px; }
  .sms-mobile-thread .sms-order > small { padding-top: 25px; font-size: 10px; }
  .sms-mobile-thread .sms-order-item { padding-block: 16px; }
  .sms-mobile-thread .sms-order-shipping { padding-block: 16px; }
  .sms-mobile-thread.sms-mobile-cart { flex-direction: row; align-items: center; gap: 14px; padding: 0; overflow: hidden; background: #e8eddc; border-color: #73866b; }
  .sms-mobile-cart img { width: 90px; height: 141px; object-fit: cover; }
  .sms-mobile-cart > div { display: grid; gap: 10px; color: #3e5539; padding: 16px 12px 16px 0; }
  .sms-mobile-cart div span { color: #7b896e; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
  .sms-mobile-cart div strong { font: 500 20px/1.1 Georgia, serif; }
  .sms-mobile-cart div b { font-size: 17px; font-weight: 500; }
  .sms-mobile-cart div b small { display: block; margin-top: 5px; font-size: 11px; font-weight: 400; color: #6c7d60; }
  .sms-close { flex-direction: column; align-items: flex-start; padding: 33px 0 43px; gap: 23px; }
  .sms-close p { font-size: 14px; }
  .sms-close .button { width: auto; }
}

/* On phones the samples use the page width, not a second inset inside the
   timeline. The inline cart, payment and order remain separate button steps. */
@media (max-width: 520px) {
  .sms-copy { padding-block:34px 24px; }
  .sms-story-heading { margin-bottom:18px; }
  .conversion-home .sms-story-heading h2 { font-size:clamp(30px,8vw,34px); }
  .sms-story .sms-event { padding:18px 0 22px 32px; }
  .sms-event-marker { top:21px; }
  .sms-event::before { display:none; }
  .sms-event > .sms-event-time { font-size:11px; }
  .conversion-home .sms-event h3 { font-size:22px; line-height:1.18; }
  .sms-event > .sms-event-summary { margin-top:7px; font-size:14px; line-height:1.5; }
  /* The product card and reminder already say these two summaries. */
  .sms-event:is([data-sms-scene='0'],[data-sms-scene='1']) > .sms-event-summary { display:none; }
  .sms-event > .sms-event-proof { margin-top:9px; font-size:12px; }
  .sms-event .sms-mobile-thread { width:calc(100% + 32px); max-width:none; margin:16px 0 0 -32px; padding:14px; border-radius:18px; }
  .sms-mobile-thread .sms-inline-shop { border-radius:17px; }
  .sms-mobile-thread .sms-bubble { max-width:100%; font-size:15px; line-height:1.45; }
  .sms-mobile-sender { color:#abc2d0; font-size:11px; }
  .sms-mobile-thread .sms-bubble small { font-size:11px; }
  .sms-story .sms-mobile-thread button.sms-example-url { display:flex; align-items:center; min-height:44px; padding-block:7px; overflow-wrap:anywhere; }
  .sms-event .sms-mobile-cart { padding:0; gap:12px; }
  .sms-mobile-cart img { width:72px; height:106px; flex:none; }
  .sms-mobile-cart > div { min-width:0; gap:7px; padding:12px 10px 12px 0; }
  .sms-mobile-cart div span { font-size:10px; letter-spacing:.04em; }
  .sms-mobile-cart div strong { font-size:21px; }
  .sms-inline-shop .sms-shop-header { height:44px; flex-basis:44px; padding:12px 16px; }
  .sms-inline-shop .sms-payment-header { padding:12px 16px; }
  .sms-payment-header > small { font-size:11px; }
  .sms-inline-shop :is(.sms-return-content,.sms-checkout-content) { padding:14px 16px 16px; }
  .sms-inline-shop .sms-shop-back { min-height:44px; margin:0 0 7px; padding:10px 0; font-size:14px; }
  .sms-inline-shop .sms-shop-intro { font-size:13px; margin-bottom:14px; }
  .sms-inline-shop .sms-return-item { gap:13px; }
  .sms-inline-shop .sms-return-item > img { width:70px; height:87px; flex:none; }
  .sms-inline-shop .sms-return-item > div,.sms-inline-shop .sms-checkout-item > div { min-width:0; }
  .sms-inline-shop .sms-return-item span { font-size:12px; }
  .sms-inline-shop .sms-free-delivery { font-size:12px; line-height:1.4; }
  .sms-inline-shop .sms-shop-bottom { margin-top:8px; padding-top:10px; }
  .sms-inline-shop .sms-shop-totals { font-size:13px; }
  .sms-inline-shop .sms-checkout-item { gap:10px; }
  .sms-inline-shop .sms-checkout-item :is(strong,b) { font-size:14px; }
  .sms-inline-shop .sms-checkout-item span { font-size:12px; }
  .sms-inline-shop .sms-checkout-details > div { padding:13px; gap:8px; }
  .sms-inline-shop .sms-checkout-details span { color:#536c7e; font-size:12px; }
  .sms-inline-shop .sms-checkout-details em { font-size:11px; }
  .sms-inline-shop .sms-checkout-details strong { font-size:15px; line-height:1.35; }
  .sms-inline-shop .sms-checkout-details small { color:#617687; font-size:12px; line-height:1.4; }
  .sms-inline-shop .sms-payment-total > div { font-size:13px; }
  .sms-inline-shop .sms-payment-total small { font-size:11px; }
  .sms-inline-shop .sms-payment-total > strong { font-size:30px; flex:none; }
  .sms-inline-shop .sms-payment-total > strong > span { font-size:10px; }
  .sms-inline-shop button.sms-sample-checkout { min-height:48px; padding:13px; font-size:15px; }
  .sms-inline-shop .sms-shop-note { margin-top:11px; font-size:11px; line-height:1.4; color:#687a69; }
  .sms-inline-shop.sms-payment-sheet .sms-shop-note { color:#647587; }
  .sms-inline-shop .sms-inline-replay { min-height:48px; padding:13px 16px; font-size:14px; }
  .sms-mobile-thread .sms-order { padding:22px 16px 18px; }
  .sms-mobile-thread .sms-order-item { padding-block:13px; }
  .sms-mobile-thread .sms-order-item strong { font-size:14px; }
  .sms-mobile-thread .sms-order-item div span { font-size:12px; }
  .sms-mobile-thread .sms-order-shipping { padding-block:13px; font-size:12px; }
  .sms-mobile-thread .sms-order > small { padding-top:18px; font-size:11px; color:#63745e; }
  .sms-story-foot > small { display:block; line-height:1.5; }
  .sms-close { padding-block:26px 34px; gap:18px; }
  .sms-close .button { width:100%; }
}

/* The combined mobile/reduced-motion block above replaces the scroll stage
   entirely, but the trail still renders there — so silence its pop explicitly
   rather than relying on that layout swap to hide it. */
@media (prefers-reduced-motion: reduce) {
  .sms-purchase-trail span { animation: none !important; transition: none; }
}