/* ══ THE HOME PAGE AND THE SITE FOOTER ═══════════════════════════════
   Design handoff of 4 Oct 2026 (design/handoff-home-footer). Colours fall
   back to the token values; the widgets' colour controls default to the
   matching Global Colours so Site Settings wins. */
.phh { --phh-ink: var(--ink, #16181f); --phh-ink2: var(--ink-2, #5b6070); --phh-ink3: var(--ink-3, #8f95a6); --phh-line: var(--line, #e4e6ec); --phh-line2: var(--line-2, #d3d7e0); --phh-pink: var(--pink, #e8568a); --phh-pinkp: var(--pink-press, #c9376e); --phh-pinks: var(--pink-soft, #fdeef4); --phh-surface: var(--surface, #f6f7f9); --phh-dark: var(--dark, #16181f); --phh-open: var(--open, #1f7a4d); --phh-opens: var(--open-soft, #e8f4ed); --phh-navy: var(--navy-ink, #1b2a4a); color: var(--phh-ink); }
.phh-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.phh-cap { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--phh-pinkp); }
.phh-sh { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.phh-sh h2 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; }
.phh-sh p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--phh-ink2); max-width: 560px; }
.phh-sh .phh-more { margin-left: auto; flex-shrink: 0; font-size: 14px; font-weight: 700; white-space: nowrap; padding-bottom: 4px; color: var(--phh-pinkp); text-decoration: none; }
.phh-rail { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.phh-rail::-webkit-scrollbar { display: none; }
.phh-rail > * { scroll-snap-align: start; flex-shrink: 0; }
.phh-pic { background: #cfd5de center / cover no-repeat; }
/* hero */
.phh-hero { background: linear-gradient(180deg, #f3f6fb 0%, #fff 100%); padding: 40px 0 34px; }
.phh-hg { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 52px; align-items: center; }
.phh-h1 { margin: 16px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.02; text-wrap: balance; }
.phh-lede { margin: 14px 0 22px; font-size: 17px; line-height: 1.55; color: var(--phh-ink2); max-width: 520px; }
.phh-ask { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--phh-line2); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 10px 30px rgba(22,24,31,.08); max-width: 560px; }
.phh-ask img { width: 24px; height: 24px; }
.phh-ask input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15.5px; height: 44px; background: transparent; color: var(--phh-ink); }
.phh-ask button { background: var(--phh-pink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; border: 0; border-radius: 999px; padding: 0 22px; height: 46px; flex-shrink: 0; cursor: pointer; }
.phh-ask button:hover { background: var(--phh-pinkp); }
.phh-try { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.phh-try span { font-size: 12px; font-weight: 700; color: var(--phh-ink3); margin-right: 2px; }
.phh-try a { display: inline-flex; align-items: center; justify-content: center; font-size: var(--pill-fs, 12.5px); font-weight: var(--pill-fw, 700); color: var(--phh-ink2); background: #fff; border: 1px solid var(--phh-line2); border-radius: 999px; padding: var(--pill-pad, 0 11px); text-decoration: none; min-height: var(--pill-h, 32px); }
.phh-try a:hover { border-color: var(--phh-pink); color: var(--phh-pinkp); }
.phh-pv { position: relative; height: 462px; margin-top: 18px; }
.phh-pv__back { position: absolute; inset: 26px 0 0 46px; border-radius: 24px; transform: rotate(3deg); opacity: .9; background: #f6c6d6; }
.phh-pvc { position: absolute; left: 0; right: 30px; top: 0; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(22,24,31,.18); overflow: hidden; }
.phh-pvc__top { position: relative; height: 112px; background: #3b3550 center / cover no-repeat; }
.phh-pvc__top b { position: absolute; left: 18px; right: 18px; bottom: 14px; font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -.6px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The card's tag is a sign-up link (theme 1.242.0): pink, so it reads as
   the thing to tap, with a lift on hover. */
.phh-pvc__cta { position: absolute; left: 16px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #fff; background: var(--phh-pink); border-radius: 999px; padding: 6px 12px; text-decoration: none; box-shadow: 0 6px 16px rgba(232, 86, 138, .4); transition: background .15s ease, transform .15s ease; }
.phh-pvc__cta:hover { background: var(--phh-pinkp); color: #fff; transform: translateY(-1px); }
.phh-pvr { display: grid; grid-template-columns: 50px 46px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--phh-line); }
.phh-pvr:first-of-type { border-top: 0; }
.phh-pvr__t b { display: block; font-size: 13px; font-weight: 800; }
.phh-pvr__t small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .07em; color: var(--phh-ink3); text-transform: uppercase; }
.phh-pvr__th { width: 46px; height: 46px; border-radius: 11px; }
.phh-pvr__n b { display: block; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phh-pvr__n span { display: block; font-size: 11px; color: var(--phh-ink3); margin-top: 1px; }
.phh-pvr__c { font-size: 13px; font-weight: 800; }
.phh-pvb { padding: 11px 18px 12px; border-top: 1px solid var(--phh-line); background: var(--phh-opens); }
.phh-pvb__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--phh-open); }
.phh-pvb__row span { display: inline-flex; align-items: center; gap: 7px; }
.phh-pvb__row i { font-style: normal; width: 18px; height: 18px; border-radius: 999px; background: var(--phh-open); color: #fff; display: grid; place-items: center; font-size: 10px; }
.phh-pvb__row small { font-size: 11.5px; font-weight: 700; color: var(--phh-ink2); }
.phh-pvb__bar { height: 6px; border-radius: 999px; background: rgba(31,122,77,.18); margin-top: 8px; overflow: hidden; }
.phh-pvb__bar b { display: block; height: 100%; border-radius: 999px; background: var(--phh-open); }
.phh-pvb.is-over { background: #fdecec; }
.phh-pvb.is-over .phh-pvb__row { color: #b3261e; }
.phh-pvb.is-over .phh-pvb__bar b { background: #b3261e; }
.phh-pvf { display: flex; justify-content: space-between; align-items: center; background: var(--phh-dark); color: #fff; padding: 12px 18px; }
.phh-pvf span { font-size: 12px; color: rgba(255,255,255,.7); }
.phh-pvf b { font-size: 17px; font-weight: 800; }
.phh-tag { position: absolute; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 9px 12px; box-shadow: 0 10px 28px rgba(22,24,31,.16); font-size: 12px; font-weight: 700; }
.phh-tag img { width: 22px; height: 22px; }
.phh-tag i { font-style: normal; width: 22px; height: 22px; border-radius: 999px; background: var(--phh-opens); color: var(--phh-open); display: grid; place-items: center; font-size: 12px; }
.phh-tag--built { right: -22px; top: -18px; }
.phh-tag--hours { right: 0; bottom: 0; top: auto; }
/* categories and modes */
.phh-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.phh-cat { position: relative; height: 150px; border-radius: 18px; display: block; color: #fff; overflow: hidden; text-decoration: none; }
/* The shade. It was a span inside the tile, and the tile's own "span"
   rule (meant for the count line) pinned it to the bottom-left corner at
   text size, so no tile ever showed it. DG, 4 Oct 2026: it starts at the
   bottom-left and fades out by half way up and half way across, which is
   where the words sit. */
.phh-cat .phh-cat__sh { position: absolute; inset: 0; left: 0; bottom: 0; background: linear-gradient(to top right, rgba(22,24,31,.86) 0%, rgba(22,24,31,.55) 25%, rgba(22,24,31,0) 52%); transition: opacity .2s; }
.phh-cat b { position: absolute; left: 16px; bottom: 30px; font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: #fff; z-index: 1; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.phh-cat .phh-cat__n { position: absolute; left: 16px; bottom: 12px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.88); z-index: 1; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.phh-cat:hover .phh-cat__sh { opacity: .92; }
.phh-modes { display: flex; align-items: center; gap: 12px; margin-top: 18px; background: var(--phh-surface); border: 1px solid var(--phh-line); border-radius: 18px; padding: 16px 20px; flex-wrap: wrap; }
/* Never one word to a line (DG, 20 Oct 2026): the heading keeps its
   width and the pills take what is left, scrolling if they must. */
.phh-modes b { flex: none; font-size: 15px; font-weight: 800; white-space: nowrap; }
.phh-modes > span { font-size: 13.5px; color: var(--phh-ink2); margin-right: auto; }
/* Between a phone and a wide screen the four pills do not fit beside the
   words, and one fell to a second line on its own (DG, 20 Oct 2026). The
   words take the rest of the first line, so the pills go down together. */
@media (min-width: 768px) and (max-width: 1100px) {
	.phh-modes > span { flex: 1 0 calc(100% - 150px); margin-right: 0; }
}
.phh-modes .phh-mode { height: var(--pill-h, 32px); padding: var(--pill-pad, 0 11px); font-size: var(--pill-fs, 12.5px); }
.phh-mode { display: inline-flex; align-items: center; gap: var(--pill-gap, 6px); background: #fff; border: 1.5px solid var(--phh-line2); border-radius: 999px; padding: var(--pill-pad, 0 11px); height: var(--pill-h, 32px); font-size: var(--pill-fs, 12.5px); font-weight: var(--pill-fw, 700); color: var(--phh-ink); text-decoration: none; }
.phh-mode i { width: 9px; height: 9px; border-radius: 999px; background: var(--phh-mode-c, var(--phh-open)); }
.phh-mode.is-on { border-color: var(--phh-mode-c, var(--phh-open)); background: var(--phh-mode-s, var(--phh-opens)); color: var(--phh-mode-c, var(--phh-open)); }
.phh-mode--vegan { --phh-mode-c: var(--m-vegan, #1f7a4d); --phh-mode-s: var(--m-vegan-soft, #e8f4ed); }
.phh-mode--halal { --phh-mode-c: var(--m-halal, #12756f); --phh-mode-s: var(--m-halal-soft, #e6f2f1); }
.phh-mode--accessible { --phh-mode-c: var(--m-access, #1d6f9c); --phh-mode-s: var(--m-access-soft, #e9f2f8); }
.phh-mode--family { --phh-mode-c: var(--warn, #a56a12); --phh-mode-s: var(--warn-soft, #fbf2e2); }
/* open tonight */
.phh-vc { width: 236px; display: block; color: var(--phh-ink); text-decoration: none; }
.phh-vc__im { position: relative; height: 150px; border-radius: 16px; }
.phh-vc__lg { position: absolute; left: 10px; bottom: -14px; width: 38px; height: 38px; border-radius: 999px; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(22,24,31,.2); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; background: var(--phh-navy); object-fit: cover; }
.phh-vc__op { position: absolute; right: 9px; top: 9px; font-size: 10.5px; font-weight: 800; background: #fff; color: var(--phh-open); border-radius: 999px; padding: 4px 9px; }
.phh-vc b { display: block; font-size: 14px; font-weight: 800; margin-top: 22px; letter-spacing: -.2px; }
.phh-vc span { display: block; font-size: 12px; color: var(--phh-ink3); margin-top: 3px; }
/* sign up */
.phh-su {  background: var(--phh-surface); border-radius: 24px; padding: 30px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 30px; align-items: center; margin: 72px 0; }
.phh-su h2 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; }
.phh-su__go { display: inline-flex; align-items: center; margin-top: 16px; background: var(--phh-pink); color: #fff; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 0 20px; height: 46px; text-decoration: none; }
.phh-su__go:hover { background: var(--phh-pinkp); color: #fff; }
.phh-bens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.phh-ben { background: #fff; border-radius: 16px; padding: 16px; }
.phh-ben__ic { width: 36px; height: 36px; border-radius: 11px; background: var(--phh-pinks); color: var(--phh-pinkp); display: grid; place-items: center; }
.phh-ben__ic svg, .phh-ben__ic img { width: 18px; height: 18px; }
.phh-ben b { display: block; font-size: 14px; font-weight: 800; margin-top: 11px; }
/* Not the icon tile: it is a span too, and "span" here used to win over
   .phh-ben__ic and turn its grid into a block, so every icon sat in the
   top-left corner of its pink square instead of the middle. */
.phh-ben > span:not(.phh-ben__ic) { display: block; font-size: 12px; line-height: 1.5; color: var(--phh-ink2); margin-top: 4px; }
/* Tablet and small laptop (DG, 20 Oct 2026, "fix"): four benefit cards
   beside a 300px text column left each about 70px wide, one word to a
   line with titles running out of the card. Between a phone and a full
   desktop the text goes above and the cards get the width: four across
   where they fit, two by two where they do not. */
@media (min-width: 768px) and (max-width: 1100px) {
	.phh-su { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (min-width: 768px) and (max-width: 900px) {
	.phh-bens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* video band */
.phh-vbg { background: var(--phh-dark); color: #fff;  padding: 64px 0; }
.phh-vbg .phh-cap { color: #ff9ec0; }
.phh-vbg h2, .phh-vbg .phh-more { color: #fff; }
.phh-vbg .phh-sh p { color: rgba(255,255,255,.72); }
.phh-vid { position: relative; width: 170px; height: 300px; border-radius: 18px; display: block; color: #fff; overflow: hidden; text-decoration: none; }
.phh-vid__sh { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65)); }
.phh-vid__pl { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--phh-dark); display: grid; place-items: center; font-size: 16px; padding-left: 3px; }
.phh-vid__tx { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 2px; }
.phh-vid__tx b { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phh-vid__tx span { font-size: 11px; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phh-vid__dur { position: absolute; right: 10px; top: 10px; font-size: 10.5px; font-weight: 800; background: rgba(0,0,0,.45); border-radius: 999px; padding: 3px 8px; }
.phh-vmore { width: 170px; height: 300px; border-radius: 18px; border: 1.5px dashed rgba(255,255,255,.3); display: grid; place-items: center; text-align: center; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.4; text-decoration: none; }
.phh-vmore small { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); }
/* guides and plans */
.phh-gp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.phh-gc { border: 1px solid var(--phh-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; color: var(--phh-ink); background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.phh-gc__col { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 170px; }
.phh-gc__col .phh-pic:first-child { grid-row: 1 / 3; }
.phh-gc__bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.phh-gc__ty span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; border-radius: 999px; padding: 3px 9px; background: var(--phh-pinks); color: var(--phh-pinkp); }
.phh-gc__ty span.is-plan { background: var(--phh-dark); color: #fff; }
.phh-gc h3 { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; text-wrap: pretty; }
.phh-gc h3 a { color: inherit; text-decoration: none; }
.phh-gc__by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--phh-ink2); margin-top: auto; }
.phh-gc__by i { width: 24px; height: 24px; border-radius: 999px; background: var(--phh-navy); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.phh-gc__acts { display: flex; gap: 10px; border-top: 1px solid var(--phh-line); padding-top: 14px; }
.phh-gc__acts a { flex: 1; white-space: nowrap; text-align: center; font-size: 14px; font-weight: 700; border-radius: 999px; height: 42px; display: grid; place-items: center; border: 1.5px solid var(--phh-ink); color: var(--phh-ink); text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.phh-gc__acts a.is-mk { border-color: var(--phh-pink); color: #fff; background: var(--phh-pink); box-shadow: 0 6px 16px rgba(232, 86, 138, .28); display: flex; align-items: center; justify-content: center; }
/* link in bio */
.phh-lib { background: var(--phh-pinks); border-radius: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: center; padding: 38px 44px; overflow: hidden; position: relative; margin-top: 64px; }
.phh-lib h2 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; text-wrap: balance; }
.phh-lib > div > p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--phh-ink2); max-width: 470px; }
.phh-pts { display: grid; gap: 9px; margin: 18px 0 22px; padding: 0; list-style: none; }
.phh-pts li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.phh-pts li i { width: 22px; height: 22px; border-radius: 999px; background: #fff; color: var(--phh-pinkp); font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.phh-bt { display: flex; gap: 10px; flex-wrap: wrap; }
.phh-bt a { display: flex; align-items: center; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 0 20px; height: 46px; text-decoration: none; }
.phh-bt a.is-p { background: var(--phh-pink); color: #fff; }
.phh-bt a.is-g { border: 1.5px solid var(--phh-pink); color: var(--phh-pinkp); }
.phh-phone { justify-self: center; width: 250px; background: #fff; border-radius: 34px; padding: 10px 12px 14px; box-shadow: 0 26px 60px rgba(201,55,110,.25); border: 6px solid var(--footer-bg, #16213a); transform: rotate(2.5deg); position: relative; overflow: hidden; }
.phh-phone__ur { font-size: 10.5px; font-weight: 700; color: var(--phh-ink3); text-align: center; background: var(--phh-surface); border-radius: 999px; padding: 6px 0; margin-bottom: 0; display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; z-index: 1; }
.phh-phone__av { width: 66px; height: 66px; border-radius: 999px; margin: 0 auto; border: 4px solid #fff; box-shadow: 0 0 0 2.5px var(--phh-pink), 0 6px 16px rgba(22, 24, 31, .2); background: #8a5be1 center / cover no-repeat; color: #fff; font-size: 24px; font-weight: 800; display: grid; place-items: center; margin-top: -36px; position: relative; }
.phh-phone__hd { text-align: center; margin-top: 9px; font-size: 15px; font-weight: 800; }
.phh-phone__gd { display: table; margin: 5px auto 0; font-size: 10.5px; font-weight: 800; color: var(--gold-ink, #8a6400); background: var(--gold-soft, #fff3cf); border-radius: 999px; padding: 3px 9px; }
.phh-phone__fl { display: flex; justify-content: center; gap: 6px; margin: 10px 0 12px; font-size: 11px; color: var(--phh-ink3); }
.phh-phone__fl b { color: var(--phh-ink); font-size: 12.5px; display: block; }
.phh-phone__lk { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--phh-line); border-radius: 14px; padding: 8px 10px; margin-top: 7px; font-size: 12px; font-weight: 700; box-shadow: 0 1px 0 rgba(22, 24, 31, .04); }
.phh-phone__lk.is-pr { background: var(--phh-pink); border-color: var(--phh-pink); color: #fff; }
.phh-phone__th { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.phh-phone__lk > span:not(.phh-phone__th) { flex: 1; min-width: 0; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
.phh-phone__nw { font-style: normal; flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .05em; background: rgba(255,255,255,.25); border-radius: 999px; padding: 2px 6px; }
/* venues band */
.phh-du { margin-top: 48px; margin-bottom: 24px; position: relative; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px; background: var(--phh-navy); color: #fff; }
.phh-du__tx { padding: 24px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.phh-du__tx .phh-cap { color: #ff9ec0; }
.phh-du h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; color: #fff; }
.phh-du p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.75); }
.phh-du__btn { align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 0 18px; height: 42px; display: flex; align-items: center; background: #fff; color: var(--phh-navy); text-decoration: none; }
.phh-du__fig { background: #2c3e63; display: grid; place-items: center; text-align: center; padding: 16px; }
.phh-du__big { font-size: 40px; font-weight: 800; letter-spacing: -1.4px; color: #fff; line-height: 1; }
.phh-du__sub { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.75); margin-top: 4px; letter-spacing: .06em; text-transform: uppercase; }
/* ===== the footer ===== */
.phf { background: var(--footer-bg, #16213a); color: rgba(255,255,255,.72); font-size: 13.5px; }
.phf a { color: rgba(255,255,255,.78); text-decoration: none; }
.phf a:hover { color: #fff; }
.phf-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.phf-ask { background: linear-gradient(100deg, var(--pink, #e8568a), var(--pink-press, #c9376e)); color: #fff; }
.phf-ask .phf-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 28px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.phf-ask h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; color: #fff; line-height: 1.2; }
.phf-ask p { margin: 5px 0 0; font-size: 14px; color: rgba(255,255,255,.88); }
.phf-box { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 5px 5px 5px 16px; box-shadow: 0 8px 24px rgba(80,10,40,.25); }
.phf-box img { width: 22px; height: 22px; }
.phf-box input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 14.5px; height: 42px; color: var(--ink, #16181f); background: transparent; }
.phf-box button { background: var(--dark, #16181f); color: #fff; font: inherit; font-size: 14px; font-weight: 700; border: 0; border-radius: 999px; padding: 0 20px; height: 44px; flex-shrink: 0; cursor: pointer; }
.phf-main .phf-in { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 42px; padding-bottom: 34px; }
.phf-brand { font-size: 26px; font-weight: 800; font-style: italic; letter-spacing: -1px; color: #fff; }
.phf-brand b { color: var(--pink, #e8568a); }
.phf-blurb { margin: 10px 0 18px; font-size: 14px; line-height: 1.6; max-width: 320px; }
.phf-soc { display: flex; gap: 8px; }
.phf-soc a { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; }
.phf-soc a:hover { background: var(--pink, #e8568a); }
.phf-soc svg { width: 18px; height: 18px; }
.phf-app { margin-top: 22px; }
.phf-app__l { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.phf-app__b { display: flex; gap: 8px; flex-wrap: wrap; }
.phf-store { display: flex; align-items: center; gap: 9px; background: #000; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 0 14px 0 11px; height: 46px; color: #fff; }
.phf-store:hover { border-color: #fff; color: #fff; }
.phf-store svg { width: 22px; height: 22px; flex-shrink: 0; }
.phf-store span { display: block; font-size: 15px; font-weight: 700; line-height: 1.05; letter-spacing: -.2px; }
.phf-store small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.phf-col h4 { margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #fff; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 0; width: 100%; text-align: left; font-family: inherit; }
.phf-col h4 .phf-chev { display: none; }
.phf-col__btn { all: unset; display: flex; justify-content: space-between; align-items: center; width: 100%; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: default; box-sizing: border-box; }
.phf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.phf-col li a, .phf-col li span.is-muted { display: inline-flex; align-items: center; gap: 8px; }
.phf-soon { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 1px 7px; }
.phf-col .is-muted { color: rgba(255,255,255,.42); }
.phf-here { width: 7px; height: 7px; border-radius: 999px; background: var(--open, #1f7a4d); box-shadow: 0 0 0 3px rgba(32,160,100,.25); }
.phf-modes { border-top: 1px solid rgba(255,255,255,.08); }
.phf-modes .phf-in { display: flex; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.phf-modes b { color: #fff; font-size: 14px; font-weight: 800; }
.phf-modes .phf-modes__s { font-size: 12.5px; margin-right: auto; }
.phf-fm { display: inline-flex; align-items: center; gap: var(--pill-gap, 6px); border: 1.5px solid rgba(255,255,255,.18); border-radius: 999px; padding: var(--pill-pad, 0 11px); height: var(--pill-h, 32px); font-size: var(--pill-fs, 12.5px); font-weight: var(--pill-fw, 700); color: #fff; text-decoration: none; }
.phf-fm i { width: 9px; height: 9px; border-radius: 999px; background: var(--phh-mode-c, var(--open, #1f7a4d)); }
.phf-fm.is-on { background: #fff; color: var(--ink, #16181f); border-color: #fff; }
.phf-fm.phh-mode--vegan { --phh-mode-c: var(--m-vegan, #1f7a4d); }
.phf-fm.phh-mode--halal { --phh-mode-c: var(--m-halal, #12756f); }
.phf-fm.phh-mode--accessible { --phh-mode-c: var(--m-access, #1d6f9c); }
.phf-fm.phh-mode--family { --phh-mode-c: var(--warn, #a56a12); }
.phf-bot { background: var(--footer-bar, #111a2e); }
.phf-bot .phf-in { display: flex; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; font-size: 12.5px; flex-wrap: wrap; }
.phf-bot .phf-legal { display: flex; gap: 18px; margin-left: auto; }
.phf-bot .phf-top { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; }
/* ===== the page itself =====
   The design sits on white; the theme's body is the grey surface, which
   hid every grey panel on this page (the modes strip, the sign-up band).
   DG, 4 Oct 2026, with room between the sections: it read as all at once. */
body.home.elementor-page, body.home.elementor-page .site-main, body.home.elementor-page main { background: #fff; }
.phh-tiles { padding-top: 12px; }
.phh-tonight { padding-top: 40px; }
.phh-gps { padding-top: 48px; }
.phh-su__note { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; color: var(--phh-ink3); margin: -6px 0 0; }
/* ===== mobile ===== */
@media (max-width: 767px) {
	.phh-in, .phf-in { padding: 0 16px; }
	.phh-hero { padding: 24px 0 26px; }
	.phh-hg { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.phh-h1 { font-size: 34px; letter-spacing: -1.1px; }
	.phh-lede { font-size: 15px; margin-bottom: 18px; }
	.phh-ask { padding: 5px 5px 5px 14px; }
	.phh-ask input { font-size: 14.5px; }
	.phh-ask button { padding: 0 16px; height: 42px; }
	.phh-try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.phh-try a { flex-shrink: 0; }
	.phh-pv { height: 390px; margin-top: 0; }
	.phh-tonight { padding-top: 28px; }
	.phh-gps { padding-top: 32px; }
	.phh-pv__back { inset: 20px 0 0 30px; }
	.phh-pvc { right: 16px; }
	.phh-pvc__top { height: 96px; }
	.phh-pvr { padding: 9px 14px; grid-template-columns: 44px 40px minmax(0, 1fr) auto; }
	.phh-pvr__th { width: 40px; height: 40px; }
	.phh-tag { display: none; }
	.phh-sh { flex-wrap: wrap; margin-bottom: 14px; }
	.phh-sh .phh-more { margin-left: 0; padding: 0; }
	.phh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.phh-cat { height: 118px; border-radius: 16px; }
	.phh-cat b { font-size: 17px; bottom: 28px; }
	.phh-modes > span { display: none; }
	.phh-modes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 12px 14px; }
	.phh-modes .phh-mode { flex-shrink: 0; }
	.phh-rail { margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
	.phh-vc { width: 72%; }
	.phh-vid, .phh-vmore { width: 44%; height: 260px; }
	.phh-vbg { padding: 40px 0; }
	.phh-gp { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; gap: 12px; }
	.phh-gp .phh-gc { width: 80%; flex-shrink: 0; scroll-snap-align: start; }
	.phh-su { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; margin: 44px 0; gap: 18px; }
	.phh-bens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.phh-ben { padding: 13px; }
	.phh-lib { grid-template-columns: minmax(0, 1fr); padding: 26px 18px 30px; gap: 26px; border-radius: 22px; margin-top: 40px; }
	.phh-bt a { flex: 1; justify-content: center; padding: 0 14px; }
	.phh-du { grid-template-columns: minmax(0, 1fr) 100px; }
	.phh-du__tx { padding: 18px; }
	.phh-du__big { font-size: 30px; }
	.phf-ask .phf-in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 22px; padding-bottom: 22px; }
	.phf-box button { padding: 0 15px; }
	.phf-main .phf-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 28px; padding-bottom: 10px; }
	.phf-brandwrap { padding-bottom: 22px; }
	.phf-col { border-top: 1px solid rgba(255,255,255,.1); }
	.phf-col h4 { margin: 0; }
	.phf-col h4 .phf-col__btn { min-height: 52px; cursor: pointer; }
	.phf-col h4 .phf-chev { display: grid; width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.08); place-items: center; font-size: 10px; transition: transform .25s; }
	.phf-col ul { display: none; padding-bottom: 16px; }
	.phf-col.is-open ul { display: grid; }
	.phf-col.is-open h4 .phf-chev { transform: rotate(180deg); }
	.phf-modes .phf-in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.phf-modes .phf-modes__s { display: none; }
	.phf-fm { flex-shrink: 0; }
	.phf-bot .phf-in { flex-direction: column; align-items: flex-start; gap: 12px; }
	.phf-bot .phf-legal { margin-left: 0; }
}

/* ===== tablet (theme 1.240.0) =====
   The hero is two columns with the example plan fixed at 470px, which on
   an iPad in portrait (834px) left the headline 240px and four lines
   tall, and cut the "Plan it" box down to "Date night". Between 768px and
   1023px the hero stacks, headline and box at full width and the example
   plan centred under them; from 1024px to 1199px the plan narrows to
   380px so the text keeps its room. Theme 1.241.0: smaller everywhere
   (420px on desktop, 480px at most stacked), DG asking for it "in
   proportion" with the headline. The phone rules above start at 767px
   and do not overlap these. */
@media (min-width: 768px) and (max-width: 1023px) {
	/* Three guide cards in 834px leave each button about 100px, and "Make a
	   plan" broke onto two lines. Stacked, Make a plan first. */
	.phh-gc__acts { flex-direction: column; }
	/* flex: 1 sets a zero basis, which in a column overrides the 42px height. */
	.phh-gc__acts a { flex: none; }
	.phh-gc__acts a.is-mk { order: -1; }
	.phh-hg { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.phh-h1 { font-size: 46px; letter-spacing: -1.5px; }
	.phh-lede { max-width: 600px; }
	.phh-ask { max-width: 600px; }
	/* Room above and below the example plan (DG, 20 Oct 2026): its
	   "Built by Heavy One" and "Opening hours checked" tags hang outside
	   the card, and sat on the Popular chips and the hero's edge. */
	.phh-pv { width: 100%; max-width: 480px; justify-self: center; margin: 28px 0 40px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.phh-hg { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
	.phh-h1 { font-size: 48px; }
}

/* ===== guide cards and the link-in-bio phone (theme 1.241.0) =====
   DG, 5 Oct 2026: Read and Make a plan were two thin outlines nobody would
   notice, and nothing said "this card is worth opening". Make a plan is
   now the filled pink action and Read a solid dark outline, both taller;
   the whole card lifts on hover and its photos open the guide. */
.phh-gc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(22, 24, 31, .12); }
a.phh-gc__col { text-decoration: none; overflow: hidden; }
a.phh-gc__col .phh-pic { transition: transform .35s ease; }
.phh-gc:hover a.phh-gc__col .phh-pic { transform: scale(1.04); }
.phh-gc h3 a:hover { color: var(--phh-pinkp); }
.phh-gc__acts a:hover { background: var(--phh-ink); color: #fff; }
.phh-gc__acts a.is-mk::before { content: "+"; font-size: 17px; font-weight: 700; margin-right: 6px; line-height: 1; }
.phh-gc__acts a.is-mk:hover { background: var(--phh-pinkp); border-color: var(--phh-pinkp); color: #fff; }

/* The phone: a browser bar with a padlock, a cover band the avatar sits
   on, a bio line, photos on the rows with a chevron, the sign-up code row
   dashed, and a note floating beside it. */
.phh-phone-wrap { position: relative; justify-self: center; display: block; color: inherit; text-decoration: none; }
/* The working example page (theme 1.252.1): the frame before its data
   arrives, the size ph-linkbio.css draws the phone at. */
.phh-livephone { width: 375px; max-width: 100%; height: 760px; border-radius: 44px; border: 10px solid #16181f; background: #f7f4f9; box-shadow: 0 30px 70px rgba(22, 24, 31, .3); }
.phh-phone-wrap--live { max-width: 100%; }
@media (max-width: 420px) {
	.phh-livephone { height: 680px; border-width: 8px; border-radius: 36px; }
}
.phh-phone__lock { width: 7px; height: 6px; border: 1.5px solid currentColor; border-radius: 1.5px; position: relative; top: 1px; }
.phh-phone__lock::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; margin: 0 -0.5px; }
.phh-phone__cv { height: 64px; margin: 8px -12px 0; background: linear-gradient(120deg, var(--phh-pink), #8a5be1 60%, #3b6fd8); }
.phh-phone__bio { text-align: center; margin: 3px 10px 0; font-size: 11px; line-height: 1.4; color: var(--phh-ink2); }
.phh-phone__fl span { background: var(--phh-surface); border-radius: 10px; padding: 5px 8px; text-align: center; line-height: 1.25; }
.phh-phone__go { flex-shrink: 0; font-size: 17px; line-height: 1; color: var(--phh-ink3); font-weight: 700; }
.phh-phone__lk.is-pr .phh-phone__go { color: #fff; }
.phh-phone__lk:last-child { border-style: dashed; border-color: var(--phh-pink); background: var(--phh-pinks); color: var(--phh-pinkp); }
.phh-phone__lk:last-child .phh-phone__th { background: var(--phh-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat; }
.phh-phone__toast { position: absolute; z-index: 2; left: -92px; top: 58px; max-width: 172px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 9px 12px; box-shadow: 0 12px 30px rgba(22, 24, 31, .16); font-size: 12px; line-height: 1.3; font-weight: 700; color: var(--phh-ink); transform: rotate(-2deg); }
.phh-phone__toast i { font-style: normal; flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; background: var(--phh-opens); color: var(--phh-open); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; }
@media (max-width: 1023px) {
	.phh-phone__toast { left: -60px; }
}
@media (max-width: 767px) {
	.phh-phone__toast { left: 50%; top: auto; bottom: -16px; max-width: none; white-space: nowrap; transform: translateX(-50%) rotate(-2deg); }
}

/* The example plan on a phone sits in the sign-up section (ph-home.js
   moves it); hidden in the hero meanwhile so it never shows there first.
   Only where a sign-up section exists (theme 1.247.1). */
@media (max-width: 767px) {
	body:has(.phh-su) .phh-hero .phh-pv { display: none; }
	.phh-su__plan { min-width: 0; }
	/* Narrower, with room above and below (DG, 20 Oct 2026), so it reads
	   as an example inside the section rather than filling it. */
	.phh-su__plan .phh-pv { width: calc(100% - 36px); max-width: 340px; margin: 26px auto 34px; height: auto; }
	/* Narrower, its rows wrap and the card grows taller than a fixed box,
	   so here the card sets the height and the box follows it. */
	.phh-su__plan .phh-pvc { position: relative; right: auto; margin-right: 16px; }
}
@media (min-width: 768px) {
	.phh-su__plan { display: none; }
}
/* The example plan only beside the hero's words (DG, 20 Oct 2026: "if
   this drops to another line, then it should hide"). Below 1024px the
   hero is one column, so it goes, on a tablet and on a phone, where it
   had moved to above the sign-up section. */
@media (max-width: 1023px) {
	.phh-hero .phh-pv, .phh-su__plan { display: none !important; }
}

/* Back to the top, on a phone only (theme 1.247.1). */
.ph-up { display: none; }
@media (max-width: 767px) {
	.ph-up { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 890; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #16181f; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(22, 24, 31, .28); cursor: pointer; }
	.ph-up[hidden] { display: none; }
	.ph-up:focus-visible { outline: 2.5px solid #e8568a; outline-offset: 3px; }
}

/* ── v3 (20 Oct 2026) ─────────────────────────────────────────────────
   How it works: a navy band, three numbered steps, then the curators who
   do the checking. Full bleed, so the colour reaches the edges. */
.phh-how { background: #13254a; color: #fff; padding: 72px 0; margin-top: 64px; }
.phh-how .phh-cap { color: #ff9ec0; }
.phh-how h2 { margin: 6px 0 0; max-width: 640px; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; color: #fff; }
/* v3 (mk): the steps as one line down the left, joined by a fading pink
   rule; the curators in their own card on the right. */
.phh-how__g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 40px; }
.phh-how__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.phh-how__steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.phh-how__steps li:last-child { padding-bottom: 0; }
.phh-how__steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: linear-gradient(#e8568a, rgba(232, 86, 138, .15)); }
.phh-how__steps li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--phh-pink); color: #fff; font-size: 14px; font-weight: 800; }
.phh-how__steps h3 { margin: 8px 0 0; font-size: 14px; font-weight: 800; color: #fff; }
.phh-how__steps p { margin: 4px 0 0; max-width: 440px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.phh-how__loc { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 26px; }
.phh-how__loc h3 { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
.phh-how__loc p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.phh-how__curs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.phh-how__cur { display: block; min-width: 0; color: #fff; text-decoration: none; }
.phh-how__cur:hover { color: #fff; }
.phh-how__ph { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 14px; background: #2b3a5e center / cover no-repeat; overflow: hidden; }
.phh-how__ph i { font-style: normal; font-size: 26px; font-weight: 800; color: rgba(255, 255, 255, .85); }
.phh-how__ph.is-vid::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='%2316181f'/%3E%3C/svg%3E") center / 10px no-repeat; }
.phh-how__cur:hover .phh-how__ph { box-shadow: 0 0 0 2px #ff9ec0; }
.phh-how__cur b { display: block; margin-top: 8px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phh-how__cur small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
.phh-how__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.phh-how__ft > span { font-size: 12px; color: rgba(255, 255, 255, .7); }
.phh-how__ft > span b { color: #fff; }
.phh-how__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--phh-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.phh-how__btn:hover { background: var(--phh-pinks); color: var(--phh-pinkp); }

/* The two routes: venues on navy, curators on the pink gradient, each a
   photo over its words and the whole panel one link. */
.phh-rts { margin: 48px 0 24px; }
.phh-rts__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.phh-rt { display: flex; flex-direction: column; align-items: flex-start; border-radius: 24px; overflow: hidden; padding: 0 24px 26px; color: #fff; text-decoration: none; }
.phh-rt:hover { color: #fff; }
.phh-rt--v { background: #1b3461; }
.phh-rt--c { background: linear-gradient(150deg, #a62a62, #c9376e 45%, #dc5a6a); }
.phh-rt__im { display: block; align-self: stretch; height: 240px; margin: 0 -24px 22px; background: rgba(255, 255, 255, .1) center / cover no-repeat; }
.phh-rt small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.phh-rt h3 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; color: #fff; }
.phh-rt p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.phh-rt__btn { display: inline-flex; align-items: center; height: 40px; margin-top: 16px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--phh-ink); font-size: 14px; font-weight: 700; }
.phh-rt:hover .phh-rt__btn { color: var(--phh-pinkp); }

@media (max-width: 1023px) {
	.phh-how__g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
	.phh-how { padding: 48px 0; margin-top: 44px; }
	.phh-how__g { gap: 28px; margin-top: 28px; }
	.phh-how__loc { padding: 20px; }
	.phh-rts__g { grid-template-columns: minmax(0, 1fr); }
	.phh-rt__im { height: 180px; }
}

/* v3 (DG, 20 Oct 2026): the hero's example plan is smaller on a computer,
   as the design draws it (about 365px wide rather than 420). The card is
   built at 420 and zoomed, so every part of it shrinks together, and the
   column is the size it ends up. */
@media (min-width: 1200px) {
	.phh-hg { grid-template-columns: minmax(0, 1fr) 366px; }
	.phh-hero .phh-pv { width: 420px; zoom: .87; }
}
/* "Eat your way" sits as far below the tiles as the sign-up panel sits
   below it (DG, 20 Oct 2026). */
.phh-tiles .phh-modes { margin-top: 72px; }
@media (max-width: 767px) {
	.phh-tiles .phh-modes { margin-top: 44px; }
}

/* v3 (mk, 20 Oct 2026): "Plans people are saving", rows of four. One
   action per card: the whole card opens the plan and the heart saves it.
   The count sits on the photo, top left, clear of the seams; the title
   is never cut short; the curator and the save count show that people
   really are saving them. On a phone the cards swipe. */
.phh-sv .phh-sh { margin-bottom: 24px; }
.phh-svg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.phh-sc { position: relative; min-width: 0; }
.phh-sc__a { display: block; color: var(--phh-ink); text-decoration: none; }
.phh-sc__mo { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 230px; border-radius: 18px; overflow: hidden; isolation: isolate; }
.phh-sc__mo .phh-pic { display: block; transition: transform .35s ease; }
.phh-sc__mo .phh-pic:first-child { grid-row: 1 / 3; }
.phh-sc__a:hover .phh-pic { transform: scale(1.04); }
.phh-sc__ct { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(22, 24, 31, .6); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1.2; }
.phh-sc__sv { position: absolute; right: 10px; top: 10px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--phh-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(22, 24, 31, .08), 0 2px 8px rgba(22, 24, 31, .08); }
.phh-sc__sv:hover { color: var(--phh-pinkp); }
.phh-sc__sv[aria-pressed="true"] { color: var(--phh-pink); }
.phh-sc__sv[aria-pressed="true"] path { fill: currentColor; }
.phh-sc__sv:focus-visible { outline: 2px solid var(--phh-pink); outline-offset: 2px; }
.phh-sc h3 { margin: 12px 0 0; font-size: 14px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; text-wrap: pretty; }
.phh-sc__a:hover h3 { color: var(--phh-pinkp); }
.phh-sc__pm { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--phh-ink2); }
.phh-sc__pm span + span::before { content: "\00b7"; margin-right: 10px; color: var(--phh-ink3); }
.phh-sc__pb { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-width: 0; }
.phh-sc__pb img { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; }
.phh-sc__pb i { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--phh-navy); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; }
.phh-sc__pb b { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phh-sc__pb em { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--phh-pinkp); }
@media (max-width: 1100px) {
	.phh-svg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.phh-svg { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
	.phh-svg::-webkit-scrollbar { display: none; }
	.phh-sc { flex: 0 0 78%; scroll-snap-align: start; }
	/* Square on a phone (DG, 20 Oct 2026): one card is on screen at a
	   time, so it can be as tall as it is wide. */
	.phh-sc__mo { height: auto; aspect-ratio: 1 / 1; }
}

/* v3 (ewd, 20 Oct 2026): the hero searches the places, in a city, with
   Heavy One as the smaller entry under it. */
.phh-ask--search > svg { width: 20px; height: 20px; flex: none; color: var(--phh-ink2); }
.phh-city { flex: none; position: relative; display: flex; align-items: center; height: 44px; padding-left: 12px; border-left: 1px solid var(--phh-line); }
.phh-city select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6070' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 2px center; padding: 0 16px 0 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--phh-ink); cursor: pointer; }
.phh-city--one { font-size: 14px; font-weight: 700; color: var(--phh-ink); padding-right: 6px; }
.phh-ask--search button { background: var(--phh-navy); }
.phh-ask--search button:hover { background: #0e1c38; }
/* On phones and tablets Heavy One has its own section above link-in-bio. */
.phh-h1m { display: none; }
@media (max-width: 900px) {
	.phh-h1m { display: block; padding: 40px 0 0; }
	.phh-h1m__in { padding: 22px 18px; border-radius: 22px; background: var(--phh-pinks); }
	.phh-h1m__hd { display: flex; align-items: center; gap: 12px; }
	.phh-h1m__hd img { flex: none; width: 40px; height: 40px; }
	.phh-h1m h2 { margin: 2px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; }
	.phh-h1m p { margin: 10px 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--phh-ink2); }
}
@media (max-width: 600px) {
	.phh-city { display: none; }
}