/* Computer-first walkthrough, inventory, removable mobile concept, and iPhone walk page. */

.walk{background:var(--studio);color:var(--studio-ink);padding:0;overflow-x:clip}
.walk-track{height:540vh;overflow-anchor:none}
.walk-sticky{
  position:sticky;top:var(--measured-nav, calc(var(--nav-h) + var(--nav-safe)));
  height:calc(100svh - var(--measured-nav, calc(var(--nav-h) + var(--nav-safe))));
  display:flex;align-items:stretch;padding:.7rem 0;box-sizing:border-box;
  overflow:visible
}
.walk-frame{position:relative;z-index:1;width:var(--wide);margin-inline:auto;height:100%}
.walk-perimeter{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.walk-perimeter-bar{fill:none;stroke:#9C2B24;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:0 100;stroke-dashoffset:0}
.walk-inner{
  position:relative;z-index:1;width:100%;height:100%;
  display:grid;grid-template-columns:minmax(14rem,.85fr) minmax(17rem,1.15fr);
  gap:clamp(1.2rem, 3.5vw, 3rem);align-items:center;align-content:center;
  box-sizing:border-box;
  padding:clamp(1.1rem, 2.8vh, 1.8rem) 1.15rem
}
html.rm .walk-track,html:not(.js) .walk-track{height:auto}
html.rm .walk-sticky,html:not(.js) .walk-sticky{position:relative;top:auto;height:auto;padding:0}
html.rm .walk-perimeter-bar,html:not(.js) .walk-perimeter-bar{stroke-dasharray:14 86}
.walk-copy{min-width:0;grid-column:1;grid-row:1}
.walk-copy .kicker{color:var(--studio-mute)}
.walk-index{
  display:block;margin:0 0 .7rem;
  font:300 .92rem/1 "Outfit", Helvetica, sans-serif;
  letter-spacing:.14em;color:var(--studio-mute)
}
.walk-copy h2{
  font-size:clamp(2.1rem, 1.15rem + 2.8vw, 3.6rem);
  margin:0 0 .75rem;max-width:14ch;color:var(--studio-ink)
}
.walk-caption{color:var(--studio-mute);max-width:32ch;font-size:clamp(1.02rem, 1rem + .2vw, 1.18rem);line-height:1.45}
.walk-static{margin:0;padding:0;list-style:none}
.walk-static li{margin:0 0 1.1rem}
.walk-static strong{display:block;font:300 1.55rem/1.1 "Outfit", sans-serif;letter-spacing:-.04em;margin-bottom:.25rem}
.walk-static span{color:var(--studio-mute)}
html.js:not(.rm) .walk-static{display:none}
html:not(.js) .walk-live, html.rm .walk-live{display:none}
html:not(.js) .walk-inner, html.rm .walk-inner{height:auto;max-height:none;min-height:0;padding:clamp(2rem, 6vh, 3.5rem) 1.15rem}

.walk-stage{min-width:0;position:relative;overflow:visible;grid-column:2;grid-row:1}
.walk-canvas{position:relative;min-height:22rem;display:grid;place-items:center}
.buy-card,.os-row,.laptop-scene{
  grid-area:1/1;width:min(100%, 34rem);transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.buy-card{
  background:#1b1b1b;color:var(--studio-ink);
  padding:1.6rem 1.5rem 1.5rem;
  border:1px solid rgba(237,236,232,.12);
  border-radius:var(--radius-btn);
}
.plan-tag{
  display:inline-flex;align-items:center;min-height:1.6rem;padding:0 .55rem;
  border-radius:var(--radius-btn);border:1px solid rgba(237,236,232,.28);
  font:500 .72rem/1 "Source Sans 3", sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--studio-ink)
}
.buy-name{margin:.9rem 0 .35rem;font:300 1.8rem/.9 "Outfit", Helvetica, sans-serif;letter-spacing:-.045em}
.buy-price{font:300 clamp(2rem, 1.2rem + 2vw, 2.8rem)/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.04em}
.buy-note{margin-top:.55rem;color:var(--studio-mute)}

.os-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.os-pill{
  flex:1 1 9rem;max-width:14rem;min-height:6.2rem;
  display:flex;flex-direction:column;justify-content:center;gap:.35rem;
  padding:1.1rem 1.15rem;background:#1b1b1b;
  border:1px solid rgba(237,236,232,.14);border-radius:var(--radius-btn)
}
.os-pill span{font:300 1.65rem/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.04em}
.os-pill small{color:var(--studio-mute);font:500 .85rem/1.3 "Source Sans 3", sans-serif}
.os-pill .os-mark{display:flex;align-items:center;gap:.45rem}
.os-pill .os-win{width:1.15rem;height:1.15rem;flex:0 0 auto}
.os-pill .os-apple{width:auto;height:1.25rem;flex:0 0 auto;filter:invert(1)}
.os-mac-word{font:500 1.65rem/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.04em}
.os-in{width:100%;justify-content:stretch}
.os-in .os-pill{max-width:none;min-height:4.4rem;background:#242422;border-color:rgba(237,236,232,.22)}

.laptop-scene{position:relative;min-height:0;width:min(100%, 34rem);padding-bottom:6.2rem;box-sizing:border-box}
.walk-canvas[data-walk-scene="2"] .laptop-scene,
.walk-canvas[data-walk-scene="3"] .laptop-scene,
.walk-canvas[data-walk-scene="4"] .laptop-scene,
.walk-canvas[data-walk-scene="5"] .laptop-scene{padding-bottom:6.2rem}
.laptop{position:relative;width:min(100%, 28rem);margin:0 auto}
.laptop-lid{
  position:relative;
  padding:12px 12px 14px;
  border-radius:16px 16px 4px 4px;
  background:#0a0a0b;
  box-shadow:inset 0 0 0 1px #ffffff24,0 0 0 2px #2a2a2d,0 30px 60px -20px #000000e6
}
.laptop-lid:before{
  content:"";position:absolute;top:4px;left:50%;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:#26272a
}
.laptop-screen{
  position:relative;background:#0c0d0e;aspect-ratio:16/10;
  border-radius:3px;overflow:hidden
}
.laptop-chin{display:none}
.laptop:after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-12px;height:12px;
  border-radius:1px 1px 10px 10px;background:linear-gradient(#3a3b3e,#1f2022);
  box-shadow:inset 0 1px #ffffff2e
}
.laptop:before{
  content:"";position:absolute;z-index:1;left:50%;bottom:-6px;width:18%;height:5px;
  transform:translate(-50%);border-radius:0 0 6px 6px;background:#161719
}
.laptop-base{display:none}
.laptop-port{display:none}

.scr{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;
  padding:1rem 1.05rem 1.1rem;opacity:0;
  transition:opacity .4s var(--ease)
}
.scr-brand{display:inline-flex;align-items:center;gap:.4rem;font:300 1.15rem/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.04em;margin-bottom:.55rem}
.scr-brand .brand-mark svg{width:22px;height:16px;display:block}
.scr-line{margin:0;color:rgba(237,236,232,.88);font:300 1.15rem/1.25 "Outfit", Helvetica, sans-serif;letter-spacing:-.03em;max-width:16ch}
.scr-ring{
  width:2.4rem;height:2.4rem;margin:0 0 .7rem;
  border-radius:50%;
  background:conic-gradient(var(--studio-ink) calc(var(--prep, 0) * 1turn), rgba(237,236,232,.16) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px))
}
.scr-offline{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.55rem}

.scr-launch{
  justify-content:flex-start;align-items:stretch;gap:.38rem;
  padding:.5rem .5rem .45rem
}
.scr-apps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.28rem;width:100%;flex:1;align-content:center
}
.scr-app{
  display:flex;align-items:center;justify-content:center;
  min-height:3.15rem;padding:.35rem .25rem;text-align:center;
  background:#1b1b1b;border:1px solid rgba(237,236,232,.14);border-radius:.7rem
}
.scr-app-name{
  font:500 .66rem/1.2 "Outfit", Helvetica, sans-serif;
  letter-spacing:-.02em;color:rgba(237,236,232,.94)
}
.scr-dl{display:flex;flex-direction:column;gap:.26rem;width:100%}
.scr-dl-btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:1.8rem;padding:.32rem .45rem;border-radius:var(--radius-btn);
  background:#9C2B24;color:#F7F4EF;
  font:500 .64rem/1.2 "Outfit", Helvetica, sans-serif;letter-spacing:-.01em
}
.scr-dl-note{
  margin:0;max-width:36ch;color:rgba(237,236,232,.62);
  font:500 .56rem/1.3 "Source Sans 3", sans-serif
}

