/* R17 home: How it works. A life-size iPhone (402 × 874 pt screen, scaled to fit with --k) plays the real
   builder: the store, the Classic product page (photo, free preview, buy) and iOS's own picker and keyboard.
   Everything inside .ph-scr is laid out in real iPhone points so type and spacing match the phone. */

/* ---------- Section ---------- */
.h-how{padding:0;overflow:visible}
.hw-pin{display:flex;align-items:center;padding:clamp(80px,10vw,140px) 0}
.h-how.hw-live .hw-pin{position:sticky;top:var(--hdr,74px);height:calc(100svh - var(--hdr,74px));padding:0;overflow:hidden}
.hw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(32px,5vw,88px);align-items:center}
.h-how.hw-live .hw-grid{height:100%}
.hw-copy{display:grid;gap:clamp(20px,2.6vw,32px);align-content:center}
.hw-copy .v-h2{font-size:clamp(2.4rem,4.4vw,4.3rem)}
.hw-steps{list-style:none;margin:0;padding:0;display:grid}
.hw-steps li{opacity:.46;transition:opacity .5s var(--ease)}
.hw-steps li.on{opacity:1}
.hw-steps button{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 12px;width:100%;padding:15px 0;border:0;border-top:1px solid rgba(243,232,214,.14);background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.hw-steps li:last-child button{border-bottom:1px solid rgba(243,232,214,.14)}
.hw-steps .n{font:500 .9rem/2.1 var(--sans);color:var(--gold-soft);font-variant-numeric:tabular-nums}
.hw-steps b{display:block;font:400 clamp(1.55rem,2.3vw,2.1rem)/1.1 var(--disp);color:#fff8ee}
.hw-steps .d{grid-column:2;display:block;color:rgba(243,232,214,.76);font-size:1rem;line-height:1.5;max-width:44ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .6s var(--ease)}
.hw-steps li.on .d{max-height:9em;opacity:1;margin-top:6px}
.hw-fmts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.hw-fmts>span{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(243,232,214,.08);box-shadow:inset 0 0 0 1px rgba(243,232,214,.16);color:#fff8ee;font:500 .92rem/1.2 var(--sans);white-space:nowrap}
.hw-fmts em{font-style:normal;color:var(--gold-soft)}
.hw-steps .bar{grid-column:2;height:2px;margin-top:12px;background:rgba(243,232,214,.14);border-radius:2px;overflow:hidden;visibility:hidden}
.hw-steps .bar i{display:block;height:100%;background:var(--gold-soft);transform-origin:0 50%;transform:scaleX(var(--lp,0))}
.hw-steps li.on .bar,.hw-steps li.done .bar{visibility:visible}
.hw-steps li.done .bar i{transform:scaleX(1)}
.hw-seg{display:none}
.hw-cta{display:grid;gap:14px;justify-items:start}
.hw-assure{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;font:500 .92rem/1.3 var(--sans);color:rgba(243,232,214,.78)}
.hw-assure span{display:inline-flex;align-items:center;gap:7px}
.hw-assure svg{width:16px;height:16px;color:var(--gold-soft)}
.h-how:not(.hw-live) .hw-steps li{opacity:1}
.h-how:not(.hw-live) .hw-steps .d{max-height:none;opacity:1;margin-top:6px}

.hw-stage{position:relative;display:grid;place-items:center;height:100%;min-height:0;min-width:0}
.hw-stage::before{content:"";position:absolute;width:min(92%,640px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,193,150,.22),rgba(217,193,150,0) 64%);pointer-events:none}
.h-how:not(.hw-live) .hw-stage{height:min(760px,82vh)}

/* ---------- The phone: iPhone 17 Pro proportions, silver aluminium ---------- */
.ph{--k:.7;position:relative}
.ph-box{position:relative;width:calc(432px * var(--k));height:calc(904px * var(--k))}
.ph-dev{position:absolute;left:0;top:0;width:432px;height:904px;transform:scale(var(--k));transform-origin:0 0}
.ph-rot{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(2600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1.8s cubic-bezier(.33,0,.15,1)}
/* Depth: thin slices behind the face show the band's edge when the phone turns. */
.ph-slab i{position:absolute;inset:0;border-radius:78px;background:linear-gradient(90deg,#4f4c48,#b9b5af 8%,#77736d 30%,#8f8b85 70%,#c4c0ba 92%,#4f4c48);transform:translateZ(calc(var(--z) * -1px))}
.ph-slab i:last-child{box-shadow:0 70px 110px -30px rgba(0,0,0,.9),0 26px 50px -24px rgba(0,0,0,.7)}
.ph-body{position:absolute;inset:0;border-radius:78px;
  background:conic-gradient(from 205deg at 50% 50%,#c4c1bc,#f5f3ef 5%,#a9a59f 13%,#dedbd6 23%,#8e8a84 35%,#ebe8e3 46%,#b0aca6 57%,#f3f1ed 67%,#99958e 79%,#dad7d2 90%,#c4c1bc);
  border:1px solid rgba(255,255,255,.7);box-sizing:border-box;outline:.6px solid rgba(0,0,0,.55)}
.ph-body::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 3%,rgba(0,0,0,0) 97%,rgba(0,0,0,.22))}
.ph-btn{position:absolute;width:6px;border-radius:3px;background:linear-gradient(90deg,#86827c,#ece9e4 42%,#a4a09a 70%,#7d7974);box-shadow:0 0 0 .5px rgba(0,0,0,.35)}
.ph-btn.act{left:-4px;top:176px;height:36px}
.ph-btn.vup{left:-4px;top:246px;height:64px}
.ph-btn.vdn{left:-4px;top:324px;height:64px}
.ph-btn.side{right:-4px;top:268px;height:100px;background:linear-gradient(270deg,#86827c,#ece9e4 42%,#a4a09a 70%,#7d7974)}
.ph-btn.cam{right:-3px;top:566px;height:64px;width:5px;background:linear-gradient(270deg,#3c3a37,#8f8c87 50%,#55524e)}
.ph-ant{position:absolute;background:rgba(92,89,84,.5)}
.ph-ant.t,.ph-ant.b{width:4px;height:7px}.ph-ant.t{top:0}.ph-ant.b{bottom:0}
.ph-ant.l{left:92px}.ph-ant.r{right:92px}
.ph-ant.s{width:7px;height:4px}.ph-ant.l1,.ph-ant.l2{left:0}.ph-ant.r1,.ph-ant.r2{right:0}
.ph-ant.l1,.ph-ant.r1{top:118px}.ph-ant.l2,.ph-ant.r2{bottom:118px}
.ph-bez{position:absolute;inset:5px;border-radius:73px;background:#020202;border:1.2px solid #2a2a2a}
.ph-glare{position:absolute;left:14px;top:14px;width:402px;height:874px;border-radius:61px;pointer-events:none;z-index:2;
  transition:opacity .6s;background:linear-gradient(var(--ga,116deg),rgba(255,255,255,0) 4%,rgba(255,255,255,.09) 12%,rgba(255,255,255,.04) 26%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 78%,rgba(255,255,255,.05) 100%);
}
/* The bezel drawn again on top of the screen's rounded edge: whatever a browser fails to clip at the corners
   (iPhone Safari can show a moving layer's square corners for a frame) is covered. A spread-only shadow: no blur. */
.ph-edge{position:absolute;left:14px;top:14px;width:402px;height:874px;border-radius:61px;pointer-events:none;z-index:1;box-shadow:0 0 0 7.5px #020202,inset 0 0 0 1.5px #020202}
.ph-floor{position:absolute;left:12%;right:12%;bottom:-2.5%;height:5%;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(22px)}

/* ---------- Screen (402 × 874) ---------- */
.ph-scr{position:absolute;left:14px;top:14px;width:402px;height:874px;border-radius:61px;overflow:hidden;clip-path:inset(0 round 61px);background:#020202;isolation:isolate;
  font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-align:left;line-height:1.4;user-select:none}
.ph-scr img{display:block}
.ph-scr svg{flex:none}
/* The screen itself is bezel-black so anti-aliased edges never show a light rim; the page colour sits just inside
   the edge so cross-fading pages never dip to black. */
.ph-scr::before{content:"";position:absolute;inset:2px;border-radius:59px;background:var(--cream)}
.ios-sb{position:absolute;z-index:90;left:0;right:0;top:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding-top:6px;background:#16110d;color:#fff;transition:background .35s,color .35s;font:600 17px/1 -apple-system,'SF Pro Text','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;letter-spacing:-.01em}
.ph-scr[data-sb=light] .ios-sb{background:var(--cream);color:#111}
.ios-sb .t{width:148px;text-align:center}
.ios-sb .ic{width:148px;display:flex;justify-content:center;align-items:center;gap:6px}
.ios-sb svg{height:12px;width:auto;fill:currentColor}
.ios-sb .bat{height:13px}
.ios-di{position:absolute;z-index:91;top:11px;left:50%;width:126px;height:37px;margin-left:-63px;border-radius:20px;background:#000}
.ios-di i{position:absolute;right:14px;top:12px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#3a4458 0,#10131a 55%,#050608 100%)}
.ios-home{position:absolute;z-index:92;bottom:8px;left:50%;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:#111;transition:background .3s}

/* Pages: each scrolls by moving .pg-in; the site header sticks under the status bar. */
.pg{position:absolute;inset:54px 0 0;overflow:hidden;background:var(--cream);transition:opacity .45s var(--ease),visibility 0s .45s}
.ph-scr[data-page=store] .pg-pdp,.ph-scr[data-page=pdp] .pg-store{opacity:0;visibility:hidden}
.ph-scr[data-page=store] .pg-store,.ph-scr[data-page=pdp] .pg-pdp{transition:opacity .45s var(--ease),visibility 0s}
.pg-top{position:absolute;z-index:5;left:0;right:0;top:0}
.pg-in{position:relative}
.w-ann{margin:0;padding:9px 30px;background:#16110d;color:#f1e7d8;text-align:center;font:500 13.4px/17px var(--sans);letter-spacing:.01em}
.w-hd{position:relative;height:64px;display:flex;align-items:center;gap:18px;padding:0 22px;background:var(--cream);border-bottom:1px solid rgba(22,17,13,.1)}
.w-hd img{height:43px;width:auto;margin-right:auto}
.w-hd svg{width:25px;height:25px}

/* Store */
.st-head{padding:30px 22px 4px}
.st-h{margin:0;font:400 54px/.92 var(--disp);letter-spacing:-.012em}
.st-l{margin:12px 0 0;font:400 16px/1.5 var(--sans);color:var(--ink-2)}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;padding:26px 22px 6px}
.st-card{display:grid;gap:9px;transition:transform .25s var(--ease)}
.st-card .m{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;clip-path:inset(0 round 16px);background:#e8dfd2}
.st-card .m img{width:100%;height:100%;object-fit:cover}
.st-card .tx{display:flex;justify-content:space-between;gap:8px;align-items:start}
.st-card b{display:block;font:600 14.5px/1.2 var(--sans)}
.st-card small{display:block;margin-top:3px;font:400 12px/1.3 var(--sans);color:var(--muted)}
.st-card .pr{display:grid;justify-items:end;font:500 14px/1.1 var(--sans);white-space:nowrap}
.st-card .pr small{margin:0 0 2px;font-size:11px}
.st-sec{padding:30px 22px 140px}
.st-h2{margin:0;font:400 36px/1 var(--disp);letter-spacing:-.01em}
.st-sec .st-l{margin:8px 0 18px;font-size:15px}
.st-classic .m{aspect-ratio:1;background:#eeebe6}
.st-card.press{transform:scale(.965)}

/* Product page: the simple builder (simple.css + type17.css) at phone width */
.pd-crumbs{display:flex;justify-content:center;gap:9px;margin:0;padding:20px 0 0;font:500 14px/1 var(--sans);color:var(--muted)}
.pd-crumbs b{font-weight:500;color:var(--ink)}
.pd-title{margin:12px 0 0;text-align:center;font:400 42px/.95 var(--disp);letter-spacing:-.012em}
.pd-line{margin:8px 0 18px;text-align:center;font:400 16.8px/1.45 var(--sans);color:var(--muted)}
.pd-body{padding:0 20px 160px}
.pd-stage{position:relative;margin:0 auto;width:332px;height:332px;border-radius:22px;overflow:hidden;clip-path:inset(0 round 22px);background:var(--sand);transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1)}
.pg-pdp[data-mode=making] .pd-stage,.pg-pdp[data-mode=preview] .pd-stage{width:361px;height:542px}
.pg-pdp[data-mode=buy] .pd-stage{width:350px;height:350px;background:linear-gradient(160deg,#f4f1eb,#e7e4de)}
.pd-stage>img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease)}
.pd-ex{object-fit:cover}
.pd-photo,.pd-blur{object-fit:cover}
.pg-pdp[data-mode=photo]:not(.has-photo) .pd-ex{opacity:1}
/* While it paints, the photo shows blurred: a pre-blurred copy (no live blur filter to redraw). */
.pg-pdp[data-mode=photo].has-photo .pd-photo,.pg-pdp[data-mode=making] .pd-blur,.pg-pdp[data-mode=preview] .pd-blur{opacity:1}
.pd-art{object-fit:contain;background:var(--sand);transform:scale(1.05);transition:opacity 1s ease,transform 1.6s cubic-bezier(.22,1,.36,1)!important}
.pg-pdp[data-mode=preview].shown .pd-art{opacity:1;transform:none}
.pd-mk{object-fit:contain}
.pd-mk.on{opacity:1}
.pd-mk.pd-dig{padding:7% 12%;box-sizing:border-box;filter:drop-shadow(0 14px 22px rgba(22,17,13,.28))}
.pg-pdp:not([data-mode=buy]) .pd-mk{opacity:0!important}
.pd-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);transform:translateX(-120%)}
.pd-sheen.go{animation:pd-sheen 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes pd-sheen{to{transform:translateX(120%)}}
.pd-badge{position:absolute;z-index:3;left:12px;top:12px;margin:0;padding:6px 10px;border-radius:999px;background:rgba(255,253,249,.92);font:600 12.5px/1 var(--sans);letter-spacing:.01em;transition:opacity .3s}
.pg-pdp[data-mode=making] .pd-badge,.pg-pdp[data-mode=buy] .pd-badge{opacity:0}
.pd-chip{position:absolute;z-index:3;top:10px;display:grid;place-items:center;min-height:38px;border-radius:999px;background:rgba(255,253,249,.92);box-shadow:0 4px 12px -8px rgba(22,17,13,.5);font:600 14.4px/1 var(--sans);opacity:0;transition:opacity .3s}
.pd-chip.back{left:10px;padding:0 14px}
.pd-chip.zoom{right:10px;width:38px}
.pd-chip svg{width:19px;height:19px}
.pg-pdp[data-mode=preview] .pd-chip.zoom,.pg-pdp[data-mode=buy] .pd-chip{opacity:1}
.pd-making{position:absolute;z-index:3;will-change:transform;left:14px;right:14px;bottom:14px;padding:16px 16px 14px;border-radius:18px;background:#fffdf9;box-shadow:0 24px 50px -28px rgba(22,17,13,.6);text-align:center;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .5s var(--ease)}
.pg-pdp[data-mode=making] .pd-making{opacity:1;transform:none}
.pd-making .t{margin:0;font:400 24.8px/1.05 var(--disp)}
.pd-making .l{min-height:1.4em;margin:6px 0 14px;font:400 16px/1.4 var(--disp);color:var(--ink-2)}
.pd-making .tr{position:relative;height:10px;margin:0 6px;border-radius:999px;background:rgba(22,17,13,.09)}
.pd-making .tr i{position:absolute;inset:0;border-radius:inherit;background:var(--rust);transform-origin:0 50%;transform:scaleX(.04)}
.pd-making .kn{position:absolute;left:0;right:0;top:50%;height:0;transform:translate3d(4%,0,0)}
.pd-making .kn::after{content:"";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:#fffdf9;box-shadow:0 3px 10px -3px rgba(22,17,13,.45)}
.pd-making .kn::before{content:"";position:absolute;left:-7px;top:-7px;z-index:1;width:14px;height:14px;background:var(--rust);-webkit-mask:url('/assets/paw-mask.svg') center/contain no-repeat;mask:url('/assets/paw-mask.svg') center/contain no-repeat;animation:sp-trot .5s ease-in-out infinite alternate}
@keyframes sp-trot{from{transform:rotate(-12deg) translateY(1px)}to{transform:rotate(12deg) translateY(-1px)}}
.pd-making .m{display:flex;justify-content:flex-end;margin:12px 6px 0;font:500 12.5px/1.3 var(--sans);color:var(--muted)}
.pd-making .m b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

.pd-panel{margin-top:18px}
.pg-pdp[data-mode=buy] .pd-panel{margin-top:12px}
.pp{display:none;gap:12px}
.pg-pdp[data-mode=photo] .pp-photo,.pg-pdp[data-mode=preview] .pp-preview,.pg-pdp[data-mode=buy] .pp-buy{display:grid;animation:pp-in .5s var(--ease-out,ease) both}
.pg-pdp[data-mode=buy] .pp-buy{gap:10px}
@keyframes pp-in{from{opacity:0;transform:translateY(10px)}}
.pd-pick{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;box-sizing:border-box;border:1.5px dashed rgba(22,17,13,.22);border-radius:14px;background:var(--paper);font:600 16.8px/1.2 var(--sans);transition:transform .2s var(--ease),background .2s}
.pd-pick .up{width:26px;height:26px;margin:0 11px}
.pd-pick img{display:none;width:48px;height:48px;border-radius:10px;object-fit:cover}
.has-photo .pd-pick .up{display:none}.has-photo .pd-pick img{display:block;animation:pp-pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pp-pop{from{transform:scale(.4);opacity:0}}
.pd-name{position:relative;display:flex;align-items:center;min-height:50px;padding:0 14px;box-sizing:border-box;border:1.5px solid rgba(22,17,13,.22);border-radius:14px;background:var(--paper);font:400 16.8px/1 var(--sans);transition:border-color .2s}
.pd-name .ph{color:#8f8579}
.pd-name.has .ph{display:none}
.pd-name .caret{display:none;width:2px;height:21px;margin-left:1px;border-radius:1px;background:#0a84ff;animation:ios-blink 1.05s steps(1) infinite}
.pd-name.focus .caret{display:block}
.pd-name.focus:not(.has) .caret{order:-1;margin:0 1px 0 0}
@keyframes ios-blink{50%{opacity:0}}
.pd-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.pd-opt{display:grid;place-items:center;align-content:center;gap:5px;min-height:48px;padding:6px 4px;box-sizing:border-box;border:1.5px solid rgba(22,17,13,.22);border-radius:14px;background:var(--paper);font:600 12.2px/1.15 var(--sans);text-align:center;transition:border-color .25s,box-shadow .25s,background .25s,transform .2s var(--ease)}
.pd-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sand)}
.pd-opt .sw{display:block;width:24px;height:24px;border-radius:7px;border:1px solid rgba(22,17,13,.22);background:var(--c,#f3ece2);box-sizing:border-box}
.sw-soft{--c:#f7f3ec}.sw-shadow{--c:#1d1a17}.sw-blue{--c:#cfdeea}.sw-pink{--c:#f2d6d3}.sw-black{--c:#16110d}.sw-white{--c:#fff}.sw-dark{--c:#5a3a24}.sw-light{--c:#c9a074}
.pd-opt .sw.none{background:repeating-linear-gradient(135deg,#fffdf9 0 4px,#ece4d8 4px 5px)}
.pd-go{display:flex;align-items:center;justify-content:center;gap:.28em;white-space:nowrap;min-height:56px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff8ee;font:650 17.3px/1 var(--sans);transition:background .45s,color .45s,transform .2s var(--ease),box-shadow .45s}
.pd-go.off{background:rgba(22,17,13,.22);color:var(--ink-2)}
.pd-go.ready{animation:go-ready .7s var(--ease-out,ease)}
@keyframes go-ready{0%{box-shadow:0 0 0 0 rgba(22,17,13,.35)}100%{box-shadow:0 0 0 14px rgba(22,17,13,0)}}
.pd-hint{margin:0;text-align:center;font:450 14.7px/1.4 var(--sans);color:var(--ink-2)}
.pd-lead{margin:0;text-align:center;font:400 31px/1.05 var(--disp)}
.pd-row{display:flex;justify-content:center;gap:8px 16px}
.pd-link{padding:6px 2px;font:600 16px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px}
.pd-promise{margin:18px 0 0;text-align:center;font:500 14.4px/1.4 var(--sans);color:var(--ink-2)}
/* Buy step at phone size (simple.css max-width:899px) */
.pd-cap{margin:0 0 -2px;text-align:center;font:600 15.2px/1.3 var(--sans);min-height:1.3em}
.pd-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:18px;background:var(--sand)}
.pd-tab{position:relative;display:grid;gap:2px;justify-items:center;align-content:center;min-height:46px;border-radius:14px;transition:background .3s,box-shadow .3s,transform .2s var(--ease)}
.pd-tab b{font:650 16px/1.1 var(--sans)}
.pd-tab small{font:500 13.4px/1 var(--sans);color:var(--ink-2)}
.pd-tab.on{background:var(--paper);box-shadow:0 6px 16px -10px rgba(22,17,13,.45)}
.pp-buy .pd-opt{min-height:44px}
.pd-frames .pd-opt{gap:4px;padding:5px 2px;font-size:11.5px;white-space:nowrap}
.pd-frames .sw{width:20px;height:20px;border-radius:6px}
.pp-buy .pd-go{min-height:52px}
.pp-buy .pd-hint{font-size:13.8px}
.pd-dhint{display:none}
.pp-buy[data-type=digital] .pd-sizes,.pp-buy[data-type=digital] .pd-frames{display:none}
.pp-buy[data-type=digital] .pd-dhint{display:block}
.pp-buy[data-type=canvas] .pd-opt[data-f=white]{display:none}
#pdPrice{display:inline-block;min-width:2.6ch;text-align:left;font-variant-numeric:tabular-nums}
.pd-go.bump{animation:go-bump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes go-bump{40%{transform:scale(1.035)}}
.ph-scr .press{transform:scale(.96)}

/* iOS: file menu, photo picker, keyboard, Safari bar, touch */
.ios-menu{position:absolute;z-index:52;width:250px;border-radius:16px;overflow:hidden;clip-path:inset(0 round 16px);background:rgba(246,245,243,.97);box-shadow:0 22px 60px -12px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.12);font:400 17px/1 -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;color:#111;opacity:0;transform:scale(.7);transform-origin:20% 0;transition:opacity .2s,transform .35s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.ios-menu.on{opacity:1;transform:none}
.ios-menu>span{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 16px;border-top:.5px solid rgba(0,0,0,.14);transition:background .15s}
.ios-menu>span:first-child{border-top:0}
.ios-menu>span.press{background:rgba(0,0,0,.08);transform:none}
.ios-menu svg{width:21px;height:21px}
.ios-dim{position:absolute;z-index:49;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .4s;pointer-events:none}
.ph-scr.sheet .ios-dim{opacity:1}
.ios-sheet{position:absolute;z-index:51;left:0;right:0;top:62px;bottom:0;border-radius:36px 36px 0 0;clip-path:inset(0 round 36px 36px 0 0);background:#fff;transform:translateY(104%);transition:transform .55s cubic-bezier(.2,.95,.25,1);font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;color:#111}
.ph-scr.sheet .ios-sheet{transform:none}
.sh-hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:62px;padding:6px 18px 0}
.sh-hd .c{color:#0a84ff;font-size:17px}
.sh-hd .a{justify-self:end;color:#b5b5ba;font-size:17px;font-weight:600}
.sh-seg{display:grid;grid-auto-flow:column;padding:2px;border-radius:9px;background:#eeeef0;font:600 13px/1 inherit}
.sh-seg span{padding:7px 14px;border-radius:7px;color:#333}
.sh-seg .on{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sh-day{margin:8px 18px 10px;font:700 21px/1.1 -apple-system,'SF Pro Display','Segoe UI',system-ui,sans-serif}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.sh-grid span{position:relative;aspect-ratio:1;background:#eee;overflow:hidden;transition:filter .2s}
.sh-grid img{width:100%;height:100%;object-fit:cover}
.sh-grid span.press,.sh-grid span.sel{transform:none;filter:brightness(.72)}
.ios-kb{position:absolute;z-index:48;left:0;right:0;bottom:0;height:306px;background:#d3d5db;transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.95,.25,1);font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;color:#111}
.ph-scr.kb .ios-kb{transform:none}
.kb-acc{display:flex;align-items:center;gap:20px;height:44px;padding:0 16px;background:#f2f2f4;border-bottom:.5px solid rgba(0,0,0,.14);color:#9a9aa0}
.kb-acc svg{width:22px;height:22px}
.kb-acc b{margin-left:auto;color:#0a84ff;font-size:17px;font-weight:600}
.kb-keys{display:grid;gap:11px;padding:9px 3px 0}
.kb-row{display:flex;justify-content:center;gap:6px}
.kb-row i{display:grid;place-items:center;width:34px;height:43px;border-radius:6px;background:#fff;box-shadow:0 1px 0 #8c8d91;font:400 23px/1 inherit;font-style:normal;transition:background .08s}
.kb-row i.sp{background:#adb2bc;font-size:16px}
.kb-row i.w{width:44px}.kb-row i.x{width:90px}.kb-row i.space{flex:1;max-width:186px;font-size:16px}
.kb-row i.dn{background:#c7c9cf}
.kb-row i.sp.dn{background:#fff}
.kb-up .kb-row i.l{text-transform:uppercase}
.kb-sys{display:flex;justify-content:space-between;padding:12px 22px 0;color:#555}
.kb-sys svg{width:26px;height:26px}
.kb-pop{position:absolute;width:56px;height:62px;margin:-80px 0 0 -28px;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);display:grid;place-items:center;font:400 34px/1 -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;opacity:0;pointer-events:none}
.kb-pop.on{opacity:1}
.ph-scr.kb .ios-bar{opacity:0;transform:translateY(40px)}
.ios-bar{position:absolute;z-index:40;left:12px;right:12px;bottom:28px;height:52px;display:grid;grid-template-columns:52px 1fr 52px;gap:8px;transition:left .5s var(--ease),right .5s var(--ease),bottom .5s var(--ease),height .5s var(--ease),opacity .3s,transform .4s var(--ease);font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;color:#111}
.ios-bar>span{display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(252,251,249,.86);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 10px 26px -8px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.9);transition:opacity .35s,font-size .5s var(--ease)}
.ios-bar .b-side svg{width:22px;height:22px;fill:currentColor}
.b-url{position:relative;gap:7px;overflow:hidden;font-size:16.5px;font-weight:500}
.b-url svg{width:19px;height:19px}
.b-url .ld{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#0a84ff;transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .3s}
.b-url .ld.on{opacity:1}
.ios-bar.mini{left:108px;right:108px;bottom:14px;height:30px;grid-template-columns:0 1fr 0;gap:0}
.ios-bar.mini .b-side{opacity:0}
.ios-bar.mini .b-url{font-size:12.5px;background:rgba(252,251,249,.7)}
.ios-bar.mini .b-url svg{display:none}
.ios-touch{position:absolute;z-index:80;left:0;top:0;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(40,34,28,.24);box-shadow:0 0 0 2.5px rgba(255,255,255,.9),0 8px 20px rgba(0,0,0,.26);opacity:0;scale:1.35;pointer-events:none;transition:opacity .3s ease,scale .25s ease,background .15s;will-change:translate,scale}
.ios-touch.on{opacity:1;scale:1}
.ios-touch.on.down{scale:.8;background:rgba(40,34,28,.42)}
.ios-touch::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0}
.ios-touch.ring::after{animation:t-ring .55s ease-out}
/* Step changes that don't follow on from the last one dissolve through the page colour. */
.ios-fade{position:absolute;z-index:85;inset:0;background:var(--cream);opacity:0;pointer-events:none;transition:opacity .2s ease}
.ph-scr.fading .ios-fade{opacity:1}
.ph-scr.snap,.ph-scr.snap *{transition:none!important}
@keyframes t-ring{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(2)}}

/* Short desktop windows (laptops): tighter copy so the heading, four steps and the button all fit. */
@media (min-width:901px) and (max-height:860px){
  .hw-copy{gap:18px}
  .hw-copy .v-h2{font-size:clamp(2.2rem,6.4vh,3.8rem)}
  .hw-steps button{padding:11px 0}
  .hw-steps b{font-size:clamp(1.4rem,3.6vh,1.9rem)}
  .hw-steps .d{font-size:.95rem}
  .hw-steps .bar{margin-top:9px}
}
@media (min-width:901px) and (max-height:700px){.hw-assure{display:none}.hw-fmts{margin-bottom:6px}}

/* ---------- Phones: heading, phone, then the step ---------- */
@media (max-width:900px){
  .h-how.hw-live .hw-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding-block:16px 18px;align-items:stretch}
  .h-how.hw-live .hw-copy{display:contents}
  .h-how.hw-live #howH{order:1;font-size:clamp(1.9rem,8.4vw,2.7rem);max-width:none}
  .h-how.hw-live .hw-stage{order:2}
  .h-how.hw-live .hw-foot{order:3;display:grid;gap:12px}
  .h-how.hw-live .hw-cta{display:none}
  .h-how.hw-live .hw-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .hw-seg i{display:block;height:3px;border-radius:3px;background:rgba(243,232,214,.16);overflow:hidden}
  .hw-seg i::after{content:"";display:block;height:100%;background:var(--gold-soft);transform-origin:0 50%;transform:scaleX(var(--sp,0))}
  .h-how.hw-live .hw-steps li{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  .h-how.hw-live .hw-steps li.on{opacity:1;pointer-events:auto}
  .h-how.hw-live .hw-steps button{border:0!important;padding:0;grid-template-columns:34px minmax(0,1fr)}
  .h-how.hw-live .hw-steps .n{line-height:1.6}
  .h-how.hw-live .hw-steps b{font-size:1.55rem}
  .h-how.hw-live .hw-steps .d{max-height:none;opacity:1;margin-top:4px;font-size:.93rem}
  .h-how.hw-live .hw-steps .bar{display:none}
  .h-how.hw-live .hw-fmts{margin:2px 0 6px;gap:5px}
  .h-how.hw-live .hw-fmts>span{padding:4px 10px;font-size:.84rem}
  .h-how.hw-live .hw-more{display:none}
  .h-how:not(.hw-live) .hw-grid{grid-template-columns:1fr}
  .ph-rot{transform:none;transform-style:flat;transition:none}
  .ph-slab{display:none}
  .ph-floor{left:6%;right:6%;bottom:-2%;height:7%;background:rgba(0,0,0,.75)}
}
@media (prefers-reduced-motion:reduce){.ph-rot,.pd-stage,.ios-sheet,.ios-kb,.ios-bar,.pg{transition:none}.pd-making .tr i::before,.pd-name .caret{animation:none}}