/* v263 "Your guests' own Pass": real captured screens of a guest's Pass (The White Pavilion's sample guest), one per
   tab, in phone frames with one short line each. Home, pricing and how it works share it.
   Phones: a row you swipe, one screen per view at 78% of the width (scroll snap, the next screen peeks in, no scrollbar,
   a "1 / 5" count that follows the swipe). Tablets: smaller screens in the same row. Wide screens: all five in a row, as
   wide as the page. Nothing moves on its own. A tap on a screen opens it full size (.ps-box, js/occasi-pass-strip.js).
   The images carry width/height, so the frames hold their size before they load (no layout shift). Words are scoped under
   .ps so the site theme's "main p" font and colour (body.ot-site main ...) do not win. */
.ps{margin-top:48px}
.ps-head{margin:0 0 4px}
.ps .ps-kick{margin:0;font:600 12px/1.4 var(--ot-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ot-gold-ink)}
.ps .ps-title{margin:6px 0 0;font:500 clamp(26px,3.4vw,34px)/1.12 var(--ot-serif);letter-spacing:-.01em;color:var(--ot-ink)}
.ps-row{display:grid;grid-auto-flow:column;grid-auto-columns:78vw;gap:16px;margin:22px calc(var(--ot-gutter) * -1) 0;padding:6px var(--ot-gutter) 16px;
  list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ot-gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.ps-row::-webkit-scrollbar{display:none}
.ps-row:focus-visible{outline:2px solid var(--ot-forest);outline-offset:2px}
.ps-row>li{scroll-snap-align:start;margin:0;min-width:0}
.ps-phone{position:relative;display:block;width:100%;margin:0;border:0;padding:6px;border-radius:28px;background:#1c1a18;box-shadow:0 0 0 1.5px var(--ot-gold-soft),var(--ot-shadow);
  font:inherit;color:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.ps-phone:focus-visible{outline:2px solid var(--ot-forest);outline-offset:3px}
.ps-phone img{display:block;width:100%;height:auto;border-radius:22px;background:var(--ot-ivory)}
/* hidden words for screen readers; held inside the button (position:relative above), or the fifth screen's would widen
   a phone's page past the row's own clipping */
.ps-sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ps .ps-line{margin:12px 4px 0;font:500 18px/1.25 var(--ot-serif);color:var(--ot-ink);text-align:center;text-wrap:balance}
.ps .ps-note{margin:12px 0 0;font:400 14px/1.55 var(--ot-sans);color:var(--ot-muted)}
.ps .ps-note b{font-weight:600;color:var(--ot-text)}
.ps--flush{margin-top:0}
/* the same screens in the pages' own single phones (pricing's upgrade, how it works' ribbon, the home package card) */
.g-phone>picture,.g4-mini>picture{display:contents}
.ps .ps-foot{margin-top:14px;text-align:center}
.ps .ps-count{margin:2px 0 0;font:500 13px/1.4 var(--ot-sans);letter-spacing:.08em;color:var(--ot-muted);text-align:center;font-variant-numeric:tabular-nums}
.ps .ps-count b{font-weight:600;color:var(--ot-ink)}
@media (min-width:768px){.ps-row{grid-auto-columns:200px}}
@media (min-width:1000px){
  .ps-row{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:28px 0 0;padding:0;overflow:visible}
  .ps .ps-count{display:none}
}
/* full size: the five screens in the light page colour, one per view, swiped or stepped with the arrows; Esc or Close
   leaves; the page behind does not scroll (html.ps-lock) */
html.ps-lock{overflow:hidden;scrollbar-gutter:stable}
.ps-box{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ot-ivory,#fbf7f1);color:var(--ot-ink,#1f1d1a);overscroll-behavior:contain}
.ps-box[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.ps-box::backdrop{background:var(--ot-ivory,#fbf7f1)}
.ps-box-top,.ps-box-bar{display:flex;align-items:center;gap:8px;padding:6px 8px}
.ps-box-top{justify-content:space-between;padding-left:var(--ot-gutter,16px)}
.ps-box-bar{padding-bottom:max(8px,env(safe-area-inset-bottom))}
.ps-box .ps-box-at{margin:0;font:500 14px/1.4 var(--ot-sans);letter-spacing:.08em;color:var(--ot-muted);font-variant-numeric:tabular-nums}
.ps-box .ps-box-at b{font-weight:600;color:var(--ot-ink)}
.ps-box .ps-box-line{flex:1;margin:0;font:500 18px/1.25 var(--ot-serif);color:var(--ot-ink);text-align:center;text-wrap:balance}
.ps-box-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--ot-gold-soft);border-radius:50%;
  background:#fff;color:var(--ot-ink);font:400 24px/1 var(--ot-serif);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ps-box-btn:focus-visible{outline:2px solid var(--ot-forest);outline-offset:2px}
.ps-box-btn[aria-disabled="true"]{opacity:.35;cursor:default}
/* definite rows all the way down, so the screen's max-height:100% is the space between the two bars */
.ps-box-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;grid-template-rows:minmax(0,1fr);min-height:0;margin:0;padding:0;list-style:none;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.ps-box-track::-webkit-scrollbar{display:none}
.ps-box-track:focus{outline:none}
.ps-box-track>li{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;margin:0;padding:4px 12px;scroll-snap-align:center;scroll-snap-stop:always}
.ps-box-track picture{display:contents}
.ps-box-track source{display:none}
.ps-box-track img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:18px;
  box-shadow:0 0 0 1px var(--ot-gold-soft),var(--ot-shadow);background:#fff}