/* GENERATED by add-profile-page-build/tools/build-theme.mjs: the sale page's sheets scoped under .apx (the <main> of
   /add-profile-page), keyframes prefixed apx-, then the hand-written theme integration. Do not edit here. Inputs sha256 e382cbdd4ab44682c4efbdb007c52890e5072b168450e07b44e88a477f988d2c (tools/theme-build.lock.json in add-profile-page-build). */

/* ==== css/page.css ==== */
/* Add-profile sale page - standalone build (2026-09-17). Step 1: header bar + Ledger hero + stats.
   Type: Söhne for titles and UI (300/400/500, never heavier), National 2 for body copy. */
.apx{
  --ink:#141414; --ink2:rgba(20,20,20,.62); --ink3:rgba(20,20,20,.5); --hair:rgba(20,20,20,.12);
  --pink:#ff3366; --bar:#050505; --band:#F6F6F7;
  --so:"Söhne",system-ui,-apple-system,"Segoe UI",sans-serif;
  --na:"National 2","Söhne",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px; --gutter:20px;
}
.apx,.apx *{box-sizing:border-box;margin:0;padding:0}
.apx{background:#fff}
/* owner 2026-09-22 (Apple's grey band): everything between the hero and the first dark section sits on #F5F5F7 */
.apx .statement,.apx .platform{background:#F5F5F7}
.apx{font-family:var(--na);color:var(--ink);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip}
.apx a{color:inherit;text-decoration:none}
.apx img{display:block;max-width:100%}
.apx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.apx .wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin:0 auto}

/* ---------- header bar ---------- */

/* ---------- buttons ---------- */
.apx .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 28px;border-radius:999px;font-family:var(--so);font-size:16px;font-weight:400;letter-spacing:.15px;color:#fff;background:linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);box-shadow:0 4px 12px rgba(255,51,102,.3);white-space:nowrap;transition:filter .15s,transform .15s}
.apx .btn:hover{filter:brightness(1.04)}
.apx .btn:active{transform:scale(.985)}
.apx .btn--lg{height:56px;padding:0 34px;font-size:17px}
.apx .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-family:var(--so);font-size:16px;font-weight:400;color:var(--ink);border:1px solid rgba(20,20,20,.22);background:#fff;white-space:nowrap;transition:border-color .15s,background .15s}
.apx .btn-ghost:hover{border-color:rgba(20,20,20,.45)}
.apx .btn-ghost--lg{height:56px;padding:0 30px;font-size:17px}

/* ---------- type ---------- */
.apx .kicker{font-family:var(--so);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.apx .kicker b{font-weight:500;color:var(--ink);margin-right:8px}
.apx .h-hero{font-family:var(--so);font-weight:500;font-size:68px;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.apx .h-hero b{font-weight:500}
.apx .lead{font-family:var(--na);font-size:21px;line-height:1.35;color:rgba(20,20,20,.66);text-wrap:pretty}
.apx .small{font-family:var(--na);font-size:14px;line-height:1.4;color:var(--ink3)}

/* ---------- hero ---------- */
.apx .hero{padding:80px 0 60px}
.apx .hero__grid{display:grid;grid-template-columns:1fr 560px;gap:60px;align-items:center}
.apx .hero__copy{display:flex;flex-direction:column;gap:24px}
.apx .hero__copy .lead{max-width:520px}
.apx .hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* right side: the film placeholder, Airbnb-style stage, desktop frame (the phone is saved for the Platform section) */
.apx .hero__stage{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.apx .stage__glow{position:absolute;inset:0;background:radial-gradient(58% 46% at 50% 58%,#E9EAED 0%,rgba(233,234,237,.55) 45%,rgba(255,255,255,0) 100%);pointer-events:none}
.apx .frame{position:relative;width:100%;max-width:560px;aspect-ratio:560/420;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.08)}
.apx .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.apx .vid{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 8px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-family:var(--so);font-size:12px;letter-spacing:.02em;backdrop-filter:blur(8px)}
.apx .vid svg{width:12px;height:12px;fill:#fff}
.apx .vid__bar{display:block;width:64px;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.apx .vid__bar i{display:block;height:100%;width:0;background:#fff;animation:apx-filmbar 6s linear infinite}
@keyframes apx-filmbar{from{width:0}to{width:100%}}
.apx .stage__pause{position:absolute;right:18px;bottom:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 2px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.apx .stage__pause svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- stats ---------- */
.apx .stats{padding:20px 0 90px}
.apx .stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.apx .stat-row .v{font-family:var(--so);font-weight:300;font-size:52px;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.apx .stat-row .v b{font-weight:300;font-size:26px;vertical-align:top;margin-left:2px}
.apx .stat-row .l{font-family:var(--na);font-size:14px;color:var(--ink2);margin-top:10px}

/* ---------- statement reveal ---------- */
.apx .statement{padding:40px 0 120px}
.apx .statement__inner{max-width:980px}
.apx .reveal{font-family:var(--so);font-weight:400;font-size:56px;letter-spacing:-.025em;line-height:1.1;color:rgba(20,20,20,.22);text-wrap:pretty}
.apx .reveal .w{color:inherit;transition:color .45s cubic-bezier(.22,1,.36,1)}
.apx .reveal .w.on{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.apx .reveal{color:var(--ink)}}
@media (max-width:1100px){.apx .reveal{font-size:48px}}
@media (max-width:768px){.apx .statement{padding:8px 0 64px}.apx .reveal{font-size:32px;line-height:1.15}}

/* ---------- section 02: platform ---------- */
.apx .platform{padding:120px 0 120px}
.apx .platform__opener{display:flex;flex-direction:column;gap:22px;max-width:900px}
.apx .kicker--line{display:flex;align-items:center;gap:12px}
.apx .kicker--line b{margin:0}
.apx .kicker--line i{display:block;width:28px;height:1px;background:rgba(20,20,20,.25)}
.apx .h-platform{font-family:var(--so);font-weight:500;font-size:64px;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.apx .platform__lead{max-width:620px}
.apx .platform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:stretch;margin-top:90px}
.apx .platform__stagecol{position:relative}
.apx .stage2{position:sticky;top:calc(var(--hdr) + 40px);height:calc(100vh - var(--hdr) - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.apx .stage2__glow{position:absolute;left:-40px;right:-40px;top:8%;bottom:4%;border-radius:50%;background:radial-gradient(closest-side,#E9EAED 0%,rgba(233,234,237,.55) 50%,rgba(255,255,255,0) 100%);pointer-events:none}
.apx .phone2{position:relative;width:354px;border-radius:50px;background:#0b0b0c;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06) inset;flex:none}
.apx .phone2__screen{position:relative;height:727px;border-radius:42px;overflow:hidden;background:#000}
.apx .screen{position:absolute;inset:0;opacity:0;transition:opacity .45s cubic-bezier(.22,1,.36,1);will-change:opacity}
.apx .screen.is-on{opacity:1;z-index:1}
.apx .screen img,.apx .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.apx .screen video{opacity:0;transition:opacity .2s}
.apx .screen video.is-playing{opacity:1}
.apx .stage2__meta{position:relative;display:flex;align-items:center;gap:14px;font-family:var(--so);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.apx .dots{display:flex;gap:5px;align-items:center}
.apx .dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(20,20,20,.2);transition:width .3s cubic-bezier(.22,1,.36,1),background .3s}
.apx .dots i.is-on{width:18px;background:var(--ink)}
/* room after the last caption (owner 2026-09-23: "Your blog and feed." stopped a little below the others). The phone stays
   pinned until the rail ends; with this room it lets go exactly when the last caption's centre is level with the phone's
   centre. Phone centre = (100vh + hdr + 40) / 2 - 23, 23 = half the gap and label row under the phone; the last caption's
   box is 70vh, so its centre sits 35vh above the rail's end: room = 15vh - (hdr + 40) / 2 + 23. Phones reset it (<= 900). */
.apx .platform__rail{list-style:none;margin:0;padding:0 0 calc(15vh - (var(--hdr) + 40px) / 2 + 23px) 40px;display:flex;flex-direction:column}
.apx .cap{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:0}
.apx .cap:last-child{min-height:70vh}
.apx .cap__title{margin:0;font-family:var(--so);font-weight:400;font-size:40px;line-height:1.08;letter-spacing:-.02em;color:rgba(20,20,20,.28);transition:color .35s cubic-bezier(.22,1,.36,1)}
.apx .cap.is-on .cap__title{color:var(--ink);transition-duration:.45s}
.apx .cap__desc{margin:0;max-width:380px;font-family:var(--na);font-size:17px;line-height:1.45;color:var(--ink2);opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),max-height .25s cubic-bezier(.22,1,.36,1),margin .25s}
.apx .cap.is-on .cap__desc{opacity:1;transform:none;max-height:220px;margin-top:12px;transition-duration:.45s;transition-delay:.12s}
/* opener entrance, once, when the section is in view */
@media (prefers-reduced-motion:no-preference){
  .apx .platform__opener>*{opacity:0;transform:translateY(14px)}
  .apx .platform .phone2{opacity:0;transform:translateY(28px) scale(.98)}
  .apx .platform.is-in .platform__opener>*{animation:apx-rise .65s cubic-bezier(.22,1,.36,1) forwards}
  .apx .platform.is-in .platform__opener>*:nth-child(1){animation-duration:.5s;animation-delay:0s}
  .apx .platform.is-in .platform__opener>*:nth-child(2){animation-delay:.08s}
  .apx .platform.is-in .platform__opener>*:nth-child(3){animation-delay:.16s}
  .apx .platform.is-in .phone2{animation:apx-rise .9s cubic-bezier(.22,1,.36,1) .25s forwards}
}
@media (prefers-reduced-motion:reduce){
  .apx .screen,.apx .cap__title,.apx .cap__desc,.apx .dots i{transition:none}
}
@media (max-width:1100px){
  .apx .h-platform{font-size:56px}
  .apx .phone2{width:318px}
  .apx .phone2__screen{height:649px}
  .apx .cap__title{font-size:34px}
}
@media (max-width:900px){
  .apx .platform{padding:64px 0 80px}
  .apx .h-platform{font-size:46px}
  .apx .platform__grid{display:block;margin-top:56px}
  .apx .platform__stagecol{position:sticky;top:calc(var(--hdr) + 12px);z-index:2;background:linear-gradient(#F5F5F7 82%,rgba(245,245,247,0))}
  .apx .stage2{position:static;height:auto;padding:0 0 18px;gap:0}
  .apx .stage2__glow{top:0;bottom:10%}
  .apx .phone2{width:calc(min(54svh,546px) * .462 + 16px);padding:8px;border-radius:44px}
  .apx .phone2__screen{height:min(54svh,546px);border-radius:37px}
  .apx .stage2__meta{display:none}
  .apx .platform__rail{padding:20px 0 0}
  .apx .cap{min-height:44vh;justify-content:flex-start}
  .apx .cap:last-child{min-height:64vh}
  .apx .cap__title{font-size:30px}
  .apx .cap__desc{font-size:16px;max-width:none}
}
@media (max-width:768px){
  .apx .platform{padding:56px 0 64px}
  .apx .h-platform{font-size:36px}
  .apx .platform__lead{font-size:17px}
}

/* ---------- section 03: touring (the dark chapter: pinned stage, four scroll states) ---------- */
.apx .touring{background:#0F0F0F;color:#F5F5F7;padding:120px 0 120px;margin-top:20px;--ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--tink:#F5F5F7;--tmute:rgba(245,245,247,.62);--tdim:rgba(245,245,247,.3)}
.apx .touring__opener{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:900px;margin:0 auto}
.apx .teyebrow{font-family:var(--so);font-weight:500;font-size:21px;letter-spacing:-.01em;color:rgba(245,245,247,.72)}
.apx .h-touring{font-family:var(--so);font-weight:500;font-size:64px;letter-spacing:-.03em;line-height:1.05;color:var(--tink);text-wrap:balance;max-width:900px}
.apx .touring__lead{max-width:640px;color:var(--tmute)}
/* the route strip, on dark */
.apx .route{position:relative;width:100%;max-width:640px;margin:0 auto}
.apx .route__line{position:absolute;left:12.5%;right:12.5%;top:2px;height:2px;background-image:repeating-linear-gradient(90deg,rgba(245,245,247,.28) 0 6px,transparent 6px 12px)}
.apx .route__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--pink);transition:width .9s var(--ease)}
.apx .route__mark{position:absolute;top:-4px;width:10px;height:10px;margin-left:-6px;border-radius:50%;border:2px solid rgba(245,245,247,.8);background:#0F0F0F;box-sizing:border-box}
.apx .route__dot{position:absolute;top:-6px;left:12.5%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,51,102,.22);transition:left .9s var(--ease)}
.apx .route__ghost{position:absolute;top:-4px;left:37.5%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:rgba(255,51,102,.35);opacity:0;transition:opacity .4s}
.apx .route__stops{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
.apx .route__stop{display:grid;grid-template-rows:auto auto 14px;row-gap:4px;justify-items:center}
.apx .route__stop>b{grid-row:1;font-family:var(--so);font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--tink)}
.apx .route__date{grid-row:2;font-family:var(--na);font-size:13px;color:var(--tmute)}
.apx .route__state em{font-style:normal}
.apx .route__state{grid-row:3;grid-column:1;font-family:var(--so);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);height:14px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.apx [data-state="arrive"] .route__ghost{opacity:1}
.apx [data-state="arrive"] .route__state--arrive,.apx [data-state="here"] .route__state--here,.apx [data-state="home"] .route__state--home{opacity:1;transform:none}
.apx [data-state="here"] .route__dot{left:37.5%;animation:apx-dotpulse 2.4s ease-in-out infinite}
.apx [data-state="here"] .route__fill{width:33.4%}
@keyframes apx-dotpulse{0%,100%{box-shadow:0 0 0 4px rgba(255,51,102,.22)}50%{box-shadow:0 0 0 9px rgba(255,51,102,.12)}}
/* the stage */
.apx .touring__grid{display:grid;grid-template-columns:560px minmax(0,1fr);gap:80px;align-items:stretch;margin-top:72px}
.apx .touring__stagecol{position:relative}
.apx .tstage{position:sticky;top:calc(var(--hdr) + 40px);height:calc(100vh - var(--hdr) - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;--ph:min(727px,calc(100vh - var(--hdr) - 220px))}
.apx .tstage__glow{position:absolute;left:-20%;right:-20%;top:20%;bottom:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,51,102,.16),rgba(255,51,102,0));pointer-events:none}
.apx .tphone2{position:relative;width:calc(var(--ph) * .462 + 18px);border-radius:50px;background:#0b0b0c;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset;flex:none}
.apx .tphone2__screen{position:relative;height:var(--ph);border-radius:42px;overflow:hidden;background:#fff}
.apx .tscreen{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);will-change:opacity}
.apx .tscreen.is-on{opacity:1;z-index:1}
.apx .tscreen img,.apx .tscreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.apx .tscreen video{opacity:0;transition:opacity .2s}
.apx .tscreen video.is-playing{opacity:1}
.apx .touring__rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.apx .tcap{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.apx .tcap:last-child{min-height:70vh}
.apx .tcap__title{margin:0;font-family:var(--so);font-weight:500;font-size:32px;line-height:1.08;letter-spacing:-.02em;color:var(--tdim);transition:color .35s var(--ease)}
.apx .tcap.is-on .tcap__title{color:var(--tink);transition-duration:.45s}
.apx .tcap__desc{margin:0;max-width:440px;font-family:var(--na);font-size:17px;line-height:1.45;color:var(--tmute);opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),max-height .25s var(--ease),margin .25s}
.apx .tcap.is-on .tcap__desc{opacity:1;transform:none;max-height:200px;margin-top:12px;transition-duration:.45s;transition-delay:.12s}
.apx .touring__close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:40px;max-width:820px;margin:0 auto}
.apx .tclose{margin:0;font-family:var(--so);font-weight:500;font-size:48px;letter-spacing:-.03em;line-height:1.08;color:var(--tink)}
.apx .tfacts{margin:0;font-family:var(--so);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,247,.5)}
/* entrance */
@media (prefers-reduced-motion:no-preference){
  .apx .touring__opener>*{opacity:0;transform:translateY(14px)}
  .apx .touring .route{opacity:0;transform:translateY(12px)}
  .apx .touring .tphone2{opacity:0;transform:translateY(28px) scale(.98)}
  .apx .touring.is-in .touring__opener>*{animation:apx-rise .65s var(--ease) forwards}
  .apx .touring.is-in .touring__opener>*:nth-child(1){animation-duration:.5s}
  .apx .touring.is-in .touring__opener>*:nth-child(2){animation-delay:.08s}
  .apx .touring.is-in .touring__opener>*:nth-child(3){animation-delay:.16s}
  .apx .touring.is-in .route{animation:apx-rise .7s var(--ease) .2s forwards}
  .apx .touring.is-in .tphone2{animation:apx-rise .9s var(--ease) .3s forwards}
}
@media (prefers-reduced-motion:reduce){
  .apx .route__dot,.apx .route__fill,.apx .route__state,.apx .tscreen,.apx .tcap__title,.apx .tcap__desc{transition:none;animation:none}
}
@media (max-width:1100px){
  .apx .touring{padding:96px 0 100px}
  .apx .h-touring{font-size:52px}
  .apx .touring__grid{grid-template-columns:420px minmax(0,1fr);gap:48px}
  .apx .tstage{--ph:min(649px,calc(100vh - var(--hdr) - 220px))}
  .apx .route__stop>b{font-size:14px}
  .apx .tcap__title{font-size:28px}
  .apx .tclose{font-size:40px}
}
@media (max-width:900px){
  .apx .touring{padding:64px 0 72px}
  .apx .h-touring{font-size:44px}
  .apx .teyebrow{font-size:17px}
  .apx .touring__grid{display:block;margin-top:40px}
  .apx .touring__stagecol{position:sticky;top:calc(var(--hdr) + 12px);z-index:2;background:linear-gradient(#0F0F0F 84%,rgba(15,15,15,0))}
  .apx .tstage{position:static;height:auto;gap:22px;padding:0 0 18px}
  .apx .tstage__glow{top:30%;bottom:0}
  .apx .route__stop>b{font-size:12px}
  .apx .route__date{font-size:11px}
  .apx .route__state{font-size:9px;letter-spacing:.06em}
  .apx .route__state em{display:none}
  .apx .tphone2{width:calc(min(46svh,460px) * .462 + 16px);padding:8px;border-radius:40px}
  .apx .tphone2__screen{height:min(46svh,460px);border-radius:33px}
  .apx .touring__rail{padding:20px 0 0}
  .apx .tcap{min-height:44vh;justify-content:flex-start}
  .apx .tcap:last-child{min-height:64vh}
  .apx .tcap__title{font-size:28px}
  .apx .tcap__desc{font-size:16px;max-width:none}
  .apx .touring__close{padding-top:16px}
  .apx .tclose{font-size:34px}
}
@media (max-width:768px){
  .apx .h-touring{font-size:40px}
  .apx .touring__lead{font-size:17px}
}

/* ---------- temporary next-section placeholder ---------- */
.apx .next-ph{padding:0 0 120px}
.apx .next-ph__box{min-height:80vh;border:1px dashed rgba(20,20,20,.18);border-radius:24px;display:flex;align-items:center;justify-content:center;font-family:var(--so);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

/* ---------- entrance (once, on load) ---------- */
@media (prefers-reduced-motion:no-preference){
  .apx .hero__copy>*{opacity:0;transform:translateY(14px);animation:apx-rise .7s cubic-bezier(.22,1,.36,1) forwards}
  .apx .hero__copy>*:nth-child(1){animation-delay:.05s}.apx .hero__copy>*:nth-child(2){animation-delay:.12s}.apx .hero__copy>*:nth-child(3){animation-delay:.2s}.apx .hero__copy>*:nth-child(4){animation-delay:.28s}.apx .hero__copy>*:nth-child(5){animation-delay:.36s}
  .apx .frame{opacity:0;transform:translateY(28px);animation:apx-rise .9s cubic-bezier(.22,1,.36,1) .25s forwards}
  .apx .stat-row>*{opacity:0;transform:translateY(10px);animation:apx-rise .6s cubic-bezier(.22,1,.36,1) forwards}
  .apx .stat-row>*:nth-child(1){animation-delay:.5s}.apx .stat-row>*:nth-child(2){animation-delay:.56s}.apx .stat-row>*:nth-child(3){animation-delay:.62s}.apx .stat-row>*:nth-child(4){animation-delay:.68s}
  @keyframes apx-rise{to{opacity:1;transform:none}}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .apx .h-hero{font-size:58px}
  .apx .hero__grid{grid-template-columns:1fr 460px;gap:40px}
  .apx .hero__stage{min-height:480px}
}
@media (max-width:900px){
  .apx .hero{padding:48px 0 32px}
  .apx .hero__grid{grid-template-columns:1fr;gap:36px}
  .apx .hero__stage{min-height:0;padding:24px 0}
  .apx .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:768px){
  .apx .h-hero{font-size:44px;line-height:1.07}
  .apx .kicker b{display:block;margin:0 0 6px}
  .apx .lead{font-size:18px}
  .apx .hero__copy{gap:18px}
  .apx .hero__cta .btn,.apx .hero__cta .btn-ghost{height:52px;flex:1 1 auto}
  .apx .hero__stage{padding:12px 0 8px}
  .apx .frame{border-radius:14px}
  .apx .stage__pause{right:6px;bottom:0}
  .apx .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apx .stat-row .v{font-size:44px}
  .apx .stats{padding:8px 0 60px}
}

/* ===================================================================================================
   Apple type and spacing pass (httpdocs/docs/theme/apple-product-page-design-study.md, Part B, 2026-09-18).
   One block, appended last so it wins the cascade and can be removed as a unit to revert.
   Tokens: hero 64/68, story 56/60, section 40/44, stat 40, card 24/28, eyebrow 19/23, lead 21/29, body 17/25,
   ui 17/21, small 14/20; tablet <= 1068, phone <= 734; headline line-height = size + 4; Söhne 500 for anything
   that is a heading or label, 400 for anything you read; content 87.5% capped at 1260; story padding 128/96/80.
   =================================================================================================== */
.apx{--t-hero:64px;--lh-hero:68px;--t-story:56px;--lh-story:60px;--t-section:40px;--lh-section:44px;--t-stat:40px;--t-card:24px;--lh-card:28px;--t-eyebrow:19px;--lh-eyebrow:23px;--t-lead:21px;--lh-lead:29px;--t-body:17px;--lh-body:25px;--t-ui:17px;--lh-ui:21px;--t-small:14px;--lh-small:20px;--pad-story:128px;--gap-eyebrow:20px;--gap-lead:26px;--gap-visual:64px;--wrap:1260px}
@media (max-width:1068px){.apx{--t-hero:56px;--lh-hero:60px;--t-story:48px;--lh-story:52px;--t-section:34px;--lh-section:38px;--t-card:22px;--lh-card:26px;--t-lead:19px;--lh-lead:27px;--t-ui:16px;--lh-ui:20px;--pad-story:96px;--gap-eyebrow:18px;--gap-lead:24px;--gap-visual:54px}}
@media (max-width:734px){.apx{--t-hero:40px;--lh-hero:44px;--t-story:34px;--lh-story:38px;--t-section:28px;--lh-section:32px;--t-stat:36px;--t-card:20px;--lh-card:24px;--t-eyebrow:17px;--lh-eyebrow:21px;--t-lead:18px;--lh-lead:26px;--t-body:16px;--lh-body:24px;--t-ui:15px;--lh-ui:20px;--pad-story:80px;--gap-eyebrow:10px;--gap-lead:18px;--gap-visual:36px}}
/* content width: 87.5% of the viewport, capped at 1260 (gutters 90 at 1440, 24 at 390) */
.apx .wrap{width:min(var(--wrap),87.5%)}
/* eyebrows: the feature name, sentence case, Söhne 500 19/23, no full stop */
.apx .kicker,.apx .teyebrow{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:0;text-transform:none;color:var(--ink)}
.apx .kicker b{font-weight:500;color:var(--ink);margin:0}
.apx .kicker--line i{display:none}
.apx .touring .teyebrow{color:rgba(245,245,247,.72)}
@media (max-width:734px){.apx .kicker__sep{display:none}.apx .kicker b{display:block;margin:0 0 4px}}
/* the scale */
.apx .h-hero{font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:-.02em}
.apx .h-platform,.apx .h-touring,.apx .tclose{font-size:var(--t-story);line-height:var(--lh-story);letter-spacing:-.02em}
.apx .reveal{font-size:var(--t-story);line-height:var(--lh-story);font-weight:500;letter-spacing:-.02em}
.apx .statement__inner{max-width:840px;margin:0 auto;text-align:center}
.apx .cap__title,.apx .tcap__title{font-size:var(--t-section);line-height:var(--lh-section);font-weight:500;letter-spacing:-.01em}
.apx .lead{font-size:var(--t-lead);line-height:var(--lh-lead)}
.apx .cap__desc,.apx .tcap__desc{font-size:var(--t-body);line-height:var(--lh-body)}
.apx .small{font-size:var(--t-small);line-height:var(--lh-small)}
/* grey copy, ink highlights: the 1-2 phrases that carry the argument are ink, same weight */
.apx .ink{color:var(--ink);font-weight:inherit}
.apx .touring .ink{color:var(--tink)}
/* stats: numbers are the proof, 40 / 500, caption 14/20 two pixels under */
.apx .stat-row{gap:48px 24px}
.apx .stat-row .v{font-weight:500;font-size:var(--t-stat);line-height:1;letter-spacing:-.01em}
.apx .stat-row .v b{font-weight:500;font-size:20px;vertical-align:top;margin-left:1px}
.apx .stat-row .l{font-size:var(--t-small);line-height:var(--lh-small);margin-top:2px}
/* labels in sentence case, no tracking caps in running copy */
.apx .stage2__label,.apx .tfacts{text-transform:none;letter-spacing:0;font-family:var(--na);font-size:var(--t-small);line-height:var(--lh-small)}
.apx .route__state{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}
/* alignment: everything on one left edge, like Apple's story lockups that sit beside a visual (camera story);
   the reading measure stays 840 */
.apx .statement__inner{margin:0;text-align:left;max-width:840px}
.apx .platform__opener{align-items:flex-start;text-align:left;margin:0;max-width:840px}
.apx .platform__opener .kicker{text-align:left}
.apx .touring__opener{align-items:flex-start;text-align:left;margin:0;max-width:840px}
.apx .touring__opener .teyebrow,.apx .touring__opener .h-touring,.apx .touring__opener .touring__lead{text-align:left}
.apx .h-platform,.apx .h-touring{max-width:840px}
.apx .touring__close{align-items:flex-start;text-align:left;margin:0;max-width:840px}
.apx .tclose{text-align:left}
/* lockup gaps: eyebrow -> headline 20, headline -> lead 26, lead -> visual 64 (tablet 18/24/54, phone 10/18/36) */
.apx .hero__copy{gap:var(--gap-eyebrow)}
.apx .hero__copy .lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow))}
.apx .hero__cta{margin-top:12px}
.apx .platform__opener,.apx .touring__opener{gap:var(--gap-eyebrow)}
.apx .platform__lead,.apx .touring__lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow))}
.apx .platform__grid,.apx .touring__grid{margin-top:var(--gap-visual)}
/* vertical rhythm: story sections 128 / 96 / 80 */
.apx .hero{padding:var(--pad-story) 0 var(--gap-visual)}
/* owner 2026-09-22: the stat row belongs to the hero, so it keeps the hero's white; the grey band starts at the statement */
.apx .stats{padding:0 0 calc(var(--pad-story) / 2)}
.apx .statement{padding:var(--gap-visual) 0 var(--pad-story)}
.apx .platform{padding:var(--pad-story) 0}
.apx .touring{padding:var(--pad-story) 0;margin-top:0}
.apx .touring__close{padding-top:var(--gap-visual)}

/* ===================================================================================================
   Section 03: PLACEMENT, the tier switcher (build 2, 2026-09-19). Dark chapter after Platform. Built on the Apple tokens above.
   Three tabs (Diamond, VIP, Regular) over one frameless card of the real Auckland page. Four slides: Diamond has two
   (the strip, then its cards lit inside the VIP area), VIP and Regular one each. The line in the active tab fills while a
   slide shows, then the next slide comes in from the right. Nothing is pinned and nobody has to swipe.
   Markup: tools/build-placement-section.py (measured highlight positions). Behaviour: the last function in js/page.js.
   =================================================================================================== */
/* top padding is smaller than the other story sections (128): owner, 2026-09-19, the card has to be on screen together with the opener */
.apx .placement{background:#0F0F0F;color:#F5F5F7;padding:80px 0 var(--pad-story,128px);--ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--travel:cubic-bezier(.65,0,.35,1);--tink:#F5F5F7;--tmute:rgba(245,245,247,.62);--tdim:rgba(245,245,247,.3);--sw-ms:4500ms}
.apx .placement__opener{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--gap-eyebrow,20px);max-width:840px}
.apx .peyebrow{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow,19px);line-height:var(--lh-eyebrow,23px);color:rgba(245,245,247,.72)}
.apx .h-placement{font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--tink);text-wrap:balance;max-width:840px}
.apx .placement__lead{max-width:640px;color:var(--tmute);margin-top:calc(var(--gap-lead,26px) - var(--gap-eyebrow,20px))}
.apx .placement .ink{color:var(--tink)}

.apx .sw{position:relative;margin-top:48px}
.apx .sw__glow{position:absolute;left:14%;right:0;top:24%;bottom:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,51,102,.12),rgba(255,51,102,0));pointer-events:none}
/* tabs: the mark, the tier, its number. All three numbers stay in view, so the ladder reads even while one view is open */
.apx .sw__tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.apx .sw__tab{position:relative;display:flex;align-items:center;gap:16px;min-width:0;height:88px;padding:0 24px;border-radius:20px;overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .35s var(--ease),border-color .35s var(--ease);-webkit-tap-highlight-color:transparent}
.apx .sw__tab:hover{background:rgba(255,255,255,.07)}
.apx .sw__tab:focus-visible,.apx .sw__pp:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.apx .sw__tab.is-on{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.apx .sw__mark{flex:none;width:auto;height:42px;opacity:.45;filter:saturate(.25);transform:scale(.94);transition:opacity .35s,filter .35s,transform .5s var(--pop)}
.apx .sw__tab.is-on .sw__mark{opacity:1;filter:none;transform:none}
.apx .sw__tabtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.apx .sw__name{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow,19px);line-height:var(--lh-eyebrow,23px);color:var(--tmute);transition:color .35s}
.apx .sw__tab.is-on .sw__name{color:var(--tink)}
.apx .sw__sub{font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:var(--tmute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx .sw__sub--s{display:none}
/* the line: one segment per slide of the tier, so Diamond shows two */
.apx .sw__bar{position:absolute;left:0;right:0;bottom:0;height:3px;display:flex;gap:3px}
.apx .sw__seg{flex:1 1 0;display:block;background:rgba(255,255,255,.1);overflow:hidden}
.apx .sw__seg b{display:block;height:100%;background:linear-gradient(to right,#E61E4D,#D70466);transform:scaleX(0);transform-origin:left center}
.apx .sw__seg.is-done b{transform:scaleX(1)}
.apx .sw__seg.is-run b{animation:apx-swfill var(--sw-ms) linear forwards}
.apx .sw.is-paused .sw__seg.is-run b{animation-play-state:paused}
.apx .sw.is-still .sw__seg.is-run b{animation:none;transform:scaleX(1)}
@keyframes apx-swfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.apx .sw__stage{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);grid-template-areas:"media heads" "media bodies";column-gap:64px;row-gap:18px;align-items:center;margin-top:28px}
.apx .sw__media{grid-area:media;min-width:0;display:flex;flex-direction:column;gap:14px}
.apx .sw__card{position:relative;border-radius:28px;overflow:hidden;background:#0b0b0c;box-shadow:0 40px 90px rgba(0,0,0,.55);isolation:isolate}
.apx .sw__view{position:relative;aspect-ratio:1600/1000;overflow:hidden}
/* the strip: one line on top of the picture saying where the tier sits. Shown at 900 and below, where the text column is gone */
.apx .sw__strip{display:none}
.apx .sw__card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none;z-index:3}
.apx .sw__track{display:flex;width:100%;height:100%;transition:transform .8s var(--travel);will-change:transform}
.apx .sw__slide{position:relative;flex:none;width:100%;height:100%;container-type:inline-size}
.apx .sw__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.apx .sw__img--phone{display:none}
/* the lights: on the VIP area slides the other tier steps back and this tier's photos get a ring, after the slide has landed */
/* the layer keeps the PICTURE's proportions (not the card's): the phone card is shorter than its picture and crops it from the top,
   so percentages must be measured against the picture or the rings drift off the photos */
.apx .sw__lights{position:absolute;left:0;top:0;width:100%;pointer-events:none;--rr:10px;--sr:12px}
.apx .sw__lights--desktop{aspect-ratio:1600/1000;--rr:1.25cqw;--sr:1.5cqw}
.apx .sw__lights--phone{display:none;aspect-ratio:1026/1263;--rr:4.1cqw;--sr:4.6cqw}
.apx .sw__shade{position:absolute;border-radius:var(--sr);background:rgba(11,11,12,.68);opacity:0;transition:opacity .2s linear}
.apx .sw__ring{position:absolute;border-radius:var(--rr);box-shadow:0 0 0 2px var(--pink),0 0 0 6px rgba(255,51,102,.22);opacity:0;transform:scale(1.03);transition:opacity .2s linear,transform .2s linear}
.apx .sw__slide.is-on .sw__shade{opacity:1;transition:opacity .6s var(--ease) .75s}
.apx .sw__slide.is-on .sw__ring{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(.9s + var(--i,0) * .09s),transform .6s var(--pop) calc(.9s + var(--i,0) * .09s)}
.apx .sw__caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px}
.apx .sw__url{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:rgba(245,245,247,.5)}
.apx .sw__url svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apx .sw__pp{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:background .25s}
.apx .sw__pp:hover{background:rgba(255,255,255,.12)}
.apx .sw__ico{width:16px;height:16px}
.apx .sw__ico--pause{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.apx .sw__ico--play{fill:currentColor;display:none}
.apx .sw__pp.is-paused .sw__ico--pause{display:none}
.apx .sw__pp.is-paused .sw__ico--play{display:block}

/* the text follows the card: the old tier leaves, the new one arrives from the right. Heads (where it sits + the number) and bodies are two
   blocks, so a phone can show the head ABOVE the picture and the paragraph under it. Each block stacks its three texts in one grid cell
   and keeps the height of the longest, so nothing jumps */
.apx .sw__heads{grid-area:heads;align-self:end;display:grid;min-width:0}
.apx .sw__bodies{grid-area:bodies;align-self:start;display:grid;min-width:0}
.apx .sw__head{grid-area:1/1;display:flex;flex-direction:column;gap:18px;align-self:end}
.apx .sw__body{grid-area:1/1}
.apx .sw__head,.apx .sw__body{opacity:0;visibility:hidden;transform:translate3d(28px,0,0);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.apx .sw__head.is-on,.apx .sw__body.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .25s,transform .7s var(--ease) .25s,visibility 0s}
.apx .sw__body.is-on{transition-delay:.32s,.32s,0s}
.apx .sw__place{display:flex;align-items:center;gap:14px}
.apx .sw__map{position:relative;flex:none;display:block;width:30px;height:64px;box-sizing:border-box;border-radius:7px;border:1.5px solid rgba(245,245,247,.3)}
.apx .sw__band{position:absolute;left:4px;right:4px;border-radius:2px;background:rgba(245,245,247,.16);transition:opacity .4s var(--ease)}
.apx .sw__band[data-band="0"]{top:9px;height:9px}
.apx .sw__band[data-band="1"]{top:22px;height:14px}
.apx .sw__band[data-band="2"]{top:40px;height:16px}
.apx .sw__band.is-tier{background:linear-gradient(to right,#E61E4D,#D70466)}
/* Diamond owns two bands: the one in view is full, the other steps back */
.apx .sw__head[data-step="0"] .sw__band.is-tier[data-band="1"],.apx .sw__head[data-step="1"] .sw__band.is-tier[data-band="0"]{opacity:.38}
.apx .sw__placetext{display:flex;flex-direction:column;gap:2px;min-width:0}
.apx .sw__placek{font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:var(--tmute)}
.apx .sw__placev{display:grid;font-family:var(--so);font-weight:500;font-size:var(--t-ui,17px);line-height:var(--lh-ui,21px);color:var(--tink)}
.apx .sw__step{grid-area:1/1;opacity:0;transform:translate3d(10px,0,0);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.apx .sw__step.is-on{opacity:1;transform:none;transition:opacity .45s var(--ease) .3s,transform .55s var(--ease) .3s}
.apx .sw__title{font-family:var(--so);font-weight:500;font-size:var(--t-section,40px);line-height:var(--lh-section,44px);letter-spacing:-.01em;color:var(--tink);text-wrap:balance}
.apx .sw__body{font-family:var(--na);font-size:var(--t-body,17px);line-height:var(--lh-body,25px);color:var(--tmute)}

.apx .placement__close{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px;padding-top:var(--gap-visual,64px);max-width:840px}
.apx .pclose{font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--tink);text-wrap:balance}
.apx .pclose__l{display:block}
.apx .pfacts{font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:rgba(245,245,247,.5)}

@media (prefers-reduced-motion:no-preference){
  .apx .placement__opener>*{opacity:0;transform:translateY(14px)}
  .apx .placement .sw__tabs,.apx .placement .sw__stage{opacity:0;transform:translateY(24px)}
  .apx .placement.is-in .placement__opener>*{animation:apx-rise .65s var(--ease) forwards}
  .apx .placement.is-in .placement__opener>*:nth-child(1){animation-duration:.5s}
  .apx .placement.is-in .placement__opener>*:nth-child(2){animation-delay:.08s}
  .apx .placement.is-in .placement__opener>*:nth-child(3){animation-delay:.16s}
  .apx .placement.is-in .sw__tabs{animation:apx-rise .8s var(--ease) .22s forwards}
  .apx .placement.is-in .sw__stage{animation:apx-rise .9s var(--ease) .32s forwards}
}
@media (prefers-reduced-motion:reduce){
  .apx .sw__track,.apx .sw__stripitem,.apx .sw__stripitem.is-on,.apx .sw__head,.apx .sw__head.is-on,.apx .sw__body,.apx .sw__body.is-on,.apx .sw__step,.apx .sw__step.is-on,.apx .sw__shade,.apx .sw__ring,.apx .sw__slide.is-on .sw__shade,.apx .sw__slide.is-on .sw__ring,.apx .sw__mark,.apx .sw__band{transition:none!important}
}
@media (max-width:1100px){
  .apx .placement{padding-top:64px}
  .apx .sw{margin-top:40px}
  .apx .sw__stage{gap:48px}
  .apx .sw__tab{padding:0 18px;gap:12px}
  .apx .sw__mark{height:36px}
}
/* 900 and below: one column, and the picture comes first. Its strip carries the one line that explains it ("Top of every page"),
   so tabs + message + picture are on a phone screen together. The number and the paragraph follow under the picture.
   Owner on a real iPhone: the picture started too low and its first quarter was the site's own intro card, which says nothing to an advertiser. */
@media (max-width:900px){
  .apx .sw__stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "heads" "bodies";row-gap:18px;align-items:start}
  .apx .sw__heads,.apx .sw__bodies{align-self:start}
  .apx .sw__head{align-self:start}
  .apx .sw__place{display:none}
  .apx .sw__strip{position:relative;display:grid;align-items:center;height:48px;padding:0 16px;background:rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.08)}
  .apx .sw__stripitem{grid-area:1/1;display:flex;align-items:center;gap:10px;min-width:0;opacity:0;transform:translate3d(12px,0,0);transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .apx .sw__stripitem.is-on{opacity:1;transform:none;transition:opacity .45s var(--ease) .35s,transform .55s var(--ease) .35s}
  .apx .sw__striptext{min-width:0;font-family:var(--so);font-weight:500;font-size:15px;line-height:19px;color:var(--tink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .apx .sw__map--s{width:16px;height:34px;border-radius:5px;border-width:1.25px}
  .apx .sw__map--s .sw__band{left:2.5px;right:2.5px;border-radius:1.5px}
  .apx .sw__map--s .sw__band[data-band="0"]{top:4px;height:6px}
  .apx .sw__map--s .sw__band[data-band="1"]{top:12px;height:8px}
  .apx .sw__map--s .sw__band[data-band="2"]{top:22px;height:7px}
  .apx .sw__band.is-dim{opacity:.38}
  .apx .sw__glow{left:0;right:0;top:30%;bottom:20%}
  .apx .placement__close{padding-top:var(--gap-visual,36px)}
}
/* 600 and below: stacked tabs, and the card shows the phone version of the page. No phone mockup: the card is the screen */
@media (max-width:600px){
  .apx .sw__tabs{gap:8px}
  .apx .sw__tab{flex-direction:column;justify-content:center;gap:5px;border-radius:18px;text-align:center}
  .apx .sw__mark{height:24px}
  .apx .sw__tabtext{align-items:center;gap:1px;max-width:100%}
  .apx .sw__name{font-size:15px;line-height:19px}
  .apx .sw__sub{font-size:12px;line-height:15px;max-width:100%}
  .apx .sw__sub--l{display:none}
  .apx .sw__sub--s{display:block}
  /* everything above the picture is as short as it can be, so the picture starts high on the screen */
  .apx .placement{padding-top:32px}
  .apx .placement .lead__long{display:none}
  .apx .sw{margin-top:20px}
  .apx .sw__tab{height:80px;padding:8px 6px 11px;gap:3px}
  .apx .sw__stage{margin-top:12px;row-gap:16px}
  .apx .sw__card{border-radius:24px}
  .apx .sw__view{aspect-ratio:1026/1263}
  .apx .sw__strip{height:46px;padding:0 14px}
  .apx .sw__img--desktop,.apx .sw__lights--desktop{display:none}
  .apx .sw__img--phone,.apx .sw__lights--phone{display:block}
  .apx .sw__caption{padding:0 4px}
  .apx .sw__url{font-size:13px;line-height:18px}
}

/* placeholder between the two dark chapters */
.apx .between-ph{padding:var(--pad-story,128px) 0}
.apx .between-ph__box{min-height:46vh}

/* The stage glows are wider than their column. Clip them at the section edge so a phone never gets a sideways scroll
   (measured 2026-09-18: Touring's glow reached 434 px on a 390 px screen and the page zoomed out to 0.9).
   clip, not hidden: hidden would turn the section into a scroll container and break the sticky stages. */
.apx .platform,.apx .placement,.apx .touring{overflow-x:clip}
@media (max-width:900px){.apx .stage2__glow,.apx .tstage__glow{left:0;right:0}}

/* ==== css/hero-film.css ==== */
/* =====================================================================================================
   HERO FILM 01 "How it works" (brief v1, 21 Sep 2026). Own sheet, loaded after page.css.
   The film is a silent 16 s loop; captions, chapter bar and pause control are HTML
   (js/hero-film.js reads js/hero-cues.json, the same cue sheet Remotion uses). 4:3 film from 735 px up,
   4:5 film on phones. The poster is frame 0 of the film, so poster, first frame and loop point match.
   ===================================================================================================== */

/* ---- room for the film: the brief designs for ~800 px on desktop; the copy keeps its 560 px measure ---- */
@media (min-width:1341px){
  /* the grid IS the centred wrap: keep its left edge on the page grid and let only its right edge run out, up to 100 px and never
     closer than 40 px to the viewport (1440: film 702 wide, 1728 and up: 752) */
  .apx .hero__grid{--over:max(0px,min(100px,(100vw - var(--wrap)) / 2 - 40px));grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:48px;
    width:calc(min(var(--wrap),87.5%) + var(--over));margin-left:calc((100% - min(var(--wrap),87.5%)) / 2);margin-right:0}
}
@media (min-width:1101px) and (max-width:1340px){
  .apx .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,50%);gap:40px}
}
.apx .hero__stage{min-height:0;display:block;align-self:center}

.apx .hfilm{position:relative;margin:0;width:100%}
.apx .hfilm__frame{position:relative;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#171717;box-shadow:0 30px 80px rgba(0,0,0,.42);isolation:isolate}
.apx .hfilm__frame picture,.apx .hfilm__poster,.apx .hfilm__video{position:absolute;inset:0;width:100%;height:100%;display:block}
.apx .hfilm__poster,.apx .hfilm__video{object-fit:cover}
.apx .hfilm__video{opacity:0;transition:opacity .35s linear}
.apx .hfilm.is-playing .hfilm__video,.apx .hfilm.has-frame .hfilm__video{opacity:1}

/* pause / play: moving content that starts by itself and runs over five seconds needs one (WCAG 2.2.2).
   A real button with a text label, under the frame beside the caption, so it never sits on the film. */
.apx .hfilm__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.apx .hfilm__toggle{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;margin-top:2px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--so);font-weight:500;font-size:14px;line-height:1;color:var(--ink);background:#fff}
.apx .hfilm__toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.apx .hfilm__toggle .ic-play{display:none;fill:currentColor;stroke:none}
.apx .hfilm.is-paused .hfilm__toggle .ic-pause{display:none}
.apx .hfilm.is-paused .hfilm__toggle .ic-play{display:block}
.apx .hfilm.is-idle .hfilm__toggle{visibility:hidden}
@media (hover:hover){.apx .hfilm__toggle:hover{box-shadow:inset 0 0 0 1px var(--ink3)}}

/* blocked autoplay (Low Power Mode and similar) or reduced motion: the poster stays, with a play button */
.apx .hfilm__bigplay{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 18px;border-radius:999px;background:rgba(23,23,23,.72);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 12px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#FDFFF1;font-family:var(--so);font-weight:500;font-size:16px;line-height:1}
.apx .hfilm__bigplay svg{width:14px;height:14px;fill:currentColor}
.apx .hfilm__bigplay[hidden]{display:none}

.apx .hfilm__toggle:focus-visible,.apx .hfilm__bigplay:focus-visible,.apx .hfilm__ch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.apx .hfilm__frame .hfilm__bigplay:focus-visible{outline-color:#FDFFF1}

/* ---- below the frame: one caption at a time, the chapter bar (the AI disclosure line was removed 2026-09-30, owner) ---- */
.apx .hfilm__below{display:block;margin-top:22px}
.apx .hfilm__caption{min-height:58px;margin:0;flex:1 1 auto;min-width:0}
.apx .hfilm__cap1{display:block;font-family:var(--so);font-weight:500;font-size:21px;line-height:27px;letter-spacing:-.01em;color:var(--ink)}
.apx .hfilm__cap2{display:block;margin-top:4px;font-family:var(--na);font-size:16px;line-height:23px;color:var(--ink2)}
.apx .hfilm__cap1,.apx .hfilm__cap2{transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.apx .hfilm__caption.is-out .hfilm__cap1,.apx .hfilm__caption.is-out .hfilm__cap2{opacity:0;transform:translateY(6px);transition-duration:.14s}
.apx .hfilm__cap1 [data-at]{transition:color .25s linear}
.apx .hfilm__cap1 [data-at].is-dim{color:rgba(20,20,20,.34)}

.apx .hfilm__chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px}
.apx .hfilm__ch{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:10px 0 4px;text-align:left;font-family:var(--so);font-weight:400;font-size:14px;line-height:20px;color:var(--ink2);border-radius:4px}
.apx .hfilm__ch i{display:block;height:2px;border-radius:2px;background:rgba(20,20,20,.14);overflow:hidden;margin-bottom:10px}
.apx .hfilm__ch i::after{content:"";display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.apx .hfilm__ch.is-on{color:var(--ink);font-weight:500}
.apx .hfilm__ch.is-done i::after{transform:scaleX(0)}
@media (hover:hover){.apx .hfilm__ch:hover{color:var(--ink)}}

.apx .hfilm__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){
  .apx .hero__stage{padding:8px 0 0}
}
@media (max-width:734px){
  .apx .hfilm__frame{aspect-ratio:4/5;border-radius:14px}
  .apx .hfilm__below{margin-top:18px}
  .apx .hfilm__caption{min-height:52px}
  .apx .hfilm__cap1{font-size:19px;line-height:25px}
  .apx .hfilm__cap2{font-size:15px;line-height:21px}
  /* column widths follow the label lengths, so every name stays on one line at 390 */
  .apx .hfilm__chapters{gap:8px;grid-template-columns:.75fr 1.35fr 1fr 1.4fr}
  .apx .hfilm__ch{font-size:12.5px;line-height:17px;white-space:nowrap}
  .apx .hfilm__toggle{height:34px;padding:0 12px 0 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .apx .hfilm__video,.apx .hfilm__cap1,.apx .hfilm__cap2{transition:none}
}
@media (prefers-reduced-motion:no-preference){
  .apx .hfilm{opacity:0;transform:translateY(28px);animation:apx-rise .9s cubic-bezier(.22,1,.36,1) .25s forwards}
}

/* Hero source line (owner 2026-10-01: "Similarweb.com, Oct 2026"): at every width it sits on its own line above the statement,
   as it already did on phones (page.css :325). Beside the statement it no longer fits the copy column and left "directory" alone
   on a second line (1440) or split the phrase (1024). */
.apx .hero .kicker__sep{display:none}
.apx .hero .kicker b{display:block;margin:0 0 4px}

/* ==== css/placement.css ==== */
/* =====================================================================================================
   PLACEMENT "Lanes" (brief 2026-09-23). Own sheet. A rounded gradient panel on the page's white with the header,
   the tab bar, the frame (a Remotion loop) and the copy column; the tab bar, progress, copy panels and pause button are
   page code driven by js/placement.js from the same cue file as the film. The old .placement / .sw rules in css/page.css
   are no longer used by this section (its class is placement-lanes; the pl-* names are its own).
   Tokens (brief section 3): panel gradient + pink glow, hairline edge, frame #101010, tabs #1E1E1E / #2C2C2C,
   active #262626 / #3D3D3D, text #F2F2F4, text 2 #BABDC6, muted #80848E, pink #EF4666. Söhne 500 stands in for Halbfett.
   ===================================================================================================== */
.apx .placement-lanes{--pl-text:#F2F2F4;--pl-text2:#BABDC6;--pl-muted:#80848E;--pl-pink:#EF4666;--pl-frame:#101010;--pl-frame-b:#262626;--pl-surface:#1E1E1E;--pl-surface-b:#2C2C2C;--pl-active:#262626;--pl-active-b:#3D3D3D;--tink:#F5F5F7;--tmute:rgba(245,245,247,.62);--ease:cubic-bezier(.2,.7,.2,1);
  padding:var(--gap-visual,64px) 0 var(--pad-story,128px);color:var(--pl-text)}
.apx .placement-lanes .ink{color:var(--pl-text)}
.apx .pl-panel{position:relative;border-radius:40px;padding:56px;background:radial-gradient(60% 55% at 85% 60%,rgba(239,70,102,.14),transparent 60%),linear-gradient(165deg,#1B1B1B 0%,#121212 55%,#0E0E0E 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.apx .pl-head{max-width:960px}
.apx .pl-eyebrow{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow,19px);line-height:var(--lh-eyebrow,23px);color:var(--pl-text2);margin-bottom:var(--gap-eyebrow,20px)}
.apx .pl-h{font-family:var(--so);font-weight:500;font-size:48px;line-height:52px;letter-spacing:-.02em;color:var(--pl-text);text-wrap:balance;margin:0 0 20px}
.apx .pl-sub{font-family:var(--na);font-size:19px;line-height:27px;color:var(--pl-text2);max-width:600px;margin:0 0 26px}

/* tabs: icon, tier, its number; the active tab carries a 3 px pink progress bar along its bottom edge */
.apx .pl-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
.apx .pl-tab{position:relative;display:flex;align-items:center;gap:14px;min-width:0;height:72px;padding:0 18px;border-radius:14px;overflow:hidden;text-align:left;font:inherit;color:var(--pl-text);cursor:pointer;background:var(--pl-surface);border:1px solid var(--pl-surface-b);transition:background .35s,border-color .35s}
.apx .pl-tab.is-on{background:var(--pl-active);border-color:var(--pl-active-b)}
.apx .pl-tab:focus-visible,.apx .pl-pause:focus-visible,.apx .pl-bigplay:focus-visible{outline:2px solid #fff;outline-offset:3px}
.apx .pl-tab__icon{flex:none;width:auto;height:40px;max-width:52px;object-fit:contain;opacity:.45;filter:saturate(0);transition:opacity .45s,filter .45s}
.apx .pl-tab.is-on .pl-tab__icon{opacity:1;filter:none}
.apx .pl-tab__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.apx .pl-tab__name{font-family:var(--so);font-weight:500;font-size:17px;line-height:1.2;color:var(--pl-text)}
.apx .pl-tab__sub{font-family:var(--na);font-size:13px;line-height:1.3;color:var(--pl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx .pl-tab__sub--s{display:none}
.apx .pl-tab__prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--pl-pink);transform:scaleX(var(--p,0));transform-origin:left center;opacity:0;transition:opacity .2s}
.apx .pl-tab.is-on .pl-tab__prog{opacity:1}

/* body: the frame at a fixed 748:400, the copy column 348 wide */
.apx .pl-body{display:flex;gap:32px;align-items:flex-start}
.apx .pl-main{flex:1 1 auto;min-width:0}
.apx .pl-frame{position:relative;width:100%;aspect-ratio:748/400;border-radius:16px;overflow:hidden;background:var(--pl-frame);box-shadow:inset 0 0 0 1px var(--pl-frame-b);isolation:isolate}
.apx .pl-frame picture,.apx .pl-poster,.apx .pl-video{position:absolute;inset:0;width:100%;height:100%;display:block}
.apx .pl-poster,.apx .pl-video{object-fit:cover}
.apx .pl-video{opacity:0;transition:opacity .25s linear}
.apx .placement-lanes.is-playing .pl-video,.apx .placement-lanes.has-frame .pl-video{opacity:1}
.apx .pl-bigplay{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 18px;border-radius:999px;background:rgba(23,23,23,.86);color:#FDFFF1;font-family:var(--so);font-weight:500;font-size:16px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 12px 40px rgba(0,0,0,.35);cursor:pointer;border:0}
.apx .pl-bigplay svg{width:14px;height:14px;fill:currentColor}
.apx .pl-bigplay[hidden]{display:none}
.apx .pl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.apx .pl-url{display:inline-flex;align-items:center;gap:8px;min-width:0;font-family:var(--na);font-size:13px;line-height:18px;color:var(--pl-muted)}
.apx .pl-url svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.apx .pl-pause{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--pl-text);font-family:var(--so);font-weight:500;font-size:14px;line-height:1;cursor:pointer}
.apx .pl-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.apx .pl-pause .ic-play{display:none;fill:currentColor;stroke:none}
.apx .placement-lanes.is-paused .pl-pause .ic-pause{display:none}
.apx .placement-lanes.is-paused .pl-pause .ic-play{display:block}
.apx .placement-lanes.is-still .pl-pause{display:none}
@media (hover:hover){.apx .pl-tab:hover{border-color:var(--pl-active-b)}.apx .pl-pause:hover{background:rgba(255,255,255,.1)}}

/* the copy column: three panels stacked in one fixed box so nothing moves; a directional cross-fade */
.apx .pl-copy{position:relative;flex:0 0 348px;width:348px;height:300px}
.apx .pl-copy__panel{position:absolute;inset:0;opacity:0;transform:translateX(18px);transition:opacity .4s ease,transform .55s var(--ease);pointer-events:none}
.apx .pl-copy__panel.from-left{transform:translateX(-18px)}
.apx .pl-copy__panel.is-out{transform:translateX(-18px)}
.apx .pl-copy__panel.is-out-r{transform:translateX(18px)}
.apx .pl-copy__panel.is-active{opacity:1;transform:none;transition-delay:.16s;pointer-events:auto}
.apx .pl-copy__h{font-family:var(--so);font-weight:500;font-size:34px;line-height:1.08;letter-spacing:-.02em;color:var(--pl-text);margin:0 0 14px;text-wrap:balance}
.apx .pl-copy__p{font-family:var(--na);font-size:15px;line-height:1.55;color:var(--pl-text2);margin:0}
.apx .pl-copy__p--s{display:none}

/* entrance: a gentle rise once, the way the other chapters arrive */
@media (prefers-reduced-motion:no-preference){
  .apx .pl-head>*,.apx .pl-tabs,.apx .pl-body{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .apx .placement-lanes.is-in .pl-head>*,.apx .placement-lanes.is-in .pl-tabs,.apx .placement-lanes.is-in .pl-body{opacity:1;transform:none}
  .apx .placement-lanes.is-in .pl-head>:nth-child(2){transition-delay:.06s}
  .apx .placement-lanes.is-in .pl-head>:nth-child(3){transition-delay:.12s}
  .apx .placement-lanes.is-in .pl-tabs{transition-delay:.18s}
  .apx .placement-lanes.is-in .pl-body{transition-delay:.26s}
}
@media (prefers-reduced-motion:reduce){
  .apx .pl-copy__panel,.apx .pl-tab__icon,.apx .pl-tab,.apx .pl-tab__prog,.apx .pl-video{transition:none!important}
}

/* under 1024: the copy goes under the frame, full width, still a fixed box */
@media (max-width:1023px){
  .apx .pl-panel{padding:40px;border-radius:32px}
  .apx .pl-body{flex-direction:column;align-items:stretch;gap:20px}
  .apx .pl-main{width:100%}
  .apx .pl-copy{flex:none;width:100%;height:160px}
  .apx .pl-copy__h{font-size:28px}
}
/* phones (brief section 7): the whole section fits 390 x 660. Panel with 12 px page margins, radius 24, padding 24 / 20 / 20,
   content 326 wide: eyebrow 26, headline 72, tabs 74, frame 254, URL line 26, copy box 112, all fixed heights */
@media (max-width:767px){
  .apx .placement-lanes{padding:40px 0 var(--pad-story,80px)}
  .apx .placement-lanes .wrap{width:calc(100% - 24px)}
  .apx .pl-panel{padding:24px 20px 20px;border-radius:24px}
  .apx .pl-eyebrow{font-size:17px;line-height:21px;margin-bottom:10px}
  .apx .pl-h{font-size:26px;line-height:1.12;margin-bottom:14px;height:58px;overflow:hidden}
  .apx .pl-sub{display:none}
  .apx .pl-tabs{gap:8px;margin-bottom:12px}
  .apx .pl-tab{flex-direction:column;justify-content:center;gap:3px;height:62px;padding:0 4px;text-align:center;border-radius:12px}
  .apx .pl-tab__icon{height:22px;max-width:30px}
  .apx .pl-tab__text{align-items:center;gap:0}
  .apx .pl-tab__name{font-size:12px}
  .apx .pl-tab__sub{font-size:10px;line-height:1.3}
  .apx .pl-tab__sub--l{display:none}
  .apx .pl-tab__sub--s{display:block}
  .apx .pl-frame{aspect-ratio:326/254;border-radius:16px}
  .apx .pl-row{margin-top:8px;height:18px}
  .apx .pl-url{font-size:12px;line-height:18px}
  .apx .pl-pause{height:28px;padding:0 10px 0 8px;font-size:12px}
  .apx .pl-body{gap:0}
  .apx .pl-copy{height:100px;margin-top:12px}
  .apx .pl-copy__h{font-size:22px;line-height:1.1;margin-bottom:8px}
  .apx .pl-copy__p{font-size:13px;line-height:1.45}
  .apx .pl-copy__p--l{display:none}
  .apx .pl-copy__p--s{display:block}
}

/* Type on the page ladder (docs/rhythm-audit-2026-09-23.md): the panel headline is one step under the section headlines,
   and it follows the page's tablet step at 1068 even though this panel's layout switches at 1023. */
@media (max-width:1068px) and (min-width:768px){.apx .pl-h{font-size:40px;line-height:44px}}

/* ==== css/social-proof.css ==== */
/* =====================================================================================================
   SOCIAL PROOF under the hero (owner 2026-09-23). Option A "The statement" from the mockup
   "Social proof section, five directions" (Documents/Video uus); it replaces the four-figure stat row.
   Own sheet, own sp-* names. The same rounded panel system as Placement "Lanes": panel gradient + pink glow,
   hairline edge, text #F2F2F4, text 2 #BABDC6, muted #80848E. Söhne 500 stands in for the mockup's 600 and the
   button is the page's gradient .btn. The faces are real card crops of the Auckland example profiles (the
   real card frames with the owner's everyday-look photos since 2026-09-30, img/proof/[dvr]-NN.webp). Since 2026-09-24 they stand still (owner: less motion on the page) with a centre
   focus (owner's pick over a wave): the second row has one face more, so centring both rows puts it half a tile off the
   first, and each face carries its size (--s, 1.22 in the middle to 0.82 at the edges) and its light (--f, 1 to 0).
   ===================================================================================================== */
.apx .social-proof{--sp-text:#F2F2F4;--sp-text2:#BABDC6;--sp-muted:#80848E;
  --sp-tile-w:72px;--sp-tile-h:90px;--sp-tile-gap:10px;--sp-tile-r:8px;--sp-room:10px;
  padding:0 0 calc(var(--pad-story,128px) / 2)}
.apx .social-proof .ink{color:var(--sp-text)}
.apx .sp-panel{position:relative;overflow:hidden;border-radius:40px;padding:64px;color:var(--sp-text);
  background:radial-gradient(60% 55% at 85% 50%,rgba(239,70,102,.13),transparent 60%),linear-gradient(165deg,#1B1B1B 0%,#121212 55%,#0E0E0E 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* the statement: headline, one line of why, the button */
.apx .sp-head{max-width:800px;margin:0 auto;text-align:center}
.apx .sp-h{font-family:var(--so);font-weight:500;font-size:48px;line-height:52px;letter-spacing:-.02em;color:var(--sp-text);text-wrap:balance;margin:0 0 18px}
.apx .sp-lead{font-family:var(--na);font-size:19px;line-height:27px;color:var(--sp-text2);max-width:640px;margin:0 auto;text-wrap:pretty}
.apx .sp-cta{margin-top:26px}
.apx .sp-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* the faces: two still rows, largest and brightest in the middle under the button, faded out towards both panel edges */
.apx .sp-mosaic{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-tile-gap);margin:calc(44px + var(--sp-room)) -64px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.apx .sp-row{display:flex;justify-content:center}
.apx .sp-track{display:flex;flex:none;align-items:center;gap:var(--sp-tile-gap)}
.apx .sp-tile{flex:none;display:block;width:calc(var(--sp-tile-w) * var(--s, 1));height:calc(var(--sp-tile-h) * var(--s, 1));max-width:none;border-radius:var(--sp-tile-r);object-fit:cover;background:#222;filter:saturate(calc(.35 + .55 * var(--f, 1))) brightness(calc(.6 + .38 * var(--f, 1)))}

/* the three figures */
.apx .sp-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:900px;margin:calc(58px + var(--sp-room)) auto 0;padding:0;text-align:center}
.apx .sp-num{display:block;font-family:var(--so);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--sp-text)}
.apx .sp-lab{display:block;margin-top:8px;font-family:var(--na);font-size:14px;line-height:1.4;color:var(--sp-text2)}
.apx .sp-src{display:block;margin-top:2px;font-size:12px;color:var(--sp-muted)}


/* under 1024: the panel steps down the way the Placement panel does */
@media (max-width:1023px){
  .apx .sp-panel{padding:48px 40px;border-radius:32px}
  .apx .sp-h{font-size:40px;line-height:44px}
  .apx .sp-mosaic{margin:calc(36px + var(--sp-room)) -40px 0}
  .apx .sp-num{font-size:40px}
}
/* panel type on the page ladder (docs/rhythm-audit-2026-09-23.md): one step under the section headlines, and on the
   page's tablet step from 1068 (the panel's own layout still switches at 1023) */
@media (max-width:1068px) and (min-width:768px){.apx .sp-h{font-size:40px;line-height:44px}}
/* phones (the mockup's 390 artboard): 12 px page margins, radius 24, padding 28 / 20 / 24, the glow moves to the
   bottom, smaller tiles at the same drift speed (a 1,024 px set in 120 s), and the figures become rows with the
   labels on one left edge */
@media (max-width:767px){
  .apx .social-proof{--sp-tile-w:56px;--sp-tile-h:70px;--sp-tile-gap:8px;--sp-tile-r:6px;--sp-room:8px;padding-bottom:calc(var(--pad-story,80px) / 2)}
  .apx .social-proof .wrap{width:calc(100% - 24px)}
  .apx .sp-panel{padding:28px 20px 24px;border-radius:24px;background:radial-gradient(70% 40% at 50% 100%,rgba(239,70,102,.13),transparent 60%),linear-gradient(170deg,#1B1B1B 0%,#121212 55%,#0E0E0E 100%)}
  .apx .sp-h{font-size:30px;line-height:34px;margin-bottom:12px}
  .apx .sp-lead{font-size:17px;line-height:25px}
  .apx .sp-mosaic{margin:calc(28px + var(--sp-room)) -20px 0}
  .apx .sp-stats{grid-template-columns:auto 1fr;gap:20px 14px;margin-top:calc(48px + var(--sp-room));text-align:left}
  .apx .sp-stats li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline}
  .apx .sp-num{font-size:34px}
  .apx .sp-lab{margin-top:0}
}

/* ==== css/pricing.css ==== */
/* 8. PRICING "The nine" (canvas "Pricing Directions", option 2 + headline option 2; owner 2026-09-23).
   One grid: tiers across, lengths down, all nine prices at once. One price is picked (VIP, 1 week to start) and the
   line under the grid and its button follow it. Copy and prices are the payment window's (item-activate-checkout.php).
   Own sheet and pn- class names, so nothing here touches page.css. Type and spacing use the page tokens from page.css. */

.apx .pricing{
  --pn-ink:#141414; --pn-ink2:rgba(20,20,20,.64); --pn-ink3:rgba(20,20,20,.5); --pn-hair:rgba(20,20,20,.08);
  --pn-tray:#F5F5F7; --pn-pink:#ff3366; --pn-ease:cubic-bezier(.22,1,.36,1);
  --pn-r:24px; --pn-rows:96px; --pn-labels:168px; --pn-gap:16px; --pn-pad:24px; --pn-pad-top:36px; --pn-tray-r:40px;
  background:#fff; padding:var(--gap-visual,64px) 0 var(--pad-story,128px); /* 64 under Placement's own 128 = 192, like every other change of chapter */
}

/* ---------- head: eyebrow, headline, lead (left, like the other openers) ---------- */
.apx .pn-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-eyebrow,20px);max-width:840px}
.apx .pn-h{font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--pn-ink);text-wrap:balance}
.apx .pn-lead{max-width:640px;margin-top:calc(var(--gap-lead,26px) - var(--gap-eyebrow,20px))}
@media (min-width:735px){.apx .pn-lead .ink{display:block}}

/* ---------- the nine ---------- */
.apx .pn-board{
  display:grid; grid-template-columns:var(--pn-labels) repeat(3,minmax(0,1fr)); grid-template-rows:auto repeat(3,var(--pn-rows));
  column-gap:var(--pn-gap); margin-top:var(--gap-visual,64px); padding:var(--pn-pad-top) var(--pn-pad) var(--pn-pad); border-radius:var(--pn-tray-r); background:var(--pn-tray);
}
.apx .pn-labels,.apx .pn-col{grid-row:1 / -1;display:grid;grid-template-rows:subgrid}
@supports not (grid-template-rows:subgrid){
  .apx .pn-labels,.apx .pn-col{grid-template-rows:232px repeat(3,var(--pn-rows))}
}

.apx .pn-len{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:0 8px 0 16px;font-family:var(--so);font-weight:500;font-size:18px;line-height:1.2;color:var(--pn-ink)}
.apx .pn-bv{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:999px;background:var(--pn-ink);color:#fff;font-family:var(--so);font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

.apx .pn-col{position:relative;border-radius:var(--pn-r);background:#fff;box-shadow:0 1px 2px rgba(20,20,30,.04),0 14px 34px -22px rgba(20,20,30,.3)}
.apx .pn-col--regular{--pn-acc:#141414;--pn-acc-ink:#141414;--pn-soft:#f7f7f4}
.apx .pn-col--vip{--pn-acc:var(--pn-pink);--pn-acc-ink:#d8174c;--pn-soft:#fff0f4;z-index:1;box-shadow:0 0 0 2px var(--pn-pink),0 24px 50px -20px rgba(255,51,102,.4)}
.apx .pn-col--diamond{--pn-acc:#c9a24e;--pn-acc-ink:#7b571d;--pn-soft:#fff7df}

.apx .pn-top{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:30px 28px 26px}
.apx .pn-cap{position:absolute;top:-14px;left:26px;display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;background:var(--pn-pink);color:#fff;font-family:var(--so);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(255,51,102,.7)}
.apx .pn-mark{display:flex;align-items:flex-end;height:76px}
.apx .pn-mark img{display:block;width:auto;height:62px;filter:drop-shadow(0 8px 14px rgba(15,23,42,.18))}
.apx .pn-col--vip .pn-mark img{height:76px}
.apx .pn-col--regular .pn-mark img{height:60px}
.apx .pn-name{margin-top:18px;font-family:var(--so);font-weight:500;font-size:28px;line-height:1.1;letter-spacing:-.015em;color:var(--pn-ink)}
.apx .pn-spot{margin-top:10px;font-family:var(--na);font-size:16px;line-height:23px;color:var(--pn-ink2);text-wrap:pretty}
.apx .pn-spot b{display:block;margin-top:2px;font-weight:400;color:var(--pn-ink)}
.apx .pn-short{display:none}

.apx .pn-cell{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:0 26px 0 28px;border:0;border-top:1px solid var(--pn-hair);background:transparent;color:var(--pn-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s var(--pn-ease)}
/* the pick is a rounded tile set inside the column, clear of the column's own edge (owner 2026-09-23: a full-width ring
   sat on the VIP column's border and read as a doubled line with square corners) */
.apx .pn-cell::before{content:"";position:absolute;z-index:-1;inset:7px 9px;border-radius:16px;background:transparent;transition:background-color .25s var(--pn-ease),box-shadow .25s var(--pn-ease)}
.apx .pn-cell:hover::before{background:rgba(20,20,20,.035)}
.apx .pn-cell:focus-visible{outline:none}
.apx .pn-cell:focus-visible::before{box-shadow:inset 0 0 0 1.5px var(--pn-acc),0 0 0 3px rgba(255,51,102,.3)}
.apx .pn-price{display:inline-flex;align-items:flex-start;font-family:var(--so);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums;transition:color .25s var(--pn-ease)}
.apx .pn-price i{font-style:normal;font-size:.5em;line-height:1;margin:.12em .06em 0 0}
.apx .pn-price small{font-size:.5em;line-height:1;margin-top:.12em}
.apx .pn-dot{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(20,20,20,.2);transition:background-color .25s var(--pn-ease),border-color .25s var(--pn-ease)}
.apx .pn-dot::after{content:"";position:absolute;left:7.5px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:opacity .2s,transform .3s var(--pn-ease)}
.apx .pn-cell[aria-checked="true"],.apx .pn-cell[aria-checked="true"] + .pn-cell{border-top-color:transparent}
.apx .pn-cell[aria-checked="true"]::before{background:var(--pn-soft);box-shadow:inset 0 0 0 1.5px var(--pn-acc)}
.apx .pn-cell[aria-checked="true"]:focus-visible::before{box-shadow:inset 0 0 0 1.5px var(--pn-acc),0 0 0 3px rgba(255,51,102,.3)}
.apx .pn-cell[aria-checked="true"] .pn-price{color:var(--pn-acc-ink)}
.apx .pn-cell[aria-checked="true"] .pn-dot{border-color:var(--pn-acc);background:var(--pn-acc)}
.apx .pn-cell[aria-checked="true"] .pn-dot::after{opacity:1;transform:rotate(45deg) scale(1)}

/* ---------- the pick line + button ---------- */
.apx .pn-pick{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:12px 12px 12px 30px;border-radius:999px;background:#fff;border:1px solid rgba(20,20,20,.1);box-shadow:0 18px 40px -26px rgba(20,20,30,.4)}
.apx .pn-pick__vals{display:flex;align-items:baseline;gap:16px;min-width:0;font-family:var(--so)}
.apx .pn-pick__k{font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-ink3)}
.apx .pn-pick__v{font-weight:500;font-size:21px;line-height:1.2;color:var(--pn-ink)}
.apx .pn-pick__p{font-weight:400;font-size:21px;line-height:1.2;color:var(--pn-ink2);font-variant-numeric:tabular-nums}
.apx .pn-pick__cta{height:56px;padding:0 30px;font-size:17px}
.apx .pn-pick__cta svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--pn-ease)}
.apx .pn-pick__cta:hover svg{transform:translateX(3px)}
.apx .pn-pick__vals.is-swap .pn-pick__v,.apx .pn-pick__vals.is-swap .pn-pick__p{animation:apx-pn-swap .38s var(--pn-ease)}
@keyframes apx-pn-swap{from{opacity:.15;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- reassurance: the payment window's billing line, with the theme's 3D card ---------- */
.apx .pn-trust{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:var(--pn-ink2);text-align:left}
.apx .pn-trust img{width:40px;height:40px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(15,23,42,.14))}
.apx .pn-trust b{font-family:var(--so);font-weight:500;color:var(--pn-ink)}
.apx .pn-trust__more{display:block;margin-top:2px;color:var(--pn-ink3)}

/* ---------- entrance, once: the columns rise in a short stagger (only when JS runs and motion is allowed) ---------- */
.apx .pricing.pn-anim .pn-col,.apx .pricing.pn-anim .pn-labels{opacity:0;transform:translateY(16px)}
.apx .pricing.pn-anim.is-in .pn-col,.apx .pricing.pn-anim.is-in .pn-labels{opacity:1;transform:none;transition:opacity .7s var(--pn-ease),transform .9s var(--pn-ease)}
.apx .pricing.pn-anim.is-in .pn-col--regular{transition-delay:.06s}
.apx .pricing.pn-anim.is-in .pn-col--vip{transition-delay:.14s}
.apx .pricing.pn-anim.is-in .pn-col--diamond{transition-delay:.22s}

/* ---------- tablet ---------- */
@media (max-width:1068px){
  .apx .pricing{--pn-rows:84px;--pn-labels:112px;--pn-gap:12px;--pn-pad:16px;--pn-pad-top:30px;--pn-tray-r:34px;--pn-r:22px}
  .apx .pn-top{padding:26px 20px 22px}
  .apx .pn-cap{left:18px}
  .apx .pn-mark{height:62px}
  .apx .pn-mark img{height:50px}
  .apx .pn-col--vip .pn-mark img{height:62px}
  .apx .pn-col--regular .pn-mark img{height:48px}
  .apx .pn-name{margin-top:14px;font-size:23px}
  .apx .pn-spot{font-size:14.5px;line-height:21px}
  .apx .pn-cell{padding:0 16px 0 20px}
  .apx .pn-cell::before{inset:6px 7px;border-radius:14px}
  .apx .pn-price{font-size:31px}
  .apx .pn-dot{width:20px;height:20px}
  .apx .pn-dot::after{left:5.8px;top:2.6px}
  .apx .pn-len{padding-left:12px;font-size:16px}
}

/* ---------- small tablet: the long tier lines give way to the short ones ---------- */
@media (max-width:900px) and (min-width:735px){
  .apx .pn-spot{display:none}
  .apx .pn-short{display:block;margin-top:6px;font-family:var(--na);font-size:14px;line-height:19px;color:var(--pn-ink2)}
}

/* ---------- phone: the whole grid, the pick and the button fit the first screen ---------- */
@media (max-width:734px){
  .apx .pricing{--pn-rows:64px;--pn-labels:62px;--pn-gap:6px;--pn-pad:8px;--pn-pad-top:20px;--pn-tray-r:26px;--pn-r:18px}
  .apx .pn-h__l{display:block}
  .apx .pn-board,.apx .pn-pick{margin-inline:calc(12px - (100vw - 100%) / 2)}
  .apx .pn-board{margin-top:28px}
  .apx .pn-col--vip{box-shadow:0 0 0 1.5px var(--pn-pink),0 16px 32px -14px rgba(255,51,102,.45)}
  .apx .pn-top{align-items:center;text-align:center;padding:19px 3px 12px}
  .apx .pn-cap{left:50%;top:-10px;height:20px;padding:0 8px;font-size:8.5px;letter-spacing:.06em;transform:translateX(-50%)}
  .apx .pn-mark{height:44px;justify-content:center}
  .apx .pn-mark img{height:37px}
  .apx .pn-col--vip .pn-mark img{height:44px}
  .apx .pn-col--regular .pn-mark img{height:36px}
  .apx .pn-name{margin-top:8px;font-size:16px;letter-spacing:-.01em}
  .apx .pn-spot{display:none}
  .apx .pn-short{display:block;margin-top:3px;font-family:var(--na);font-size:11.5px;line-height:14px;color:var(--pn-ink3);text-wrap:balance}
  .apx .pn-cell{justify-content:center;padding:0}
  .apx .pn-price{font-size:20px;letter-spacing:0}
  .apx .pn-dot{display:none}
  .apx .pn-cell::before{inset:5px;border-radius:12px}
  .apx .pn-len{gap:5px;padding:0 0 0 8px;font-size:13px}
  .apx .pn-bv{height:16px;padding:0 5px;font-size:7.2px;letter-spacing:.03em}
  .apx .pn-pick{flex-direction:column;align-items:stretch;gap:12px;margin-top:12px;padding:16px;border-radius:22px}
  .apx .pn-pick__vals{justify-content:space-between;gap:10px}
  .apx .pn-pick__k{display:none}
  .apx .pn-pick__v,.apx .pn-pick__p{font-size:17px}
  .apx .pn-pick__p{color:var(--pn-ink)}
  .apx .pn-pick__cta{width:100%;height:52px;font-size:16px}
  .apx .pn-trust{justify-content:flex-start;align-items:flex-start;margin-top:20px;font-size:13px;line-height:19px}
  .apx .pn-trust img{width:34px;height:34px}
}

@media (prefers-reduced-motion:reduce){
  .apx .pricing *{transition:none!important;animation:none!important}
  .apx .pricing.pn-anim .pn-col,.apx .pricing.pn-anim .pn-labels{opacity:1;transform:none}
}

/* ==== css/superboost.css ==== */
/* SUPERBOOST "Statement" (canvas "Super Boost Still" option 1, owner 2026-09-24). One still frame between Pricing (white) and
   Touring (the light panel): centred eyebrow, two-line headline, a short lead, Ruby's real boosted card in front of two others,
   three figures, the button. Nothing moves (owner: less motion on the page). Own sheet and sb- names; type and spacing are the
   page tokens from page.css.
   The cards are cut-outs of the local site with a see-through background (my-video/capture/superboost-card-cutouts.mjs), so
   their edges are the site's own. At 285 px wide the photo radius is 20; on Ruby's card the photo runs from 32 to 377 of 480,
   the two cards behind her are cropped exactly at their photo's bottom edge (346 of 449). Every position below is a share of
   the stage, so it scales. The images are sized so the photo edges land on whole pixels (a half-covered edge row, mixed with
   the white page, read as a thin white line under the light photo: owner 2026-09-24). */

.apx .superboost{
  --sb-sh:0 36px 66px -20px rgba(40,16,30,.34),0 10px 22px -8px rgba(40,16,30,.22);
  background:#fff; padding:var(--gap-visual,64px) 0 var(--pad-story,128px); /* 64 under Pricing's own 128 = 192, like every change of chapter */
}

/* ---------- head: eyebrow, headline, lead (centred, the owner's pick) ---------- */
.apx .sb-head{display:flex;flex-direction:column;align-items:center;gap:var(--gap-eyebrow,20px);max-width:840px;margin:0 auto;text-align:center}
.apx .sb-h{margin:0;font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--ink)}
.apx .sb-h span{display:block}
.apx .sb-lead{max-width:680px;margin:calc(var(--gap-lead,26px) - var(--gap-eyebrow,20px)) 0 0}

/* ---------- the three cards: Ruby first, in front; two photos behind her ---------- */
.apx .sb-stage{position:relative;width:min(684px,100%);aspect-ratio:684 / 505;margin:var(--gap-visual,64px) auto 0}
.apx .sb-card{position:absolute}
.apx .sb-card img{position:relative;display:block;width:100%;height:auto}
.apx .sb-sh{position:absolute;left:2px;width:calc(100% - 4px);box-shadow:var(--sb-sh);pointer-events:none}   /* under the photo only, never the text; 2 px inside its edges, so no white hairline can open between photo and shadow */
.apx .sb-card--me{left:28.07%;top:0;width:43.86%;z-index:2;container-type:inline-size}
.apx .sb-card--me .sb-sh{top:calc(6.667% + 2px);height:calc(71.875% - 4px);border-radius:7.02% / 5.8%}
.apx .sb-card--l,.apx .sb-card--r{top:19%;width:34.5%;z-index:1}
.apx .sb-card--l{left:0}
.apx .sb-card--r{right:0}
.apx .sb-card--l .sb-sh,.apx .sb-card--r .sb-sh{top:2px;height:calc(100% - 4px);border-radius:7.02% / 5.78%}
.apx .sb-one{position:absolute;right:-6.9%;top:-3.3%;width:18.2%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(145deg,#FF4D7A 0%,#FF3366 45%,#E0115F 100%);color:#fff;
  font-family:var(--so);font-weight:500;font-size:6.9cqw;line-height:1;letter-spacing:-.01em;
  box-shadow:0 10px 24px rgba(230,30,77,.35),inset 0 1px 0 rgba(255,255,255,.35)}

/* ---------- three figures and the button ---------- */
.apx .sb-figs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:860px;margin:var(--gap-visual,64px) auto 0;padding:0;text-align:center}
.apx .sb-figs b{display:block;font-family:var(--so);font-weight:500;font-size:44px;line-height:48px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.apx .sb-figs span{display:block;margin-top:6px;font-family:var(--na);font-size:15px;line-height:21px;color:var(--ink2)}
.apx .sb-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:48px;text-align:center}
.apx .sb-cta .small{margin:0}

@media (max-width:1068px){
  .apx .sb-figs b{font-size:40px;line-height:44px}
}
/* phones: the two cards behind her sit at the screen edges, so she stays large */
@media (max-width:734px){
  .apx .superboost{--sb-sh:0 26px 48px -14px rgba(40,16,30,.32),0 7px 16px -6px rgba(40,16,30,.2)}
  .apx .sb-stage{width:100%;aspect-ratio:346 / 357}
  .apx .sb-card--me{left:19.36%;width:61.27%}
  .apx .sb-card--l,.apx .sb-card--r{top:19.6%;width:43.35%}
  .apx .sb-figs{gap:14px}
  .apx .sb-figs b{font-size:26px;line-height:30px}
  .apx .sb-figs span{margin-top:4px;font-size:12.5px;line-height:17px}
  .apx .sb-cta{margin-top:32px}
}

/* ==== css/touring-cities.css ==== */
/* =====================================================================================================
   TOURING "Two cities" (canvas "Touring Directions" option 1, owner 2026-09-24). Own sheet, own tc-* names. The section keeps
   the opener's type and the closing facts line from the page's .touring chapter (css/page.css), but not its full-bleed
   black: since the same day it is a light rounded panel with a faint map of New Zealand (canvas "Touring Backgrounds"
   option 4, the owner's pick).
   The Auckland page and the Wellington page side by side (stacked on phones) while the days run. js/touring-cities.js
   sets data-phase on the section and nothing else moves by script:
     home  16 Sep      the card on the Auckland page
     early 17 - 19 Sep  the card also shows on the Wellington page with its Arrives pill (still listed in Auckland)
     here  20 - 23 Sep  the listing has moved: gone from Auckland, in Wellington with Here until
     back  24 - 25 Sep  home again
   Geometry is pure CSS: a card is a third of its row, a neighbour slides by var(--s) card widths, and the traveller's
   flight is one sheet (300% of its own width + the gaps and paddings) to the right, or one sheet down on phones.
   ===================================================================================================== */
.apx .tc{--tc-g:14px;--tc-px:20px;--tc-pt:18px;--tc-hd:36px;--tc-rm:16px;--tc-pb:20px;--tc-gap:24px;
  --tc-top:calc(var(--tc-pt) + var(--tc-hd) + var(--tc-rm));
  --tc-ease:cubic-bezier(.22,1,.36,1);--tc-travel:cubic-bezier(.65,0,.35,1)}
/* the chapter: the Social proof / Placement panel shape in Apple grey on the page's white, the Auckland to Wellington route
   (img/touring/nz-route.svg) in the empty corner beside the headline from 1024 px up; below that the plain grey panel */
.apx .touring.tc{background:none;color:#141414;padding:var(--gap-visual,64px) 0 var(--pad-story,128px)}
.apx .touring.tc>.wrap{border-radius:40px;padding:72px 64px 64px;background:#F5F5F7}
@media (min-width:1024px){.apx .touring.tc>.wrap{background:url(../media/add-profile/img/touring/nz-route.svg) no-repeat right 28px top 28px / auto 520px,#F5F5F7}}
@media (min-width:1280px){.apx .touring.tc>.wrap{background-position:right 40px top 36px;background-size:auto 640px}}
@media (max-width:1023px){.apx .touring.tc>.wrap{border-radius:32px;padding:48px 40px 40px}}
@media (max-width:767px){.apx .touring.tc{padding:12px 0 var(--pad-story,80px)}.apx .touring.tc>.wrap{width:calc(100% - 24px);border-radius:24px;padding:32px 16px 24px}}
.apx .touring.tc .teyebrow{color:rgba(20,20,20,.5)}
.apx .touring.tc .h-touring{color:#141414}
.apx .touring.tc .touring__lead{color:rgba(20,20,20,.62)}
.apx .touring.tc .ink{color:#141414}
.apx .touring.tc .tfacts{color:rgba(20,20,20,.5)}
.apx .tc-demo{position:relative;margin-top:var(--gap-visual,64px)}
.apx .tc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the caption: date, what is happening, one line of why */
.apx .tc-cap{position:relative;padding-right:130px}
.apx .tc-cap__k{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--so);font-weight:500;font-size:15px;line-height:20px}
.apx .tc-cap__date{color:#E61E4D}
.apx .tc-cap__tags{display:inline-grid;color:rgba(20,20,20,.5)}
/* the phase label fades with its caption (the date is a clock and changes at once) */
.apx .tc-t{grid-area:1 / 1;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s}
.apx .tc[data-phase="home"] .tc-t--home,.apx .tc[data-phase="early"] .tc-t--early,.apx .tc[data-phase="here"] .tc-t--here,.apx .tc[data-phase="back"] .tc-t--back{opacity:1;visibility:visible;transition:opacity .45s ease .2s,visibility 0s .2s}
.apx .tc-cap__h{margin:8px 0 0;font-family:var(--so);font-weight:500;font-size:34px;line-height:40px;letter-spacing:-.01em;color:#141414}
.apx .tc-cap__p{margin:8px 0 0;font-family:var(--na);font-size:17px;line-height:25px;color:rgba(20,20,20,.62);max-width:760px}
.apx .tc-s{display:none}
/* the four captions share one grid cell, so the box is always as tall as the longest and the pages under it never move */
.apx .tc-caps{display:grid}
.apx .tc-c{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.apx .tc[data-phase="home"] .tc-c--home,.apx .tc[data-phase="early"] .tc-c--early,.apx .tc[data-phase="here"] .tc-c--here,.apx .tc[data-phase="back"] .tc-c--back{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .2s,transform .6s var(--tc-ease) .2s,visibility 0s .2s}
.apx .tc-pp{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(20,20,20,.16);background:#fff;color:#141414;font-family:var(--so);font-weight:500;font-size:14px;line-height:1;cursor:pointer}
.apx .tc-pp svg{width:13px;height:13px}
.apx .tc-pp .ic-play{display:none}
.apx .tc.is-paused .tc-pp .ic-play{display:block}
.apx .tc.is-paused .tc-pp .ic-pause{display:none}
.apx .tc-pp:focus-visible,.apx .tc-day:focus-visible{outline:2px solid #ff3366;outline-offset:3px}

/* the two pages */
.apx .tc-stage{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tc-gap);margin-top:32px}
.apx .tc-stage::before{content:"";position:absolute;left:-6%;right:-6%;top:-12%;bottom:-18%;background:radial-gradient(closest-side,rgba(255,51,102,.07),rgba(255,51,102,0));pointer-events:none}
.apx .tc-sheet{position:relative;min-width:0;background:#fff;border-radius:22px;padding:var(--tc-pt) var(--tc-px) var(--tc-pb);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 44px rgba(20,20,20,.10)}
.apx .tc-sheet--akl{z-index:2}
.apx .tc-hd{display:flex;align-items:center;gap:10px;height:var(--tc-hd);min-width:0}
.apx .tc-city{font-family:var(--so);font-weight:500;font-size:22px;line-height:1;letter-spacing:-.01em;color:#141414}
.apx .tc-tag{flex:none;font-family:var(--so);font-weight:500;font-size:12px;line-height:16px;padding:5px 10px;border-radius:999px;background:#F2F2F4;color:rgba(20,20,20,.62);white-space:nowrap}
.apx .tc-tag--stop{background:#FFF1F5;color:#D70466}
.apx .tc-url{margin-left:auto;min-width:0;font-family:var(--na);font-size:13px;color:rgba(20,20,20,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx .tc-row{position:relative;overflow:hidden;margin-top:var(--tc-rm)}
.apx .tc-size,.apx .tc-nb{width:calc((100% - 2 * var(--tc-g)) / 3);aspect-ratio:534/990}
.apx .tc-size{visibility:hidden}
.apx .tc-nb{position:absolute;left:0;top:0;height:auto;object-fit:cover;object-position:top;transform:translateX(calc(var(--s) * (100% + var(--tc-g))));transition:transform .8s var(--tc-ease)}
/* each neighbour carries its slot with the traveller present (--in) and without (--out) */
.apx .tc-sheet--akl .tc-nb{--s:var(--in)}
.apx .tc[data-phase="here"] .tc-sheet--akl .tc-nb{--s:var(--out)}
.apx .tc-sheet--wlg .tc-nb{--s:var(--out)}
.apx .tc[data-phase="early"] .tc-sheet--wlg .tc-nb,.apx .tc[data-phase="here"] .tc-sheet--wlg .tc-nb{--s:var(--in)}

/* the traveller (Auckland's layer) and the early copy (Wellington's layer), both in the middle slot of their row */
.apx .tc-fly{position:absolute;left:var(--tc-px);right:var(--tc-px);top:var(--tc-top);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tc-g);pointer-events:none}
.apx .tc-anna,.apx .tc-ghost{grid-column:2;position:relative;aspect-ratio:534/990}
.apx .tc-anna{z-index:3;transition:transform 1.15s var(--tc-travel)}
.apx .tc[data-phase="here"] .tc-anna{transform:translateX(calc(300% + 2 * var(--tc-g) + 2 * var(--tc-px) + var(--tc-gap)))}
.apx .tc-lift{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#fff;transition:transform .45s var(--tc-ease),box-shadow .45s}
.apx .tc-anna.is-fly .tc-lift{transform:scale(1.07) translateY(-8px);box-shadow:0 24px 50px rgba(20,20,20,.22),0 0 0 2px #ff3366}
.apx .tc-lift img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .35s ease .55s}
.apx .tc-lift .tc-i-here{opacity:0}
.apx .tc[data-phase="here"] .tc-lift .tc-i-here{opacity:1}
.apx .tc[data-phase="here"] .tc-lift .tc-i-home{opacity:0}
.apx .tc-ghost{border-radius:12px;overflow:hidden;opacity:0;transform:scale(.9);transition:opacity .6s ease,transform .8s cubic-bezier(.34,1.4,.64,1)}
.apx .tc-ghost img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.apx .tc[data-phase="early"] .tc-ghost{opacity:1;transform:none}
.apx .tc[data-phase="here"] .tc-ghost{opacity:0;transform:none;transition:opacity .3s ease 1s}

/* the days: three bands (3 days early, in Wellington, home again) over ten tappable days, a pink mark under today */
.apx .tc-ruler{position:relative;margin-top:40px}
.apx .tc-bands{position:relative;height:30px}
.apx .tc-band{position:absolute;top:0;display:flex;flex-direction:column;gap:6px;font-family:var(--so);font-weight:500;font-size:13px;line-height:17px;white-space:nowrap}
.apx .tc-band > span{display:flex;align-items:center;gap:6px}
.apx .tc-band b{display:inline-block;width:7px;height:7px;border-radius:50%}
.apx .tc-band em{font-style:normal}
.apx .tc-band i{display:block;height:3px;border-radius:2px}
.apx .tc-band--early{left:10%;width:calc(30% - 6px);color:#141414}.apx .tc-band--early i{background:rgba(20,20,20,.45)}.apx .tc-band--early b{background:#141414}
.apx .tc-band--here{left:40%;width:calc(40% - 6px);color:#15803D}.apx .tc-band--here i,.apx .tc-band--here b{background:#22C55E}
.apx .tc-band--home{left:80%;width:calc(20% - 6px);color:rgba(20,20,20,.45)}.apx .tc-band--home i{background:rgba(20,20,20,.15)}.apx .tc-band--home b{background:rgba(20,20,20,.3)}
.apx .tc-days{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));margin-top:6px}
.apx .tc-day{display:flex;align-items:baseline;justify-content:center;gap:5px;height:36px;padding:0;border:0;border-radius:10px;background:none;font-family:var(--so);font-size:15px;color:rgba(20,20,20,.38);cursor:pointer;transition:color .3s}
.apx .tc-day b{font-weight:500}
.apx .tc-day.is-past{color:rgba(20,20,20,.55)}
.apx .tc-day.is-on{color:#141414}
@media (hover:hover){.apx .tc-day:hover{color:#141414}.apx .tc-pp:hover{background:#F0F0F2}}
.apx .tc-ph{position:absolute;left:0;bottom:-2px;width:10%;height:3px;transform:translateX(calc(var(--tc-i,0) * 100%));transition:transform .5s var(--tc-ease);pointer-events:none}
.apx .tc-ph::after{content:"";position:absolute;left:50%;top:0;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:#ff3366}

/* tablets: the same side-by-side pages, tighter */
@media (max-width:1068px){
  .apx .tc{--tc-g:10px;--tc-px:14px;--tc-pt:14px;--tc-hd:30px;--tc-rm:12px;--tc-pb:14px;--tc-gap:16px}
  .apx .tc-sheet{border-radius:18px}
  .apx .tc-city{font-size:18px}
  .apx .tc-tag{font-size:11px;padding:3px 8px}
  .apx .tc-url{display:none}
  .apx .tc-cap__h{font-size:30px;line-height:36px}
  .apx .tc-day{font-size:13px}
  .apx .tc-day .tc-wd{display:none}
}
/* phones: the pages stack and the card drops down to Wellington and back up; the short caption only */
@media (max-width:734px){
  .apx .tc{--tc-g:8px;--tc-px:14px;--tc-pt:12px;--tc-hd:26px;--tc-rm:8px;--tc-pb:12px;--tc-gap:10px}
  .apx .tc-stage{grid-template-columns:minmax(0,1fr);margin-top:14px}
  .apx .tc-city{font-size:17px}
  .apx .tc[data-phase="here"] .tc-anna{transform:translateY(calc(100% + var(--tc-top) + var(--tc-pb) + var(--tc-gap)))}
  .apx .tc-cap{padding-right:0}
  .apx .tc-cap__k{font-size:14px}
  .apx .tc-cap__h{font-size:22px;line-height:26px;margin-top:6px}
  .apx .tc-l{display:none}
  .apx .tc-s{display:inline}
  .apx .tc-cap__p{display:none}
  .apx .tc-pp{top:-5px;height:30px;padding:0 10px;font-size:12px}
  .apx .tc-ruler{margin-top:14px}
  .apx .tc-bands{height:24px}
  .apx .tc-band{font-size:11px;line-height:14px;gap:5px}
  .apx .tc-band--home .tc-lg{display:none}
  .apx .tc-day{height:28px;font-size:13px}
  .apx .tc-ph::after{width:14px;margin-left:-7px}
}
@media (prefers-reduced-motion:reduce){
  .apx .tc *,.apx .tc *::before,.apx .tc *::after{transition:none!important;animation:none!important}
}

/* ==== css/everything.css ==== */
/* "Here is everything else you get" (docs/09-everything-else.md): Apple's gallery ribbon, measured on apple.com/iphone-duo
   30 Sep 2026. Cards 833 / 620 x 612 (desktop), 591 / 438 x 485 (1068 and under), 311 x 390 (734 and under); 28 px corners;
   20 px gaps; the first card on the content edge, the rest running off the right edge; the text 32 px under each picture,
   16 px in; two 36 px arrows under the strip, right-aligned, on phones too. Own names (ev-), nothing in page.css. */
/* after Touring: its 128 / 96 / 80 bottom plus this 64 / 54 / 36 top = the page's chapter gap 192 / 150 / 116 */
.apx .everything{padding:var(--gap-visual,64px) 0 var(--pad-story,128px);background:#fff;overflow:hidden}
.apx .ev-h{margin:0;font-family:var(--so);font-weight:500;font-size:48px;line-height:52px;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}

.apx .ev-strip{position:relative;margin-top:48px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  --ev-edge:calc((100% - min(var(--wrap,1260px),87.5%)) / 2);padding:0 var(--ev-edge);scroll-padding:0 var(--ev-edge)}
.apx .ev-strip::-webkit-scrollbar{display:none}
.apx .ev-list{display:flex;gap:20px;width:max-content;margin:0;padding:0;list-style:none}
.apx .ev-item{flex:none;width:833px;scroll-snap-align:start}
.apx .ev-item--narrow{width:620px}
.apx .ev-media{display:block;height:612px;border-radius:28px;overflow:hidden;background:#F5F5F7}
.apx .ev-img{display:block;width:100%;height:100%;object-fit:contain}
.apx .ev-cap{margin:32px 16px 0;max-width:590px;font-family:var(--na);font-size:var(--t-ui,17px);line-height:var(--lh-ui,21px);color:rgba(20,20,20,.62)}
.apx .ev-cap .ink{color:var(--ink)}

.apx .ev-nav{display:flex;justify-content:flex-end;gap:18px;margin-top:40px}
.apx .ev-arrow{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(210,210,215,.64);color:rgba(0,0,0,.56);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.apx .ev-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.apx .ev-arrow:hover:not(:disabled){background:rgba(223,223,227,.7);color:rgba(0,0,0,.72)}
.apx .ev-arrow:focus-visible{outline:2px solid #0071e3;outline-offset:3px}
.apx .ev-arrow:disabled{opacity:.42;cursor:default}

@media (max-width:1068px){
  .apx .ev-h{font-size:40px;line-height:44px}
  .apx .ev-strip{margin-top:40px}
  .apx .ev-item{width:591px}
  .apx .ev-item--narrow{width:438px}
  .apx .ev-media{height:485px}
}
@media (max-width:734px){
  .apx .ev-h{font-size:30px;line-height:34px}
  .apx .ev-strip{margin-top:32px}
  .apx .ev-item,.apx .ev-item--narrow{width:311px}
  .apx .ev-media{height:390px}
  .apx .ev-cap{margin-top:29px}
  .apx .ev-nav{margin-top:32px}
}

/* ==== css/closing.css ==== */
/* Closing band "Ready to join the future?" (docs/10-closing.md; canvas Last Ribbon Designs, option 1, owner 2026-09-30).
   The page's last band: a dark rounded panel inset in white, centred like the last slide of a keynote. The site footer that
   follows in the theme is #0F0F0F as well, so the white space under the panel (96 / 72 / 40) keeps the two apart.
   Top: 64 / 54 / 36 after the gallery's 128 / 96 / 80 = the page's chapter gap. Own names (cl-), nothing in page.css. */
.apx .closing{padding:var(--gap-visual,64px) 0 96px;background:#fff}
.apx .cl-panel{position:relative;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:112px 96px;border-radius:40px;background:#0F0F0F;text-align:center}
.apx .cl-glow{position:absolute;left:50%;top:64%;width:900px;height:420px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(230,30,77,.2),rgba(230,30,77,0));pointer-events:none}
.apx .cl-logo{position:relative;display:block;width:150px;height:auto}
.apx .cl-eyebrow{position:relative;margin:30px 0 0;font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow,19px);line-height:var(--lh-eyebrow,23px);color:rgba(245,245,247,.5)}
.apx .cl-h{position:relative;margin:16px 0 0;max-width:980px;font-family:var(--so);font-weight:500;font-size:80px;line-height:84px;letter-spacing:-.025em;color:#F5F5F7;text-wrap:balance}
.apx .cl-lead{position:relative;margin:22px 0 0;max-width:640px;font-family:var(--na);font-size:var(--t-lead,21px);line-height:var(--lh-lead,29px);color:rgba(245,245,247,.64)}
.apx .cl-cta{position:relative;margin-top:40px}
.apx .cl-note{position:relative;margin:18px 0 0;font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:rgba(245,245,247,.5)}

@media (max-width:1068px){
  .apx .closing{padding-bottom:72px}
  .apx .cl-panel{padding:88px 56px;border-radius:32px}
  .apx .cl-h{font-size:56px;line-height:60px}
}
@media (max-width:734px){
  .apx .closing{padding-bottom:40px}
  .apx .cl-panel{width:calc(100% - 24px);padding:72px 24px;border-radius:24px}
  .apx .cl-glow{width:560px;top:62%}
  .apx .cl-logo{width:112px}
  .apx .cl-eyebrow{margin-top:22px;font-size:15px;line-height:20px}
  .apx .cl-h{margin-top:12px;font-size:40px;line-height:44px;letter-spacing:-.02em}
  .apx .cl-lead{margin-top:16px;font-size:17px;line-height:25px}
  .apx .cl-cta{margin-top:32px}
  .apx .cl-note{font-size:13px}
}

/* ==== tools/theme/add-profile-theme.css ==== */
/* ==== Theme integration (hand-written: tools/theme/add-profile-theme.css). tools/build-theme.mjs appends this after the
   scoped page sheets; plan: httpdocs docs/plans/add-profile-page-v2-plan-2026-09-30.md, Approach items 1 and 4-6. ==== */

/* 1. Site defence. The site's own sheets load after this one and style bare elements: body (main251-live.css :2-12, the
   Söhne / National 2 stylistic sets ss01 + ss02), img (:17, vertical-align), button (:746, and width 100% at :1979), h1-h5
   (:777), section (:3902) and video (:14). Inside the content these declarations roll exactly those properties back to the browser defaults the
   approved page has (revert), at one class + one element; the page's component rules (two classes) still win.
   tools/build-theme.mjs stops if a page rule of its own sets these properties on the same bare elements. */
.apx{font-feature-settings:normal}
.apx :is(h1,h2,h3,h4,h5){font-weight:revert;font-size:revert;font-family:revert;color:revert;letter-spacing:revert;line-height:revert}
.apx button{width:revert;vertical-align:revert;text-shadow:revert;border-radius:revert}
.apx section{width:revert}
.apx video{display:revert}
.apx img{vertical-align:revert}

/* 2. The site's fixed chrome. --hdr = the bottom edge of the header bar + category subnav (desktop) or of the phone header
   while it shows; the sheet holds the approved page's values until js/add-profile-page.js measures the real ones. The
   pinned Platform phone and #platform jumps sit below it. */
.apx{--hdr:74px}
@media (max-width:900px){.apx{--hdr:56px}}
.apx [id]{scroll-margin-top:var(--hdr)}

/* 3. Floating "Add your profile" bar, 1023 px and below, where the site's bottom ribbon would be (the ribbon is not printed
   on this page). A translucent white strip with one full-width pill (the page's own .btn.btn--lg), always visible, on
   the ribbon's layer (z-index 1000) so the site's menu (9999) and overlays still cover it. --apx-bar = the strip's height
   incl. the home-indicator inset (0 above 1023 px); it sits on body because Chatwoot's holder lives outside <main>.
   It stays hidden over the hero and the social proof, which carry their own Add your profile buttons, and slides up once the
   Platform section ("The most advanced platform ever built ...") rises above the bar's line (owner 2026-10-01; js/add-profile-page.js
   adds .is-shown). Hidden = moved below the window and visibility:hidden, so it is never painted at load and never focusable. */
body.apx-page{--apx-bar:0px}
.apx .apx-bar{display:none}
@media (max-width:1023px){
  body.apx-page{--apx-bar:calc(80px + env(safe-area-inset-bottom, 0px));padding-bottom:var(--apx-bar)}
  .apx .apx-bar{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 rgba(20,20,20,.08);transform:translateY(calc(100% + 2px));visibility:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
  .apx .apx-bar.is-shown{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
  .apx .apx-bar .btn{width:100%;max-width:480px}
  /* Chatwoot shows no bubble on phones (header.php); its unread-message preview is lifted above the bar on this page */
  body.apx-page .woot-widget-holder.has-unread-view{bottom:calc(var(--apx-bar) + 12px) !important}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){.apx .apx-bar,.apx .apx-bar.is-shown{transition:none}}

/* 4. Desktop phone fit (above 900 px, where the Platform phone is pinned). The site chrome is 62-72 px taller than the
   approved page's bar, and from 901 to 1023 px the floating bar also covers the bottom of the window, so the free height
   is 100vh - --hdr - --apx-bar. The phone is capped by that height (104 = stage gap 40 + frame 18 + gap 26 + label row 20)
   at its own ratio (screen 336:727, 300:649 at 1100 px and below), the pattern page.css already uses for --ph; the rail's
   end room keeps the phone letting go level with the last caption (the derivation in page.css, the stage shortened by the
   bar). On windows tall enough for the approved size nothing changes. */
@media (min-width:901px){
  .apx .stage2{height:calc(100vh - var(--hdr) - var(--apx-bar) - 40px);--ph:min(727px, calc(100vh - var(--hdr) - var(--apx-bar) - 104px))}
  .apx .phone2__screen{height:var(--ph)}
  .apx .phone2{width:calc(var(--ph) * 336 / 727 + 18px)}
  /* the room can come out negative on short windows with the bar (15vh < 110 px + ...): padding cannot, so the positive part
     is padding and the negative part a margin that pulls the grid - and the phone's release - up by the same amount */
  .apx .platform__rail{padding-bottom:max(0px, calc(15vh - (var(--hdr) + 40px) / 2 - var(--apx-bar) / 2 + 23px));margin-bottom:min(0px, calc(15vh - (var(--hdr) + 40px) / 2 - var(--apx-bar) / 2 + 23px))}
}
@media (min-width:901px) and (max-width:1100px){
  .apx .stage2{--ph:min(649px, calc(100vh - var(--hdr) - var(--apx-bar) - 104px))}
  .apx .phone2{width:calc(var(--ph) * 300 / 649 + 18px)}
}