/* ---------- Real Head, self-hosted -----------------------------------------
   The brand face, in the six weights the site actually asks for. There is no
   italic cut in the family, so the closing clause the design sets in italic is
   a synthesised oblique. */
@font-face{font-family:"Real Head";src:url("../fonts/realhead-300.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap}
/* Real oblique cuts, sheared from the uprights at 10 degrees -----------------
   Real Head ships upright only, so every <em> was a browser-synthesised slope.
   Safari computes the ink of a synthesised slope against the upright advance
   and shaves whatever leans past it, which is the tail of an "e" or a "y" at
   the end of a line. A real italic face has correct metrics, so nothing is
   synthesised and nothing is clipped. */
@font-face{font-family:"Real Head";src:url("../fonts/realhead-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-600-italic.woff2") format("woff2");
  font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-700-italic.woff2") format("woff2");
  font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Real Head";src:url("../fonts/realhead-900-italic.woff2") format("woff2");
  font-weight:900;font-style:italic;font-display:swap}

/* ==========================================================================
   PRIMA Recommenders. White, blue, hairlines.
   ========================================================================== */


:root{
  --blue:#3A5BE0;--blue-dark:#2B45B4;--tint:#EFF2FE;
  --ink:#0E1116;--muted:#5B6472;
  --line:rgba(14,17,22,.11);--hair:rgba(14,17,22,.07);--off:#F7F8FA;
  --faint:#9AA2AF;
  --good:#16794C;--warm:#9A6B12;
  /* one family, display and body: --serif is kept as the display token so the
     hundreds of declarations that use it do not have to be rewritten */
  --sans:"Real Head",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Real Head",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --ground:#fff;
  --ease:cubic-bezier(.22,.61,.36,1);--pad:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.wrap--wide{max-width:1440px}
.sec{padding:64px 0}
.sec--off{background:var(--off)}
@media(min-width:900px){.sec{padding:104px 0}:root{--pad:32px}}
.hide{display:none!important}

/* type -------------------------------------------------------------------- */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:-.03em;line-height:1.04}
.h1{font-size:clamp(38px,6.4vw,68px)}
.h2{font-size:clamp(30px,5.2vw,58px)}
.h3{font-size:clamp(19px,2.2vw,25px)}
.kick{display:flex;align-items:center;gap:11px;margin:0 0 22px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.kick b{color:var(--blue);font-weight:600}
.kick::after{content:"";flex:1;height:1px;background:var(--line)}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:var(--muted);margin:20px 0 0;max-width:50ch;text-wrap:pretty}
.keep{white-space:nowrap}
.body{color:var(--muted);margin:14px 0 0;max-width:58ch}
.tiny{font-size:12px;color:var(--muted)}
.mark{color:var(--blue)}
.ul{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* buttons ----------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:4px;border:1px solid transparent;background:none;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-dark)}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.btn--sm{min-height:38px;padding:0 16px;font-size:11px}
.btn--wide{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.arrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}

/* nav --------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:62px}
/* the dashboard puts its sections in the header, beside the logo */
.nav__in .tabs__in{flex:1 1 auto;margin-left:14px;align-items:center}
.nav__in .tabs__in button{padding:21px 0}
.nav__in .mny{flex:0 0 auto;white-space:nowrap}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{height:15px;width:auto;fill:var(--ink)}
.logo span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:10px}
.nav__links{display:none;gap:26px}
.nav__links a{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav__links a:hover{color:var(--ink)}
@media(min-width:860px){.nav__links{display:flex}}
@media(max-width:620px){.nav .ul{display:none}.logo span{display:none}}

/* the landing page wears no bar over its film. the white one arrives as soon
   as the page moves, the same way it did on the original. */
.nav--over{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease)}
.nav--over .logo svg{fill:#fff}
.nav--over .sitenav a{color:rgba(255,255,255,.82)}
.nav--over .sitenav a:hover,
.nav--over .sitenav a[aria-current="page"]{color:#fff}
.nav--over .burger{color:#fff}
.nav--over .btn--line{border-color:rgba(255,255,255,.5);color:#fff}
.nav--over .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.nav--over.is-stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom-color:var(--hair)}
.nav--over.is-stuck .logo svg{fill:var(--ink)}
.nav--over.is-stuck .sitenav a{color:var(--muted)}
.nav--over.is-stuck .sitenav a:hover,
.nav--over.is-stuck .sitenav a[aria-current="page"]{color:var(--ink)}
.nav--over.is-stuck .burger{color:var(--ink)}
.nav--over.is-stuck .btn--line{border-color:var(--line);color:var(--ink)}
.nav--over.is-stuck .btn--line:hover{border-color:var(--ink);background:none}
[data-theme="night"] .nav--over.is-stuck{background:rgba(14,16,20,.92)}

.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.iconbtn:hover{border-color:var(--ink);color:var(--ink)}
.iconbtn[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* app tabs, the one switch, and the money, all on one line ---------------- */




.mny{display:none;font-size:11.5px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.mny b{color:var(--ink);font-weight:600}
.mny i{font-style:normal;opacity:.4;margin:0 2px}
@media(min-width:900px){.mny{display:inline}}
.switch{position:relative;display:inline-flex;flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff}
.switch::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--ink);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.switch.is-b::before{transform:translateX(100%)}
.switch button{position:relative;z-index:1;flex:1 1 50%;background:none;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .24s var(--ease)}
.switch button:hover{color:var(--ink)}
.switch button[aria-pressed="true"]{color:#fff}
.switch--wide{width:100%}
.switch--wide button{flex:1}
.tabnew{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;align-self:stretch;margin-right:22px;
  border:0;background:none;cursor:pointer;padding:15px 0;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;transition:color .16s var(--ease)}
.tabnew i{font-style:normal;font-size:15px;line-height:1;color:var(--blue);transition:color .16s var(--ease)}
.tabnew:hover{color:var(--blue)}
.tabnew:hover i{color:var(--blue-dark)}
.tabnew:active{color:var(--blue-dark)}
.tabs__in{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.tabs__in::-webkit-scrollbar{display:none}
.tabs__in button{background:none;border:0;padding:15px 0;cursor:pointer;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent}
.tabs__in button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.tabs em{font-style:normal;color:var(--blue);margin-left:6px}

/* how it works ------------------------------------------------------------ */
.steps{display:grid;border-top:1px solid var(--line);margin-top:34px}
.step{padding:26px 0;border-bottom:1px solid var(--line)}
.step b{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--blue);margin-bottom:12px}
.step h3{margin-bottom:8px}
.step p{margin:0;color:var(--muted);max-width:34ch}
@media(min-width:880px){
  .steps{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
  .step{border-bottom:0;border-right:1px solid var(--line);padding:32px 28px 38px}
  .step:first-child{padding-left:0}.step:last-child{border-right:0;padding-right:0}
}

/* filters ----------------------------------------------------------------- */
/* sits flush under the header, so nothing shows through behind it */
.filters{position:sticky;top:62px;z-index:50;background:#fff;padding:14px 0;border-bottom:1px solid var(--hair)}
.filters__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow:visible}
.filters__row::-webkit-scrollbar{display:none}
.filters__row + .filters__row{margin-top:10px}
.pill{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .18s var(--ease)}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pill--soon{opacity:.45;cursor:not-allowed}
.pill--soon:hover{border-color:var(--line);color:var(--muted)}
.search{flex:1 1 200px;min-width:160px;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14px;outline:none}
/* our own dropdown, styled like everything else */
.dd{position:relative;flex:0 0 auto}
.dd__btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:10px 16px;cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:border-color .16s var(--ease)}
.dd__btn:hover{border-color:var(--ink)}
.dd__btn svg{width:11px;height:8px;color:var(--muted);transition:transform .2s var(--ease)}
.dd.is-open .dd__btn{border-color:var(--ink)}
.dd.is-open .dd__btn svg{transform:rotate(180deg)}
.dd__menu{position:absolute;left:0;top:calc(100% + 8px);z-index:60;min-width:196px;padding:6px;border:1px solid var(--line);
  border-radius:12px;background:#fff;box-shadow:0 18px 44px rgba(14,17,22,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.dd.is-open .dd__menu{opacity:1;visibility:visible;transform:none}
.dd__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:none;cursor:pointer;
  padding:10px 12px;border-radius:8px;text-align:left;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.dd__opt:hover{background:var(--off)}
.dd__opt.is-on{background:var(--tint);color:var(--blue);font-weight:600}
.dd__opt.is-off{color:var(--muted);opacity:.55;cursor:not-allowed}
.dd__opt.is-off:hover{background:none}
.dd__opt em{font-style:normal;font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.search:focus{border-color:var(--blue)}

/* venue grid -------------------------------------------------------------- */
.appgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
@media(min-width:620px){.appgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.appgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1320px){.appgrid{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;padding:18px;display:flex;flex-direction:column;gap:12px;position:relative}
.card__top{display:flex;align-items:flex-start;gap:13px}
.tile{flex:0 0 54px;height:54px;border-radius:4px;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.02em;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}
.card__id{min-width:0;flex:1}
.card__name{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.1;display:block}
.card__meta{margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}
.card__foot .fee{flex:1 0 100%}
.fee{font-size:11.5px;color:var(--muted)}
.fee b{color:var(--ink);font-weight:600}
.note{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);border:1px solid rgba(154,107,18,.3);border-radius:3px;padding:3px 7px}
.pick{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:none;border-radius:999px;padding:8px 14px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .18s var(--ease)}
.pick:hover{border-color:var(--ink);color:var(--ink)}
.pick i{width:14px;height:14px;border:1px solid currentColor;border-radius:3px;display:inline-block;position:relative}
.pick[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pick[aria-pressed="true"] i{background:#fff;border-color:#fff}
.pick[aria-pressed="true"] i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}
.link{background:none;border:0;padding:0;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.link:hover{color:var(--blue-dark)}
.link--muted{color:var(--muted)}
.link--muted:hover{color:var(--ink)}


/* venue cards: photo, logo over the front, name, select ------------------- */
.vgrid{display:grid;gap:26px 20px;margin-top:28px}
@media(min-width:560px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.vgrid{grid-template-columns:repeat(4,1fr)}}
.vcard{display:flex;flex-direction:column;gap:12px}
.shot{position:relative;cursor:pointer;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#20242C;display:block}
.shot img.photo{width:100%;height:100%;object-fit:cover}
.shot__scrim{position:absolute;inset:0;background:radial-gradient(118% 92% at 50% 50%,rgba(8,10,14,.40) 0%,rgba(8,10,14,.20) 52%,rgba(8,10,14,.12) 100%)}
.shot__mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 16px;text-align:center}
.shot__mark span{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;line-height:1.2;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.shot__mark img{max-width:62%;max-height:44%;width:auto;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 1px 14px rgba(0,0,0,.45))}
.vcard__b{display:flex;align-items:baseline;gap:10px}
.vcard__name{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.15}
.vcard__n{margin-top:-4px;font-size:12px;color:var(--muted)}
.vcard__n .earn{color:var(--good);font-weight:600}
.earn{color:var(--good)}
.row__meta .earn{margin-left:10px;font-weight:600}
.times--money{gap:8px}
.times--money .time{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;padding:9px 12px}
.times--money .time u{text-decoration:none;margin:0;font-size:11px;font-weight:600;color:var(--muted)}
.times--money .time u.earn{color:var(--good)}
.times--money .time[aria-pressed="true"] u,.times--money .time[aria-pressed="true"] u.earn{color:rgba(255,255,255,.85)}
.stat b.earn{color:var(--good)}
.vcard__area{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel{width:100%;border:1px solid var(--line);background:none;border-radius:4px;padding:12px 14px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:all .18s var(--ease)}
.sel:hover{border-color:var(--ink)}
.sel[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.vcard--on .shot{box-shadow:0 0 0 2px var(--blue)}
.vcard .times{margin-top:2px}
.vcard__foot{display:flex;align-items:center;gap:10px}
.vcard__foot .fee{flex:1}


/* list row: photo and logo, name, meta, times with the money on them ------ */
.lrows{display:grid;gap:14px;margin-top:22px}
.lrow{display:grid;grid-template-columns:112px 1fr;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
@media(min-width:760px){.lrow{grid-template-columns:150px 1fr}}
.lrow__shot{position:relative;background:#20242C;cursor:pointer;min-height:112px}
.lrow__shot img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lrow__shot .shot__scrim{background:linear-gradient(180deg,rgba(10,12,16,.3),rgba(10,12,16,.55))}
.lrow__shot .shot__mark span{font-size:clamp(12px,1.2vw,15px);letter-spacing:.16em}
.lrow__badge{position:absolute;left:8px;top:8px;right:8px;z-index:2;display:block;width:fit-content;max-width:calc(100% - 16px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 10px;border-radius:999px;
  background:rgba(10,12,16,.55);border:1px solid rgba(255,255,255,.35);color:#fff;
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.lrow__b{min-width:0;padding:14px 16px 14px 18px;display:flex;flex-direction:column;gap:9px}
.lrow__top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lrow__name{font-family:var(--serif);font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.1}
.lrow__acts{display:flex;gap:14px;margin-left:auto}
.lrow__meta{margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lrow__meta .earn{color:var(--good);font-weight:600;letter-spacing:.1em}
.strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip .time{flex:0 0 auto}
.time .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:middle}
.time[aria-pressed="true"] .dot{background:#fff}

/* how it works: boxes with arrows, revealed one after another ------------- */
.flow{display:grid;gap:12px;margin-top:34px}
@media(min-width:1000px){
  .flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:0;align-items:stretch}
}
.fcard{border:1px solid var(--line);border-radius:10px;background:#fff;padding:24px 22px 26px;display:flex;flex-direction:column;gap:9px}
/* every step mark is the same object: a solid blue disc with a white glyph */
.fcard b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.fcard b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fcard__ics{display:inline-flex;margin-bottom:6px}
.fcard__ics b{margin-bottom:0;box-shadow:0 0 0 2.5px #fff}
.fcard__ics b + b{margin-left:-7px}
.fcard__ics b:nth-child(2){background:#2F4ED8}
.fcard__ics b:nth-child(3){background:#2745C6}
.fcard__ics b:nth-child(4){background:#213CB0}
.fcard__ics b:nth-child(5){background:#1B339B}
.fcard__ics b:nth-child(6){background:#162C87}
.fcard__ics b svg{width:17px;height:17px;fill:currentColor;stroke:none}
.fcard h3{font-size:clamp(18px,1.9vw,22px)}
.fcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.farrow{display:flex;align-items:center;justify-content:center;color:var(--line);padding:6px 0}
.farrow svg{width:26px;height:26px;transform:rotate(90deg)}
@media(min-width:1000px){.farrow{padding:0 14px}.farrow svg{transform:none;width:30px;height:30px}}

.flow > *{opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .3s var(--ease),transform .34s cubic-bezier(.2,.9,.25,1.12)}
.flow.in > *{opacity:1;transform:none}
.flow.in > *:nth-child(1){transition-delay:0s}
.flow.in > *:nth-child(2){transition-delay:.09s}
.flow.in > *:nth-child(3){transition-delay:.14s}
.flow.in > *:nth-child(4){transition-delay:.23s}
.flow.in > *:nth-child(5){transition-delay:.28s}
.flow.in > *:nth-child(6){transition-delay:.37s}
.flow.in > *:nth-child(7){transition-delay:.42s}
.flow.in .farrow{color:var(--blue)}
.farrow{transition:color .3s var(--ease) .18s,opacity .3s var(--ease),transform .34s cubic-bezier(.2,.9,.25,1.12)}
@media(prefers-reduced-motion:reduce){.flow > *{opacity:1;transform:none;transition:none}}

/* hero: one grid, the type and the restaurants interlocked ---------------- */
.hero{padding:24px 0 0}
@media(min-width:1000px){.hero{padding:40px 0 0}}

.hgrid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hgrid > .hg--title, .hgrid > .hg--copy{grid-column:1 / -1}
.hg--title{margin:0 0 6px;container-type:inline-size}
.hg--title span{display:block;white-space:nowrap}
/* the headline is sized off the cell it sits in, so its lines never rewrap */
.hero .h1{font-size:clamp(24px,8.2vw,58px);line-height:1.04;letter-spacing:-.02em}
@supports (font-size:1cqw){.hero .h1{font-size:min(9.3cqw,58px)}}
.hg--copy{margin-top:6px}
.hg--copy .lede{margin-top:0}
.hg--copy .btns{margin-top:20px;gap:10px}
.hg--copy .btn{min-height:46px;padding:0 20px;font-size:11.5px}

.hg{position:relative;margin:0;border-radius:10px;overflow:hidden;background:#20242C}
.hg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hg .shot__scrim{background:linear-gradient(180deg,rgba(10,12,16,.40),rgba(10,12,16,.60))}
.hg .shot__mark{padding:12px}
.hg .brand{position:static;width:auto;height:auto;max-width:76%;max-height:40%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0,0,0,.45))}
.hg--b{aspect-ratio:4/3}
.hg--c{aspect-ratio:1/1}
.hg--d{aspect-ratio:4/3;grid-column:1 / -1}
/* the film, in the grid: it plays quietly and opens full size on a click */
.hg--v{grid-column:1 / -1;aspect-ratio:16/10;background:#0E1116}
.hg__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hg__grad{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(8,10,14,.62) 0%,rgba(8,10,14,.16) 42%,transparent 72%)}
.hg__watch{position:absolute;left:16px;bottom:15px;z-index:2;display:inline-flex;align-items:center;gap:10px;
  padding:0;border:0;background:none;cursor:pointer;color:#fff;font-family:var(--sans);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.hg__tri{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);transition:background .18s var(--ease),transform .18s var(--ease)}
.hg__tri::before{content:"";border-left:10px solid #fff;border-top:6.5px solid transparent;
  border-bottom:6.5px solid transparent;margin-left:3px}
.hg__watch:hover .hg__tri{background:rgba(255,255,255,.3);transform:scale(1.06)}

@media(min-width:1000px){
  .hgrid{grid-template-columns:repeat(12,1fr);gap:12px;align-items:start}
  /* the words hold the left, the film is the only picture and holds the right */
  .hgrid > .hg--title{grid-column:1 / 7;grid-row:1;align-self:end;margin:0}
  .hg--v{grid-column:7 / 13;grid-row:1 / span 2;aspect-ratio:auto;align-self:stretch;
    height:auto;min-height:560px}
  .hgrid > .hg--copy{grid-column:1 / 6;grid-row:2;align-self:start;padding-top:26px}
  .hg--copy .lede{font-size:20px;line-height:1.5}
  .hg--copy .btns{margin-top:26px}
  .hg__watch{left:20px;bottom:20px}
}



/* who it's built for ------------------------------------------------------ */
.who{display:grid;gap:26px 20px;margin-top:40px}
@media(min-width:640px){.who{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.who{grid-template-columns:repeat(3,1fr);gap:28px}}
.who__card{display:flex;flex-direction:column;gap:12px}
.who__b{display:contents}
.who__shot{display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#20242C}
.who__shot img{width:100%;height:100%;object-fit:cover}
.who__card h3{font-size:clamp(17px,1.5vw,20px);line-height:1.15;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:2px}
.who__card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:34ch}
/* every card the same shape: the claim, the detail, then who it is for. The
   three claims read as a set even though each says a different thing. */
.who__say{color:var(--ink) !important;font-size:15.5px !important;font-weight:500;line-height:1.4 !important}
.who__det{margin-top:-4px !important}
.who__for{margin-top:2px !important;font-size:11px !important;font-weight:600;letter-spacing:.06em;
  line-height:1.6 !important;color:var(--faint) !important;max-width:32ch}

/* what you earn and your own page, side by side with the phone ----------- */
.split--earn{align-items:center;gap:34px}
@media(min-width:960px){.split--earn{grid-template-columns:1.15fr .85fr;gap:58px}}
.page__copy .lede{max-width:44ch}
.page__copy .lede + .lede{margin-top:16px}
.page__copy .h2{font-size:clamp(28px,3.6vw,46px)}
.stats.stats--2{grid-template-columns:repeat(2,1fr);margin-top:26px;max-width:none}
@media(min-width:560px){.stats.stats--2{grid-template-columns:repeat(4,1fr)}}
.stats--2 .stat{padding:16px 14px}
.stats--2 .stat b{font-size:clamp(22px,2.1vw,28px)}
.stats--2 .stat span{margin-top:6px;font-size:9px;letter-spacing:.14em}
.split--earn .phone{padding:0}
@media(min-width:960px){.split--earn .phone{justify-content:flex-end}}

/* the phone shows the real PRIMA list ------------------------------------- */
.pr__head{display:flex;align-items:center;gap:8px;padding:2px 14px 12px}
.pr__sq{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:14px;color:var(--ink)}
.pr__sq svg{width:15px;height:15px}
.pr__wordmark{flex:1;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.02em}
.pr__city{font-size:11.5px;color:var(--muted);white-space:nowrap}
.pr__crit{display:flex;margin:0 12px;border:1px solid rgba(58,91,224,.45);border-radius:9px;overflow:hidden}
.pr__crit span{flex:1;padding:9px 4px;text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);border-right:1px solid rgba(58,91,224,.25)}
.pr__crit span:last-child{border-right:0}
.pr__chips{display:flex;gap:6px;padding:9px 12px 0;overflow:hidden}
.pr__chip{flex:0 0 auto;border:1px solid rgba(58,91,224,.45);border-radius:7px;padding:6px 9px;
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.pr__count{display:flex;align-items:center;justify-content:space-between;padding:11px 12px 6px;
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pr__count b{color:var(--ink)}
.pr__count span{display:inline-flex;align-items:center;gap:5px}
.pr__count i{width:8px;height:8px;border-radius:2px;display:inline-block}
.pr__count i.free{border:1px solid var(--blue)}
.pr__count i.prime{background:var(--blue)}
.pr__count em{font-style:normal;opacity:.5}

.pr__row{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--hair)}
.pr__thumb{flex:0 0 68px;height:68px;border-radius:9px;overflow:hidden;background:#20242C}
.pr__thumb img{width:100%;height:100%;object-fit:cover}
.pr__b{min-width:0;flex:1}
.pr__top{display:flex;align-items:baseline;gap:8px}
.pr__top b{font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.15;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr__rate{font-size:10px;font-weight:600;color:var(--blue);white-space:nowrap}
.pr__rate em{font-style:normal;color:var(--muted);font-weight:400}
.pr__meta{margin:3px 0 0;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr__times{display:flex;gap:5px;margin-top:7px}
.pr__t{flex:0 0 auto;border:1px solid rgba(58,91,224,.5);border-radius:7px;padding:7px 8px;
  font-size:9.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.pr__t--prime{background:var(--blue);border-color:var(--blue);color:#fff}
.pr__t i{font-style:normal;opacity:.5;margin:0 4px}
.pr__t--hit{animation:phBook 13s linear infinite}

/* your own page: a phone that scrolls and books on a loop ----------------- */
.split--page{align-items:center}
@media(min-width:960px){.split--page{grid-template-columns:1fr .78fr;gap:60px}}
.urlpill{display:inline-flex;align-items:center;gap:10px;margin-top:26px;border:1px solid var(--line);border-radius:999px;
  padding:12px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--off)}
.urlpill i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.page__note{display:block;margin-top:12px}

.phone{display:flex;justify-content:center;padding:26px 0}
/* iPhone: titanium rail, Dynamic Island, status bar, home indicator */
.iphone{position:relative;width:330px;max-width:100%;padding:11px;border-radius:58px;
  background:linear-gradient(145deg,#52585f,#1a1d22 22%,#0b0d11 55%,#23262c 78%,#5b6169);
  box-shadow:0 40px 90px rgba(14,17,22,.3),0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(0,0,0,.6)}
.iphone::after{content:"";position:absolute;left:-1px;top:96px;width:2px;height:52px;border-radius:2px;
  background:linear-gradient(180deg,#41464d,#20242a)}
.iphone::before{content:"";position:absolute;right:-1px;top:132px;width:2px;height:82px;border-radius:2px;
  background:linear-gradient(180deg,#41464d,#20242a)}
.iphone__screen{position:relative;height:668px;border-radius:48px;overflow:hidden;background:#fff;display:flex;flex-direction:column;
  box-shadow:0 0 0 2px #05070a}
.iphone__status{display:flex;align-items:center;justify-content:space-between;padding:0 26px;height:46px;
  font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.iphone__icons{display:inline-flex;align-items:center;gap:5px;color:var(--ink);position:relative;top:-3px;right:2px}
.iphone__icons svg{height:11px;width:auto;fill:currentColor}
.iphone__notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:118px;height:30px;
  border-radius:0 0 18px 18px;background:#05070a;z-index:4}
.iphone__home{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:118px;height:5px;border-radius:99px;background:rgba(14,17,22,.32);z-index:4}
.ph__head{padding:10px 18px 12px}
.ph__title{margin:0;font-family:var(--serif);font-size:25px;font-weight:700;line-height:1.08;letter-spacing:-.01em}
.ph__sub2{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.ph__top{display:flex;align-items:center;gap:10px;padding:6px 16px 10px}
.ph__avatar{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;letter-spacing:.04em}
.ph__brand{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ph__url{display:flex;align-items:center;gap:8px;margin:0 16px;border-radius:999px;background:var(--off);padding:9px 14px;
  font-size:11px;color:var(--muted)}
.ph__url i{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.ph__viewport{flex:1;overflow:hidden;padding:0 0 22px;position:relative}
.ph__scroll{animation:phScroll 13s cubic-bezier(.5,0,.2,1) infinite}
.ph__h{font-family:var(--serif);font-size:23px;font-weight:700;line-height:1.1;margin:0}
.ph__sub{margin:6px 0 12px;font-size:11.5px;color:var(--muted)}
.ph__chips{display:flex;gap:6px;margin-bottom:14px}
.ph__chips span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:11px;color:var(--muted)}
.ph__chips .is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.ph__row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair)}
.ph__thumb{position:relative;flex:0 0 52px;height:52px;border-radius:8px;overflow:hidden;background:#20242C}
.ph__thumb img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__thumb i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.3),rgba(10,12,16,.55))}
.ph__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:74%;max-height:44%;object-fit:contain;filter:brightness(0) invert(1)}
.ph__id{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.ph__id b{font-family:var(--serif);font-size:15px;font-weight:700;line-height:1.1}
.ph__id em{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph__book{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ph__row--hit .ph__book{animation:phBook 13s linear infinite}
.ph__toast{position:absolute;left:14px;right:14px;bottom:22px;border-radius:12px;background:var(--ink);color:#fff;
  padding:13px 15px;font-size:12px;letter-spacing:.02em;opacity:0;transform:translateY(14px);
  box-shadow:0 14px 30px rgba(14,17,22,.25);animation:phToast 13s linear infinite}

@keyframes phScroll{
  0%,14%{transform:translateY(0)}
  28%,46%{transform:translateY(-96px)}
  58%,88%{transform:translateY(-96px)}
  95%,100%{transform:translateY(0)}
}
@keyframes phBook{
  0%,57%{background:transparent;border-color:rgba(58,91,224,.5);color:var(--blue);transform:none}
  60%{transform:scale(.95)}
  63%,88%{background:var(--blue);border-color:var(--blue);color:#fff;transform:none}
  92%,100%{background:transparent;border-color:rgba(58,91,224,.5);color:var(--blue)}
}
@keyframes phToast{
  0%,64%{opacity:0;transform:translateY(14px)}
  69%,88%{opacity:1;transform:translateY(0)}
  93%,100%{opacity:0;transform:translateY(14px)}
}
@media(prefers-reduced-motion:reduce){
  .ph__scroll,.ph__row--hit .ph__book,.ph__toast{animation:none}
  .ph__toast{opacity:1;transform:none}
}

/* the animated walkthrough under How it works ---------------------------- */
.walk{margin-top:44px}
.walk__screen{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:0 24px 60px rgba(14,17,22,.08)}
.walk__top{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--hair);background:var(--off)}
.walk__dots{display:inline-flex;gap:5px}
.walk__dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s var(--ease)}
.walk__dots i.is-on{background:var(--blue)}
.walk__label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.walk__frames{position:relative;height:300px}
@media(min-width:760px){.walk__frames{height:262px}}
.wf{position:absolute;inset:0;padding:18px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.wf.is-on{opacity:1;visibility:visible;transform:none}

/* 1. picking */
.wf__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%}
.wf__card{margin:0;display:flex;flex-direction:column;gap:10px}
.wf__shot{position:relative;flex:1;border-radius:8px;overflow:hidden;background:#20242C;min-height:120px}
.wf__shot img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wf__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.36),rgba(10,12,16,.58))}
.wf__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:66%;max-height:34%;object-fit:contain;filter:brightness(0) invert(1)}
.wf__pick{position:relative;display:block;border:1px solid var(--line);border-radius:5px;padding:9px 0;text-align:center;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);overflow:hidden}
.wf__pick b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;
  opacity:0;font-weight:600}
.wf.is-on .wf__pick b{animation:wfPick .5s var(--ease) forwards;animation-delay:var(--d)}
.wf.is-on .wf__card--off .wf__pick b{animation:none;opacity:0}
@keyframes wfPick{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

/* 2. booking */
.wf__row{display:flex;gap:14px;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.wf__thumb{position:relative;flex:0 0 108px;height:96px;border-radius:8px;overflow:hidden;background:#20242C}
.wf__thumb img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wf__rowb{min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.wf__name{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1}
.wf__meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wf__chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.wf__chip{border:1px solid var(--line);border-radius:5px;padding:7px 11px;font-size:12.5px;white-space:nowrap}
.wf__chip u{text-decoration:none;margin-left:7px;font-size:11px;font-weight:600;color:var(--muted)}
.wf.is-on .wf__chip--hit{animation:wfHit .5s var(--ease) .9s forwards}
@keyframes wfHit{to{background:var(--blue);border-color:var(--blue);color:#fff}}
.wf.is-on .wf__chip--hit u{animation:wfHitU .5s var(--ease) .9s forwards}
@keyframes wfHitU{to{color:rgba(255,255,255,.85)}}
.wf__confirm{display:flex;align-items:center;gap:10px;margin-top:14px;border:1px solid rgba(22,121,76,.28);border-radius:999px;
  padding:11px 16px;font-size:13px;color:var(--good);background:rgba(22,121,76,.05);opacity:0;transform:translateY(6px)}
.wf.is-on .wf__confirm{animation:wfUp .5s var(--ease) 1.6s forwards}
.wf__confirm i{font-style:normal;font-weight:700}
@keyframes wfUp{to{opacity:1;transform:none}}

/* 3. earning */
.wf__earn{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.wf__earn b{font-family:var(--serif);font-size:clamp(28px,4vw,40px);font-weight:700;line-height:1;color:var(--good)}
.wf__ledger{display:grid;gap:0;margin-top:4px}
.wf__lrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--hair);font-size:13.5px;opacity:0;transform:translateY(8px)}
.wf__lrow span{color:var(--muted)}
.wf__lrow b{font-weight:600}
.wf.is-on .wf__lrow{animation:wfUp .5s var(--ease) forwards;animation-delay:var(--d)}
@media(max-width:640px){
  .walk__frames{height:340px}
  .wf__grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .wf__row{flex-direction:column}
  .wf__thumb{flex:none;width:100%;height:96px}
}
@media(prefers-reduced-motion:reduce){
  .wf,.wf.is-on *{animation:none!important;transition:none!important}
  .wf.is-on .wf__pick b,.wf.is-on .wf__confirm,.wf.is-on .wf__lrow{opacity:1;transform:none}
}

/* the demo card on the public page --------------------------------------- */
.split{display:grid;gap:36px;align-items:center;margin-top:34px}
@media(min-width:960px){.split{grid-template-columns:1fr 1.05fr;gap:64px}}
.demo{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 26px 60px rgba(14,17,22,.09)}
.demo__shot{position:relative;aspect-ratio:16/9;background:#20242C}
.demo__shot img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the venue's pictures, swiped horizontally the way they are in the app */
.vgal{position:absolute;inset:0;z-index:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vgal::-webkit-scrollbar{display:none}
.vgal img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;
  user-select:none;-webkit-user-drag:none}
.vgal__dots{position:absolute;z-index:3;left:0;right:0;bottom:10px;display:flex;
  justify-content:center;gap:6px;pointer-events:none}
.vgal__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .25s var(--ease)}
.vgal__dots i.is-on{background:#fff}
/* the scrim and the wordmark ride above the pictures, and must not eat the swipe */
.demo__shot .shot__scrim,.demo__shot .shot__mark{z-index:2;pointer-events:none}
.demo__shot .shot__mark span{font-size:clamp(18px,2.4vw,26px);letter-spacing:.2em}
.demo__shot .brand{max-width:46%;max-height:40%;width:auto;height:auto;object-fit:contain;position:static;filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0,0,0,.45))}
.demo__b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:13px}
.demo__top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.demo .tiny{margin:0}

/* sticky selection bar ---------------------------------------------------- */
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:#fff;transform:translateY(110%);transition:transform .3s var(--ease)}
.selbar.in{transform:none}
.selbar--build b{color:#fff}
.sheet--name{max-height:none}
.selbar__in{display:flex;align-items:center;gap:14px;padding:13px 0}
.selbar b{font-family:var(--serif);font-size:20px}
.selbar span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.selbar .btn{margin-left:auto}
.selbar .btn--line{border-color:rgba(255,255,255,.3);color:#fff}
.selbar .btn--line:hover{border-color:#fff}

/* my list ----------------------------------------------------------------- */
.listhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;justify-content:space-between}
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:5px;padding:12px 14px;background:var(--off);margin-top:18px}
.share code{flex:1;min-width:180px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citygroup{margin-top:40px}
.citygroup__top{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.citygroup__top h3{flex:1}
.rows{border-bottom:1px solid var(--line)}
.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row__name{font-family:var(--serif);font-size:19px;font-weight:700;flex:0 0 auto}
.row__meta{flex:1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row__acts{display:flex;align-items:center;gap:14px}
.empty{border:1px dashed var(--line);border-radius:6px;padding:44px 24px;text-align:center;color:var(--muted);margin-top:26px}
.empty p{margin:0 0 18px}

/* the library: lists on the left, the open list on the right -------------- */
/* grid items default to min-width:auto, which let the rail of lists push the
   whole column past the screen instead of scrolling inside it */
.lib{display:grid;gap:26px;padding:26px 0 60px}
.lib > *{min-width:0}
.lib__items{min-width:0}
@media(min-width:940px){.lib{grid-template-columns:264px 1fr;gap:34px;align-items:start}}
.lib__side{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 12px;position:sticky;top:74px}
@media(max-width:939px){.lib__side{position:static}}
.lib__head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 12px}
.lib__ttl{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lib__new{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center}
.lib__new:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.lib__items{display:flex;flex-direction:column;gap:2px;max-height:62vh;overflow:auto}
@media(max-width:939px){.lib__items{flex-direction:row;overflow-x:auto;gap:8px;max-height:none;padding-bottom:4px}}
.libi{display:flex;align-items:center;gap:11px;padding:8px;border:0;border-radius:8px;background:none;cursor:pointer;text-align:left;
  transition:background .16s var(--ease)}
.libi:hover{background:var(--off)}
.libi.is-on{background:var(--tint)}
.libi__b{min-width:0;display:flex;flex-direction:column;gap:2px}
.libi__b b{font-family:var(--serif);font-size:15.5px;font-weight:700;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.libi__b em{font-style:normal;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media(max-width:939px){
  .libi__w{flex:0 0 auto;width:112px}
  .libi{width:100%;flex-direction:column;text-align:center;padding-right:8px}
  .libi__w .libi{padding-right:8px}
  .libi__b{align-items:center}
  .libi__b b{max-width:96px;font-size:14px}
  .libi__more{right:2px;top:4px;transform:none;opacity:1;width:22px;height:22px;font-size:15px}
  /* the row scrolls, so the menu leaves it and sits over the page */
  .lmenu{position:fixed;left:16px;right:16px;bottom:16px;top:auto;min-width:0;z-index:80}
  .lmenu button{padding:14px 12px;font-size:14px}
}

.lib__top{display:flex;gap:22px;align-items:flex-end;padding-bottom:22px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.lib__top .plist__cover{width:168px;flex:0 0 auto}
.lib__meta{min-width:240px;flex:1}
.lib__meta .h2{margin:8px 0 6px}
.lib__meta .tiny{margin:0}
.lib__main .lrows{margin-top:22px}

/* lists as playlists ------------------------------------------------------ */
.plists{display:grid;gap:22px 20px;margin-top:32px}
@media(min-width:560px){.plists{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.plists{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.plists{grid-template-columns:repeat(4,1fr)}}
.plist{position:relative;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.plist__cover{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:1/1;
  border-radius:10px;overflow:hidden;background:#20242C;box-shadow:0 12px 30px rgba(14,17,22,.14)}
.plist__cover--one{grid-template-columns:1fr;grid-template-rows:1fr}
.plist__cover--sm{width:44px;flex:0 0 44px;border-radius:7px;box-shadow:none;gap:1px}
.plist__cover--empty{background:var(--tint)}
.plist__cover img{width:100%;height:100%;object-fit:cover}
.plist__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.plist__name{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plist__n{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plist__share{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease);
  box-shadow:0 6px 18px rgba(14,17,22,.2)}
.plist__share svg{width:15px;height:15px;fill:currentColor}
.plist:hover .plist__share,.plist__share:focus-visible{opacity:1;transform:none}
@media(hover:none){.plist__share{opacity:1;transform:none}}

/* delete, as an x rather than a word */
.xbtn{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;
  color:var(--muted);font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:all .16s var(--ease)}
.xbtn:hover{border-color:var(--ink);color:var(--ink)}

/* share sheet ------------------------------------------------------------- */
.sheet--share{max-height:86vh}
.shr__link{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;background:var(--off);padding:12px 14px}
.shr__link code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin-top:24px}
.shr__b{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-size:11px;color:var(--muted)}
.shr__b:hover{color:var(--ink)}
.shr__ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--off);
  border:1px solid var(--line);transition:transform .16s var(--ease)}
.shr__b:hover .shr__ic{transform:translateY(-2px)}
.shr__ic svg{width:21px;height:21px;fill:var(--ink)}
.shr__ic--whatsapp{background:#25D366;border-color:#25D366}
.shr__ic--instagram{background:linear-gradient(45deg,#F9CE34,#EE2A7B 55%,#6228D7);border-color:transparent}
.shr__ic--tiktok{background:#0E1116;border-color:#0E1116}
.shr__ic--x{background:#0E1116;border-color:#0E1116}
.shr__ic--facebook{background:#1877F2;border-color:#1877F2}
.shr__ic--messenger{background:linear-gradient(45deg,#0099FF,#A033FF 60%,#FF5280);border-color:transparent}
.shr__ic--whatsapp svg,.shr__ic--instagram svg,.shr__ic--tiktok svg,.shr__ic--x svg,
.shr__ic--facebook svg,.shr__ic--messenger svg{fill:#fff}

/* picking what goes in a list */
.pickrows{margin-top:20px;max-height:44vh;overflow:auto;border-top:1px solid var(--hair)}
.pickrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--hair);cursor:pointer}
.pickrow img{width:44px;height:44px;border-radius:7px;object-fit:cover;background:#20242C}
.pickrow span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pickrow b{font-family:var(--serif);font-size:16px;font-weight:700}
.pickrow em{font-style:normal;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pickrow__tick{width:20px;height:20px;border:1px solid var(--line);border-radius:50%;position:relative;flex:0 0 auto}
.pickrow.is-on .pickrow__tick{background:var(--blue);border-color:var(--blue)}
.pickrow.is-on .pickrow__tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* stats and bars ---------------------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;padding:20px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1}
.stat span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:26px;padding-top:10px;border-bottom:1px solid var(--line)}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.bar i{display:block;width:100%;background:var(--tint);border-top:2px solid var(--blue);min-height:3px;transition:height .5s var(--ease)}
.bar em{font-style:normal;font-size:11px;color:var(--muted)}
.bar u{text-decoration:none;font-size:11.5px;font-weight:600}
.barlabels{display:flex;gap:10px;margin-top:8px}
.barlabels span{flex:1;text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* tables ------------------------------------------------------------------ */
.tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:14px}
.tbl th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:15px 14px 15px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl td:last-child,.tbl th:last-child{padding-right:0;text-align:right}
.tbl .nm{font-family:var(--serif);font-size:18px;font-weight:700}
.tbl .sub{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:3px;padding:4px 8px;border:1px solid var(--line);color:var(--muted)}
.tag--paid{color:var(--good);border-color:rgba(22,121,76,.3)}
.tag--pending{color:var(--warm);border-color:rgba(154,107,18,.3)}
.tag--cancelled{opacity:.6;text-decoration:line-through}
@media(max-width:720px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--line);padding:14px 0}
  .tbl td{border:0;padding:2px 0;text-align:left!important}
}

/* forms ------------------------------------------------------------------- */
.form{display:grid;gap:18px;max-width:640px;margin-top:30px}
@media(min-width:700px){.form--2{grid-template-columns:1fr 1fr}}
.field{display:block}
/* the label is the question and the placeholder is only an example, so the
   label carries the weight and every placeholder sits well below it */
.field span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:7px}
.field span em{font-style:normal;margin-left:7px;font-weight:500;letter-spacing:.12em;color:var(--faint)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:1}
/* an unchosen select shows its prompt, which is a placeholder in all but name */
.field select:has(option[value=""]:checked){color:var(--faint)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:13px 14px;font-size:15px;background:#fff;outline:none}
.field input:focus,.field select:focus{border-color:var(--blue)}
.field--full{grid-column:1/-1}
.formfoot{grid-column:1/-1;display:flex;align-items:center;gap:16px}

/* booking sheet ----------------------------------------------------------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(10,12,16,.5);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.scrim.in{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-radius:12px 12px 0 0;max-height:92vh;display:flex;flex-direction:column;transform:translateY(102%);transition:transform .36s var(--ease)}
.sheet.in{transform:none}
@media(min-width:760px){.sheet{left:50%;right:auto;bottom:0;width:560px;transform:translate(-50%,102%);border-radius:12px 12px 0 0}.sheet.in{transform:translate(-50%,0)}}
.sheet__prog{height:2px;background:var(--hair)}
.sheet__prog i{display:block;height:100%;background:var(--blue);width:25%;transition:width .3s var(--ease)}
.sheet__top{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--hair)}
.sheet__top h3{font-size:22px;flex:1}
.sheet__top .ul{margin-top:4px;display:block}
.sheet__x{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:0 2px}
.sheet__body{padding:20px;overflow:auto;flex:1}
.sheet__foot{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--hair);background:#fff}
.sheet__foot .tiny{flex:1}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;border:1px solid var(--line);background:none;border-radius:5px;padding:11px 13px;cursor:pointer;text-align:center;min-width:66px}
.day b{display:block;font-size:16px;font-weight:600;line-height:1.2}
.day span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.day[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.day[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.times{display:flex;flex-wrap:wrap;gap:8px}
.time{border:1px solid var(--line);background:none;border-radius:4px;padding:11px 15px;font-size:14px;cursor:pointer}
.time{transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.time:hover,.time:focus-visible,.time[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;outline:none}
.time:hover u,.time:focus-visible u,.time:hover u.earn,.time:focus-visible u.earn{color:rgba(255,255,255,.85)}
.time:hover .dot,.time:focus-visible .dot{background:#fff}
.time u{text-decoration:none;margin-left:8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.time u.earn{color:var(--good)}
.time[aria-pressed="true"] u,.time[aria-pressed="true"] u.earn{color:rgba(255,255,255,.85)}
.strip .time{font-size:13.5px;padding:10px 13px}

.party{display:flex;flex-wrap:wrap;gap:8px}
.party button{width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:4px;cursor:pointer;font-size:14px}
.party button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sheet h4{margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-family:var(--sans)}
.sheet .blk + .blk{margin-top:26px}
.summary{border:1px solid var(--line);border-radius:6px;padding:16px;background:var(--off)}
.summary .ln{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:14px}
.summary .ln b{font-weight:600}
.summary .tot{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;font-size:15px}
.done{text-align:center;padding:14px 0 8px}
.done .ok{width:54px;height:54px;border-radius:50%;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:24px}
.done h3{margin-bottom:10px}
.done p{color:var(--muted);margin:0 auto;max-width:34ch}

/* toast ------------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:100;background:var(--ink);color:#fff;border-radius:4px;padding:12px 18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:all .25s var(--ease)}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* sign in ----------------------------------------------------------------- */
.signin{display:flex;justify-content:center;padding:48px var(--pad) 90px}
@media(min-width:820px){.signin{padding-top:76px}}
.signin__card{width:100%;max-width:420px}
.signin__card .h2{font-size:clamp(28px,4vw,40px);margin-bottom:26px}
.signin__oauth{display:grid;gap:10px}
.signin__oauth .btn{width:100%;justify-content:center;gap:10px;text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:500}
.signin__oauth svg{width:18px;height:18px;flex:0 0 auto}
.btn--apple{background:#0E1116;color:#fff}
.btn--apple:hover{background:#000}
.btn--apple svg{fill:#fff}
.btn--google{background:#fff}
.signin__or{display:flex;align-items:center;gap:14px;margin:22px 0}
.signin__or::before,.signin__or::after{content:"";flex:1;height:1px;background:var(--line)}
.signin__or span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.signin .form{margin-top:0;gap:14px}
.signin__row{display:flex;justify-content:flex-end;margin-top:-4px}
.signin .btn--wide{margin-top:4px}
.signin__note{margin-top:20px;text-align:center}

/* where we are: a scrollable rail per city -------------------------------- */
/* its own stacking context, so the z-index the coverflow script writes on each
   tile (0 to 100) stays inside the rail and never climbs over the nav */
.wrail{position:relative;z-index:0;
  display:flex;align-items:center;gap:0;overflow-x:auto;overscroll-behavior-x:contain;padding:44px 0 48px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wrail::-webkit-scrollbar{display:none}

/* an endless rail. the card on the center line is the biggest and sits on top,
   the rest fall away smoothly. sizes are written from scroll position. */
.wtile{position:relative;flex:0 0 262px;margin:0 -12px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#20242C;
  cursor:pointer;transform-origin:50% 50%;transform:scale(.78);content-visibility:auto;
  contain-intrinsic-size:262px 328px;
  box-shadow:0 10px 26px rgba(16,20,28,.14);transition:box-shadow .35s var(--ease)}
.wtile.is-focal{box-shadow:0 30px 60px rgba(16,20,28,.28)}
/* on a phone the tiles stop overlapping and stop resizing, so several are in
   view at once and the rail reads as something to push rather than a pair of
   pictures. It settles on a tile instead of stopping half across one. */
@media(max-width:720px){
  .wrail{gap:10px;padding:26px var(--pad) 30px;
    scroll-snap-type:x proximity;scroll-padding:0 var(--pad)}
  .wtile{flex:0 0 138px;margin:0;border-radius:10px;transform:none;
    contain-intrinsic-size:138px 173px;scroll-snap-align:center;
    box-shadow:0 8px 20px rgba(16,20,28,.16)}
  .wtile .shot__mark{padding:10px}
  .wtile .brand{max-width:78%;max-height:30%}
  .wtile .shot__mark span{font-size:11.5px;letter-spacing:.14em}
  .wtile--all span{font-size:11px;letter-spacing:.14em}
  .wtile--all em{font-size:9px}
}
.wtile .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.1) saturate(1.1);transition:transform .5s var(--ease)}
.wtile:hover .photo{transform:scale(1.05)}
.wtile .shot__scrim{background:radial-gradient(118% 92% at 50% 50%,rgba(8,10,14,.40) 0%,rgba(8,10,14,.20) 52%,rgba(8,10,14,.12) 100%)}
.wtile .shot__mark{padding:16px}
.wtile .brand{position:static;width:auto;height:auto;max-width:72%;max-height:26%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.wtile .shot__mark span{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;text-align:center;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.62),0 6px 22px rgba(0,0,0,.5)}
.wtile--all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:var(--blue);
  color:#fff;text-align:center;transition:background .2s var(--ease),box-shadow .5s var(--ease)}
.wtile--all:hover{background:var(--blue-dark)}
.wtile--all span{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.wtile--all em{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}

@media(max-width:760px){
  .nav__in{gap:9px}
  .logo svg{height:15px}
  .nav__in .tabs__in{margin-left:6px;gap:16px}
  .nav__in .tabs__in button{font-size:10px;letter-spacing:.1em}
  .nav__in .mny{display:none}
}

/* the phone keeps one section on screen and the rest behind a hamburger */
/* no box: three lines and the tap target around them. The bars take the colour
   the nav is already using, so they stay legible over a dark hero and over the
   white bar it turns into, without a second set of rules to keep in step. */
.burger{display:none;order:-1;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;padding:0 7px;border:0;border-radius:0;background:none;
  color:var(--ink);cursor:pointer}
.burger i{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger.is-on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-on i:nth-child(2){opacity:0}
.burger.is-on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none}
@media(max-width:760px){
  .nav__in .tabs__in{display:none}
  .burger{display:flex}
  .drawer{display:grid;position:absolute;left:0;right:0;top:100%;z-index:70;padding:8px;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(16,20,28,.12)}
  .drawer[hidden]{display:none}
  .drawer button{padding:15px 14px;border:0;border-radius:9px;background:none;cursor:pointer;text-align:left;
    font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .drawer button[aria-current="page"]{background:var(--off);color:var(--ink)}
}

/* quick book: a city, a time, the list and the map ------------------------- */
.bkbar{position:sticky;top:62px;z-index:30;border-bottom:1px solid var(--line);background:#fff}
.bkbar__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:1440px;margin:0 auto;padding:12px var(--pad)}
.bkbar .search{flex:1 1 180px;min-width:0}
.bk__swap{display:none}
.wmenu--tall{max-height:262px;overflow:auto}

.bk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  height:calc(100vh - 62px - 61px);min-height:520px}
.bk__list{overflow-y:auto;padding:0 var(--pad) 40px;scrollbar-width:thin}
/* keep Leaflet's own z-indexes to itself, so the filter menus sit over the map */
.bk__map{position:relative;z-index:0;isolation:isolate;border-left:1px solid var(--line);background:var(--off)}
.bk__canvas{position:absolute;inset:0}
/* the basemap is keyless OSM, pulled back to near monochrome so the pins lead */
.bk__canvas .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.04)}
.bk__canvas .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}
.bk__nomap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}

.brow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.brow:first-child{padding-top:2px}
.brow__shot{position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:#20242C;cursor:pointer}
.brow__shot .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.08) saturate(1.06);transition:transform .5s var(--ease)}
.brow__shot:hover .photo{transform:scale(1.05)}
.brow__shot .shot__mark img{max-width:70%;max-height:36%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.brow__shot .shot__mark span{font-family:var(--serif);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-align:center;line-height:1.25}
.brow__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.brow__name{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.1}
.brow__city{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.brow__meta{margin:4px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.brow .strip{margin-top:11px}
.brow .time u{text-decoration:none;margin-left:7px;font-size:10.5px;color:var(--muted)}

/* the pins */
.pin{position:relative}
.pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--blue);
  border:2.5px solid #fff;box-shadow:0 2px 8px rgba(16,20,28,.3);transition:transform .18s var(--ease)}
.pin b{position:absolute;left:12px;top:-9px;padding:2px 7px;border-radius:5px;background:#fff;
  box-shadow:0 2px 10px rgba(16,20,28,.2);font-size:10.5px;font-weight:600;white-space:nowrap;
  opacity:0;transition:opacity .18s var(--ease);pointer-events:none}
.pin.is-hi i{transform:scale(1.45);background:var(--ink)}
.pin.is-hi b,.pin:hover b{opacity:1}

/* the floating view switch */
.vswap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;display:inline-flex;gap:3px;
  padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 10px 34px rgba(16,20,28,.18)}
.vswap button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:36px;border:0;
  border-radius:999px;background:none;cursor:pointer;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease)}
.vswap svg{width:19px;height:19px;fill:currentColor}
.vswap button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* the gallery: the picture leads, one big card to a row beside the map */
.gal{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:20px}
.gc{border-bottom:0}
.gc__shot{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:#20242C;cursor:pointer}
.gc__shot .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.07) saturate(1.06);transition:transform .55s var(--ease)}
.gc__shot:hover .photo{transform:scale(1.04)}
.gc__shot .shot__mark img{max-width:52%;max-height:32%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.gc__shot .shot__mark span{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;text-align:center}
.gc__b{padding-top:14px}
.gc__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gc__top h3{margin:0;font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.1;cursor:pointer}
.gc__top h3:hover{color:var(--blue)}
.gc .strip{margin-top:12px}

/* a city, when every city is on screen */
.pin--city i{position:absolute;left:-15px;top:-15px;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--blue);border:2.5px solid #fff;
  box-shadow:0 3px 12px rgba(16,20,28,.32);color:#fff;font-style:normal;font-size:11px;font-weight:600;
  transition:transform .18s var(--ease)}
.pin--city b{left:20px;top:-10px;opacity:1}
.pin--city:hover i{transform:scale(1.12)}

/* the list on its own, wider and roomier */
.bk--solo{grid-template-columns:1fr}
.bk--solo .bk__map{display:none}
.bk--solo .bk__list{padding-left:max(var(--pad),calc((100% - 1100px) / 2));
  padding-right:max(var(--pad),calc((100% - 1100px) / 2))}
.bk--solo .brow{grid-template-columns:200px minmax(0,1fr);gap:24px;padding:20px 0}
.bk--solo .brow__name{font-size:26px}

/* the full card for one restaurant */
.vd{padding:4px 0 90px}
.vd__back{margin-bottom:16px;padding:0;border:0;background:none;cursor:pointer;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vd__back:hover{color:var(--blue)}
.vd__shot{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#20242C}
.vd__shot .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.06) saturate(1.06)}
.vd__shot .shot__mark img{max-width:46%;max-height:30%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.vd__shot .shot__mark span{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;text-align:center}
.vd__name{margin:20px 0 0;font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.05}
.vd__meta{margin:7px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vd__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:24px 0 0;padding:0;
  background:var(--line);border:1px solid var(--line)}
.vd__facts > div{margin:0;padding:15px 16px;background:#fff}
.vd__facts dt{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vd__facts dd{margin:5px 0 0;font-family:var(--serif);font-size:19px;font-weight:700}
.vd__h{margin:26px 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.strip--wrap{flex-wrap:wrap;overflow:visible}
.wmenu__o--tick.is-on::after{content:"\2713";float:right;margin-left:10px}
.wseg--f{margin-left:0}
.bkbar__n{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* naming and picking, inside Your recommendations */
.pick__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:30px 0 20px}
.pick__head .ul{display:block;margin-bottom:6px}
.pick__head .btns{margin:0}
.pick__n{font-style:normal;margin-left:8px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.22)}
.first{max-width:520px;padding:40px 0}
.first .lede{margin-top:12px}

.lib__add{display:flex;align-items:center;gap:9px;width:100%;margin:2px 0 10px;padding:10px 12px;border:0;
  border-radius:9px;background:none;cursor:pointer;text-align:left;font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);transition:background .18s var(--ease),color .18s var(--ease)}
.lib__add i{font-style:normal;font-size:16px;line-height:1;color:var(--blue)}
.lib__add:hover{background:var(--off);color:var(--ink)}

/* a list you made can be thrown away */
.libi__w{position:relative;display:block}
.libi__more{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;
  border-radius:7px;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;opacity:.55;
  transition:opacity .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.libi__w:hover .libi__more,.libi__w.is-menu .libi__more{opacity:1;background:var(--off);color:var(--ink)}
.libi__w .libi{padding-right:36px}

/* and dragged where you want it */
.libi__w{transition:transform .16s var(--ease)}
.libi__w .libi{cursor:grab}
.lib__items.is-sorting{touch-action:none;user-select:none;-webkit-user-select:none}
.lib__items.is-sorting .libi__w{pointer-events:none}
.lib__items.is-sorting .libi{cursor:grabbing}
.libi__w.is-drag{position:relative;z-index:20;transition:none}
.libi__w.is-drag .libi{background:#fff;box-shadow:0 14px 30px rgba(16,20,28,.16);transform:scale(1.02)}
.libi__w.is-drag .libi__more{opacity:0}
.lib__hint{margin:9px 2px 0;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.7}
@media(max-width:939px){.lib__hint{display:none}}

/* the list's own menu, the way a playlist has one */
.lmenu{position:absolute;right:6px;top:calc(100% - 4px);z-index:30;display:grid;min-width:176px;padding:5px;
  border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 18px 44px rgba(16,20,28,.18)}
.lmenu button{padding:9px 11px;border:0;border-radius:7px;background:none;cursor:pointer;text-align:left;
  font-size:12.5px;font-weight:500;color:var(--ink)}
.lmenu button:hover{background:var(--off)}
.lmenu button:disabled{opacity:.35;cursor:default}
.lmenu button:disabled:hover{background:none}
.lmenu__x{color:#C33}
.lmenu__x:hover{background:rgba(214,64,64,.1)}
.lib__un{width:100%;margin-top:8px;padding:9px;border:0;border-radius:8px;background:none;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.lib__un:hover{background:var(--off);color:var(--ink)}

@media(max-width:900px){
  .bk{grid-template-columns:1fr;height:auto;min-height:0}
  .bk__map{display:none;height:min(66vh,560px);border-left:0;border-top:1px solid var(--line)}
  .bk--map .bk__list{display:none}
  .bk--map .bk__map{display:block}
  .bkbar__in{flex-wrap:wrap}
  .bkbar .search{order:4;flex-basis:100%}
  .bkbar__n{display:none}
  .gal{grid-template-columns:1fr;gap:20px}
  .gc__top h3{font-size:19px}
  .bk--solo .brow{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0}
  .bk--solo .brow__name{font-size:17px}
  .bk--solo .bk__list{padding-left:var(--pad);padding-right:var(--pad)}
  .vswap{bottom:18px}
  .vd__facts{grid-template-columns:1fr}
  .vd{padding-bottom:110px}
  .brow{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .brow__name{font-size:17px}
  .brow__city{display:none}
  .pick__head{padding:20px 0 14px}
}

/* the directory: pictures and logos, nothing else ------------------------- */
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:26px}
@media(min-width:760px){.rgrid{grid-template-columns:repeat(3,1fr);gap:10px}}
.rtile{position:relative;margin:0;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#20242C}
.rtile .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.1) saturate(1.1);transition:transform .5s var(--ease)}
.rtile:hover .photo{transform:scale(1.04)}
.rtile .shot__scrim{background:radial-gradient(118% 92% at 50% 50%,rgba(8,10,14,.40) 0%,rgba(8,10,14,.20) 52%,rgba(8,10,14,.12) 100%)}
.rtile .shot__mark{padding:14px}
.rtile .brand{position:static;width:auto;height:auto;max-width:66%;max-height:34%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.rtile .shot__mark span{font-family:var(--serif);font-size:clamp(13px,1.3vw,17px);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;text-align:center;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.62),0 6px 22px rgba(0,0,0,.5)}

/* the city bar -------------------------------------------------------------- */
.citybar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff;overflow-x:auto;scrollbar-width:none}
.citybar::-webkit-scrollbar{display:none}
.citybar--home{margin-top:30px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.citybar__c{display:flex;align-items:center;justify-content:center;min-width:120px;padding:22px 14px;border:0;
  border-right:1px solid var(--line);background:none;cursor:pointer;white-space:nowrap;text-align:center;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  transition:background .18s var(--ease),color .18s var(--ease)}
.citybar__c:last-child{border-right:0}
.citybar__c:hover{background:var(--off)}
.citybar__c.is-on{background:var(--blue);color:#fff}
.citybar__c.is-on:hover{background:var(--blue-dark)}
/* every city fits the screen, so there is nothing to push sideways for */
@media(max-width:720px){.citybar__c{min-width:0;padding:15px 5px;font-size:10px;letter-spacing:.08em}}
@media(max-width:460px){.citybar__c{padding:14px 3px;font-size:9px;letter-spacing:.03em}}

.vcard__meta{margin:2px 0 0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.tlink{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(14,17,22,.28);transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.tlink:hover{color:var(--blue);text-decoration-color:var(--blue)}

.ast{font-size:.7em;line-height:1;vertical-align:super;color:var(--muted)}
.fine{margin-top:18px;max-width:66ch;font-size:12px;line-height:1.6;color:var(--muted);opacity:.85}

/* the same page on a laptop: your brand on the outside, PRIMA underneath ---- */
.win{margin-top:56px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 26px 60px rgba(16,20,28,.10)}
.win__bar{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--hair);background:#fff}
.win__dots{display:inline-flex;gap:6px}
.win__dots i{width:9px;height:9px;border-radius:50%;background:rgba(14,17,22,.16)}
.win__url{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--off);
  font-size:12px;color:var(--muted)}
.win__url b{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.win__body{padding:22px}
.win__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:20px}
.win__ttl{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.win__by{justify-self:end;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* date, time and guests as one control, split by hairlines */
.wseg{position:relative;display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;background:#fff}
.wseg b{cursor:pointer;transition:background .18s var(--ease);display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 20px;font-size:11.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.wseg b:hover{background:var(--off)}
.wsg{position:relative;display:inline-flex}
.wsg:first-child b{border-radius:999px 0 0 999px}
.wsg:last-child b{border-radius:0 999px 999px 0}
.wsg + .wsg b{border-left:1px solid var(--line)}
.wseg i{width:7px;height:7px;border-right:1.4px solid var(--muted);border-bottom:1.4px solid var(--muted);
  transform:translateY(-2px) rotate(45deg)}

/* the little menus behind each segment */
.wmenu{position:absolute;top:calc(100% + 7px);left:0;min-width:100%;z-index:40;display:grid;padding:5px;
  border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 18px 40px rgba(16,20,28,.16)}
.wmenu__o{padding:9px 12px;border:0;border-radius:7px;background:none;cursor:pointer;text-align:left;
  font-size:12px;font-weight:500;color:var(--ink)}
.wmenu__o:hover{background:var(--off)}
.wmenu__o.is-on{background:var(--blue);color:#fff}

.win__cards{display:flex;gap:18px;margin-top:16px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:2px}
.win__cards::-webkit-scrollbar{display:none}
/* a short fade at the trailing edge: the row scrolls, and it should say so */
.win__wrap{position:relative}
.win__wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;pointer-events:none;
  background:linear-gradient(to right,transparent,#fff)}
.wcd{flex:0 0 clamp(230px,31%,330px);scroll-snap-align:start}
.wcd__shot{display:block;position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#20242C}
.wcd__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.06) saturate(1.06)}
.wcd__shot .brand{position:static;width:auto;height:auto;max-width:62%;max-height:36%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.wcd__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px}
.wcd__top b{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.1}
.wcd__rate{font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.wcd__rate em{font-style:normal;color:var(--muted)}
.wcd__m{display:block;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.wcd__times{display:flex;gap:6px;margin-top:11px}
.wt{cursor:pointer;background:#fff;color:inherit;transition:border-color .18s var(--ease),transform .18s var(--ease);display:inline-flex;align-items:center;gap:6px;min-height:31px;padding:0 10px;border:1px solid var(--line);
  border-radius:7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.wt u{text-decoration:none;font-size:10.5px;color:var(--muted)}
.wt:hover{border-color:var(--ink)}
.wt--prime{background:var(--blue);border-color:var(--blue);color:#fff}
.wt--prime u{color:rgba(255,255,255,.82)}

/* what a taken table looks like, inside the same frame */
.wdone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:330px;padding:30px 20px;text-align:center}
.wdone__tick{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--tint);color:var(--blue);font-size:20px}
.wdone h4{margin:0;font-family:var(--serif);font-size:26px;font-weight:700}
.wdone p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.wdone .btn{margin-top:8px}

@media(max-width:720px){
  .win{margin-top:34px;border-radius:11px}
  .win__body{padding:14px}
  .win__head{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
  .win__ttl{font-size:9.5px;letter-spacing:.16em}
  .wseg{justify-self:start}
  .wseg b{min-height:31px;padding:0 12px;font-size:9.5px;letter-spacing:.1em;gap:7px}
  /* smaller contents so the mock page reads as a whole page, not one card
     with the next one sliced off mid-word */
  .win__cards{gap:10px;position:relative}
  .wcd{flex-basis:62%}
  .wcd__times{gap:5px;margin-top:9px}
  .wcd__top{margin-top:9px;gap:7px}
  .wcd__rate{font-size:10px}
  .wmenu{min-width:120px}
  .wdone{min-height:240px}
  .wdone h4{font-size:20px}
  .wcd__top b{font-size:15px}
  .wcd__m{font-size:8.5px;letter-spacing:.1em;margin-top:3px}
  .wt{min-height:26px;padding:0 7px;font-size:10px;gap:4px}
  .wt u{font-size:9px}
  .win__by{display:none}
}

/* activity is a tracker, so it says so */
.live{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media(prefers-reduced-motion:reduce){.live i{animation:none}}
.lib__top--plain{display:block}

/* people you brought: your network, and what their bookings pay you --------- */
.pplnote{margin-top:10px;max-width:62ch;font-size:14px;line-height:1.6;color:var(--muted)}
.tot{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.tot b{font-size:15px;letter-spacing:0;text-transform:none}
.ppl{margin-top:22px;border-top:1px solid var(--line)}
.ppl__row{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--hair)}
.ppl__row .nm{display:block;font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.2}
.ppl__row .sub{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ppl__who .sub{letter-spacing:.06em;text-transform:none;font-size:12px}
.ppl__n,.ppl__earn{text-align:right}
.ppl__n b{font-size:14px;font-weight:600}
.ppl__earn{min-width:96px}
.ppl__earn b{font-size:17px;font-weight:700}
@media(max-width:620px){
  .ppl__row{grid-template-columns:1fr auto;gap:8px 18px}
  .ppl__who{grid-column:1 / -1}
  .ppl__n{text-align:left}
}

/* the one centered moment on the page, so the ask reads as an ask ----------- */
.apply{max-width:660px;margin:0 auto;text-align:center}
.apply .ul{display:block;margin-bottom:14px}
.apply .h2{margin:0}
.apply .lede{max-width:52ch;margin:16px auto 0}
.apply .btns{justify-content:center;margin-top:26px}

/* premium support ---------------------------------------------------------- */
/* a tab on the edge of the frame, the way help always sits */
.suptab{position:fixed;right:0;top:50%;transform:translateY(-50%) translateX(0);transform-origin:100% 50%;
  z-index:88;display:inline-flex;align-items:center;gap:9px;padding:16px 11px;border:1px solid var(--line);
  border-right:0;border-radius:11px 0 0 11px;background:#fff;cursor:pointer;
  writing-mode:vertical-rl;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);box-shadow:-6px 0 22px rgba(16,20,28,.09);
  transition:padding-right .18s var(--ease),color .18s var(--ease)}
.suptab:hover{padding-right:15px;color:var(--blue)}
.suptab i{width:6px;height:6px;border-radius:50%;background:var(--good)}

.supscrim{position:fixed;inset:0;z-index:90;background:rgba(10,12,16,.34);opacity:0;
  transition:opacity .24s var(--ease)}
.supscrim.in{opacity:1}
.sup{position:fixed;right:0;top:0;bottom:0;z-index:95;display:flex;flex-direction:column;width:min(400px,100%);
  background:#fff;border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(16,20,28,.16);
  transform:translateX(100%);transition:transform .28s var(--ease)}
.sup.in{transform:none}
.sup__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 20px 16px;
  border-bottom:1px solid var(--hair)}
.sup__top h3{margin:4px 0 0;font-family:var(--serif);font-size:23px;font-weight:700}
.sup__thread{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.sup__m{max-width:86%}
.sup__m--you{align-self:flex-end;text-align:right}
.sup__who{display:block;margin-bottom:5px;font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.sup__m p{margin:0;padding:12px 14px;border-radius:12px;background:var(--off);font-size:14px;line-height:1.5}
.sup__m--you p{background:var(--blue);color:#fff}
.sup__foot{display:flex;gap:9px;padding:14px 16px;border-top:1px solid var(--hair)}
.sup__foot input{flex:1;min-width:0;min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:14px}
.sup__foot input:focus{outline:0;border-color:var(--ink)}
@media(max-width:760px){
  .suptab{display:none}
  .sup{width:100%}
}

/* payment information: address, method, date, charity ---------------------- */
.acct__sub{margin:-8px 0 16px;font-size:12.5px;color:var(--muted)}
.pay2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.payblk{padding:16px;background:#fff}
.payblk__h{display:block;margin-bottom:8px;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.payblk__v{margin:0 0 10px;font-size:13.5px;line-height:1.5}
.payblk__v b{font-weight:600}
.payblk__none{margin:0 0 4px;font-size:13.5px;color:var(--muted)}
.charpc{display:flex;flex-wrap:wrap;gap:6px}
.charpc.is-off{opacity:.45}
.charpc .pill{min-height:30px;padding:0 13px;font-size:10.5px}
.mtabs{display:flex;gap:6px}
@media(max-width:820px){.pay2{grid-template-columns:1fr}}

/* the running total is also the way back to the dashboard */
.mny__b{padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease),color .18s var(--ease)}
.mny__b:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* the dashboard, rebuilt as one line of money and rows of everything else --- */
.mstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;margin-top:16px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mstrip span{display:inline-flex;align-items:baseline;gap:8px;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.mstrip b{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}

.card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.chartc{margin-top:20px;padding:18px 20px 12px}
.chartc__h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 12px}

/* five or so rows, then it scrolls inside the box rather than down the page */
.rows{display:grid;max-height:346px;overflow-y:auto;scrollbar-width:thin}
.rows::-webkit-scrollbar{width:9px}
.rows::-webkit-scrollbar-thumb{background:rgba(14,17,22,.16);border-radius:9px;
  border:3px solid #fff;background-clip:padding-box}
.row3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;
  padding:15px 18px;border-top:1px solid var(--hair)}
.row3:first-child{border-top:0}
.row3:nth-child(even){background:rgba(14,17,22,.016)}
.row3:hover{background:var(--off)}
.row3__a{min-width:0;display:flex;flex-direction:column;gap:3px}
.row3__a b{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.15}
.row3__a em,.row3__b em{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row3__b{display:flex;flex-direction:column;gap:3px;text-align:right;font-size:12.5px;font-weight:500;white-space:nowrap}
.row3__c{display:flex;align-items:center;justify-content:flex-end;gap:11px;min-width:150px}
.row3__c b{font-family:var(--serif);font-size:19px;font-weight:700}
.row3__til{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.row3__x{position:absolute;right:6px;top:6px;width:22px;height:22px;border:0;border-radius:50%;background:none;
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;opacity:0}
.row3:hover .row3__x{opacity:.7}
.row3__x:hover{opacity:1;background:var(--off);color:var(--ink)}

@media(max-width:720px){
  .mstrip{gap:4px 18px;padding:11px 0;margin-top:12px}
  .mstrip span{font-size:8.5px;letter-spacing:.12em;gap:5px}
  .mstrip b{font-size:17px}
  .chartc{margin-top:14px;padding:12px 13px 8px}
  .chips{margin:18px 0 10px;gap:6px}
  .row3{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 13px}
  .row3__a{grid-column:1 / -1}
  .row3__a b{font-size:16px}
  .row3__b{text-align:left;flex-direction:row;align-items:baseline;gap:7px;font-size:11.5px}
  .row3__c{flex-direction:row;align-items:baseline;gap:9px;min-width:0}
  .row3__c b{font-size:16px}
  .row3__til{display:none}
  .rows{max-height:430px}
}

/* account: profile, hotel, page, payment, security ------------------------- */
.acct{max-width:1000px}
.acct__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.acct__b{padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.acct__b--wide{grid-column:1 / -1}
.acct__h{margin:0 0 14px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.acct__note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.acct .field span{font-size:9px}
.acct .field input{min-height:40px;font-size:13.5px}
.acct .form{gap:12px}
.acct input[readonly]{background:var(--off);color:var(--muted)}
.acct .formfoot{display:flex;align-items:center;gap:18px;padding:0;border:0;background:none}
.secrow{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.secrow__b{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border:0;
  border-left:1px solid var(--hair);background:#fff;cursor:pointer;text-align:left;
  transition:background .16s var(--ease)}
.secrow__b:first-child{border-left:0}
.secrow__b:hover{background:var(--off)}
.secrow__b b{font-size:13px;font-weight:500}
.secrow__b i{font-style:normal;font-size:18px;line-height:1;color:var(--muted)}
@media(max-width:820px){
  .acct__grid{grid-template-columns:1fr;gap:12px}
  .acct__b{padding:15px}
  .secrow{grid-template-columns:1fr}
  .secrow__b{border-left:0;border-top:1px solid var(--hair)}
  .secrow__b:first-child{border-top:0}
}

/* checkout: the table is already chosen, so this is details and consent ----- */
.co__sum{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px}
.co__sum > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 14px;background:#fff}
.co__sum span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.co__sum b{font-family:var(--serif);font-size:17px;font-weight:700;text-align:right}
.co__why{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.co__test{margin:10px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--muted);opacity:.8}
.co__free h4 + p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.co__ticks{display:grid;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.tick{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.tick input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.tick span{font-size:12.5px;line-height:1.5;color:var(--ink)}
.tick b{font-weight:600}

/* how referrals work ------------------------------------------------------- */
.how__h{font-size:clamp(34px,5.4vw,62px);line-height:1.04;letter-spacing:-.02em;margin:10px 0 18px}
#flow .ul,#levels .ul,#words .ul{display:block;margin-bottom:10px}

.fl{margin-top:26px}
.fl__steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.fl__row{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);
  border-radius:11px;background:#fff;overflow:hidden;animation:flIn .45s var(--ease) both;animation-delay:var(--d)}
@keyframes flIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fl__bar{position:absolute;left:0;top:0;bottom:0;background:var(--tint);transition:width .45s var(--ease)}
.fl__k,.fl__v{position:relative}
.fl__k{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.fl__k b{font-size:14.5px;font-weight:600}
.fl__k em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fl__v{font-family:var(--serif);font-size:26px;font-weight:700;white-space:nowrap}
.fl__row--prima .fl__bar{background:rgba(58,91,224,.16)}
.fl__row--you .fl__bar,.fl__row--you2 .fl__bar{background:rgba(31,122,74,.14)}
.fl__row--you .fl__v,.fl__row--you2 .fl__v{color:var(--good)}
.fl__row--src{opacity:.72}

.lv{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:12px;margin-top:28px}
.lv__col{padding:20px 18px;border:1px solid var(--line);border-radius:11px;background:#fff}
.lv__col--you{background:var(--ink);border-color:var(--ink);color:#fff}
.lv__col--you .lv__tag{color:rgba(255,255,255,.66)}
.lv__col--stop{opacity:.5;border-style:dashed;background:none}
.lv__tag{display:block;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lv__pc{display:block;margin:8px 0 4px;font-family:var(--serif);font-size:38px;font-weight:700;line-height:1;color:var(--blue)}
.lv__col p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.lv__col--you p{color:rgba(255,255,255,.8)}
.lv__arrow{display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:20px}
.lv__arrow--stop{color:var(--line)}

.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;margin:28px 0 0;padding:0;
  background:var(--line);border:1px solid var(--line)}
.gloss > div{margin:0;padding:18px;background:#fff}
.gloss dt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gloss dd{margin:7px 0 0;font-size:14px;line-height:1.55}

/* the way in to it, from the library */
/* the explainer sits with the sections, always one click away */
.tablink{display:inline-flex;align-items:center;padding:21px 0;white-space:nowrap;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);border-bottom:2px solid transparent}
.tablink:hover{border-bottom-color:var(--blue)}
.drawer a{padding:15px 14px;border-radius:9px;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}

/* the list's own link, with sharing beside it */
.lib__n{margin:6px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lib__url{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px}
.lib__url a{font-size:13.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(14,17,22,.3)}
.lib__url a:hover{color:var(--blue);text-decoration-color:var(--blue)}

@media(max-width:860px){
  .lv{grid-template-columns:1fr;gap:8px}
  .lv__arrow{transform:rotate(90deg);padding:2px 0}
  .fl__v{font-size:20px}
  .fl__row{padding:13px 14px;gap:12px}
}

/* footer ------------------------------------------------------------------ */
.foot{border-top:1px solid var(--line);margin-top:64px;padding:44px 0 30px}
@media(min-width:900px){.foot{padding:52px 0 34px}}
/* two groups, laid across the band rather than stacked under a headline */
.foot__top{display:grid;gap:30px}
@media(min-width:700px){.foot__top{grid-template-columns:1fr 1fr;gap:20px 64px}}
.foot__col{display:grid;gap:14px;align-content:start;min-width:0}
.foot__lbl{margin:0;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 30px}
.foot__links a{font-size:14px;line-height:1.45;color:var(--muted)}
.foot__links a:hover{color:var(--ink)}
.foot__links a.foot__strong{font-weight:600;color:var(--ink)}
@media(min-width:700px){
  /* the contact group sits to the right edge so the row reads as one span */
  .foot__top > .foot__col:last-child{justify-items:end;text-align:right}
  .foot__top > .foot__col:last-child .foot__links{justify-content:flex-end}
}
.foot__base{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hair)}
.foot__mark svg{height:14px;fill:var(--ink);display:block}
.foot__note{margin:0;font-size:12.5px;color:var(--muted)}
.foot__note b{color:var(--ink);font-weight:600}
.foot__legal{margin:0 0 0 auto;font-size:12px;color:var(--muted)}
@media(max-width:560px){.foot__legal{margin-left:0;width:100%}}

/* reveal ------------------------------------------------------------------ */
/* hidden only when the inline guard in <head> has run: without JS, or if the
   observer is ever missed, the content is simply visible rather than blank */
.rvjs .rv{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rvjs .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*{animation:none!important}}

/* ==========================================================================
   Phone layout: tighter everything, images small, copy next to the headline
   ========================================================================== */
@media(max-width:720px){

  /* hero: the same collage as the desktop, scaled down, copy inside it */
  .hgrid{grid-template-columns:repeat(4,1fr);gap:8px;align-items:start}
  .hero .h1{font-size:clamp(28px,7.6vw,40px);line-height:1.05}
  .hero .h1 span{display:inline;white-space:normal}
  .hero .h1 span + span::before{content:" "}
  .hgrid > .hg--title{grid-column:1 / -1;grid-row:1;margin-bottom:8px}
  .hgrid > .hg--copy{grid-column:1 / 3;grid-row:2;align-self:start;margin:0;padding-right:6px}
  .hg--copy .lede{font-size:14px;line-height:1.5}
  .hg--copy .btns{margin-top:14px}
  .hg--copy .btn{min-height:40px;padding:0 13px;font-size:9px;letter-spacing:.1em;white-space:nowrap}
  .hg--a{grid-column:3 / 5;grid-row:2 / span 2;aspect-ratio:auto;height:100%;min-height:280px}  /* the big one */
  .hg--e{grid-column:1 / 3;grid-row:3;display:block;aspect-ratio:16/10}   /* fills under the copy */
  .hg--b{grid-column:1 / 3;grid-row:4;aspect-ratio:4/3}            /* a little big */
  .hg--c{grid-column:3 / 4;grid-row:4;aspect-ratio:1/1}            /* smaller */
  .hg--d{grid-column:4 / 5;grid-row:4;aspect-ratio:1/1}            /* really small */
  .hg--c .brand,.hg--d .brand{max-width:84%;max-height:30%}
  .hg .brand{max-width:76%;max-height:32%}

  /* how it works: one column, in order, arrows kept. Two by two read as an
     unordered grid and the steps lost their sequence. */
  .sec{padding:46px 0}
  .flow{grid-template-columns:1fr;gap:0;margin-top:22px}
  .farrow{display:flex;padding:7px 0}
  .farrow svg{width:22px;height:22px}
  .fcard__n{font-size:22px;right:13px;top:11px}
  .fcard{padding:14px 13px 16px;border-radius:9px;gap:6px}
  .fcard b{width:25px;height:25px;font-size:10px;margin-bottom:2px}
  .fcard b svg{width:14px;height:14px}
  .fcard__ics b{margin-bottom:0}
  .fcard__ics b + b{margin-left:-6px}
  .fcard h3{font-size:14.5px;line-height:1.2}
  .fcard p{font-size:12px;line-height:1.45}

  /* who it's built for: one card per row, picture beside the words. Three
     across left 110px columns at 11px, which nobody can read. */
  .who{grid-template-columns:1fr;gap:20px;margin-top:22px}
  .who__card{display:grid;grid-template-columns:104px 1fr;column-gap:15px;align-items:start}
  .who__b{display:flex;flex-direction:column;gap:7px}
  .who__shot{align-self:start}
  .who__card h3{font-size:15px;padding-bottom:9px;margin-bottom:0;line-height:1.2}
  .who__card p{font-size:13px;line-height:1.5;max-width:none}
  .who__say{font-size:14px !important}
  .who__for{font-size:10.5px !important}

  /* the same table: the button sits under the card */
  #you .split > div:first-child{display:contents}
  #you .split .h2{order:1}
  #you .split .lede{order:2}
  #you .demo{order:3;margin-top:18px}
  #you .split .btns{order:4;margin-top:18px}

  /* what you earn and the recommendation page keep their shape, just tighter */
  .stats.stats--2{max-width:none}
  .split--page{gap:22px}
}

/* prime tables, last word: blue by default, reversed on hover ------------- */
/* the prime table leads in blue, and flips to white on hover */
.time.time--prime{background:var(--blue);border-color:var(--blue);color:#fff}
.time.time--prime u,.time.time--prime u.earn{color:rgba(255,255,255,.82)}
.time.time--prime:hover,.time.time--prime:focus-visible{background:#fff;border-color:var(--blue);color:var(--blue)}
.time.time--prime:hover u,.time.time--prime:hover u.earn,
.time.time--prime:focus-visible u,.time.time--prime:focus-visible u.earn{color:var(--blue)}
.time.time--prime:hover .dot,.time.time--prime:focus-visible .dot{background:var(--blue)}
/* and the same flip on the marketing page's mock */
.wt.wt--prime{background:var(--blue);border-color:var(--blue);color:#fff}
.wt.wt--prime u{color:rgba(255,255,255,.82)}
.wt.wt--prime:hover{background:#fff;border-color:var(--blue);color:var(--blue)}
.wt.wt--prime:hover u{color:var(--blue)}

/* how it works: the same header as the app ------------------------------- */
.tabs__in .tabl{display:inline-flex;align-items:center;padding:21px 0;white-space:nowrap;font-size:11.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent}
.tabs__in .tabl:hover{color:var(--ink)}
.tablink[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.mny a{color:inherit}
.mny a:hover b{color:var(--blue)}
@media(max-width:899px){.tabs__in .tabl{font-size:10px;letter-spacing:.1em}}

/* the four steps carry their number as well as their mark */
.fcard{position:relative}
/* the step number: the order has to survive whatever the layout does */
.fcard__n{position:absolute;right:18px;top:14px;font-family:var(--serif);font-size:28px;line-height:1;
  font-weight:700;color:var(--line)}
.fcard h3{padding-right:38px}

/* prime and non-prime, side by side ------------------------------------- */
.paths{display:grid;gap:14px;margin-top:32px}
@media(min-width:900px){.paths{grid-template-columns:1fr 1fr}}
.path{display:flex;flex-direction:column;gap:20px;padding:26px 24px 24px;border:1px solid var(--line);
  border-radius:12px;background:#fff}
.path--prime{border-color:rgba(58,91,224,.32);box-shadow:0 14px 34px rgba(58,91,224,.07)}
.path header{display:grid;gap:8px}
.path__tag{justify-self:start;padding:5px 10px;border-radius:999px;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;background:var(--off);color:var(--muted)}
.path--prime .path__tag{background:var(--blue);color:#fff}
.path header p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.path__bar{display:flex;height:96px;border-radius:10px;overflow:hidden}
.path__seg{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:12px 13px;min-width:0}
.path__seg b{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1}
.path__seg em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.path__seg--house{background:var(--ink);color:#fff}
.path__seg--rest{background:var(--blue);color:#fff}
.path__notes{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.path__notes li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--hair)}
.path__notes li:last-child{border-bottom:0}
.path__notes span{flex:0 0 auto;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.path__notes b{text-align:right;font-size:13.5px;font-weight:500;line-height:1.4}

/* one chip for every cover */
.covers{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:96px}
.cover{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border:1px solid var(--line);
  border-radius:9px;font-size:14px;font-weight:600}
.cover i{width:8px;height:8px;border-radius:50%;background:var(--good)}
.covers__sum{margin-left:auto;text-align:right;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.covers__sum b{display:block;margin-top:3px;font-family:var(--serif);font-size:20px;letter-spacing:0;
  text-transform:none;color:var(--ink)}

/* one link, however many codes you like -------------------------------- */
.vip{display:grid;gap:16px;margin-top:32px;align-items:center}
@media(min-width:900px){.vip{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
.vip__card{padding:24px 22px;border:1px solid var(--line);border-radius:12px;background:#fff}
.vip__lbl{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vip__url{display:block;margin-top:10px;font-size:clamp(17px,2.4vw,24px);font-weight:500;word-break:break-all}
.vip__url b{font-weight:600}
.vip__url u{text-decoration:none;color:var(--blue)}
.vip__hint{display:block;margin-top:9px;font-size:13px;color:var(--muted)}
.vip__fan{display:none}
@media(min-width:900px){
  .vip__fan{display:grid;gap:16px;padding:0 4px;color:var(--line)}
  .vip__fan i{display:block;width:44px;height:1.5px;background:currentColor;position:relative}
  .vip__fan i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
    border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
  .vip__fan i:nth-child(2){background:var(--blue);color:var(--blue)}
}
.vip__outs{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.vip__outs li{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.vip__outs b{display:block;font-size:13.5px;font-weight:600;color:var(--blue)}
.vip__outs em{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--muted)}

/* preferences: appearance, place, time, language ------------------------- */
.prefs{display:grid;gap:18px;margin-top:4px}
@media(min-width:760px){.prefs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px}}
.pref{display:grid;gap:8px;align-content:start;min-width:0}
.pref__h{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pref__n{font-style:normal;font-size:12px;color:var(--muted)}
.pref .field{margin:0}
.tog{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--off);align-self:start}
.tog__b{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:0;border-radius:999px;
  background:none;cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);
  transition:background .18s var(--ease),color .18s var(--ease)}
.tog__b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tog__b:hover{color:var(--ink)}
.tog__b[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px rgba(16,20,28,.12)}

/* night: the same rooms with the lights down ---------------------------- */
:root{--paper:#fff}
/* the headline accent on dark sections was a lifted blue that reads as a faded
   version of the brand; there is one blue */
:root{--blue-on:#3A5BE0}
[data-theme="night"]{
  --blue:#3A5BE0;--blue-dark:#2B45B4;--tint:#1B2036;
  --ink:#EDF0F5;--muted:#98A1B0;--faint:#6B7484;
  --line:rgba(255,255,255,.15);--hair:rgba(255,255,255,.085);--off:#15181F;
  --paper:#1B1F27;--ground:#0E1014;--good:#46C58C;--warm:#D9AC52;
  color-scheme:dark;
}
[data-theme="night"] body{background:var(--ground)}
[data-theme="night"] .nav{background:rgba(14,16,20,.92)}
[data-theme="night"] ::selection{background:var(--blue);color:#0E1014}
[data-theme="night"] .acct__b,[data-theme="night"] .bkbar,[data-theme="night"] .card,
[data-theme="night"] .co__sum > div,[data-theme="night"] .dd__btn,[data-theme="night"] .demo,
[data-theme="night"] .fcard,[data-theme="night"] .field input,[data-theme="night"] .field select,
[data-theme="night"] .field textarea,[data-theme="night"] .filters,[data-theme="night"] .gloss > div,
[data-theme="night"] .lib__side,[data-theme="night"] .libi__w.is-drag .libi,[data-theme="night"] .lrow,
[data-theme="night"] .lv__col,[data-theme="night"] .payblk,[data-theme="night"] .pin b,
[data-theme="night"] .sheet,[data-theme="night"] .sheet__foot,[data-theme="night"] .stat,
[data-theme="night"] .switch,[data-theme="night"] .track,[data-theme="night"] .vd__facts > div,
[data-theme="night"] .vip__card,[data-theme="night"] .vip__outs li,[data-theme="night"] .walk__screen,
[data-theme="night"] .wf__row,[data-theme="night"] .win,[data-theme="night"] .win__bar,
[data-theme="night"] .wseg,[data-theme="night"] .wt,[data-theme="night"] .path,
[data-theme="night"] .sup,[data-theme="night"] .suptab,[data-theme="night"] .wmenu,
[data-theme="night"] .lmenu,[data-theme="night"] .drawer,[data-theme="night"] .gc,
[data-theme="night"] .brow,[data-theme="night"] .vd,[data-theme="night"] .row3,
[data-theme="night"] .mstrip,[data-theme="night"] .vswap,[data-theme="night"] .cover,
[data-theme="night"] .search,[data-theme="night"] .iphone__screen,
[data-theme="night"] .citybar,[data-theme="night"] .dd__menu,
[data-theme="night"] .fl__row,[data-theme="night"] .secrow__b,
[data-theme="night"] .sup__foot input,[data-theme="night"] .btn--google,
[data-theme="night"] .libi.is-on,
[data-theme="night"] .sec--off .fcard{background:var(--paper)}
[data-theme="night"] .burger{color:var(--ink)}
[data-theme="night"] .libi.is-on{background:var(--tint)}
[data-theme="night"] .fl__bar{opacity:.55}
[data-theme="night"] .btn--line,[data-theme="night"] .pill,[data-theme="night"] .time{background:transparent}
/* a chosen pill keeps its fill, or it is dark text on a dark page */
[data-theme="night"] .pill[aria-pressed="true"],
[data-theme="night"] .ph__chips .is-on{background:var(--ink);border-color:var(--ink);color:#0E1014}
[data-theme="night"] .time:hover,[data-theme="night"] .time:focus-visible,
[data-theme="night"] .time[aria-pressed="true"]{background:var(--blue);color:#0E1014}
[data-theme="night"] .time.time--prime{background:var(--blue);color:#0E1014}
[data-theme="night"] .time.time--prime u,[data-theme="night"] .time.time--prime u.earn{color:rgba(14,16,20,.72)}
[data-theme="night"] .time.time--prime:hover{background:var(--paper);color:var(--blue)}
[data-theme="night"] .time.time--prime:hover u,[data-theme="night"] .time.time--prime:hover u.earn{color:var(--blue)}
[data-theme="night"] .btn--blue{color:#0E1014}
/* every "ink block, white glyph" pair inverts with the palette, or it becomes
   white on white the moment --ink is the light color */
[data-theme="night"] .iconbtn[aria-current="page"],
[data-theme="night"] .pill[aria-pressed="true"],
[data-theme="night"] .party button[aria-pressed="true"],
[data-theme="night"] .vswap button[aria-pressed="true"],
[data-theme="night"] .ph__chips .is-on,
[data-theme="night"] .ph__avatar,
[data-theme="night"] .ph__toast,
[data-theme="night"] .selbar,
[data-theme="night"] .lib__new:hover,
[data-theme="night"] .lv__col--you{color:#0E1014}
[data-theme="night"] .selbar .link,[data-theme="night"] .lv__col--you p{color:rgba(14,16,20,.75)}
[data-theme="night"] .toast{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
[data-theme="night"] .path__seg--house{background:#0A0C10}
[data-theme="night"] .path--prime{border-color:rgba(124,147,255,.34);box-shadow:none}
[data-theme="night"] .fcard__n{color:rgba(255,255,255,.14)}
/* every shadow was written for white paper */
[data-theme="night"] .sheet,[data-theme="night"] .wmenu,[data-theme="night"] .lmenu,
[data-theme="night"] .sup,[data-theme="night"] .drawer,[data-theme="night"] .suptab,
[data-theme="night"] .libi__w.is-drag .libi{box-shadow:0 18px 44px rgba(0,0,0,.55)}
/* the basemap is a light one, so it gets turned down rather than swapped */
[data-theme="night"] .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.86) contrast(.92)}
[data-theme="night"] .bk__map{background:#0E1014}

.drawer .dl{color:var(--muted)}
.drawer .dl:hover{color:var(--ink)}
.drawer a[aria-current="page"]{background:var(--off);color:var(--ink)}

/* partner with PRIMA, and the way back in ------------------------------- */
.nav__acts{display:inline-flex;align-items:center;gap:9px}
@media(max-width:560px){
  .nav__acts{gap:6px}
  .nav__acts .btn{padding:0 12px;font-size:10.5px;letter-spacing:.1em}
}
.sheet--apply{width:min(620px,100%)}
@media(min-width:760px){.sheet--apply{width:620px}}
.ap{gap:16px}
.ap .field textarea{resize:vertical;min-height:84px;font-family:var(--sans);line-height:1.5}
/* .field sets a display, which beats the browser's own [hidden] rule, so the
   conditional "which city" field was showing even when it was marked hidden */
.field[hidden]{display:none}
.ap__err{grid-column:1/-1;margin:0;padding:11px 13px;border-radius:5px;
  background:rgba(214,64,64,.08);color:#C33;font-size:13.5px}
.ap__foot{position:sticky;bottom:-20px;margin:0 -20px -20px;padding:16px 20px;
  background:var(--paper);border-top:1px solid var(--hair)}
.ap__foot .tiny{flex:1;text-align:right}
.ap__done{padding:22px 0 6px}
.ap__done h3{font-size:clamp(22px,3vw,27px)}
.ap__done p{margin:0 auto;max-width:40ch}
.ap__done p + p{margin-top:12px}
.ap__sent{font-size:12.5px;color:var(--faint,var(--muted));letter-spacing:.02em}
.ap__btns{justify-content:center;margin-top:24px;gap:14px}

/* the same table two ways: what you earn, or what it costs you ---------- */
.lib__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lib__hd .h2{margin:0}
.tog--mode{align-self:flex-end;margin-bottom:4px}
.tog--mode .tog__b{padding:8px 14px;font-size:11px;letter-spacing:.09em}
.lib__mode{display:inline-block;margin-left:10px;padding-left:10px;border-left:1px solid var(--line);
  font-style:normal;font-weight:500;letter-spacing:.1em;color:var(--faint,var(--muted))}
@media(max-width:620px){
  .lib__hd{align-items:flex-start;gap:12px}
  .tog--mode{margin-bottom:0}
  .lib__mode{display:block;margin:6px 0 0;padding:0;border-left:0}
}

/* quick book: the map is a column on desktop, a view of its own on a phone -- */
@media(min-width:901px){
  /* nothing to switch to, so the map icon is not offered */
  .vswap [data-view="map"]{display:none}
}
/* the gallery keeps the map beside it, so its cards run one to a row */
.bk--grid .gal{grid-template-columns:1fr}
@media(min-width:1600px){.bk--grid .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}

/* what a pin opens: a small card with the picture, the facts and the tables */
.mpopw .leaflet-popup-content-wrapper{padding:0;border-radius:12px;overflow:hidden;
  background:var(--paper);box-shadow:0 14px 40px rgba(16,20,28,.28)}
.mpopw .leaflet-popup-content{margin:0;line-height:1.5}
.mpop{width:100%;min-width:0}
.mpopw .leaflet-popup-tip{background:var(--paper)}
.mpopw .leaflet-popup-close-button{width:26px;height:26px;padding:0;top:6px;right:6px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(14,17,22,.55);color:#fff;font-size:17px;font-weight:400}
.mpopw .leaflet-popup-close-button:hover{background:rgba(14,17,22,.78);color:#fff}
.mpop__shot{position:relative;aspect-ratio:16/9;background:#20242C;cursor:pointer;overflow:hidden}
.mpop__shot .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.06) saturate(1.06)}
.mpop__shot .shot__mark img{max-width:50%;max-height:34%;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.mpop__shot .shot__mark span{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-align:center}
.mpop__shot .lrow__badge{top:9px;left:9px}
.mpop__b{padding:13px 14px 14px}
.mpop__b h4{margin:0;font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.15;cursor:pointer}
.mpop__meta{margin:4px 0 0;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
/* tonight's tables on one line you push sideways */
.mpop__times{display:flex;gap:7px;margin-top:11px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px;-webkit-overflow-scrolling:touch}
.mpop__times::-webkit-scrollbar{display:none}
.mpop__times .time{flex:0 0 auto;padding:8px 11px;font-size:13px}
.mpop__times .time u{margin-left:6px;font-size:10.5px}
.mpop__none{font-size:12.5px;color:var(--muted)}
.mpop__more{margin-top:11px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* the list answers to a night, and to a search ------------------------- */
.lbar{display:flex;align-items:center;gap:10px;margin-top:16px;min-width:0}
/* the control runs the width of the row, with search closing it off */
.lbar .wseg{flex:1 1 auto;min-width:0}
.lbar .wsg{flex:1 1 auto;min-width:0}
.lbar .wsg b{width:100%;justify-content:center;padding:0 14px}
.lbar .srch{flex:0 0 auto}
.lbar.is-searching .wseg{display:none}
.lbar .srch.is-open{flex:1 1 auto;min-width:0}
.lbar .srch.is-open .search{width:100%}

/* the filters that decide a night, and what they left you --------------- */
.chip{flex:0 0 auto;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.bkbar__n.is-on{color:var(--ink);font-weight:600}
.bkbar__clr{margin-left:8px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:600;color:var(--blue);text-decoration:underline}

/* each city keeps its own run when every city is on screen */
.crun{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  margin:0;padding:11px 0;background:var(--ground);box-shadow:inset 0 -1px 0 var(--line)}
.crun__n{flex:0 0 auto;margin:0;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.crun__n b{font-weight:600;color:var(--ink)}
.crun__acts{display:flex;align-items:center;gap:9px;margin-left:auto;min-width:0}
.crun .wseg--sort .wsg b{font-size:11px}
/* the switch that decides what every time underneath is saying. Everything
   on this line is one height and sits on one center. */
.crun{--ctl:34px}
.crun .tog--mode{align-self:center;display:inline-flex;width:auto;margin:0;padding:1px}
.crun .tog--mode .tog__b{min-height:calc(var(--ctl) - 4px);padding:0 13px;font-size:10.5px;letter-spacing:.06em}
.crun .tog--mode .tog__b svg{width:14px;height:14px}
.crun__f{min-height:var(--ctl);padding:0 14px}
.crun .wseg--sort{height:var(--ctl)}
.crun .wseg--sort .wsg b{min-height:0}
.vd__when{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* too narrow to carry the switch alongside the rest, so it takes its own line */
@media(max-width:560px){
  .crun{flex-wrap:wrap;row-gap:9px}
  .crun .tog--mode{order:3;display:flex;width:100%}
  .crun .tog--mode .tog__b{flex:1 1 0;justify-content:center}
  .crun__acts{margin-left:auto}
}

/* only a screenful at a time */
.more{display:flex;align-items:center;justify-content:center;gap:14px;padding:26px 0 8px}
.more__n{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* add to list, from wherever you found the place ----------------------- */
.addto{position:relative;display:inline-flex}
.vd__acts{margin-top:22px;gap:10px}
.lmenu--add{left:0;right:auto;min-width:230px;max-height:300px;overflow:auto}
.lmenu--add button{display:flex;align-items:center;gap:10px;font-size:13.5px}
.lmenu--add button i{flex:0 0 auto;width:15px;height:15px;border:1px solid var(--line);border-radius:4px;position:relative}
.lmenu--add button.is-on i{background:var(--blue);border-color:var(--blue)}
.lmenu--add button.is-on i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lmenu--add button em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--muted)}
.lmenu__rule{display:block;height:1px;margin:5px 4px;background:var(--hair)}
.lmenu__new{color:var(--blue)!important;font-weight:600}

/* the facts that tell two restaurants apart */
.vd__rate{font-weight:600;color:var(--ink)}
.vd__rate::before{content:"\2605";margin-right:4px;color:var(--warm)}
.vd__revs{margin-left:5px;color:var(--muted)}

/* a dashboard you can act from */
.dash__acts{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:560px){.dash__acts{width:100%}.dash__acts .btn{flex:1}}
/* a quiet month is a fact, not a gap */
.bar--0 u{color:var(--faint,var(--muted))}
.bar--0 i{min-height:2px;background:var(--hair)}

/* the page a guest sees: one card, the same shape every time ------------- */
.vcard__b{display:block}
.vcard__name{margin:0;font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.2;
  /* two lines are reserved whether the name needs them or not, so every card
     in a row shares a baseline */
  min-height:calc(2 * 1.2em);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard__area{margin:5px 0 0;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}
.vcard .times--row{display:flex;flex-wrap:nowrap;gap:6px;margin-top:2px}
.vcard .times--row .time{flex:1 1 0;min-width:0;padding:9px 4px;text-align:center;font-size:13px}
.vcard .time--more{flex:0 0 auto;padding:9px 10px;color:var(--muted)}
.vcard .shot .lrow__badge{top:8px;left:8px}

/* search folds down to its icon until you reach for it, then opens as one
   bar across the row rather than a field stitched onto a button ---------- */
.srch{display:inline-flex;align-items:center;flex:0 0 auto}
.srch__b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;color:var(--muted);
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.srch__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.srch__b:hover{border-color:var(--ink);color:var(--ink)}

.srch.is-open{position:relative;flex:1 1 240px;min-width:0}
.srch.is-open .search{width:100%;min-width:0;height:40px;padding:0 40px;border-radius:999px}
.srch__ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;color:var(--muted);pointer-events:none}
.srch__x{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;
  background:none;cursor:pointer;font-size:19px;line-height:1;color:var(--muted)}
.srch__x:hover{background:var(--off);color:var(--ink)}

/* the top padding moved off the scroll container and onto what it holds, so
   the city header can sit flush against the filter bar */
.bk__list > .gal,.bk__list > .empty,.bk__list > .vd{padding-top:16px}
.bk__list > .brow:first-of-type{padding-top:16px}

/* one row: the table you want, the ways to narrow it, and search at the end */
.bkbar__in{display:block;max-width:1440px;margin:0 auto;padding:10px var(--pad)}
.bkbar__row{display:flex;align-items:center;gap:10px;min-width:0}
.bkbar__row > *{flex:0 0 auto}
.bkbar__pills .wsg b{color:var(--muted)}
.bkbar__end{margin-left:auto;display:flex;align-items:center;min-width:0}
.bkbar__end .srch.is-open{flex:0 1 320px;width:320px}

/* on a phone the four filter menus give way to one button and a sheet. A menu
   inside a sideways scrolling row is clipped by it, so they cannot live here. */
.crun__f{display:inline-flex;align-items:center;gap:7px}
.crun__f em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--blue);color:#fff;font-size:10px}
/* an active filter button is marked, not filled, so its own label stays legible */
.crun__f.is-on{background:var(--tint);border-color:var(--blue);color:var(--blue)}
.crun__f.is-on em{background:var(--blue);color:#fff}
@media(min-width:1181px){ .crun__f{display:none} }
/* eight chips only fit on a properly wide screen. Under that the four that
   narrow the list live in the Filters sheet instead. */
@media(max-width:1180px){ .bkbar__pills{display:none} }
@media(max-width:900px){
  .bkbar__row{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
  .bkbar__row::-webkit-scrollbar{display:none}
  /* the four chips share out whatever the row has, so the bar runs the full
     width of the page rather than stopping short of it */
  .bkbar__row .wseg{flex:1 1 auto;min-width:0}
  .bkbar__row .wsg{flex:1 1 auto;min-width:0}
  .bkbar__row .wseg b{width:100%;justify-content:center;gap:6px;padding:0 14px;
    min-height:36px;font-size:10.5px;letter-spacing:.08em}
  /* the search stays put at the end of the scrolling row, over a short fade so
     a chip passing under it does not look broken */
  /* it follows the guests straight away, and only pins itself to the right
     once the row is long enough to scroll under it */
  .bkbar__end{position:sticky;right:calc(var(--pad) * -1);margin-left:0;background:var(--paper);
    padding-left:14px;padding-right:var(--pad)}
  .bkbar__end::before{content:"";position:absolute;left:-10px;top:0;bottom:0;width:10px;
    background:linear-gradient(to right,transparent,var(--paper))}
  .bkbar__end .srch.is-open{flex:0 1 190px;width:190px}
}
@media(max-width:560px){
  .bkbar__row .wseg b{padding:0 9px;gap:5px;font-size:10px;letter-spacing:.05em}
}
@media(max-width:400px){
  .bkbar__row .wseg b{padding:0 7px;font-size:9.5px;letter-spacing:.03em}
  .bkbar__row .wseg i{width:6px;height:6px}
}

/* the filter sheet */
.sheet--filters .sheet__body{display:grid;gap:22px}
.fgrp h4{margin:0 0 10px;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fgrp__o{display:flex;flex-wrap:wrap;gap:7px}
.fgrp__o .pill{font-size:12.5px;padding:8px 13px}
/* neighborhoods belong to a city, so they are filed under one */
.fgrp__city + .fgrp__city{margin-top:16px}
.fgrp__city h5{margin:0 0 9px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:none;color:var(--ink)}
/* the rest of a long list, one tap away */
.pill--more{border-style:dashed;text-transform:none;letter-spacing:.02em;font-size:12.5px;padding:8px 13px}
.pill--more:hover{border-style:solid;color:var(--ink)}
.sheet--filters .sheet__foot .tiny{flex:1}

/* a venue's pictures, pushed sideways ----------------------------------- */
.gsh{position:relative;overflow:hidden;background:#20242C}
.gsh__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gsh__track::-webkit-scrollbar{display:none}
.gsh__f{flex:0 0 100%;scroll-snap-align:center;height:100%}
.gsh__f .photo{width:100%;height:100%;object-fit:cover;filter:brightness(1.07) saturate(1.06)}
.gsh .shot__scrim,.gsh .shot__mark{pointer-events:none}
.gsh__a{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .18s var(--ease),background .18s var(--ease)}
.gsh__a--l{left:10px}
.gsh__a--r{right:10px}
.gsh:hover .gsh__a,.gsh__a:focus-visible{opacity:1}
.gsh__a:hover{background:#fff}
@media(hover:none){.gsh__a{display:none}}
.gsh__dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;
  display:flex;justify-content:center;gap:5px;pointer-events:none}
.gsh__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);
  transition:background .18s var(--ease),transform .18s var(--ease)}
.gsh__dots i.is-on{background:#fff;transform:scale(1.3)}

/* the venue card: the actions sit with the name, the facts sit under the times */
.vd__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 20px;
  flex-wrap:wrap;margin-top:20px}
/* the name and its facts give way so the actions stay level with the title */
.vd__head > :first-child{flex:1 1 240px;min-width:0}
.vd__head .vd__name{margin:0}
.vd__head .vd__meta{white-space:normal}
.vd__head .vd__meta{margin-top:7px}
.vd__acts{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding-top:5px}
.vd__when{margin:22px 0 14px}
.vd__info{display:grid;gap:0;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.vf{display:grid;gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--hair)}
@media(min-width:620px){.vf{grid-template-columns:120px minmax(0,1fr)}}
.vf dt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.vf dd{margin:0;min-width:0}
.vf dd p{margin:0 0 6px;font-size:15px;line-height:1.55}
.vf dd p:last-of-type{margin-bottom:0}
.vf dd .link{display:inline-block;margin-top:7px}
@media(max-width:620px){
  .vd__head{gap:14px}
  .vd__acts{width:100%;padding-top:0}
  .vd__acts .btn{flex:1}
}

/* the library as a drawer on a phone, the way a music app keeps it ------- */
.lib__open{display:none}
.lib__x{display:none}
.lib__scrim{display:none}

@media(max-width:939px){
  .lib{position:relative;gap:0;padding-top:18px}

  /* the button that pulls the library out, sitting above the list itself */
  .lib__open{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 18px;
    padding:12px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
    cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  .lib__open svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
  .lib__open span{flex:1;text-align:left}
  .lib__open em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--off);
    font-size:11px;letter-spacing:0;color:var(--muted)}

  /* the drawer */
  .lib__side{position:fixed;left:0;top:0;bottom:0;z-index:96;width:min(320px,86vw);
    border:0;border-right:1px solid var(--line);border-radius:0;padding:18px 14px calc(18px + env(safe-area-inset-bottom));
    background:var(--paper);box-shadow:14px 0 44px rgba(16,20,28,.22);
    display:flex;flex-direction:column;
    transform:translateX(-102%);transition:transform .32s var(--ease);will-change:transform}
  .is-lib .lib__side{transform:none}
  .lib__scrim{display:block;position:fixed;inset:0;z-index:95;background:rgba(10,12,16,.45);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  .is-lib .lib__scrim{opacity:1;pointer-events:auto}

  .lib__head{padding:0 4px 14px}
  .lib__ttl{font-size:11px}
  .lib__x{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
    border:0;border-radius:50%;background:var(--off);cursor:pointer;font-size:19px;line-height:1;color:var(--ink)}

  /* inside the drawer the lists stack, one row each, like a library */
  .lib__items{flex:1;flex-direction:column;gap:2px;max-height:none;overflow-y:auto;padding-bottom:4px}
  .libi__w{flex:0 0 auto;width:auto}
  .libi{width:100%;flex-direction:row;text-align:left;padding:9px 8px;padding-right:36px}
  .libi__b{align-items:flex-start}
  .libi__b b{max-width:none;font-size:15.5px}
  .libi__more{right:4px;top:50%;transform:translateY(-50%);opacity:.6;width:26px;height:26px;font-size:17px}
  .lib__hint{display:block;margin:10px 4px 0;text-align:center}
  .lib__add{margin-bottom:10px}
}

/* the list on a phone: fewer stacked blocks before the first restaurant -- */
@media(max-width:620px){
  .lib__hd{display:block}
  .lib__hd .h2{font-size:clamp(28px,8vw,36px)}
  .tog--mode{display:flex;width:100%;margin-top:12px}
  .tog--mode .tog__b{flex:1;justify-content:center}
  /* the switch already says which way you are reading it */
  .lib__mode{display:none}
  .lib__n{margin-top:10px}
  .lib__url{flex-wrap:nowrap;gap:8px;margin-top:12px}
  .lib__url a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
  .lib__url .btn{flex:0 0 auto}
  .lbar{margin-top:12px}

  /* a row: the picture, then the name with its controls, then the tables */
  .lrow{grid-template-columns:96px 1fr}
  .lrow__shot{min-height:0}
  .lrow__b{padding:12px 12px 12px 13px;gap:7px}
  .lrow__top{flex-wrap:nowrap;align-items:flex-start;gap:8px}
  .lrow__name{font-size:17px;line-height:1.2;min-width:0}
  .lrow__acts{gap:6px;flex:0 0 auto;align-items:center}
  .lrow__acts .link{font-size:10px;letter-spacing:.1em}
  .lrow__meta{font-size:10px;line-height:1.5}
  .lrow .strip{gap:6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .lrow .strip::-webkit-scrollbar{display:none}
  .lrow .strip .time{flex:0 0 auto;padding:8px 10px;font-size:13px}
}

/* the list, in the dark: one ground, one tone per entry ----------------- */
[data-theme="night"] .lrow,[data-theme="night"] .lib__side{background:var(--paper)}
[data-theme="night"] .lrows{background:transparent}
@media(max-width:620px){
  .lbar{gap:8px}
  .lbar .wsg b{padding:0 8px;font-size:10.5px;letter-spacing:.08em}
  .lbar .srch.is-open{flex:1 1 100%}
}

/* the confirmation carries the night's details, and the ways to keep them */
.cfinfo{display:grid;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.cf{display:grid;gap:3px 22px;padding:13px 0;border-bottom:1px solid var(--hair)}
@media(min-width:520px){.cf{grid-template-columns:96px minmax(0,1fr);align-items:baseline}}
.cf dt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cf dd{margin:0;min-width:0;font-size:14.5px;line-height:1.5}
.cf dd p{margin:0}
.cf dd a{color:var(--blue)}
.cf dd a:hover{text-decoration:underline}
.cf dd .link{display:inline-block;margin-top:5px}
.cfacts{display:flex;gap:9px;margin-top:20px}
.cfacts .btn{flex:1}

/* quick book: every restaurant is its own card, on the page's own ground -- */
.bk__list .brow{border:1px solid var(--line);border-radius:12px;background:var(--paper);
  padding:12px;margin-bottom:10px;gap:14px}
.bk__list .brow:first-child{padding-top:12px}
.bk__list > .brow:first-of-type{margin-top:14px;padding-top:12px}
.bk__list .brow:last-of-type{margin-bottom:0}
.bk__list .brow__shot{border-radius:9px}
@media(max-width:900px){
  .bk__list .brow{padding:10px;gap:11px;border-radius:11px}
  .bk__list > .brow:first-of-type{margin-top:12px;padding-top:10px}
}
/* the search rides the bar it sits in, so its fade matches the bar */
.lbar .srch{background:transparent}

/* a menu placed on the page, pinned to its button */
.wmenu--pop{position:fixed;top:auto;left:auto;z-index:120;max-height:min(320px,60vh)}

/* the open search takes the whole bar, the way it does on a list */
.bkbar__row.is-searching .wseg{display:none}
.bkbar__row.is-searching .bkbar__end{margin-left:0;flex:1 1 100%;min-width:0;padding-left:0}
.bkbar__row.is-searching .bkbar__end::before{display:none}
.bkbar__row.is-searching .srch.is-open{flex:1 1 100%;width:auto;max-width:none}

/* the guest page opens straight into the list, not into a page of air ---- */
.lhead{padding:26px 0 18px}
@media(min-width:900px){.lhead{padding:32px 0 20px}}
.lhead .kick{margin-bottom:14px}
.lhead .h2{font-size:clamp(28px,4.4vw,46px)}
.lhead .lede{margin-top:12px;font-size:clamp(15px,1.5vw,17px);max-width:56ch}

/* the site nav: who PRIMA is for, then the two things to do ------------- */
.sitenav{display:none;align-items:center;gap:26px;margin-left:22px;flex:1 1 auto;min-width:0}
@media(min-width:1000px){
  .nav__in{position:relative}
  /* centered on the header itself, so the logo and the buttons can be any width */
  .sitenav{display:flex;position:absolute;left:50%;transform:translateX(-50%);margin-left:0;flex:0 0 auto}
}
.sitenav a{position:relative;white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:21px 0;
  transition:color .18s var(--ease)}
.sitenav a:hover,.sitenav a[aria-current="page"]{color:var(--ink)}
/* one rule under the whole row, sliding to whichever item is being pointed at */
.sitenav__ink{position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);
  opacity:0;pointer-events:none;
  transition:transform .3s var(--ease),width .3s var(--ease),opacity .2s var(--ease)}
.sitenav__ink.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.sitenav__ink{transition:opacity .2s linear}}
.nav__in .nav__acts{margin-left:auto}
@media(max-width:640px){
  .nav__acts{gap:7px}
  .nav__acts .btn--sm{padding:0 11px;font-size:10px;letter-spacing:.12em;white-space:nowrap}
}
/* on the narrowest phones both actions still sit on one line each */
@media(max-width:400px){
  .nav__in{gap:10px}
  .nav__acts{gap:6px}
  .nav__acts .btn--sm{padding:0 9px;font-size:9.5px;letter-spacing:.06em}
  .logo svg{height:13px}
}

/* and behind one button when the screen is narrow */
.sitedrawer{display:none}
@media(max-width:999px){
  .nav__in .burger{display:flex;order:-1}
  .sitedrawer{display:grid;position:absolute;left:0;right:0;top:100%;z-index:70;padding:8px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(16,20,28,.1)}
  .sitedrawer[hidden]{display:none}
  .sitedrawer a{padding:15px 14px;border-radius:9px;font-size:12px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .sitedrawer a:hover{background:var(--off);color:var(--ink)}
}
@media(min-width:1000px){.nav__in .burger{display:none}}

/* the landing page: four doors, one per audience -------------------------- */
.who__link{padding:24px 22px 22px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .18s var(--ease),transform .24s var(--ease)}
.who__link:hover{border-color:var(--blue);transform:translateY(-2px)}
.who__link h3{padding-bottom:0;border-bottom:0;margin-bottom:4px}
.who__link .tlink{margin-top:auto;padding-top:14px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}

/* the front page opens on the film, and nothing else --------------------- */
.film{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:#0B0D11;margin-top:-1px}
.film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,14,.34) 0%,rgba(8,10,14,.12) 38%,rgba(8,10,14,.72) 100%)}
.film__in{position:relative;z-index:2;padding-top:110px;padding-bottom:clamp(44px,7vw,84px)}
.film__h{margin:0;max-width:16ch;font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(38px,6.6vw,76px);line-height:1.02;letter-spacing:-.02em;
  text-shadow:0 2px 40px rgba(0,0,0,.4)}
.film__sub{margin:18px 0 0;max-width:44ch;color:rgba(255,255,255,.88);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.film__btns{margin-top:30px;gap:10px}
.btn--film{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff}
.btn--film:hover{background:#fff;border-color:#fff;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.film__v{display:none}}

/* ==== section types, so the partner pages stop looking like each other ==== */

/* a dark opener with one photograph behind it */
.pop{position:relative;display:flex;align-items:flex-end;min-height:min(62vh,540px);
  overflow:hidden;background:#0B0D11;margin-top:-1px}
.pop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.pop__in{position:relative;z-index:2;padding:110px 0 clamp(36px,5vw,60px)}
.pop .ul{color:rgba(255,255,255,.72)}
.pop__h{margin:14px 0 0;max-width:15ch;font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(34px,5.4vw,62px);line-height:1.04;letter-spacing:-.02em}
.pop__lede{margin:16px 0 0;max-width:52ch;color:rgba(255,255,255,.82);font-size:clamp(15px,1.6vw,18px);line-height:1.55}
.pop__btns{margin-top:26px;gap:10px}

/* two panels, weighed against each other */
.duo{display:grid;gap:14px;margin-top:34px}
@media(min-width:860px){.duo{grid-template-columns:1fr 1fr}}
.duo__p{display:flex;flex-direction:column;gap:14px;padding:30px 28px 32px;
  border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.duo__p--lead{border-color:var(--blue);box-shadow:0 18px 44px rgba(58,91,224,.09)}
.duo__tag{align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--off);
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.duo__p--lead .duo__tag{background:var(--blue);color:#fff}
.duo__p h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.duo__p p{margin:0;color:var(--muted);line-height:1.6}
.duo__p b{color:var(--ink)}
.duo__when{margin-top:auto;padding-top:16px;border-top:1px solid var(--hair);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* one figure, the size of the argument */
.big{display:grid;gap:8px;margin-top:30px;padding:40px 34px;border-radius:14px;
  background:var(--ink);color:#fff;text-align:center}
.big b{display:block;font-family:var(--serif);font-size:clamp(46px,9vw,110px);line-height:.94;letter-spacing:-.03em}
.big span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.big em{display:block;margin-top:12px;font-style:normal;font-size:14px;color:rgba(255,255,255,.72);max-width:44ch;
  margin-left:auto;margin-right:auto;line-height:1.55}

/* a journey down the page, not cards across it */
.rail{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--line)}
.rail__s{display:grid;gap:6px 28px;padding:24px 0;border-bottom:1px solid var(--hair)}
@media(min-width:760px){.rail__s{grid-template-columns:52px 260px minmax(0,1fr);align-items:start}}
.rail__n{font-family:var(--serif);font-size:26px;line-height:1;color:var(--line)}
.rail__s h3{font-family:var(--serif);font-size:clamp(19px,2vw,23px);line-height:1.15}
.rail__s p{margin:0;color:var(--muted);line-height:1.6;max-width:52ch}

/* one sentence, given the room to land */
.claim{margin-top:10px;padding:clamp(40px,6vw,76px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.claim p{margin:0;max-width:20ch;font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em}
.claim em{font-style:normal;color:var(--blue)}
.claim span{display:block;margin-top:20px;max-width:56ch;font-family:var(--sans);font-size:16px;
  font-weight:400;letter-spacing:0;line-height:1.6;color:var(--muted)}

/* where the guests come from, as a row of photographs */
.band{display:grid;gap:10px;margin-top:32px}
@media(min-width:760px){.band{grid-template-columns:repeat(4,1fr)}}
.band__c{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#20242C}
.band__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.band__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px;
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.82))}
.band__t b{display:block;font-family:var(--serif);font-size:18px;color:#fff;line-height:1.15}
.band__t span{display:block;margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.45}

/* frequently asked, one open at a time ---------------------------------- */
.faq{display:grid;margin-top:34px;border-top:1px solid var(--line);max-width:860px}
.faq__q{border-bottom:1px solid var(--hair)}
.faq__q summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.25;
  transition:color .16s var(--ease)}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary:hover{color:var(--blue)}
/* the mark is a plus that becomes a minus */
.faq__q summary i{position:relative;flex:0 0 auto;width:16px;height:16px;margin-top:5px}
.faq__q summary i::before,.faq__q summary i::after{content:"";position:absolute;left:0;top:7px;
  width:16px;height:1.6px;border-radius:2px;background:var(--muted);transition:transform .22s var(--ease)}
.faq__q summary i::after{transform:rotate(90deg)}
.faq__q[open] summary i::after{transform:rotate(0)}
.faq__q[open] summary{color:var(--blue)}
.faq__q p{margin:0 0 24px;max-width:62ch;color:var(--muted);font-size:15.5px;line-height:1.65}

/* a line break that only applies where there is room for it */
.brk{display:none}
@media(min-width:760px){.brk{display:inline}}

/* how you earn ---------------------------------------------------------- */
/* one block per kind of table: the rate and the money it makes, together,
   so a prime split never sits beside a non-prime one. Free is ink, prime blue. */
.xmps{display:grid;gap:14px;margin-top:30px}
.xmp{display:grid;grid-template-columns:minmax(190px,250px) 1fr;gap:30px;padding:26px;
  border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:14px;background:#fff}
.xmp--prime{border-top-color:var(--blue)}
.xmp__head{display:flex;flex-direction:column}
.xmp__t{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.xmp--prime .xmp__t{color:var(--blue)}
.xmp__pc{display:block;margin:8px 0 6px;font-family:var(--serif);
  font-size:clamp(50px,6.4vw,68px);font-weight:700;line-height:.92;letter-spacing:-.02em;color:var(--ink)}
.xmp--prime .xmp__pc{color:var(--blue)}
.xmp__pc i{font-style:normal;font-size:.44em;vertical-align:.52em;margin-left:2px}
.xmp__of{margin:0;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--muted)}
.xmp__body{min-width:0}
/* the same two rates, without the worked example: that job belongs to the
   calculator underneath, and saying it twice was the redundancy */
.rates{display:grid;gap:14px;margin-top:30px}
@media(min-width:760px){.rates{grid-template-columns:1fr 1fr}}
.rate{padding:26px;border:1px solid var(--line);border-top:3px solid var(--ink);
  border-radius:14px;background:#fff}
.rate--prime{border-top-color:var(--blue)}
.rate--prime .xmp__t,.rate--prime .xmp__pc{color:var(--blue)}
.rate .xmp__of{max-width:34ch}
/* the split itself: 50/50 on a free table, 20/20/60 on a prime one, drawn to
   scale by the 1fr 1fr and 1fr 1fr 3fr tracks the bar already uses */
.rate__bar{margin-top:22px}
.rate .xmp__seg{padding:15px 14px 13px}
.rate .xmp__seg b{font-size:clamp(19px,2.1vw,25px)}
.rate .xmp__seg em{font-size:8.5px;letter-spacing:.1em}
.rate--prime .xmp__seg--you{background:var(--blue)}
/* the dollar bars stack on a phone, but this one is only useful as a
   proportion, so it stays side by side and the type comes down instead */
@media(max-width:620px){
  .rate{padding:22px 18px}
  .rate .rate__bar{grid-template-columns:1fr 1fr}
  .rate .rate__bar.xmp__bar--3{grid-template-columns:1fr 1fr 3fr}
  .rate .xmp__seg{padding:11px 9px 10px}
  .rate .xmp__seg b{font-size:15px}
  .rate .xmp__seg em{font-size:7.5px;letter-spacing:.06em;line-height:1.3}
}
#earn .earn__sub{margin:54px 0 0}
#earn .earn__sub + .calc{margin-top:20px}
.xmp__say{margin:0 0 16px;font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--muted)}
.xmp__say b{font-weight:600;color:var(--ink)}
.xmp__bar{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:11px;overflow:hidden}
.xmp__bar--3{grid-template-columns:1fr 1fr 3fr}
.xmp__seg{display:flex;flex-direction:column;gap:4px;padding:18px 17px 16px;min-width:0}
.xmp__seg b{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);font-weight:700;line-height:1}
.xmp__seg em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
/* you: solid, in this table's color */
.xmp__seg--you{background:var(--ink);color:#fff}
.xmp__seg--you em{color:rgba(255,255,255,.66)}
.xmp--prime .xmp__seg--you{background:var(--blue)}
/* prima: mid tone, clearly not the same slab as the venue */
.xmp__seg--pr{background:#DCDFE6;color:var(--ink)}
.xmp__seg--pr em{color:#6B7280}
/* the venue: the lightest, because the guest's money mostly lands here */
.xmp__seg--venue{background:var(--off);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.xmp__seg--venue b{opacity:.82}
.xmp__seg--venue em{color:var(--muted)}
.xmp__note{margin:13px 0 0;font-size:13px;color:var(--muted)}
/* the split is the point of these blocks, so it is drawn on arrival rather
   than already finished. clip rather than scale, so the type never squashes. */
.xmp__bar{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.22,1,.36,1) .28s}
.rv.in .xmp__bar{clip-path:inset(0 0 0 0)}
.xmp:nth-child(2) .xmp__bar,.rate:nth-child(2) .xmp__bar{transition-delay:.46s}
@media(prefers-reduced-motion:reduce){.xmp__bar{clip-path:none;transition:none}}
@media(max-width:860px){ .xmp{grid-template-columns:1fr;gap:18px} }
/* one bar across, always: the whole point of it is the proportion, and a stack
   of separate blocks is not a proportion. The type comes down instead. */
@media(max-width:620px){
  .xmp__seg{padding:11px 9px 10px}
  .xmp__seg b{font-size:15px}
  .xmp__seg em{font-size:7.5px;letter-spacing:.06em;line-height:1.3}
}

.wrail__after{margin-top:26px}
[data-theme="night"] .xmp{background:var(--paper);border-top-color:var(--ink)}
[data-theme="night"] .xmp--prime{border-top-color:var(--blue)}
[data-theme="night"] .xmp__seg--you{background:var(--ink);color:#0E1014}
[data-theme="night"] .xmp__seg--you em{color:rgba(14,16,20,.66)}
[data-theme="night"] .xmp--prime .xmp__seg--you{background:var(--blue);color:#0E1014}
[data-theme="night"] .xmp__seg--pr{background:rgba(255,255,255,.2);color:var(--ink)}
[data-theme="night"] .xmp__seg--pr em{color:var(--muted)}

/* the phone hero: the film, with the words over it --------------------- */
/* above 760 the picture grid does this job, so the video hero is hidden */
.vhero{display:none}
@media(max-width:760px){
  .sec.hero{display:none}
  /* the full frame: the section below it should not peek over the fold */
  .vhero{position:relative;display:block;min-height:100svh;
    display:flex;align-items:flex-end;overflow:hidden;background:#0E1116}
  .vhero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* dark at the bottom where the words sit, clear at the top */
  .vhero__scrim{position:absolute;inset:0;background:
    linear-gradient(to top,rgba(8,10,14,.92) 0%,rgba(8,10,14,.72) 26%,rgba(8,10,14,.28) 56%,rgba(8,10,14,.35) 100%)}
  .vhero__in{position:relative;width:100%;padding:0 var(--pad) calc(34px + env(safe-area-inset-bottom));color:#fff}
  .vhero__h{margin:0;color:#fff;font-size:clamp(34px,10vw,46px);line-height:1.02;letter-spacing:-.015em;
    text-shadow:0 2px 24px rgba(0,0,0,.45)}
  .vhero__p{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88);max-width:30ch}
  .vhero__acts{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
  .vhero__acts .btn{flex:0 0 auto}
  /* watch: a play disc and one word, nothing more */
  .vhero__play{display:inline-flex;align-items:center;gap:9px;padding:0;border:0;background:none;cursor:pointer;
    color:#fff;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
  .vhero__tri{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);transition:background .18s var(--ease)}
  .vhero__tri::before{content:"";border-left:9px solid #fff;border-top:6px solid transparent;
    border-bottom:6px solid transparent;margin-left:3px}
  .vhero__play:hover .vhero__tri{background:rgba(255,255,255,.26)}
}

/* the film, full screen, with sound */
.vfilm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(6,8,11,.985);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .22s var(--ease)}
.vfilm.in{opacity:1}
.vfilm__box{position:relative;width:100%;max-width:560px}
/* the box must have a height before the file loads, or there is nothing on
   screen at all and the close button floats in the middle of nowhere */
.vfilm__v{width:100%;aspect-ratio:4/5;max-height:82svh;border-radius:12px;background:#000;
  display:block;object-fit:contain;margin:0 auto}
.vfilm__err{margin:12px 0 0;text-align:center;font-size:13px;color:rgba(255,255,255,.8)}
.vfilm__err a{color:#fff;text-decoration:underline}
.vfilm__x{position:absolute;top:-46px;right:0;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.vfilm__x:hover{background:rgba(255,255,255,.26)}

/* ==========================================================================
   The landing page. Cormorant for the display type, a blue italic closing
   each heading, and the film behind the promise.
   ========================================================================== */
.home{--ink:#15151A;--muted:#4A4A52;--blue:#1227C0;--ground:#F9F8F6;--line:rgba(21,21,26,.12)}
.home .nav--over.is-stuck{background:rgba(249,248,246,.94)}

/* display type: the house voice for this page */
/* the 300 here was for a light serif, which carries at display size on its own
   contrast. a light grotesque does not, so the display weight goes up and the
   tracking comes in to match the reference. */
.dh{margin:0;font-family:var(--serif);font-weight:700;line-height:1.02;letter-spacing:-.032em;
  font-size:clamp(34px,5.4vw,64px);color:var(--ink)}
.dh em{font-style:italic;color:var(--blue)}
/* the same closing-phrase treatment on the pages that use .h1 */
.h1 em{font-style:italic;color:var(--blue)}
.dh--xl{font-size:clamp(42px,8.4vw,116px);line-height:.95;letter-spacing:-.038em}
.dh--sm{font-size:clamp(21px,2.1vw,27px);line-height:1.12}
.dh--on,.dh--on em{color:#fff}
.home .lede{max-width:62ch;font-size:clamp(15.5px,1.35vw,18px);line-height:1.62;color:var(--muted)}
.lede--on{color:rgba(255,255,255,.82);max-width:46ch}
.home .ul{font-size:11px;letter-spacing:.24em}

/* 01 the hero: the film, dimmed, with the promise on it */
.lhero{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;background:#000}
.lhero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lhero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%),
  linear-gradient(to right,rgba(0,0,0,.66) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,.16) 100%)}
.lhero__in{position:relative;padding-top:78px;padding-bottom:78px}
.lhero .dh--xl{color:#fff;max-width:14ch}
.lhero__p{margin:26px 0 0;max-width:47ch;font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:rgba(255,255,255,.8)}
.lhero__p em{color:#fff}
.lhero__acts{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.lhero__play{display:inline-flex;align-items:center;gap:11px;padding:0;border:0;background:none;cursor:pointer;
  color:#fff;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.lhero__tri{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);transition:background .18s var(--ease),transform .18s var(--ease)}
.lhero__tri::before{content:"";border-left:11px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px}
.lhero__play:hover .lhero__tri{background:rgba(255,255,255,.3);transform:scale(1.06)}
/* a chevron is two equal arms. the box was 14x8, so rotating it 45deg gave one
   long arm and one short one, and the 9px margin sat on top of the flex gap */
.btn__go{width:8px;height:8px;flex:0 0 auto;border-right:1.6px solid currentColor;
  border-top:1.6px solid currentColor;transform:rotate(45deg);
  transition:transform .22s var(--ease)}
.btn:hover .btn__go{transform:rotate(45deg) translate(2px,-2px)}
.btn--ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:none}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

/* 02 the marks, running */
.mark{padding:44px 0 40px;border-bottom:1px solid var(--hair);overflow:hidden}
/* the label and the way through are read, not decoration, so they are set at
   reading size rather than as small caps furniture */
/* .ul is in the selector because .home .ul sets its own size and would
   otherwise win on specificity and put this back to 11px */
.ul.mark__t,.mark__t{display:block;text-align:center;color:var(--muted);
  font-size:16px;letter-spacing:.12em}
/* the label doubles as the way through to the full list */
a.mark__t{width:max-content;margin:0 auto}
.mark__rail{display:flex;width:max-content;margin-top:32px;animation:markRun 110s linear infinite}
.mark__run{display:flex;align-items:center;gap:78px;padding-right:78px}
.mark__i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:46px}
.mark__i img{max-height:46px;width:auto;object-fit:contain;opacity:.42;
  filter:grayscale(1) brightness(0);transition:opacity .2s var(--ease)}
.mark__rail:hover{animation-play-state:paused}
.mark__i:hover img{opacity:.8}
@keyframes markRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mark__rail{animation:none}}
/* on a phone the desktop spacing put two marks on screen with a hole between
   them, which read as a section that had failed to load. Smaller and closer,
   so four are in view and it is plainly a run of them. */
@media(max-width:620px){
  .mark{padding:34px 0 30px}
  .mark__rail{margin-top:22px;animation-duration:74s}
  .mark__run{gap:40px;padding-right:40px}
  .mark__i{height:40px}
  .mark__i img{max-height:40px;opacity:.55}
}

/* 03 and 06 the two-column blocks */
.lsplit{display:grid;gap:40px;align-items:center}
@media(min-width:960px){
  .lsplit{grid-template-columns:1.02fr .98fr;gap:74px}
  .lsplit--flip .lsplit__art{order:-1}
}
.lsplit__copy .lede{margin-top:20px}
.pts{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
/* the advert and the booking. the post is drawn rather than photographed so the
   type stays crisp, and it sits back so the reservation is what you look at. */
#ads .lsplit{align-items:start}
.adart{display:grid;gap:16px}

.spost{margin:0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;
  box-shadow:0 10px 26px rgba(16,20,28,.07)}
.spost__top{display:flex;align-items:center;gap:9px;padding:9px 11px}
.spost__av{flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(140deg,#d8cfc2,#a8998a)}
.spost__who{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-width:0}
.spost__who b{font-size:12px;font-weight:600;color:var(--ink)}
.spost__who em{font-style:normal;font-size:10px;color:var(--muted)}
.spost__dots{flex:0 0 auto;letter-spacing:1px;font-size:12px;color:var(--muted)}
.spost__shot{display:block;position:relative;aspect-ratio:16/10;background:#20242C}
.spost__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spost__cta{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-top:1px solid var(--line);background:var(--off);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.spost__go{width:11px;height:6px;border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,2px)}

.bkc{margin:0;display:flex;flex-direction:column;gap:4px;padding:22px 24px 20px;
  border:1px solid var(--line);border-top:2px solid var(--blue);border-radius:3px;
  background:#fff;box-shadow:0 26px 58px rgba(16,20,28,.16)}
.bkc__eb{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.bkc__nm{margin-top:7px;font-family:var(--serif);font-size:24px;font-weight:600;
  letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.bkc__when{font-size:14.5px;color:var(--muted)}
.bkc__ok{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:13px;font-weight:600;color:var(--good)}
.bkc__ok svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* on a wide screen they overlap, the advert behind and dimmed */
@media(min-width:960px){
  .adart{display:block;position:relative;min-height:330px}
  .adart .spost{position:absolute;top:0;left:0;width:270px;opacity:.72}
  .adart .bkc{position:absolute;right:0;bottom:0;width:330px}
}
@media(max-width:959px){
  .adart{justify-items:center}
  .adart .spost,.adart .bkc{width:100%;max-width:340px}
}

/* the questions, one open at a time. native details does the work, the script
   only covers browsers without the shared name attribute. */
#faq .dh{text-align:center}
.qa{margin:36px auto 0;max-width:840px;border-top:1px solid var(--line)}
.qa__i{border-bottom:1px solid var(--line)}
.qa__i summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:26px;padding:21px 0;
  font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;
  line-height:1.35;color:var(--ink)}
.qa__i summary::-webkit-details-marker{display:none}
.qa__i summary:hover{color:var(--blue)}
/* a plus that becomes a minus */
.qa__x{position:relative;flex:0 0 auto;width:14px;height:14px;margin-top:6px}
.qa__x::before,.qa__x::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;
  background:var(--muted);transform:translateY(-50%);
  transition:transform .25s var(--ease),background .2s var(--ease)}
.qa__x::after{transform:translateY(-50%) rotate(90deg)}
.qa__i[open] .qa__x::after{transform:translateY(-50%) rotate(0deg)}
.qa__i[open] .qa__x::before,.qa__i[open] .qa__x::after{background:var(--blue)}
.qa__i p{margin:0 0 24px;max-width:62ch;font-size:15px;line-height:1.65;color:var(--muted)}
@media(max-width:620px){.qa__i summary{font-size:17px;gap:18px}}

/* claims, ruled rather than bulleted: the point in serif, the detail under it,
   so the eye has somewhere to land instead of three equal sentences */
.bullets{list-style:none;margin:34px 0 0;padding:0;display:grid}
.bullets li{padding:20px 0;border-top:1px solid var(--line)}
.bullets li:last-child{border-bottom:1px solid var(--line)}
.bullets h3{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;
  letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.bullets p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.bullets--flat{margin-top:28px}
.bullets--flat li{padding:15px 0}
.bullets--flat p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
/* the claim leads in ink, the qualification follows in the body color, so the
   line can be scanned without breaking it into a heading and a paragraph the
   way the section above does */
.bullets--flat b{font-weight:600;color:var(--ink)}
/* two across on a phone: four short pairs stacked is a lot of scrolling for
   what is really one thought, and each pair is short enough to sit in half
   the width. The rules run between the columns instead of across them. */
@media(max-width:620px){
  /* a rule above every cell and one under the whole list: cells in a row are
     different heights, so a border on the last two would not line up */
  .lsplit__copy .bullets{grid-template-columns:1fr 1fr;column-gap:18px;margin-top:26px;
    border-bottom:1px solid var(--line)}
  .lsplit__copy .bullets li{padding:16px 0;border-top:1px solid var(--line);border-bottom:0}
  .sec--night .lsplit__copy .bullets{border-bottom-color:rgba(255,255,255,.15)}
  .lsplit__copy .bullets h3{font-size:15.5px;line-height:1.25}
  .lsplit__copy .bullets p{font-size:13px;line-height:1.5}
}
.pt{display:grid;grid-template-columns:38px 1fr;gap:4px 10px;padding:20px 0;border-top:1px solid var(--line)}
.pt__n{grid-row:1 / span 2;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;color:var(--blue);padding-top:4px}
.pt__h{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.pts__fine{margin:20px 0 0;font-size:13.5px;color:var(--muted)}

/* the phone that shows the product */
.fone{position:relative;margin:0 auto;width:min(340px,86%);aspect-ratio:9/19;border-radius:38px;
  background:#101218;box-shadow:0 40px 90px rgba(16,20,28,.3),0 0 0 9px #16181f,0 0 0 10px #2a2d37;
  overflow:hidden}
.fone__body{position:absolute;inset:0;padding:22px 13px 0;overflow:hidden;color:#fff}
/* the handset carrying a real screenshot. the picture sits inside a bezel
   rather than running to the device edge, so the app's own top bar is not
   eaten by the rounded corner, and the island sits in the safe area the
   capture now leaves for it. */
.fone--shot{width:min(296px,84%);aspect-ratio:auto;padding:10px;border-radius:48px;
  background:linear-gradient(160deg,#33363F,#14161C 26%,#101218 72%,#2B2E36);
  box-shadow:0 34px 76px rgba(16,20,28,.3);overflow:visible}
.fone__screen{position:relative;aspect-ratio:390/844;border-radius:38px;overflow:hidden;background:#0B0C10}
.fone__screen::before{content:"";position:absolute;z-index:4;top:1.3%;left:50%;transform:translateX(-50%);
  width:32%;aspect-ratio:125/37;border-radius:999px;background:#0B0C10}
.fone__screen::after{content:"";position:absolute;z-index:4;bottom:.95%;left:50%;transform:translateX(-50%);
  width:35.6%;height:4px;border-radius:999px;background:rgba(20,20,24,.32)}
.fone__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  opacity:0;z-index:1;transition:opacity .6s var(--ease)}
.fone__shot.is-on{opacity:1;z-index:2}
/* the outgoing screen holds full opacity underneath while the next one fades in
   over it, so the handset never dips to black between brands */
.fone__shot.was-on{opacity:1;transition:none}
.fone__mark{display:block;text-align:center;font-family:var(--serif);font-size:13px;font-weight:700;
  letter-spacing:.3em;color:#fff}
.fone__pill{display:block;margin:12px auto 13px;width:max-content;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.1);font-size:10px;letter-spacing:.04em;color:rgba(255,255,255,.82)}
.fone__list{display:grid;gap:11px}
.fcd{border-radius:11px;overflow:hidden;background:rgba(255,255,255,.05)}
.fcd__shot{position:relative;display:block;aspect-ratio:16/9;background:#20242C}
.fcd__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcd__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,16,.5))}
.fcd__b{padding:9px 11px 11px}
.fcd__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fcd__top b{font-family:var(--serif);font-size:14px;font-weight:700}
.fcd__rate{font-size:9.5px;font-weight:600;color:#fff;white-space:nowrap}
.fcd__rate em{font-style:normal;color:rgba(255,255,255,.5);margin-left:3px}
.fcd__m{display:block;margin-top:3px;font-size:8.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.52)}
.fcd__t{display:flex;gap:5px;margin-top:9px}
.ft{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:25px;
  border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:9.5px;font-weight:600}
.ft u{text-decoration:none;font-size:8.5px;color:rgba(255,255,255,.55)}
.ft--prime{background:var(--blue);border-color:var(--blue)}
.ft--prime u{color:rgba(255,255,255,.85)}

/* 04 everybody wins */
.wins{display:grid;gap:22px;margin-top:44px}
@media(min-width:860px){.wins{grid-template-columns:repeat(3,1fr)}}
.win{display:flex;flex-direction:column;border-radius:3px;overflow:hidden;background:#EFEFF1}
.win__shot{display:block;aspect-ratio:4/3;overflow:hidden;background:#20242C}
.win__shot img{width:100%;height:100%;object-fit:cover}
.win__b{display:flex;flex-direction:column;flex:1;padding:30px 30px 32px}
.win .ul{color:var(--muted);font-size:10.5px;letter-spacing:.22em}
.win .dh--sm{margin:16px 0 0;font-size:clamp(24px,2.3vw,30px);line-height:1.1}
.win p{margin:18px 0 0;font-size:15px;line-height:1.65;color:var(--muted)}
/* the short rule, then the way on: it is the same move on all three */
.win__go{margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:10px;
  align-self:start;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);position:relative}
.win__go::before{content:"";position:absolute;left:0;top:0;width:44px;height:1px;background:var(--blue)}
.win__go i{width:14px;height:8px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,2px);transition:transform .2s var(--ease)}
.win__go:hover i{transform:rotate(45deg) translate(1px,-1px)}

/* 06 good taste pays, on the dark */
.lsplit__eb{display:block;margin-bottom:16px;color:rgba(255,255,255,.55)}
/* the room runs the full width of the section, and the earnings screen sits
   on top of it */
/* Recommend & earn ------------------------------------------------------
   A flat panel, no photograph behind the words. The motion follows the Koto
   Mews case study: every line of type sits in its own clipping band and is
   pushed up into view, and the index row underneath draws its rules left to
   right before the labels arrive. */
.taste{position:relative;overflow:hidden;background:#101218;color:#fff}

/* one line of type, masked by its own band. the <i> carries the travel so the
   band itself can keep the text's own line-height */
.rl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rl > i{display:block;font-style:inherit;transform:translateY(112%);
  transition:transform .95s cubic-bezier(.22,1,.36,1)}
.rv.in .rl > i{transform:none}
@media(prefers-reduced-motion:reduce){.rl > i{transform:none;transition:none}}

.taste__eb{display:block;overflow:hidden;color:rgba(255,255,255,.5)}
.taste__eb > i{display:block;font-style:normal;transform:translateY(120%);
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in .taste__eb > i{transform:none}

.taste__body{display:grid;gap:40px;margin-top:38px}
@media(min-width:960px){.taste__body{grid-template-columns:1.12fr .88fr;gap:66px;align-items:end}}
.taste__h{font-size:clamp(36px,6.4vw,88px);line-height:1}
.taste__h em{color:var(--blue-on,#93A6FF)}
.taste__h .rl:nth-child(2) > i{transition-delay:.12s}
/* `.home .lede` sets a dark muted gray and outranks `.lede--on`, which left
   this paragraph nearly invisible on the black panel */
.taste .lede--on,.taste__lede{margin-top:26px;max-width:42ch;color:rgba(255,255,255,.88)}
.taste__lede > .rl > i{transition-delay:.26s}

/* the picture is uncovered rather than faded, and settles out of a slight
   over-scale, so it arrives with the type instead of after it */
.taste__fig{margin:0;overflow:hidden;border-radius:16px;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1) .16s}
.rv.in .taste__fig{clip-path:inset(0 0 0 0)}
.taste__hand{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  transform:scale(1.07);transition:transform 1.5s cubic-bezier(.22,1,.36,1) .16s}
.rv.in .taste__hand{transform:none}
@media(prefers-reduced-motion:reduce){
  .taste__fig{clip-path:none;transition:none}.taste__hand{transform:none;transition:none}
}

/* the four steps as an index, with the blue rule still running across them */
.idx{position:relative;list-style:none;margin:64px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:0 28px}
.idx::after{content:"";position:absolute;left:0;top:0;height:2px;z-index:2;background:var(--blue);
  width:calc(100% * var(--p,0));transition:width .6s var(--ease)}
.idx__i{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 24px 0 0}
.idx__i::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease) calc(.34s + var(--i) * .09s)}
.rv.in .idx__i::before{transform:none}
.idx__i > *{opacity:0;transform:translateY(15px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .35s var(--ease);
  transition-delay:calc(.44s + var(--i) * .09s)}
.rv.in .idx__i > *{opacity:1;transform:none}
/* the four are stages, not a ranking, so they carry no numbers */
.idx__t{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-on,#93A6FF);opacity:.62}
.idx__i em{font-style:normal;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.4)}
.idx__i.is-on .idx__t{opacity:1}
.idx__i.is-on em{color:rgba(255,255,255,.8)}
@media(prefers-reduced-motion:reduce){
  .idx::after{width:100%}
  .idx__i::before{transform:none;transition:none}
  .idx__i > *{opacity:1;transform:none;transition:none}
  .idx__t{opacity:1}.idx__i em{color:rgba(255,255,255,.8)}
}
@media(max-width:860px){
  .idx{grid-template-columns:1fr 1fr;gap:0 22px}
  .idx::after{display:none}
}
@media(max-width:520px){.idx{grid-template-columns:1fr}}

.taste__end{margin-top:52px}
.taste__end .btn{opacity:0;transform:translateY(15px);
  transition:opacity .7s var(--ease) .82s,transform .7s var(--ease) .82s,background .2s var(--ease)}
.rv.in .taste__end .btn{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.taste__end .btn{opacity:1;transform:none;transition:none}}
/* 07 the ask */
.lend{text-align:center}
.lend .lede{margin:16px auto 0}
.lend .btns{justify-content:center;margin-top:28px}

@media(max-width:760px){
  .lhero{padding:0;align-items:flex-end}
  .lhero__in{padding-top:64px;padding-bottom:17svh}
  .lhero__scrim{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.45) 100%)}
  .lhero__acts{gap:18px;margin-top:30px}
}

/* the partner pages: restaurants, hotels and residences ------------------ */
.shero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:#0E1116}
.shero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,10,14,.44) 0%,rgba(8,10,14,0) 18%),
  linear-gradient(to top,rgba(8,10,14,.74) 0%,rgba(8,10,14,.44) 42%,rgba(8,10,14,.12) 100%)}
.shero__in{position:relative;padding-top:120px;padding-bottom:64px}
.shero__eb{display:block;margin-bottom:18px;color:rgba(255,255,255,.66)}
.shero .dh--xl{color:#fff;max-width:15ch;font-size:clamp(38px,6.6vw,82px)}
.shero .dh--xl em{color:#fff;opacity:.72}
.shero__p{margin:24px 0 32px;max-width:48ch;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.8)}

/* three across, with or without a picture */
.trio{display:grid;gap:22px;margin-top:40px}
@media(min-width:860px){.trio{grid-template-columns:repeat(3,1fr)}}
.tri{display:flex;flex-direction:column;gap:12px}
.tri__shot{display:block;aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:#20242C}
.tri__shot img{width:100%;height:100%;object-fit:cover}
.tri__n{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--blue)}
.tri p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.tri .dh--sm{margin:0}

/* product visuals -------------------------------------------------------
   Three cards built in markup rather than photographed, so they share one
   frame and stay legible at any width. Sized in container units, so the
   contents scale with the card instead of needing a breakpoint each. */
.pv{position:relative;display:block;aspect-ratio:4/3;border-radius:3px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);container-type:inline-size}
.pv__in{position:absolute;inset:0;padding:6cqw;display:flex;flex-direction:column;gap:3.4cqw}
.pv__hd{font-size:3cqw;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* a real screenshot fills the frame instead of the built examples */
.pv--shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* the page moves the way somebody reads it: a pause on arrival, a flick to the
   next row, a longer look, then an unhurried drift back. the stops are the
   rows themselves, and each leg has its own easing so it never crawls at a
   constant rate. the image is 1:1.667 in a 4:3 frame, so -55% is the floor. */
.pv--pan{background:#0B0C10}
.pan{position:absolute;top:0;left:0;width:100%;height:auto;will-change:transform;
  animation:panmood 17s infinite both;animation-play-state:paused}
.pv--pan.is-live .pan{animation-play-state:running}
@keyframes panmood{
  0%   {transform:translateY(0);      animation-timing-function:cubic-bezier(.24,.9,.26,1)}
  8%   {transform:translateY(0);      animation-timing-function:cubic-bezier(.24,.9,.26,1)}
  14%  {transform:translateY(-9%);    animation-timing-function:linear}
  30%  {transform:translateY(-9%);    animation-timing-function:cubic-bezier(.22,.88,.28,1)}
  37%  {transform:translateY(-29%);   animation-timing-function:linear}
  54%  {transform:translateY(-29%);   animation-timing-function:cubic-bezier(.26,.92,.24,1)}
  61%  {transform:translateY(-50%);   animation-timing-function:linear}
  80%  {transform:translateY(-50%);   animation-timing-function:cubic-bezier(.5,0,.28,1)}
  92%  {transform:translateY(0);      animation-timing-function:linear}
  100% {transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.pan{animation:none}}

/* 1. the pre-arrival email, laid out the way an open message reads in Gmail:
      subject and Inbox chip on top, then avatar, sender with address, "to me",
      the time and the star on the right, and Reply / Forward at the foot. */
.pv--mail{background:#fff}
.pv--mail .pv__in{padding:6cqw 6cqw 5cqw;gap:0}
.gm__sub{display:flex;align-items:center;gap:3cqw;font-size:4.6cqw;font-weight:400;
  line-height:1.2;color:#202124;letter-spacing:-.01em}
.gm__sub i{flex:0 0 auto;font-style:normal;padding:1cqw 2.4cqw;border-radius:1cqw;
  background:#e8eaed;font-size:2.4cqw;color:#5f6368}
.gm__hd{display:flex;align-items:flex-start;gap:3cqw;margin-top:4.6cqw}
.gm__av{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:9cqw;height:9cqw;border-radius:50%;background:#7b1d1d;color:#fff;
  font-family:var(--sans);font-size:4cqw;font-weight:500}
.gm__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4cqw}
.gm__nm{display:flex;align-items:baseline;gap:1.4cqw;min-width:0}
.gm__nm b{font-size:3.3cqw;font-weight:700;color:#202124;white-space:nowrap}
.gm__nm u{text-decoration:none;font-size:2.8cqw;color:#5f6368;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm__who i{font-style:normal;font-size:2.8cqw;color:#5f6368}
.gm__who i em{font-style:normal;font-size:2.2cqw}
.gm__meta{flex:0 0 auto;display:flex;align-items:center;gap:2.4cqw;
  font-size:2.8cqw;color:#5f6368;white-space:nowrap}
.gm__meta b{font-weight:400;font-size:3.4cqw;color:#9aa0a6}
.em__bd{margin-top:5cqw;font-size:3.4cqw;line-height:1.6;color:#202124}
.em__cta{align-self:flex-start;margin-top:4.6cqw;padding:2.6cqw 5cqw;border-radius:1.2cqw;
  background:var(--blue);color:#fff;font-size:2.8cqw;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase}
.gm__acts{display:flex;gap:2.6cqw;margin-top:6cqw}
.gm__acts i{font-style:normal;padding:2cqw 5cqw;border:1px solid #dadce0;border-radius:999px;
  font-size:2.9cqw;color:#3c4043}

/* 3. the concierge's own view of what has been booked */
.dk{flex:1;display:flex;flex-direction:column}
.dk__r{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6cqw 2.4cqw;
  padding:3cqw 0;border-top:1px solid var(--line)}
.dk__r b{grid-column:1;font-size:3.2cqw;font-weight:600;color:var(--ink)}
.dk__r i{grid-column:1;grid-row:2;font-style:normal;font-size:2.9cqw;color:var(--muted)}
.dk__r u{grid-column:2;grid-row:1;text-decoration:none;font-size:2.6cqw;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.dk__r u.is-ok{color:var(--good)}
.dk__r em{grid-column:2;grid-row:2;justify-self:end;font-style:normal;
  font-size:3.2cqw;font-weight:600;color:var(--ink)}

/* the two ways to earn */
.ways{display:grid;gap:20px;margin-top:36px}
@media(min-width:860px){.ways{grid-template-columns:1fr 1fr}}
.way{display:flex;flex-direction:column;padding:32px 30px 28px;border:1px solid var(--line);
  border-radius:3px;background:#fff}
.way--prime{background:var(--ink);border-color:var(--ink);color:#fff}
.way__tag{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.way--prime .way__tag{color:rgba(255,255,255,.62)}
.way .dh--sm{margin:14px 0 0}
.way--prime .dh--sm{color:#fff}
.way p{margin:14px 0 0;font-size:15px;line-height:1.62;color:var(--muted)}
.way--prime p{color:rgba(255,255,255,.76)}
/* where the booking fee goes: one bar, three slices, drawn to scale.
   the flex sizes are longhands on purpose: the shorthand with a var() in it is
   thrown away by the parser. the name is feebar, not split, because .split is
   already a two-column grid with a 64px gap. */
.feebar{display:flex;align-items:stretch;margin-top:24px;border-radius:3px;overflow:hidden}
/* it draws itself when the section arrives, the same wipe the rate bars use,
   so the proportion is read rather than just seen sitting there */
.rvjs .feebar{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.22,1,.36,1) .28s}
.rvjs .rv.in .feebar{clip-path:inset(0 0 0 0)}
.rvjs .feebar__key{opacity:0;transition:opacity .5s var(--ease) .9s}
.rvjs .rv.in .feebar__key{opacity:1}
@media(prefers-reduced-motion:reduce){
  .rvjs .feebar{clip-path:none;transition:none}
  .rvjs .feebar__key{opacity:1;transition:none}
}
.feebar__s{box-sizing:border-box;flex:0 0 auto;width:calc(var(--w) * 1%);min-width:0;
  display:flex;align-items:center;height:46px;padding:0 13px;
  background:rgba(255,255,255,.13);box-shadow:inset 1px 0 0 rgba(255,255,255,.28);
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff}
.feebar__s:first-child{box-shadow:none}
.feebar__s--you{background:var(--blue)}
.feebar__key{display:flex;margin-top:10px}
.feebar__key span{box-sizing:border-box;flex:0 0 auto;width:calc(var(--w) * 1%);min-width:0;padding-right:12px;
  font-size:9.5px;font-weight:600;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.feebar__key span:first-child{color:rgba(255,255,255,.82)}
@media(max-width:420px){
  .feebar__s{height:40px;padding:0 9px;font-size:13px}
  .feebar__key span{font-size:8.5px;letter-spacing:.08em;padding-right:7px}
}

/* four reasons */
/* the hero carries the product beside the words, and is no taller than it
   needs to be. a full screen of scenery before anything useful is a cost. */
.shero--split{min-height:100svh;align-items:center}
.shero--split .shero__in{display:grid;gap:44px;align-items:center;
  padding-top:132px;padding-bottom:84px}
@media(min-width:1000px){
  .shero--split .shero__in{grid-template-columns:1.1fr .9fr;gap:70px;
    padding-top:150px;padding-bottom:104px}
}
.shero--split .dh--xl{max-width:13ch}
.shero--split .shero__p{max-width:44ch}
.shero__art{display:flex;justify-content:center}
.fone--hero{width:min(280px,72%);margin:0}
@media(max-width:999px){.fone--hero{width:min(240px,62%)}}

/* the demonstration: three steps, one phone, no real booking behind it */
.lsplit--demo{margin-top:44px;align-items:center;gap:40px}
@media(min-width:960px){.lsplit--demo{grid-template-columns:1fr 1fr;gap:64px}}
.demo__steps{list-style:none;display:flex;gap:6px;margin:0 0 26px;padding:0;flex-wrap:wrap;
  justify-content:center}
.demo__s{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.demo__s em{font-style:normal;color:var(--faint)}
.demo__s:hover{border-color:var(--ink);color:var(--ink)}
.demo__s.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.demo__s.is-on em{color:rgba(255,255,255,.6)}
.fone--demo{width:min(290px,84%);margin:0;cursor:pointer}
.demo__note{margin:20px 0 0;font-size:11.5px;letter-spacing:.01em;color:var(--faint);text-align:center}
.demo__say .dh--sm{margin:0}

/* On a phone the demo goes above the list: the phone is the thing being
   explained, and four paragraphs before you reach it is a long wait. The list
   then reads two across, ruled into cells, because these are four separate
   points rather than four steps in an order.
   display:contents lets the heading, the lede and the list be reordered
   against the phone without moving any of them in the markup. */
@media(max-width:959px){
  .lsplit--demo{display:flex;flex-direction:column;gap:0}
  .lsplit--demo > .demo__say{display:contents}
  .lsplit--demo > .demo__say > .dh,
  .lsplit--demo > .demo__say > .h2{order:1}
  .lsplit--demo > .demo__say > .lede{order:2;margin-top:18px}
  .lsplit--demo > .demo{order:3;margin-top:30px}
  .lsplit--demo > .demo__say > .bullets{order:4;margin-top:34px;
    display:grid;grid-template-columns:1fr 1fr;column-gap:0}
  .lsplit--demo > .demo__say > .bullets li{padding:15px 14px 16px 0;
    border-top:1px solid rgba(255,255,255,.15);border-bottom:0}
  .lsplit--demo > .demo__say > .bullets li:nth-child(even){
    padding-left:14px;padding-right:0;border-left:1px solid rgba(255,255,255,.15)}
  .lsplit--demo > .demo__say > .bullets p{font-size:13px;line-height:1.5}
  .lsplit--demo > .demo__say > .bullets b{font-size:13.5px}
}
.demo__say p{margin:14px 0 0;max-width:40ch;font-size:15px;line-height:1.65;color:var(--muted)}

/* three screens of the same build, overlapping, so the sequence reads at a
   glance without anything having to move */
/* the three sit a little wider than the column so the outer two can move
   further apart without shrinking */
.fan{position:relative;width:112%;margin-left:-6%;padding-bottom:92%}
.fan__p{position:absolute;top:0;margin:0;width:37%;padding:2.2%;border-radius:10.5%/5%;
  background:linear-gradient(160deg,#33363F,#14161C 26%,#101218 72%,#2B2E36)}
.fan__s{display:block;position:relative;aspect-ratio:390/844;border-radius:8.6%/4.1%;
  overflow:hidden;background:#0B0C10}
.fan__s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* the screen runs to the edge of the frame, so the island and the home bar are
   drawn on top of it rather than left as a band in the capture */
.fan__s::before{content:"";position:absolute;z-index:3;top:1.3%;left:50%;transform:translateX(-50%);
  width:32%;aspect-ratio:125/37;border-radius:999px;background:#0B0C10}
.fan__s::after{content:"";position:absolute;z-index:3;bottom:.95%;left:50%;transform:translateX(-50%);
  width:35.6%;height:3px;border-radius:999px;background:rgba(255,255,255,.34)}
/* the stack runs front to back from the left, so the first screen is the one
   you read: full size and the deepest shadow, each one behind it a little
   smaller and lighter */
/* each one shows about 85% of itself: enough to read the headline on the
   middle screen and the whole booking panel on the last */
.fan__p--a{left:0;top:6%;z-index:3;box-shadow:0 30px 66px rgba(16,20,28,.3)}
.fan__p--b{left:31.5%;top:1.5%;transform:scale(.96);transform-origin:50% 0;z-index:2;
  box-shadow:0 24px 52px rgba(16,20,28,.22)}
.fan__p--c{left:63%;top:10%;transform:scale(.9);transform-origin:50% 0;z-index:1;
  box-shadow:0 18px 40px rgba(16,20,28,.18)}
.fan__note{margin-top:14px;text-align:center;font-size:11.5px;font-weight:400;
  letter-spacing:.01em;text-transform:none;color:var(--faint)}
@media(max-width:620px){.fan{width:100%;margin-left:0;padding-bottom:112%}
  .fan__p{width:50%}.fan__p--b{left:25%}.fan__p--c{left:50%}}

/* four brands wearing the same product. They step down from left to right so
   the row reads as one thing re-skinned four times rather than four products.
   The renders carry their own device, so there is no drawn frame here. */
/* the padding that reserves the height resolves against the COLUMN's width,
   while the handsets size against the fan's own (wider) width, so this is
   102 rather than the 89 the fan's own proportions would suggest */
.bfan{position:relative;width:114%;margin-left:-7%;padding-bottom:102%}
.bfan__p{position:absolute;top:0;margin:0;width:34%}
.bfan__p img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 34px rgba(16,20,28,.26))}
.bfan__p:nth-child(1){left:0;top:0;z-index:4}
.bfan__p:nth-child(2){left:22%;top:5.5%;z-index:3}
.bfan__p:nth-child(3){left:44%;top:11%;z-index:2}
.bfan__p:nth-child(4){left:66%;top:16.5%;z-index:1}
/* the record no longer tucks under a single handset, so it sits below */
.cxrun__v:has(.bfan) .rec{margin-top:26px}
/* on a phone they close right up: a sliver of each is enough to see the
   branding change, and the point is the change rather than the screen */
@media(max-width:620px){
  .bfan{width:100%;margin-left:0;padding-bottom:110%}
  .bfan__p{width:46%}
  .bfan__p:nth-child(2){left:18%;top:4%}
  .bfan__p:nth-child(3){left:36%;top:8%}
  .bfan__p:nth-child(4){left:54%;top:12%}
}

/* the real listing inside the phone. the header and the tab bar stay put the
   way the app fixes them; only the body between them moves, driven from script
   so the browsing can pause rather than run at one speed. */
.scr{display:flex;flex-direction:column;background:#F7F5F0}
.scr__head,.scr__foot{display:block;width:100%;height:auto;flex:0 0 auto}
.scr__win{position:relative;flex:1 1 auto;overflow:hidden}
.scr__strip{position:absolute;top:0;left:0;width:100%;height:auto;will-change:transform}
/* the free time the guest takes. it fills the way a pressed control fills,
   rather than drawing a ring around it. */
.scr__win{container-type:inline-size}
/* the pressed time chip, painted exactly over the real one: the app fills a
   free slot with a warm tint and keeps its gold rule, so the demo does the same */
.scr__pick{position:absolute;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;border-radius:999px;
  background:rgb(235,232,223);border:1px solid rgb(137,118,74);color:rgb(4,16,33);
  font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:3.6cqw;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .12s linear}
.scr__pick.is-on{opacity:1}
/* the restaurant's own page, the screen a press opens */
.scr__open{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease)}
.scr__open.is-on{opacity:1}

/* one block of words beside the phone, centered against it */
.lsplit--demo{align-items:center;gap:40px}
@media(min-width:960px){.lsplit--demo{grid-template-columns:1.1fr .9fr;gap:70px}}
.lsplit--demo .demo{display:flex;flex-direction:column;align-items:center;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.fone--demo{width:min(290px,84%);margin:0}
.demo__note{margin:18px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);text-align:center}
.demo__say .dh{margin:0}
.demo__say .lede{margin-top:20px;max-width:46ch}
@media(max-width:959px){
  .lsplit--demo .demo{order:2}
  .lsplit--demo .demo__say{order:1}
}

/* the line that carries a section, set large on the light ground */
.pull{margin:44px 0 6px;max-width:26ch;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(25px,3.1vw,40px);line-height:1.16;letter-spacing:-.02em;color:var(--blue)}
.quad{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:26px}
@media(min-width:860px){.quad{grid-template-columns:1fr 1fr;gap:34px 44px}}
.qd{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.qd__n{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--blue)}
.qd .dh--sm{margin:0}
.qd p{margin:0;font-size:14.5px;line-height:1.62;color:var(--muted)}

.artshot{display:block;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:#20242C}
.artshot img{width:100%;height:100%;object-fit:cover}
.fone__note{display:block;margin-top:12px;text-align:center;font-size:8.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* the calculator both pages share */
.calc{margin-top:38px;padding:34px 30px 30px;border:1px solid var(--line);border-radius:3px;background:#fff}
.calc__out{display:grid;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--line)}
@media(min-width:760px){.calc__out{grid-template-columns:repeat(3,1fr);gap:26px}}
.calc__o{display:flex;flex-direction:column;gap:7px}
.calc__o .ul{color:var(--muted);font-size:10px}
.calc__o b{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1}
.calc__o--big b{color:var(--blue);font-size:clamp(36px,4.6vw,56px)}
.calc__in{display:grid;gap:22px;padding:28px 0 4px}
@media(min-width:760px){.calc__in{grid-template-columns:repeat(3,1fr);gap:26px}}
.calc__f{display:flex;flex-direction:column;gap:10px}
.calc__f .ul{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  color:var(--muted);font-size:10px;line-height:1.4}
.calc__f em{font-style:normal;font-family:var(--serif);font-size:19px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.calc__f input[type=range]{width:100%;height:2px;border-radius:999px;background:var(--line);
  appearance:none;-webkit-appearance:none;outline:none;cursor:pointer}
.calc__f input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(16,20,28,.25);cursor:grab;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.calc__f input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;cursor:grab;
  box-shadow:0 2px 8px rgba(16,20,28,.25);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
/* held: the thumb swells a little, and settles back when you let go */
.calc__f input[type=range].is-held{cursor:grabbing}
.calc__f input[type=range].is-held::-webkit-slider-thumb{transform:scale(1.28);cursor:grabbing;
  box-shadow:0 4px 14px rgba(16,20,28,.3),0 0 0 6px rgba(18,39,192,.12)}
.calc__f input[type=range].is-held::-moz-range-thumb{transform:scale(1.28);cursor:grabbing;
  box-shadow:0 4px 14px rgba(16,20,28,.3),0 0 0 6px rgba(18,39,192,.12)}
.calc__f input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(18,39,192,.25)}
.calc__note{margin:22px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.calc__fine{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--faint)}

@media(max-width:760px){
  .shero__in{padding-top:92px;padding-bottom:48px}
  .calc{padding:26px 20px 24px}
}

/* the multiplier: one claim, given room */
.mult{background:#101218;color:#fff;text-align:center}
.mult__eb{display:block;color:rgba(255,255,255,.55)}
.mult .dh{margin-top:16px}
.mult__q{margin:36px auto 0;max-width:22ch;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(26px,3.4vw,42px);line-height:1.18;letter-spacing:-.02em;color:var(--blue-on,#93A6FF)}
.mult .lede--on{margin:28px auto 0;max-width:58ch}

/* the booking demo on the same black as the loyalty band, so it does not read
   as another copy-and-bullets panel straight after the one above it */
.sec--night{background:#101218;color:#fff}
.sec--night .dh{color:#fff}
.sec--night .dh em{color:var(--blue-on,#93A6FF)}
.sec--night .lede{color:rgba(255,255,255,.82)}
.sec--night .bullets li{border-top-color:rgba(255,255,255,.15)}
.sec--night .bullets li:last-child{border-bottom-color:rgba(255,255,255,.15)}
.sec--night .bullets h3{color:#fff}
.sec--night .bullets p,.sec--night .bullets--flat p{color:rgba(255,255,255,.66)}
.sec--night .bullets--flat b{color:#fff}
.sec--night .ul{color:rgba(255,255,255,.55)}
/* the handset bezel is nearly this black, so it gets a rim instead of a shadow */
.sec--night .fone--shot{box-shadow:0 34px 76px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}

/* the hero's small print, under the button */
.shero__fine{margin:20px 0 0;font-size:12.5px;letter-spacing:.01em;color:rgba(255,255,255,.62)}

/* where the guests come from: four steps on one line */
.chain{position:relative;list-style:none;margin:40px 0 0;padding:0;display:grid;gap:26px}
@media(min-width:900px){
  .chain{grid-template-columns:repeat(4,1fr);gap:0 26px}
  .chain::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:1px;background:var(--line)}
}
.ch{position:relative;display:flex;flex-direction:column;gap:9px;padding-top:0}
@media(min-width:900px){.ch{padding-top:30px}}
.ch__n{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--blue)}
@media(min-width:900px){
  .ch__n{position:absolute;top:0;left:0;background:var(--ground);padding-right:12px;line-height:18px}
  .sec--off .ch__n{background:#F1F1F3}
}
.ch__h{margin:0;font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ch p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* the partner strip, and the way through to all of them */
.mark--partners{border-top:1px solid var(--hair)}
.mark__foot{margin-top:30px;text-align:center}
.mark__foot .tlink{font-size:16px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none}
.ul.mark__t.tlink,a.mark__t{text-decoration:none}

/* the phone wearing one property's brand after another ------------------- */
.skin__cap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px}
.skin__nm{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.skin__dots{display:flex;gap:6px}
.skin__dots i{width:5px;height:5px;border-radius:50%;background:var(--line);transition:background .3s var(--ease)}
.skin__dots i.is-on{background:var(--blue)}

/* the cities we are not in yet. said once, quietly, under the rail. */
.soon{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:-6px 0 0;
  padding-top:22px;border-top:1px solid var(--hair)}
.soon__t{flex:0 0 auto;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.soon__l{font-size:15px;line-height:1.6;color:var(--muted)}
@media(max-width:620px){.soon{gap:6px}.soon__t{flex:0 0 100%}.soon__l{font-size:14.5px}}



/* ==========================================================================
   Companies. Photography, one demonstration, one calculator.
   ========================================================================== */

/* hero: a full-frame photograph, as on the other partner pages -------------- */
.shero .cxlink{margin:18px 0 0}
.cxlink a{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.06em;color:var(--blue);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease)}
.cxlink a:hover{border-bottom-color:currentColor}
.cxlink .btn__go{width:7px;height:7px}
.cxlink--on a{color:#fff}

/* the white-label page ------------------------------------------------------- */
.wl{margin:0;width:100%;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 26px 60px -30px rgba(14,17,22,.4),inset 0 0 0 1px var(--line);container-type:inline-size}
.wl__hd{display:flex;align-items:baseline;gap:2.4cqw;padding:4.4cqw 5cqw;border-bottom:1px solid var(--line)}
.wl__hd b{font-size:3.6cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.wl__hd i{font-style:normal;font-size:3cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wl__tag{margin-left:auto;font-size:2.4cqw;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.wl__hd--dark{border-bottom-color:rgba(255,255,255,.14)}
.wl__hd--dark b{color:#fff}
.wl__hd--dark i{color:rgba(255,255,255,.55)}
.wl__rows{display:block;padding:2cqw 0}
.wl__r{display:flex;gap:3.4cqw;align-items:center;padding:3cqw 5cqw}
.wl__ph{flex:0 0 18cqw;height:18cqw;border-radius:1.6cqw;overflow:hidden;background:#20242C}
.wl__ph img{width:100%;height:100%;object-fit:cover}
.wl__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.7cqw}
.wl__tx b{font-size:3.6cqw;font-weight:600;color:var(--ink)}
.wl__tx i{font-style:normal;font-size:2.8cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.wl__t{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:1cqw}
.wl__t u{text-decoration:none;padding:1.4cqw 2.6cqw;border-radius:999px;font-size:2.7cqw;font-weight:600;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.wl__t u.is-p{background:var(--off);color:var(--muted)}
.wl__t u.is-sel{background:var(--blue);color:#fff;box-shadow:none}
.cxphone{width:min(330px,92%);margin:0 auto}
.wlphone{background:#0E1116;container-type:inline-size;display:flex;flex-direction:column;overflow:hidden}
.wlphone .wl__hd{padding:9cqw 6cqw 5cqw}
.wlphone .wl__hd b{font-size:4.6cqw}
.wlphone .wl__hd i{font-size:3.6cqw}
.wlphone .wl__rows{flex:1 1 auto}
.wlphone .wl__r{padding:4cqw 6cqw}
.wlphone .wl__ph{flex-basis:22cqw;height:22cqw;border-radius:2cqw}
.wlphone .wl__tx b{font-size:4.4cqw;color:#fff}
.wlphone .wl__tx i{font-size:3.4cqw;color:rgba(255,255,255,.5)}
.wlphone .wl__t u{font-size:3.2cqw;padding:1.8cqw 3cqw;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
.wlphone .wl__t u.is-p{background:none;color:rgba(255,255,255,.5)}
.wlphone .wl__t u.is-sel{background:var(--blue);color:#fff;box-shadow:none}
.wl__by{margin-top:auto;padding:5cqw 6cqw 7cqw;border-top:1px solid rgba(255,255,255,.12);
  font-size:3cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.wl__by b{color:rgba(255,255,255,.75)}
/* the fee note is copy, not small print */
.cxfee{margin-top:30px;max-width:62ch}

/* the organization's record --------------------------------------------------- */
.rec{margin:0;width:100%;padding:22px 22px 9px;border-radius:10px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line),0 16px 36px -26px rgba(14,17,22,.4)}
.rec__hd{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.rec__list{display:grid;gap:2px;margin-top:12px}
.rec__e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:2px 12px;padding:13px 0;
  border-top:1px solid var(--line);opacity:1;transition:opacity .45s var(--ease)}
.rec__e.is-new{opacity:0}
.rec__e b{grid-column:1;font-size:14px;font-weight:600;color:var(--ink)}
.rec__e i{grid-column:1;grid-row:2;font-style:normal;font-size:12.5px;color:var(--muted)}
.rec__e u{grid-column:2;grid-row:1;text-decoration:none;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-align:right}
.rec__e u.is-done{color:var(--good)}
.rec__e em{grid-column:2;grid-row:2;justify-self:end;font-style:normal;font-size:14px;font-weight:600;color:var(--ink)}
.rec__e em:empty{display:none}

.cxrun{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.cxrun{grid-template-columns:1fr 1fr;gap:64px}}
.cxrun__say .lede{margin-top:20px;max-width:44ch}
.cxrun__say .bullets--flat{margin-top:28px}
.cxrun__say .btn{margin-top:26px}
/* the handset carries the meaning, so it is the big element; the record is a
   small card tucked under it rather than a panel of its own */
.cxrun__v{display:flex;flex-direction:column;align-items:center;gap:0}
.cxrun__v .rec{width:min(300px,86%);margin-top:-30px;position:relative;z-index:2}
.cxrun__side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cxsig{list-style:none;margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--line);
  display:grid;gap:22px}
@media(min-width:760px){.cxsig{grid-template-columns:repeat(3,1fr);gap:32px}}
.cxsig b{display:block;font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cxsig span{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* the calculator -------------------------------------------------------------- */
.cc{display:grid;gap:30px;margin-top:38px;border:1px solid var(--line);border-radius:8px;
  background:#fff;padding:34px 30px}
@media(min-width:900px){.cc{grid-template-columns:1.05fr .95fr;gap:56px;padding:42px 40px}}
.cc__in-col{display:grid;gap:26px;align-content:start}
.cc__f{display:block}
.cc__lb{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cc__hp{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--faint)}
.cc__ctl{display:flex;align-items:center;gap:16px;margin-top:12px}
.cc__rg{flex:1;min-width:0;height:2px;border-radius:999px;background:var(--line);appearance:none;
  -webkit-appearance:none;cursor:grab}
.cc__rg::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--blue);cursor:grab;transition:transform .16s var(--ease)}
.cc__rg::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--blue);cursor:grab}
.cc__rg.is-held::-webkit-slider-thumb{transform:scale(1.28);cursor:grabbing}
.cc__rg:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(58,91,224,.28)}
.cc__num{display:inline-flex;align-items:center;gap:2px;padding:7px 11px;border:1px solid var(--line);
  border-radius:5px;background:#fff}
.cc__num i{font-style:normal;font-size:13px;color:var(--muted)}
.cc__in{width:6.5ch;border:0;background:none;text-align:right;font-family:var(--sans);
  font-size:14.5px;font-weight:600;color:var(--ink);appearance:textfield;-moz-appearance:textfield}
.cc__in::-webkit-outer-spin-button,.cc__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cc__in:focus{outline:none}
.cc__num:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(58,91,224,.16)}
.cc__f--s .cc__ctl{margin-top:9px}
.cc__more{margin-top:4px;border-top:1px solid var(--line);padding-top:20px}
.cc__more summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;cursor:pointer;list-style:none}
.cc__more summary::-webkit-details-marker{display:none}
.cc__more summary span{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--blue)}
.cc__more summary span::after{content:" +"}
.cc__more[open] summary span::after{content:" \2212"}
.cc__more summary b{font-size:12px;font-weight:500;color:var(--faint)}
.cc__more-in{display:grid;gap:20px;margin-top:22px}
.cc__note{margin:2px 0 0;font-size:11.5px;line-height:1.55;color:var(--faint)}
.cc__out{display:flex;flex-direction:column;gap:22px;align-self:start}
@media(min-width:900px){.cc__out{padding-left:44px;border-left:1px solid var(--line)}}
.cc__big b{display:block;margin-top:10px;font-family:var(--serif);font-weight:700;letter-spacing:-.03em;
  line-height:1;font-size:clamp(40px,6vw,68px);color:var(--blue);font-variant-numeric:tabular-nums}
.cc__two{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:20px;border-top:1px solid var(--line)}
.cc__o b{display:block;margin-top:9px;font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);
  font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.cc__say{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cc__fine{margin:0;font-size:11.5px;line-height:1.55;color:var(--faint)}
.cc__out .btns{margin-top:2px}

/* photography ----------------------------------------------------------------- */
/* the intro paragraph is gone, so the cards carry their own space under
   the headline. the three descriptions vary in length, so the captions
   sit on one baseline rather than floating under each image. */
.cxcards{display:grid;gap:24px;margin-top:34px;align-items:start}
@media(min-width:860px){.cxcards{grid-template-columns:repeat(3,1fr)}}
.cxcard{margin:0;display:flex;flex-direction:column}
.cxcard__ph{display:block;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#20242C}
.cxcard__ph img{width:100%;height:100%;object-fit:cover}
.cxcard figcaption{display:block;padding-top:16px}
.cxcard .dh--sm{margin:0}
.cxcard p{margin:7px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* implementation --------------------------------------------------------------- */
.cxbuild{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.cxbuild{grid-template-columns:1.05fr .95fr;gap:64px}}
.cxbuild__say .lede{margin-top:20px;max-width:44ch}
.wl--sm{max-width:420px;margin-inline:auto}

.cxlink a:focus-visible,.cxrun__side .btn:focus-visible,.cc__more summary:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.wl__t u,.rec__e,.cc__rg::-webkit-slider-thumb{transition:none}}

/* the product, with the proof points set around the handset ------------------
   Not a numbered list: five separate reasons, so they sit either side of the
   thing they describe. Each column mirrors the other exactly. */
.orb__top{max-width:none}
@media(min-width:860px){
  .orb__top{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
}
.orb__h{font-size:clamp(34px,5vw,62px)}
.orb__lede{margin:20px 0 0;max-width:46ch}
@media(min-width:860px){.orb__lede{margin:0}}

.orb{display:grid;gap:30px;margin-top:44px}
.orb__side{list-style:none;margin:0;padding:0;display:grid;gap:0}
.orb__mid{display:flex;justify-content:center}
.orb__mid .fone{width:min(300px,86%);margin:0}

.orbp{padding:20px 0;border-top:1px solid var(--line)}
.orbp:last-child{border-bottom:1px solid var(--line)}
.orbp__h{margin:0;font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:-.01em;
  line-height:1.25;color:var(--ink)}
.orbp p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* stacked: the handset first, then the five reasons in one run, all flush left
   and on one rhythm. `align-items` must not be `center` here or the middle
   column collapses to nothing and the handset disappears. */
@media(max-width:959px){
  .orb{display:flex;flex-direction:column;align-items:stretch;gap:26px}
  .orb__mid{order:1}
  .orb__side--l{order:2}
  /* the two lists butt together so the rhythm never breaks at the join */
  .orb__side--r{order:3;margin-top:-26px}
  .orb__side--l .orbp:last-child{border-bottom:0}
}

/* side by side: each column mirrors the other, no offsets, one baseline */
@media(min-width:960px){
  .orb{grid-template-columns:1fr minmax(0,300px) 1fr;gap:52px;margin-top:56px;align-items:center}
  .orb__side{align-content:center}
  .orb__side--l{text-align:right}
  .orb__side--r{text-align:left}
  .orbp p{max-width:34ch}
  .orb__side--l .orbp p{margin-left:auto}
  .orb__side--r .orbp p{margin-right:auto}
}

/* the built card visual -------------------------------------------------------
   Same frame as the photographs beside it: 4/3 and the same corner, drawn in
   markup so the type stays sharp at any size. */
.cxcard__ph--art{position:relative;display:block;background:var(--off);
  box-shadow:inset 0 0 0 1px var(--line);container-type:inline-size}
/* the earnings dashboard */
.db{background:#fff}
.db__in{position:absolute;inset:0;display:flex;flex-direction:column;padding:6cqw 6cqw 5cqw}
.db__eb{font-size:2.6cqw;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.db__lb{margin-top:3.4cqw;font-size:2.8cqw;color:var(--muted)}
.db__fig{margin-top:1cqw;font-family:var(--serif);font-size:9cqw;font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.db__chart{display:flex;align-items:flex-end;gap:3.4cqw;height:22cqw;margin-top:auto}
.db__bar{flex:1;height:calc(var(--h) * 1%);border-radius:1cqw 1cqw 0 0;background:var(--blue)}
.db__bar:last-child{background:var(--blue-dark,#2B45B4)}
.db__wk{display:flex;gap:3.4cqw;margin-top:2cqw}
.db__wk i{flex:1;font-style:normal;text-align:center;font-size:2.4cqw;color:var(--faint)}
.db__foot{margin-top:3.4cqw;padding-top:3cqw;border-top:1px solid var(--line);
  font-size:2.9cqw;font-weight:600;color:var(--ink)}

/* worldwide attribution ------------------------------------------------------
   A beat between the rates and the rollout, so the earning is not read as
   stopping at the property's own city. Two columns: the argument, and a small
   dark network beside it with one booking running around it. */
.watt{padding:56px 0;position:relative;overflow:hidden}
@media(min-width:900px){.watt{padding:96px 0}}
.watt__eb{display:block;margin-bottom:16px;color:rgba(255,255,255,.6)}
.watt__h{font-size:clamp(26px,3.2vw,40px);line-height:1.14}
.watt__say .lede{margin-top:20px;max-width:46ch}
.watt__cap{margin:22px 0 0;font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.68)}
.watt__in{position:relative;z-index:1}

/* The network is the ground the section stands on, edge to edge, with the
   booking walking it behind the words rather than beside them. */
.eweb{position:absolute;inset:0;margin:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;opacity:.7}
.eweb canvas{display:block;width:100%;height:100%}


/* the four-step rollout ------------------------------------------------------
   Headlines first: the row of steps is the section, and one paragraph answers
   at a time. Every paragraph is in the markup, so with no script running they
   simply stack and nothing is lost. */
.rout{margin:34px 0 0}
.rout__row{display:flex;flex-wrap:wrap;gap:0;position:relative;--p:.25;
  border-bottom:1px solid var(--line)}
.rout__row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:calc(var(--p) * 100%);background:var(--blue);
  transition:width .42s var(--ease)}
.rout__t{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;
  padding:14px 22px 14px 0;font:inherit;color:var(--muted);cursor:pointer;
  display:flex;align-items:baseline;gap:9px;text-align:left;
  transition:color .22s var(--ease)}
.rout__t i{font-style:italic;font-size:12px;font-weight:600;color:var(--faint);
  transition:color .22s var(--ease)}
.rout__t b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.rout__t:hover{color:var(--ink)}
.rout__t[aria-selected="true"]{color:var(--ink)}
.rout__t[aria-selected="true"] i{color:var(--blue)}

.rout__b{position:relative;margin:26px 0 0;min-height:4.6em}
.rout__p{margin:0;position:absolute;left:0;top:0;right:0;max-width:44ch;
  font-size:18px;line-height:1.55;color:var(--muted);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.rout__p.is-on{opacity:1;transform:none;pointer-events:auto}

/* with no script, nothing is hidden and nothing overlaps */
html:not(.rvjs) .rout__p{position:static;opacity:1;transform:none;margin:0 0 14px}

@media(max-width:700px){
  /* four steps will not sit on one line at this width, and wrapping them into
     a ragged row reads as a mistake. Two by two, divided by the grid itself,
     so each one is plainly a thing to press. */
  .rout__row{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
  .rout__row::after{display:none}
  .rout__t{padding:16px 14px;align-items:center;gap:7px;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .rout__t:nth-child(2n){border-right:0}
  .rout__t:nth-child(n+3){border-bottom:0}
  .rout__t b{font-size:15px}
  .rout__t[aria-selected="true"]{background:var(--blue);color:#fff}
  .rout__t[aria-selected="true"] i{color:rgba(255,255,255,.75)}
  .rout__b{min-height:6.4em;margin-top:20px}
  .rout__p{font-size:17px}
}

/* Real Head has no italic cut, so every <em> in a display heading is a
   synthesised oblique: the browser skews the upright. The skew pushes the last
   glyph past the advance width the box was measured from, and the tail of an
   "s" or a "y" gets shaved off at the edge. A sliver of room on the right, in
   em units so it scales with the type, gives the lean somewhere to go. */
.dh em,.h1 em,.h2 em,.intro__t em,.watt__h em,.vhero__h em{
  padding-right:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Safari on iOS synthesises the lean differently again and shaves the last
   glyph even with that room, so the heading itself keeps a hair in reserve.
   On a line that ends in an <em> the gap is invisible; on one that does not,
   it is a fifth of a space. */
.dh,.h1,.h2,.vhero__h,.watt__h,.intro__t{padding-right:.04em}

/* ==========================================================================
   Legal documents (privacy, accessibility): one readable column under the
   page head, numbered section heads, hairline rules between sections.
   ========================================================================== */
.doc__in{max-width:720px;margin:0 auto;font-size:16px;line-height:1.65;color:var(--muted)}
.doc__in p{margin:0 0 14px}
.doc__intro{font-size:18px;color:var(--ink)}
.doc__in a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.doc__h{display:flex;gap:16px;align-items:baseline;margin:48px 0 16px;padding-top:28px;border-top:1px solid var(--line);
  font-size:clamp(22px,2.4vw,28px);line-height:1.15;color:var(--ink)}
.doc__in > .doc__h:first-child,.doc__in > div:first-child > .doc__h{margin-top:0}
.doc__h i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--blue);min-width:28px}
.doc__in h3{margin:26px 0 8px;font-size:18px;color:var(--ink)}
.doc__in ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.doc__in li{margin:0 0 6px}
.doc__dl{margin:0 0 16px}
.doc__dl dt{margin:18px 0 4px;font-weight:600;color:var(--ink)}
.doc__dl dd{margin:0}
.doc__note{margin:40px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--ground)}
.doc__note p{margin:0 0 6px}
.doc__note p:last-child{margin:0}
.doc__note b{color:var(--ink)}
.doch__meta{margin:18px 0 0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.doc__table{width:100%;margin:4px 0 18px;border-collapse:collapse;font-size:15px;line-height:1.5}
.doc__table th{padding:0 16px 10px 0;text-align:left;vertical-align:bottom;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.doc__table td{padding:14px 16px 14px 0;vertical-align:top;border-top:1px solid var(--line)}
.doc__table td:first-child{width:52%;color:var(--ink)}
@media(max-width:560px){.doc__table{font-size:14px}.doc__table td:first-child{width:50%}}
/* venue tiles that open the venue's page in the app */
a.rtile,a.wtile{display:block;color:inherit;text-decoration:none}