.drive-stage{
  position:absolute;left:50%;right:auto;top:auto;bottom:0;
  width:min(100%, 22.5rem);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:.4rem .8rem;
  transform:translate(-50%,0);opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;z-index:3
}
.drive-note{
  grid-column:1;
  grid-row:1;
  align-self:end;
  justify-self:start;
  display:block;box-sizing:border-box;
  width:100%;max-width:42ch;
  margin:0;padding:0;
  min-height:2.7em;
  text-align:left;color:rgba(237,236,232,.72);
  font:500 .58rem/1.35 "Source Sans 3", sans-serif;
  opacity:0;
  transition:opacity .55s var(--ease);
  pointer-events:none;
  z-index:2
}
.walk-inner:has(.walk-canvas[data-walk-scene="5"]) .drive-note{opacity:1}
html.rm .drive-note,
html:not(.js) .drive-note{opacity:1}
.media-opts{
  width:100%;display:flex;justify-content:center;align-items:flex-end;gap:1.35rem
}
.media-opt{
  display:flex;flex-direction:column;align-items:center;gap:.34rem
}
.media-opt svg{display:block}
.media-usb{width:2.7rem;height:auto}
.media-ext{width:2.55rem;height:auto}
.media-label{
  color:rgba(237,236,232,.82);
  font:500 .7rem/1 "Outfit", Helvetica, sans-serif;
  letter-spacing:-.02em;white-space:nowrap
}
.conn-opts{width:100%;display:flex;justify-content:center;gap:1rem}
.conn-opt{
  display:inline-flex;align-items:center;gap:.32rem;
  color:rgba(237,236,232,.72);
  font:500 .66rem/1 "Source Sans 3", sans-serif;letter-spacing:.03em
}
.conn-a{
  width:1.02rem;height:.4rem;display:inline-block;
  background:linear-gradient(180deg,#eeeae2,#9c978d);border-radius:1px
}
.conn-c{
  width:.86rem;height:.32rem;display:inline-block;
  background:linear-gradient(180deg,#eeeae2,#9c978d);border-radius:999px
}

/* scene visibility */
.walk-canvas .buy-card,
.walk-canvas .os-row,
.walk-canvas .laptop-scene{opacity:0;pointer-events:none;transform:translateY(12px)}
.walk-canvas[data-walk-scene="0"] .buy-card,
.walk-canvas[data-walk-scene="1"] .os-row,
.walk-canvas[data-walk-scene="2"] .laptop-scene,
.walk-canvas[data-walk-scene="3"] .laptop-scene,
.walk-canvas[data-walk-scene="4"] .laptop-scene,
.walk-canvas[data-walk-scene="5"] .laptop-scene{opacity:1;pointer-events:none;transform:none}

.walk-canvas[data-walk-scene="2"] .scr-prep,
.walk-canvas[data-walk-scene="3"] .scr-launch,
.walk-canvas[data-walk-scene="4"] .scr-save,
.walk-canvas[data-walk-scene="5"] .scr-off{opacity:1}

.walk-canvas[data-walk-scene="3"] .drive-stage,
.walk-canvas[data-walk-scene="4"] .drive-stage,
.walk-canvas[data-walk-scene="5"] .drive-stage{opacity:1;transform:translate(-50%,0)}
.walk-canvas[data-walk-scene="0"] .buy-card{pointer-events:auto}

html.rm .walk-canvas .buy-card,
html.rm .walk-canvas .os-row,
html.rm .walk-canvas .laptop-scene,
html:not(.js) .walk-canvas .buy-card,
html:not(.js) .walk-canvas .os-row,
html:not(.js) .walk-canvas .laptop-scene{opacity:1;transform:none;position:relative;grid-area:auto;margin:0 0 1rem;pointer-events:none}
html.rm .walk-canvas,
html:not(.js) .walk-canvas{display:flex;flex-direction:column;gap:1rem;min-height:0}
html.rm .scr, html:not(.js) .scr{position:absolute}
html.rm .scr-off, html:not(.js) .scr-off{opacity:1}
html.rm .scr-prep, html:not(.js) .scr-prep,
html.rm .scr-save, html:not(.js) .scr-save{opacity:0}
html.rm .drive-stage, html:not(.js) .drive-stage{opacity:1;transform:translate(-50%,0)}
html.rm .laptop-scene, html:not(.js) .laptop-scene{padding-bottom:6.2rem}
html.rm .walk-canvas .os-row, html:not(.js) .walk-canvas .os-row{order:-1}

@media (prefers-reduced-motion: reduce){
  .buy-card,.os-row,.laptop-scene,.drive-stage,.drive-note,.scr{transition:none !important}
}

.kit{padding:clamp(5rem, 12vh, 10rem) 0}
.kit-head h2{font-size:var(--h2);margin:.2rem 0 .7rem;max-width:16ch}
.kit-head p{color:var(--ink-soft);max-width:42ch}
.app-shelf{
  list-style:none;margin:2.4rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem, 3vw, 2.2rem)
}
.app-shelf li{min-width:0}
.app-icon{
  width:4.1rem;height:4.1rem;border-radius:var(--radius-btn);
  background:var(--studio);color:var(--studio-ink);
  display:grid;place-items:center;margin-bottom:1rem
}
.app-icon svg{width:2rem;height:1.45rem}
.app-icon-maps{background:#1b1b1b}
.app-icon-ency{background:#1b1b1b}
.app-shelf h3{font-size:clamp(1.45rem, 1rem + 1.1vw, 1.85rem);margin:.35rem 0 .45rem}
.app-shelf p{color:var(--ink-soft);max-width:28ch}
.app-shelf .plan-tag{color:var(--ink);border-color:var(--line);margin-bottom:.15rem}

/* Removable mobile concept. Delete this block and #mobile-concept to drop the iPhone mock. */
.mobile-concept{padding:0 0 clamp(5rem, 12vh, 9rem)}
.mobile-layout{
  display:grid;grid-template-columns:minmax(14rem,.9fr) minmax(14rem,1fr);
  gap:clamp(1.6rem, 5vw, 4rem);align-items:center
}
.mobile-copy h2{font-size:var(--h2);margin:.2rem 0 .7rem;max-width:14ch}
.mobile-copy p{color:var(--ink-soft);max-width:36ch}
.phone-block{width:min(100%, 17.6rem);margin-inline:auto}
.phone{width:100%}
.phone-shell{
  position:relative;width:100%;aspect-ratio:70.6 / 146.6;
  padding:0;border-radius:40px;background:#1c1c1e;
  box-shadow:inset 0 0 0 1.5px #3a3a3c,inset 0 0 0 3px #0b0b0c,0 0 0 1px #ffffff29,0 30px 60px -20px #000000e6
}
.phone-shell:before,.phone-shell:after{content:"";position:absolute;width:4px;background:#8a8a8e;border-radius:2px;z-index:2}
.phone-shell:before{left:-4px;top:16%;height:3.6%;box-shadow:0 26px #8a8a8e,0 52px #8a8a8e}
.phone-shell:after{right:-4px;top:22%;height:8%}
.phone-screen{
  position:absolute;top:6px;right:8px;bottom:6px;left:8px;
  display:flex;flex-direction:column;
  background:#141312;color:#EDECE8;
  border-radius:35px;min-height:0;padding:0;overflow:hidden
}
.phone-status{
  position:relative;height:48px;flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 0;z-index:2
}
.phone-screen .fs-shell{flex:1;min-height:0;border-radius:0 0 33px 33px}
.phone-time{font:600 .78rem/1 "Source Sans 3", sans-serif;color:#EDECE8}
.phone-island{
  position:absolute;top:12px;left:50%;width:88px;height:26px;margin-left:-44px;
  border-radius:999px;background:#000;box-shadow:0 0 0 1px #ffffff12
}
.phone-batt{
  position:relative;width:20px;height:10px;border-radius:3px;
  border:1px solid rgba(237,236,232,.55);
  background:linear-gradient(#EDECE8,#EDECE8) 1px 1px / 13px 6px no-repeat
}
.phone-batt:after{
  content:"";position:absolute;right:-3px;top:2px;width:1.5px;height:4px;
  border-radius:0 1px 1px 0;background:rgba(237,236,232,.55)
}
.phone-cap{display:none}
.phone-word{display:flex;align-items:center;gap:.4rem;font:300 1.2rem/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.045em;margin:0 0 .25rem}
.phone-note{color:var(--mute);font-size:.88rem;margin:0 0 1.15rem}
.phone-apps{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.phone-apps li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;
  padding:.15rem 0
}
.phone-apps .app-icon{width:3.1rem;height:3.1rem;margin:0}
.phone-apps h3{font-size:1.15rem;margin:0 0 .15rem}
.phone-apps p{margin:0;color:var(--mute);font-size:.88rem}
.store-planned{
  margin-top:1.6rem;display:flex;gap:.85rem;align-items:center;
  max-width:34rem;padding:.85rem .95rem;border:1px solid var(--line);border-radius:var(--radius-btn)
}
.store-planned .store-mark{
  flex:0 0 auto;width:3.1rem;height:3.1rem;border-radius:var(--radius-btn);
  background:var(--ink);color:var(--paper);display:grid;place-items:center
}
.store-planned .store-mark svg{width:1.55rem;height:1.1rem}
.store-planned strong{display:block;font:300 1.25rem/1.15 "Outfit", Helvetica, sans-serif;letter-spacing:-.03em;margin:0 0 .25rem}
.store-planned p{color:var(--ink-soft);margin:0}
a.store-planned:hover{border-color:var(--ink)}

.faq details{border-top:1px solid var(--line);padding:.75rem 0}
.faq summary{
  cursor:pointer;font:300 1.45rem/1.2 "Outfit", sans-serif;letter-spacing:-.03em;
  display:flex;align-items:center;gap:.75rem;min-height:var(--tap);
  list-style:none
}
.faq summary::-webkit-details-marker{display:none !important}
.faq summary::marker{content:"";display:none}
.faq-dot{
  flex:0 0 auto;width:.9rem;height:.9rem;border-radius:50%;
  background:#9C2B24;box-shadow:inset 0 0 0 2.5px #9C2B24
}
.faq details[open] .faq-dot{background:transparent}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ans{color:var(--ink-soft);max-width:58ch;margin:.15rem 0 .55rem 2.2rem}

.app-msg{opacity:1;transform:none}
.app-msg.is-in{animation:msg-in .5s cubic-bezier(.22,1,.36,1) both}
@keyframes msg-in{
  from{opacity:0;transform:translateY(.7rem)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .app-msg.is-in{animation:none}
}
html.rm .app-msg.is-in, html.fs-reduce-motion .app-msg.is-in{animation:none}

@media (max-width:860px){
  .hero .laptop:after{left:-5%;right:-5%}
  .walk-track{height:480vh}
  .walk-inner{grid-template-columns:1fr;gap:.4rem;padding:.7rem .85rem .8rem;align-items:start;align-content:start}
  .walk-copy,.walk-stage{grid-column:1;grid-row:auto}
  .walk-copy h2{font-size:clamp(1.55rem, 6.4vw, 2.05rem);margin-bottom:.4rem}
  .walk-caption{font-size:.96rem}
  .walk-canvas{min-height:0}
  .laptop{width:min(100%, 20.5rem)}
  .walk-canvas[data-walk-scene="2"] .laptop-scene,
  .walk-canvas[data-walk-scene="3"] .laptop-scene,
  .walk-canvas[data-walk-scene="4"] .laptop-scene,
  .walk-canvas[data-walk-scene="5"] .laptop-scene,
  .laptop-scene{padding-bottom:6.8rem}
  .drive-stage{width:min(100%, 18.5rem);padding:0 .15rem;box-sizing:border-box}
  .drive-note{grid-column:1;grid-row:auto;align-self:start;width:100%;max-width:none}
  .scr-app{min-height:2.7rem}
  .scr-dl-note{font-size:.52rem}
  .app-shelf{grid-template-columns:1fr}
  .mobile-layout{grid-template-columns:1fr}
  .ans{margin-left:0}
}


/* iPhone walkthrough on /iphone.html. Homepage laptop walk rules stay unchanged. */
.iphone-intro{padding:clamp(3.2rem, 8vh, 5.5rem) 0 2.4rem}
.walk-iphone .walk-live{min-height:12.5rem}
.walk-iphone .walk-copy h2{max-width:16ch}
.walk-iphone .walk-controls{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.05rem}
.walk-iphone .walk-step-btn{
  min-height:44px;padding:0 1rem;
  border:1px solid rgba(237,236,232,.38);
  background:transparent;color:var(--studio-ink);
  border-radius:var(--radius-btn);
  font:500 .92rem/1 "Source Sans 3", sans-serif;
  cursor:pointer
}
.walk-iphone .walk-step-btn:disabled{opacity:.38;cursor:default}
.walk-iphone .walk-step-btn:not(:disabled):hover{background:rgba(237,236,232,.08)}
.walk-iphone .walk-stage{overflow:visible}
.walk-iphone .walk-canvas{
  min-height:28rem;display:grid;place-items:center;overflow:visible
}
.walk-iphone .phone-scene{
  grid-area:1/1;width:min(100%, 14.4rem);margin:0 auto
}
.walk-iphone .iphone-scr-stack{position:relative;flex:1;min-height:0}
.walk-iphone .iphone-scr{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:.55rem .75rem 1rem;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease)
}
.walk-iphone .walk-canvas[data-walk-scene="0"] .iphone-scr-buy,
.walk-iphone .walk-canvas[data-walk-scene="1"] .iphone-scr-store,
.walk-iphone .walk-canvas[data-walk-scene="2"] .iphone-scr-signin,
.walk-iphone .walk-canvas[data-walk-scene="3"] .iphone-scr-activate,
.walk-iphone .walk-canvas[data-walk-scene="4"] .iphone-scr-download,
.walk-iphone .walk-canvas[data-walk-scene="5"] .iphone-scr-offline{opacity:1}
.walk-iphone .walk-canvas[data-walk-scene="0"] .iphone-scr-buy{pointer-events:auto}
.walk-iphone .iphone-scr-kicker{
  margin:0 0 .4rem;color:rgba(237,236,232,.62);
  font:500 .62rem/1 "Source Sans 3", sans-serif;letter-spacing:.08em;text-transform:uppercase
}
.walk-iphone .iphone-scr-title{
  margin:0 0 .35rem;max-width:12ch;
  font:300 1.28rem/1.1 "Outfit", Helvetica, sans-serif;letter-spacing:-.035em
}
.walk-iphone .iphone-scr-price{
  margin:0 0 .4rem;
  font:300 1.7rem/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.04em
}
.walk-iphone .iphone-scr-line{
  margin:0 0 .45rem;max-width:16ch;color:rgba(237,236,232,.88);
  font:300 .98rem/1.3 "Outfit", Helvetica, sans-serif;letter-spacing:-.03em
}
.walk-iphone .iphone-scr-note{
  margin:.35rem 0 0;max-width:18ch;color:rgba(237,236,232,.6);
  font:500 .62rem/1.35 "Source Sans 3", sans-serif
}
.walk-iphone .iphone-scr-fake{
  width:100%;min-height:2.1rem;margin:.15rem 0 .45rem;padding:.45rem .6rem;
  border:1px solid rgba(237,236,232,.2);border-radius:.7rem;
  color:rgba(237,236,232,.45);
  font:500 .78rem/1.2 "Source Sans 3", sans-serif
}
.walk-iphone .iphone-scr-visual,
.walk-iphone .iphone-scr-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2rem;padding:.35rem .8rem;border-radius:var(--radius-btn);
  background:#9C2B24;color:#F7F4EF;
  font:500 .72rem/1 "Outfit", Helvetica, sans-serif;letter-spacing:-.01em
}
.walk-iphone .iphone-scr-link{text-decoration:none}
.walk-iphone .drive-note{max-width:36ch}

html.rm .walk-iphone .iphone-scr,
html:not(.js) .walk-iphone .iphone-scr{position:absolute;opacity:0}
html.rm .walk-iphone .walk-canvas[data-walk-scene="0"] .iphone-scr-buy,
html.rm .walk-iphone .walk-canvas[data-walk-scene="1"] .iphone-scr-store,
html.rm .walk-iphone .walk-canvas[data-walk-scene="2"] .iphone-scr-signin,
html.rm .walk-iphone .walk-canvas[data-walk-scene="3"] .iphone-scr-activate,
html.rm .walk-iphone .walk-canvas[data-walk-scene="4"] .iphone-scr-download,
html.rm .walk-iphone .walk-canvas[data-walk-scene="5"] .iphone-scr-offline,
html:not(.js) .walk-iphone .walk-canvas[data-walk-scene="0"] .iphone-scr-buy,
html:not(.js) .walk-iphone .walk-canvas[data-walk-scene="1"] .iphone-scr-store,
html:not(.js) .walk-iphone .walk-canvas[data-walk-scene="2"] .iphone-scr-signin,
html:not(.js) .walk-iphone .walk-canvas[data-walk-scene="3"] .iphone-scr-activate,
html:not(.js) .walk-iphone .walk-canvas[data-walk-scene="4"] .iphone-scr-download,
html:not(.js) .walk-iphone .walk-canvas[data-walk-scene="5"] .iphone-scr-offline{opacity:1}
html.rm .walk-iphone .walk-controls{display:flex}

@media (prefers-reduced-motion: reduce){
  .walk-iphone .iphone-scr{transition:none !important}
}

html.rm .walk-iphone .walk-live,
html:not(.js) .walk-iphone .walk-live{display:block;min-height:0}
html.rm .walk-iphone .walk-live .walk-index,
html.rm .walk-iphone .walk-live [data-walk-title],
html.rm .walk-iphone .walk-live [data-walk-caption],
html:not(.js) .walk-iphone .walk-live .walk-index,
html:not(.js) .walk-iphone .walk-live [data-walk-title],
html:not(.js) .walk-iphone .walk-live [data-walk-caption]{display:none}

@media (max-width:860px){
  /* Compact, height-aware iPhone walk: smaller phone, tighter stack, fit Safari toolbars. */
  .walk-iphone .walk-sticky{padding:.36rem 0}
  .walk-iphone .walk-inner{
    height:100%;
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:.2rem;
    padding:.4rem .85rem .34rem;
    align-items:stretch;
    align-content:stretch
  }
  .walk-iphone .walk-copy{grid-row:1;min-width:0}
  .walk-iphone .walk-stage{
    grid-row:2;min-width:0;min-height:0;
    display:flex;align-items:flex-start;justify-content:center
  }
  .walk-iphone .drive-note{
    grid-row:3;align-self:start;width:100%;
    margin:0;max-width:36ch;font-size:.72rem;line-height:1.35
  }
  .walk-iphone .walk-copy .kicker{margin:0 0 .12rem}
  .walk-iphone .walk-index{margin:0 0 .2rem}
  .walk-iphone .walk-copy h2{
    font-size:clamp(1.28rem, 5.4vw, 1.7rem);
    margin:0 0 .2rem;
    max-width:22ch
  }
  .walk-iphone .walk-caption{font-size:.9rem;line-height:1.35;margin:0}
  .walk-iphone .walk-controls{margin-top:.4rem}
  .walk-iphone .walk-live{min-height:12.2rem}
  .walk-iphone .walk-canvas{
    container-type:size;
    min-height:0;width:100%;height:100%;
    display:flex;align-items:flex-start;justify-content:center
  }
  .walk-iphone .phone-scene{
    container-type:inline-size;
    container-name:iphone-device;
    width:min(8.5rem, 44%);
    height:auto;
    aspect-ratio:70.6 / 146.6
  }
  .walk-iphone .phone-scene{
    width:min(8.5rem, 44cqi, calc(100cqh * 70.6 / 146.6 - 0.01px));
    height:auto;
    max-width:100%;
    aspect-ratio:70.6 / 146.6
  }
  .walk-iphone .iphone-scr-stack{overflow:hidden;min-height:0}
  .walk-iphone .phone,
  .walk-iphone .phone-shell{
    width:100%;height:auto;
    aspect-ratio:70.6 / 146.6
  }
  /* Scale outer/inner radii from the 14.4rem desktop mock (40px / 35px), so a smaller phone is not pill-shaped. */
  .walk-iphone .phone-shell{
    border-radius:17.36cqi
  }
  .walk-iphone .phone-screen{
    top:max(3px, 2.6cqi);
    right:max(4px, 3.47cqi);
    bottom:max(3px, 2.6cqi);
    left:max(4px, 3.47cqi);
    border-radius:15.19cqi
  }
  .walk-iphone .phone-screen .fs-shell{border-radius:0 0 14.32cqi 14.32cqi}
  .walk-iphone .phone-shell:before,
  .walk-iphone .phone-shell:after{width:max(2px, 1.74cqi)}
  .walk-iphone .phone-shell:before{
    left:calc(-1 * max(2px, 1.74cqi));
    box-shadow:0 11.3cqi #8a8a8e, 0 22.6cqi #8a8a8e
  }
  .walk-iphone .phone-shell:after{right:calc(-1 * max(2px, 1.74cqi))}
  .walk-iphone .phone-status{height:max(24px, 20.8cqi);padding:max(4px, 4.3cqi) max(8px, 6.9cqi) 0}
  .walk-iphone .phone-island{
    top:max(5px, 5.2cqi);
    width:38.2cqi;height:max(11px, 11.3cqi);
    margin-left:-19.1cqi
  }
  .walk-iphone .phone-time{font-size:max(.55rem, 5.4cqi)}
  .walk-iphone .phone-batt{width:max(12px, 8.7cqi);height:max(6px, 4.3cqi)}
  .walk-iphone .scr-brand{font-size:max(.62rem, 8cqi);margin-bottom:max(.14rem, 1.9cqi)}
  .walk-iphone .scr-brand .brand-mark svg{width:max(12px, 12.2cqi);height:max(9px, 8.7cqi)}
  .walk-iphone .iphone-scr{padding:max(.28rem, 3.8cqi) max(.36rem, 5.2cqi) max(.4rem, 6.9cqi)}
  .walk-iphone .iphone-scr-title{font-size:max(.7rem, 8.9cqi);margin:0 0 max(.16rem, 2.4cqi)}
  .walk-iphone .iphone-scr-price{font-size:max(.82rem, 11.8cqi);margin:0 0 max(.16rem, 2.8cqi)}
  .walk-iphone .iphone-scr-line{font-size:max(.58rem, 6.8cqi);line-height:1.3;margin:0 0 max(.16rem, 3.1cqi)}
  .walk-iphone .iphone-scr-kicker{font-size:max(.5rem, 4.3cqi);margin:0 0 max(.14rem, 2.8cqi)}
  .walk-iphone .iphone-scr-note{font-size:max(.48rem, 4.3cqi)}
  .walk-iphone .iphone-scr-fake{
    min-height:max(1.35rem, 14.6cqi);
    padding:max(.22rem, 3.1cqi) max(.32rem, 4.2cqi);
    font-size:max(.55rem, 5.4cqi)
  }
  .walk-iphone .iphone-scr-visual,
  .walk-iphone .iphone-scr-link{
    min-height:max(1.4rem, 13.9cqi);
    padding:max(.22rem, 2.4cqi) max(.42rem, 5.6cqi);
    font-size:max(.52rem, 5cqi)
  }
  .walk-iphone .scr-ring{width:max(1.35rem, 16.7cqi);height:max(1.35rem, 16.7cqi);margin:0 0 max(.22rem, 4.9cqi)}
  .walk-iphone .app-chip{
    min-height:max(1.05rem, 10cqi);
    padding:0 max(.28rem, 3.5cqi);
    margin:0 max(.16rem, 2.1cqi) max(.2rem, 3.1cqi) 0;
    font-size:max(.5rem, 4.7cqi)
  }
  html.rm .walk-iphone .walk-inner,
  html:not(.js) .walk-iphone .walk-inner{
    height:auto;max-height:none;grid-template-rows:auto auto auto
  }
  html.rm .walk-iphone .phone-scene,
  html:not(.js) .walk-iphone .phone-scene{
    max-height:none;width:min(46%, 8.5rem);height:auto
  }
}
@media (max-width:360px){
  .walk-iphone .phone-scene{width:min(7.7rem, 48cqi, calc(100cqh * 70.6 / 146.6 - 0.01px))}
  .walk-iphone .walk-live{min-height:11.7rem}
}
@media (max-width:860px) and (max-height:640px){
  .walk-iphone .walk-copy h2{font-size:clamp(1.22rem, 5vw, 1.48rem);max-width:22ch}
  .walk-iphone .walk-caption{font-size:.9rem}
  .walk-iphone .walk-live{min-height:11.85rem}
  .walk-iphone .phone-scene{width:min(7.6rem, 42cqi, calc(100cqh * 70.6 / 146.6 - 0.01px))}
}

@container iphone-device (max-width: 7.5rem){
  .walk-iphone .iphone-scr{overflow:hidden;justify-content:flex-end}
  .walk-iphone .iphone-scr-kicker,
  .walk-iphone .scr-brand,
  .walk-iphone .scr-offline{display:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.walk-iphone .app-chip{
  display:inline-flex;align-items:center;
  min-height:1.45rem;padding:0 .5rem;margin:0 .3rem .45rem 0;
  border:1px solid rgba(237,236,232,.28);border-radius:var(--radius-btn);
  font:500 .68rem/1 "Source Sans 3", sans-serif;color:rgba(237,236,232,.9)
}