/* feet 11.11. (owner reference screenshot, lib/fp_homeref.php): the reference home — loaded only by templates/plastik/layout.php
   when the page is the reference home (body.fp-ref). Navy top, light body, tonal surfaces only (no card edge, no separator line),
   Inter text, 44 px taps, 390/360 first, the 1200 px grid from 900 px.
   11.11. evening, art director pass (owner «das muss vom Art Director viel geiler aussehen», critique in the scratchpad's
   AD-CRITIQUE.md): Plus Jakarta Sans heads (crisp geometric, tight tracking) instead of Nunito, a luminous light arc in the
   hero, glass pills and cards, gradient icon tiles, real device frames with designed screens, a curved dark→light seam, blue
   washes in the light body, layered shadows, the bright art set (assets/img/portal/ref/). Inner edges are grey at low alpha. */
@font-face { font-family: 'fr-jakarta'; font-weight: 200 800; font-display: swap; src: url(/pnew/assets/fonts/PlusJakartaSans-normal-latin.woff2) format('woff2'); }
body.fp-ref {
  --fr-navy: #040a1f; --fr-navy-2: #071537; --fr-navy-3: #0b2058; --fr-navy-4: #12307a;
  --fr-blue: #1a5cff; --fr-blue-2: #3b7bff; --fr-blue-3: #0a43d6; --fr-sky: #6fd2ff; --fr-sky-2: #a8e6ff;
  --fr-day: #f4f7fe; --fr-day-2: #e9f0fd; --fr-card: #fff; --fr-tint: #eaf1ff; --fr-tint-2: #d9e6ff;
  --fr-ink: #0a1430; --fr-ink-2: #55617c; --fr-ink-3: #66738f;   /* night 1000 design: was #8a96ae, 2.98 : 1 on white (the © line, «Price»), now 4.7 : 1 */
  --fr-edge: transparent;                       /* owner 12.11. pm «keine scheiss border an cards»: no inner edges (was grey, low alpha) */
  --fr-edge-n: transparent;
  --fr-glass: linear-gradient(160deg, rgb(255 255 255 / .085), rgb(255 255 255 / .025));
  --fr-shadow: 0 1px 2px rgb(16 32 80 / .05), 0 12px 32px -10px rgb(20 56 150 / .18);
  --fr-shadow-l: 0 2px 4px rgb(16 32 80 / .05), 0 24px 56px -16px rgb(20 56 150 / .28);
  --fr-r: 20px; --fr-r-s: 14px;
  --fr-pad: 20px;
  --fr-sec: 56px;
  --fr-head: 'fr-jakarta', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --fr-text: 'Inter', var(--body, system-ui), system-ui, sans-serif;
  background: var(--fr-day) !important;
  color: var(--fr-ink);
}
html:has(body.fp-ref) { background: var(--fr-navy) !important; }
body.fp-ref main.pn-main { padding: 0 !important; margin: 0 !important; max-width: none !important; background: transparent !important; }
body.fp-ref .fr, body.fp-ref .fr * { box-sizing: border-box; }
body.fp-ref .fr { font: 400 14px/1.5 var(--fr-text); color: var(--fr-ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.fp-ref .fr :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
body.fp-ref .fr :where(ul, ol) { list-style: none; }
body.fp-ref .fr a { color: inherit; text-decoration: none; }
body.fp-ref .fr a:focus-visible, body.fp-ref .frf a:focus-visible, body.fp-ref .fr summary:focus-visible { outline: 2px solid var(--fr-sky); outline-offset: 3px; border-radius: 12px; }
body.fp-ref .fr-ico { flex: none; display: block; }
body.fp-ref .fr-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--fr-pad); position: relative; }

/* ------------------------------------------------------------------ header on the navy */
body.fp-ref .pc-header { background: rgb(4 10 31 / .82) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: none !important; border: 0 !important; }
body.fp-ref .pc-header .pc-logo { color: #fff !important; }
body.fp-ref .pc-header .pc-logo__dot, body.fp-ref .pc-header .pc-logo svg { color: var(--fr-sky) !important; }
body.fp-ref .pc-header :is(.pc-nav__link, .pc-btn--ghost, .pc-iconbtn, .pc-burger) { color: #dfe8fb !important; }
body.fp-ref .pc-header .pc-btn--line { color: #fff !important; background: rgb(255 255 255 / .08) !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--fr-edge-n) !important; }
body.fp-ref .pc-header .pc-btn--primary { background: linear-gradient(180deg, var(--fr-blue-2), var(--fr-blue)) !important; color: #fff !important; border-color: transparent !important; border-radius: 999px !important; box-shadow: 0 6px 18px -4px rgb(26 92 255 / .6) !important; }
body.fp-ref .pc-header .pc-burger { background: rgb(255 255 255 / .08) !important; border-radius: 999px !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--fr-edge-n) !important; }
/* night 1000 guest: the reference home is one fixed look (navy top, light body); its dark-mode key changed nothing on the page */
body.fp-ref .pc-header :is(.pn-themebtn, .pc-burger__theme) { display: none !important; }
/* night 1000 guest: the phone menu opens a white panel, so its keys get the day colours back (the navy-header white text made
   «Join as a fan» and «Log in» white on white), and the menu keys keep a full 44 px tap height */
body.fp-ref.pc-root.pc-guest.pk .pc-header .pc-burger__menu .pc-btn--line, body.fp-ref .pc-header .pc-burger__menu .pc-btn--line { color: #0a1430 !important; background: #fff !important; box-shadow: inset 0 0 0 1px rgb(85 97 124 / .5) !important; }
body.fp-ref.pc-root.pc-guest.pk .pc-header .pc-burger__menu .pc-btn--ghost, body.fp-ref .pc-header .pc-burger__menu .pc-btn--ghost { color: #0a43d6 !important; background: #eaf1ff !important; }
body.fp-ref .pc-header .pc-burger__menu .pc-btn { min-height: 44px !important; height: auto !important; font-size: 15px !important; }

@media (max-width: 899px) {
  body.fp-ref .pc-header .pc-btn--primary { min-height: 36px !important; height: 36px !important; padding: 0 14px !important; font-size: 13px !important; gap: 6px !important; }
  body.fp-ref .pc-header .pc-btn--primary svg { width: 16px !important; height: 16px !important; }
  body.fp-ref .pc-header .pc-burger { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  body.fp-ref .pc-header .pc-burger__lbl { display: none !important; }   /* night 1000 guest: on tablets (700–899 px) the «Menu» word widened the 36 px circle and pushed it 40 px off the screen */
  body.fp-ref .pc-header .pc-burger summary { width: 36px !important; min-width: 36px !important; padding: 0 !important; justify-content: center !important; }
  body.fp-ref .pc-header .pc-logo { font-size: 24px !important; }
}
/* ------------------------------------------------------------------ the navy top */
body.fp-ref .fr-night { position: relative; isolation: isolate; overflow: hidden; color: #e9effb; padding-bottom: 64px;
  background:
    radial-gradient(90% 40% at 50% 100%, rgb(70 130 255 / .38), transparent 70%),
    linear-gradient(180deg, var(--fr-navy) 0%, var(--fr-navy-2) 38%, var(--fr-navy-3) 78%, var(--fr-navy-4) 100%);
  border-radius: 0 0 50% 50% / 0 0 44px 44px; }
/* the seam: a soft band of light along the curved lower edge, as in the reference */
body.fp-ref .fr-night::after { content: ""; position: absolute; inset: auto -10% -2px; height: 120px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgb(160 210 255 / .45), transparent 72%); }
body.fp-ref .fr-night::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / .5), transparent 60%), radial-gradient(1px 1px at 72% 9%, rgb(255 255 255 / .4), transparent 60%),
    radial-gradient(1px 1px at 38% 42%, rgb(255 255 255 / .3), transparent 60%), radial-gradient(1px 1px at 86% 55%, rgb(255 255 255 / .35), transparent 60%),
    radial-gradient(1px 1px at 22% 71%, rgb(255 255 255 / .3), transparent 60%), radial-gradient(1px 1px at 61% 83%, rgb(255 255 255 / .3), transparent 60%); }
body.fp-ref .fr-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); pointer-events: none; }
body.fp-ref .fr-glow--a { width: 460px; height: 460px; right: -220px; top: -140px; background: radial-gradient(circle, rgb(111 210 255 / .5), rgb(26 92 255 / .18) 55%, transparent 72%); }
body.fp-ref .fr-glow--b { width: 420px; height: 420px; left: -240px; top: 640px; background: radial-gradient(circle, rgb(26 92 255 / .38), transparent 70%); }
body.fp-ref .fr-glow--c { width: 520px; height: 520px; right: -280px; top: 1500px; background: radial-gradient(circle, rgb(80 170 255 / .3), transparent 70%); }
body.fp-ref .fr-arc { position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 640px; pointer-events: none; }

body.fp-ref .fr-hero { display: grid; gap: 26px; padding-top: 22px; }
body.fp-ref .fr-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px var(--fr-edge-n); color: #cfe2ff; font: 600 11.5px/1.2 var(--fr-text); }
body.fp-ref .fr-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fr-sky); box-shadow: 0 0 0 3px rgb(111 210 255 / .2), 0 0 10px var(--fr-sky); }
body.fp-ref .fr-h1 { margin-top: 16px !important; font: 800 38px/1.03 var(--fr-head) !important; letter-spacing: -0.032em; word-spacing: .02em; color: #fff !important; max-width: 11ch; text-wrap: balance; }
body.fp-ref .fr-h1 em { font-style: normal !important; color: #6cc6ff !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.fp-ref .fr-h1 em { background: linear-gradient(95deg, #a8ebff 0%, #5cc0ff 42%, #3577ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; padding: 0 .04em .06em 0 !important; }
}
body.fp-ref .fr-hero__sub { margin-top: 12px !important; font: 700 17px/1.3 var(--fr-text); color: #fff; letter-spacing: -.01em; }   /* owner 12.11. */
body.fp-ref .fr-hero__lede { margin-top: 14px !important; font-size: 14.5px; line-height: 1.55; color: #b4c3e0; max-width: 38ch; }
body.fp-ref .fr-ticks { display: grid; gap: 9px; margin-top: 18px !important; font-size: 13.5px; font-weight: 500; color: #e2eafa; }
body.fp-ref .fr-ticks li { display: flex; align-items: center; gap: 10px; }
body.fp-ref .fr-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(160deg, var(--fr-blue-2), var(--fr-blue-3)); color: #fff; flex: none; box-shadow: 0 0 0 3px rgb(26 92 255 / .18), 0 4px 10px -2px rgb(26 92 255 / .6); }
body.fp-ref .fr-tick--day { background: linear-gradient(160deg, var(--fr-tint), var(--fr-tint-2)); color: var(--fr-blue); box-shadow: none; }

body.fp-ref .fr-key { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: linear-gradient(180deg, #4a88ff 0%, var(--fr-blue) 55%, #1450ef 100%); color: #fff !important; font: 700 15.5px/1.1 var(--fr-head); letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgb(190 215 255 / .45), 0 12px 28px -8px rgb(26 92 255 / .75), 0 2px 6px rgb(10 40 140 / .25); transition: transform .15s ease, box-shadow .15s ease; }
body.fp-ref .fr-key:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(190 215 255 / .45), 0 16px 34px -8px rgb(26 92 255 / .85), 0 2px 6px rgb(10 40 140 / .25); }
body.fp-ref .fr-key svg { transition: transform .15s ease; }
body.fp-ref .fr-key:hover svg { transform: translateX(2px); }
body.fp-ref .fr-key--block { display: flex; width: 100%; margin-top: 24px; }
body.fp-ref .fr-key--sm { min-height: 46px; padding: 0 22px; font-size: 14.5px; }
body.fp-ref .fr-key--white { background: linear-gradient(180deg, #fff, #eef4ff); color: var(--fr-blue) !important; box-shadow: 0 14px 30px -10px rgb(0 20 90 / .5), 0 0 0 6px rgb(255 255 255 / .12); }
body.fp-ref .fr-pills { display: flex; justify-content: center; gap: 8px; margin-top: 12px !important; flex-wrap: wrap; }
body.fp-ref .fr-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgb(255 255 255 / .07); color: #eef3ff !important;
  font: 600 13px/1 var(--fr-text); box-shadow: inset 0 0 0 1px var(--fr-edge-n); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s ease; }
body.fp-ref .fr-pill svg { color: var(--fr-sky); }
body.fp-ref .fr-pill:hover { background: rgb(255 255 255 / .12); }
body.fp-ref .fr-pill--ink { background: var(--fr-ink); color: #fff !important; box-shadow: 0 8px 18px -8px rgb(10 20 48 / .6); }
body.fp-ref .fr-pill--ink svg { color: var(--fr-sky); }
body.fp-ref .fr-pill--ink:hover { background: #1b2b5c; box-shadow: 0 10px 22px -8px rgb(10 20 48 / .7); }   /* 12.11. owner «hover ist scheiße»: :hover outranked --ink and turned the dark pill see-through (white text on white) */
body.fp-ref .fr-pills--day { justify-content: flex-start; }

body.fp-ref .fr-media { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9.4; background: var(--fr-navy-3); isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--fr-edge-n), 0 30px 60px -20px rgb(0 0 0 / .7), 0 0 0 6px rgb(255 255 255 / .03); }
body.fp-ref .fr-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; filter: saturate(.92) contrast(1.04); transition: transform .5s ease; }
body.fp-ref .fr-media:hover img { transform: scale(1.025); }
body.fp-ref .fr-media::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(150 172 220 / .18); pointer-events: none; }
body.fp-ref .fr-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 10 31 / 0) 42%, rgb(4 10 31 / .25) 62%, rgb(4 10 31 / .82)), linear-gradient(90deg, rgb(26 92 255 / .18), transparent 50%); }
body.fp-ref .fr-media__play { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(160deg, #4a88ff, var(--fr-blue-3)); color: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .16), 0 0 0 12px rgb(26 92 255 / .14), 0 8px 20px rgb(0 30 120 / .5); }
body.fp-ref .fr-media__play svg { transform: translateX(1px); }
body.fp-ref .fr-media__cap { position: absolute; z-index: 2; left: 16px; bottom: 14px; right: 70px; color: #fff; font: 700 14px/1.25 var(--fr-head); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
body.fp-ref .fr-media__cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fr-sky); box-shadow: 0 0 10px var(--fr-sky); flex: none; }

body.fp-ref .fr-rows { display: grid; gap: 4px; }
body.fp-ref .fr-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 6px; border-radius: 16px; }
body.fp-ref a.fr-row { transition: background .15s ease; }
body.fp-ref a.fr-row:hover { background: var(--fr-tint); }
body.fp-ref .fr-row__t { display: grid; gap: 2px; min-width: 0; flex: 1; }
body.fp-ref .fr-row__t b { font: 700 14px/1.25 var(--fr-head); letter-spacing: -0.01em; }
body.fp-ref .fr-row__t small { font-size: 12.5px; line-height: 1.4; color: var(--fr-ink-2); }
body.fp-ref .fr-row__go { color: var(--fr-blue); transition: transform .15s ease; }
body.fp-ref a.fr-row:hover .fr-row__go { transform: translateX(2px); }
/* icon tiles: a gradient body, a soft top light, the glyph in blue (day) or sky (night) */
body.fp-ref .fr-tile { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none; color: var(--fr-blue);
  background: linear-gradient(150deg, #f4f8ff 0%, var(--fr-tint-2) 100%); box-shadow: inset 0 0 0 1px rgb(26 92 255 / .08), 0 6px 14px -8px rgb(26 92 255 / .45); }
body.fp-ref .fr-tile--s { width: 34px; height: 34px; border-radius: 11px; }
body.fp-ref .fr-rows--night { gap: 2px; }
body.fp-ref .fr-rows--night .fr-row__t b { color: #fff; }
body.fp-ref .fr-rows--night .fr-row__t small { color: #9fb1d3; }
body.fp-ref .fr-rows--night .fr-tile { color: var(--fr-sky-2); background: linear-gradient(150deg, rgb(74 136 255 / .42), rgb(20 60 170 / .22)); box-shadow: inset 0 0 0 1px rgb(140 190 255 / .22), 0 8px 20px -8px rgb(26 92 255 / .8); }

/* proof, quote, phones, the second key, the trust strip */
body.fp-ref .fr-proofband { display: grid; gap: 22px; padding-top: 34px; }
body.fp-ref .fr-proof { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
body.fp-ref .fr-laurel { width: 26px; height: 66px; flex: none; filter: drop-shadow(0 0 8px rgb(80 170 255 / .45)); }
body.fp-ref .fr-laurel--r { transform: scaleX(-1); }
body.fp-ref .fr-proof__t { display: grid; gap: 5px; }
body.fp-ref .fr-proof__t b { font: 800 19px/1.15 var(--fr-head); letter-spacing: -0.025em; color: #fff; }
body.fp-ref .fr-proof__t small { font-size: 12px; color: #9fb1d3; }
body.fp-ref .fr-stars { display: inline-flex; gap: 2px; color: #ffc53d; filter: drop-shadow(0 0 6px rgb(255 197 61 / .35)); }
body.fp-ref .fr-qrail { display: grid; gap: 12px; }
body.fp-ref .fr-qrail__in { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--fr-pad) * -1); padding-inline: var(--fr-pad); }
body.fp-ref .fr-qrail__in::-webkit-scrollbar { display: none; }
body.fp-ref .fr-qrail__in > li { flex: 0 0 100%; scroll-snap-align: center; }
body.fp-ref .fr-quote { position: relative; display: grid; gap: 14px; padding: 20px 20px 18px; border-radius: var(--fr-r); background: var(--fr-glass);
  box-shadow: inset 0 0 0 1px var(--fr-edge-n), 0 24px 48px -24px rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
body.fp-ref .fr-quote::before { content: "\201C"; position: absolute; right: 14px; top: -14px; font: 800 96px/1 var(--fr-head); color: rgb(111 210 255 / .12); pointer-events: none; }
body.fp-ref .fr-quote blockquote p { font: 600 15px/1.45 var(--fr-head); letter-spacing: -0.01em; color: #f1f5fe; }
body.fp-ref .fr-quote__who { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #9fb1d3; }
body.fp-ref .fr-quote__who a { color: #e3ecff; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(111 210 255 / .5); text-underline-offset: 3px; }
body.fp-ref .fr-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(140deg, #8fe0ff, #2463ff); color: #fff; font: 800 14px/1 var(--fr-head); flex: none; box-shadow: 0 0 0 3px rgb(111 210 255 / .18); }
body.fp-ref .fr-av--s { width: 30px; height: 30px; font-size: 12px; }
body.fp-ref .fr-av--brand { font-size: 18px; }
body.fp-ref .fr-dots { display: flex; justify-content: center; gap: 6px; }
body.fp-ref .fr-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .28); transition: width .2s ease, background .2s ease; }
body.fp-ref .fr-dots i.is-on { width: 18px; background: linear-gradient(90deg, var(--fr-sky), #fff); }
body.fp-ref .fr-day .fr-dots i { background: #c9d5ec; }
body.fp-ref .fr-day .fr-dots i.is-on { background: linear-gradient(90deg, var(--fr-blue-2), var(--fr-blue)); }

/* devices: a thin dark bezel, the island, a status bar, a designed screen; the cluster stands on a pool of light */
body.fp-ref .fr-illu { display: block; text-align: center; font-size: 10.5px; letter-spacing: .02em; color: #7f93bb; }
body.fp-ref .fr-phones { position: relative; height: 382px; margin: 4px 0 0; }
body.fp-ref .fr-phones::before { content: ""; position: absolute; left: 50%; bottom: 18px; width: 320px; height: 90px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(80 160 255 / .55), transparent); filter: blur(10px); }
body.fp-ref .fr-phones .fr-illu { position: absolute; left: 0; right: 0; bottom: 0; }
body.fp-ref .fr-phone { position: absolute; width: 128px; aspect-ratio: 9 / 19.2; padding: 4px; border-radius: 26px;
  background: linear-gradient(150deg, #3a4560 0%, #121a2e 40%, #0a0f1d 100%);
  box-shadow: inset 0 0 0 1px rgb(150 165 200 / .35), inset 0 0 0 2px #05080f, 0 30px 50px -18px rgb(0 0 0 / .75), 0 10px 20px -10px rgb(0 0 0 / .5); }
body.fp-ref .fr-phone__island { position: absolute; z-index: 3; top: 9px; left: 50%; width: 30%; height: 9px; transform: translateX(-50%); border-radius: 9px; background: #05080f; }
body.fp-ref .fr-phone__s { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #fbfcff, #eef3fd); color: var(--fr-ink);
  display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 9px; font-size: 8.5px; line-height: 1.3; }
body.fp-ref .fr-phone--dark .fr-phone__s { background: linear-gradient(180deg, #0d1a3f 0%, #081230 100%); color: #e8eefc; }
body.fp-ref .fr-ph__sb { display: flex; justify-content: space-between; align-items: center; height: 12px; padding: 0 6px; font: 700 7.5px/1 var(--fr-text); color: inherit; opacity: .85; }
body.fp-ref .fr-ph__sb i { width: 22px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 38%, currentColor 38% 62%, transparent 62% 70%, currentColor 70%); opacity: .7; }
body.fp-ref .fr-phone--c { left: 50%; top: 0; transform: translateX(-50%); z-index: 2; width: 152px; }
body.fp-ref .fr-phone--l { left: calc(50% - 184px); top: 40px; transform: rotate(-9deg); z-index: 1; }
body.fp-ref .fr-phone--r { left: calc(50% + 56px); top: 40px; transform: rotate(9deg); z-index: 1; }
body.fp-ref .fr-ph__bar { display: flex; justify-content: space-between; align-items: center; font: 800 11px/1 var(--fr-head); letter-spacing: -0.02em; color: inherit; }
body.fp-ref .fr-ph__bar i { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(140deg, #8fe0ff, #2463ff); }
body.fp-ref .fr-ph__h { font: 800 11px/1.2 var(--fr-head); letter-spacing: -0.01em; }
body.fp-ref .fr-ph__k { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font: 700 8.5px/1.2 var(--fr-text); color: var(--fr-blue); }
body.fp-ref .fr-ph__k small { color: var(--fr-ink-3); font-weight: 500; }
body.fp-ref .fr-phone--dark .fr-ph__k { color: var(--fr-sky); }
body.fp-ref .fr-phone--dark .fr-ph__k small { color: #8ea3cc; }
body.fp-ref .fr-ph__pic { position: relative; display: block; border-radius: 11px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fr-tint); flex: none; }
body.fp-ref .fr-ph__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
body.fp-ref .fr-ph__pic--tall { aspect-ratio: 4 / 4.3; }
body.fp-ref .fr-ph__pic em { position: absolute; left: 6px; top: 6px; padding: 3px 7px; border-radius: 999px; background: rgb(4 10 31 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 700 7.5px/1.2 var(--fr-text); font-style: normal; }
body.fp-ref .fr-ph__pic--post { flex: 1 1 auto; aspect-ratio: auto; min-height: 120px; }
body.fp-ref .fr-ph__pic--post em { left: 8px; right: 8px; top: auto; bottom: 8px; border-radius: 10px; background: rgb(4 10 31 / .55); font-size: 8.5px; line-height: 1.35; padding: 6px 8px; }
body.fp-ref .fr-ph__line { display: flex; align-items: baseline; gap: 6px; }
body.fp-ref .fr-ph__line b { font: 800 16px/1 var(--fr-head); letter-spacing: -0.03em; }
body.fp-ref .fr-ph__line small { color: var(--fr-ink-2); }
body.fp-ref .fr-phone--dark .fr-ph__line small, body.fp-ref .fr-phone--dark .fr-ph__q { color: #a9b8d8; }
body.fp-ref .fr-ph__q { color: var(--fr-ink-2); font-style: italic; }
body.fp-ref .fr-ph__left { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: rgb(255 120 80 / .14); color: #ff8a65; font-weight: 700; }
body.fp-ref .fr-ph__nav { display: flex; justify-content: space-around; margin-top: auto; padding: 6px 4px 0; }
body.fp-ref .fr-ph__nav i { width: 14px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .2); }
body.fp-ref .fr-ph__nav i.is-on { background: var(--fr-sky); box-shadow: 0 0 6px var(--fr-sky); }
body.fp-ref .fr-ph__field { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--fr-edge), 0 4px 10px -6px rgb(20 56 150 / .3); }
body.fp-ref .fr-ph__field small { color: var(--fr-ink-3); }
body.fp-ref .fr-ph__field b { font: 800 13px/1 var(--fr-head); }
body.fp-ref .fr-ph__ok { display: flex; align-items: center; gap: 4px; color: #0f9a62; font-weight: 600; }
body.fp-ref .fr-ph__btn { margin-top: auto; display: block; text-align: center; padding: 8px; border-radius: 999px; background: linear-gradient(180deg, #4a88ff, var(--fr-blue)); color: #fff; font: 700 9px/1 var(--fr-head); box-shadow: 0 6px 12px -6px rgb(26 92 255 / .8); }
body.fp-ref .fr-ph__big { font: 800 26px/1 var(--fr-head); letter-spacing: -0.04em; color: var(--fr-ink); }
body.fp-ref .fr-ph__bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; padding: 8px 7px 6px; border-radius: 11px; background: linear-gradient(180deg, #f3f7ff, var(--fr-tint)); }
body.fp-ref .fr-ph__bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--fr-sky), var(--fr-blue)); }
body.fp-ref .fr-ph__bars i:last-child { background: linear-gradient(180deg, #9fe6ff, #2f74ff); box-shadow: 0 0 8px rgb(80 170 255 / .6); }
body.fp-ref .fr-ph__mini { display: flex; gap: 4px; margin-top: auto; }
body.fp-ref .fr-ph__mini img { flex: 1; min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 7px; display: block; }
body.fp-ref .fr-ph__who { display: flex; align-items: center; gap: 7px; }
body.fp-ref .fr-ph__who b { display: block; font: 700 10px/1.2 var(--fr-head); }
body.fp-ref .fr-ph__who small { display: block; color: #0f9a62; font-size: 8.5px; font-weight: 600; }
body.fp-ref .fr-ph__tpl { display: grid; gap: 5px; }
body.fp-ref .fr-ph__tpl small { color: var(--fr-ink-2); font-weight: 600; }
body.fp-ref .fr-ph__tpl > span { display: flex; gap: 5px; }
body.fp-ref .fr-ph__tpl img { flex: 1; min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; opacity: .75; }
body.fp-ref .fr-ph__tpl img.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fr-blue); }
body.fp-ref .fr-ph__tabs { display: flex; gap: 4px; }
body.fp-ref .fr-ph__tabs i { flex: 1; text-align: center; padding: 6px 2px; border-radius: 999px; background: var(--fr-tint); font: 600 8px/1 var(--fr-text); font-style: normal; color: var(--fr-ink-2); }
body.fp-ref .fr-ph__tabs i.is-on { background: linear-gradient(180deg, #4a88ff, var(--fr-blue)); color: #fff; }
body.fp-ref .fr-ph__note { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow-l); }
body.fp-ref .fr-ph__note b { display: block; font: 700 11px/1.2 var(--fr-head); }
body.fp-ref .fr-ph__note small { display: block; color: var(--fr-ink-2); font-size: 10px; }

body.fp-ref .fr-again { display: grid; }
body.fp-ref .fr-again .fr-key--block { margin-top: 0; }
body.fp-ref .fr-strip { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--fr-r); background: var(--fr-glass); box-shadow: inset 0 0 0 1px var(--fr-edge-n); min-height: 60px; }
body.fp-ref .fr-strip__i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(150deg, #4a88ff, var(--fr-blue-3)); color: #fff; flex: none; box-shadow: 0 8px 20px -6px rgb(26 92 255 / .8); }
body.fp-ref .fr-strip .fr-row__t b { color: #fff; }
body.fp-ref .fr-strip .fr-row__t small { color: #a9b8d6; }

/* ------------------------------------------------------------------ the light body */
body.fp-ref .fr-day { position: relative; isolation: isolate; padding-top: 4px;
  background:
    radial-gradient(70% 520px at 100% 0%, rgb(120 180 255 / .22), transparent 70%),
    radial-gradient(60% 600px at 0% 30%, rgb(140 200 255 / .16), transparent 70%),
    radial-gradient(70% 700px at 100% 62%, rgb(120 170 255 / .14), transparent 70%),
    linear-gradient(180deg, #f2f6ff 0%, var(--fr-day) 40%, #f6f9ff 100%); }
/* the soft swoosh behind the first light heading, as in the reference */
body.fp-ref .fr-day::before { content: ""; position: absolute; z-index: -1; top: 30px; right: -40px; width: 520px; height: 300px; pointer-events: none; opacity: .45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 300'%3E%3Cpath d='M0 260C160 250 330 170 520 10' fill='none' stroke='%23b9d2ff' stroke-width='40' stroke-linecap='round' opacity='.35'/%3E%3Cpath d='M40 290C200 270 360 200 540 60' fill='none' stroke='%23d6e5ff' stroke-width='24' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") no-repeat right top / contain; }
body.fp-ref .fr-sec, body.fp-ref .fr-split { padding-block: var(--fr-sec) 0; }
body.fp-ref .fr-head { display: grid; gap: 10px; justify-items: start; }
body.fp-ref .fr-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgb(26 92 255 / .12), 0 4px 10px -6px rgb(26 92 255 / .4); color: var(--fr-blue); font: 700 10.5px/1.3 var(--fr-text); letter-spacing: .07em; text-transform: uppercase; }
body.fp-ref .fr-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fr-blue); }
body.fp-ref .fr-h2 { font: 800 27px/1.1 var(--fr-head) !important; letter-spacing: -0.024em; word-spacing: .03em; color: var(--fr-ink) !important; max-width: 16ch; text-wrap: balance; }
body.fp-ref .fr-lede { font-size: 14px; line-height: 1.6; color: var(--fr-ink-2); max-width: 44ch; }
body.fp-ref .fr-card { background: var(--fr-card); border-radius: var(--fr-r); box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow); }
body.fp-ref .fr-center { display: flex; justify-content: center; margin-top: 20px !important; }
body.fp-ref .fr-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--fr-blue) !important; font: 700 14px/1.2 var(--fr-head); }

body.fp-ref .fr-split { display: grid; gap: 22px; }
body.fp-ref .fr-split__art { position: relative; display: grid; place-items: center; gap: 12px; padding-top: 10px; }
body.fp-ref .fr-split__art::before { content: ""; position: absolute; top: 40px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgb(56 140 255 / .3), rgb(56 140 255 / .08) 50%, transparent 70%); }
body.fp-ref .fr-split__art::after { content: ""; position: absolute; top: 20px; width: 340px; height: 340px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(26 92 255 / .1); pointer-events: none; }
body.fp-ref .fr-phone--day { position: relative; width: 196px; }
body.fp-ref .fr-phone--day .fr-phone__s { padding: 8px 11px 12px; gap: 9px; font-size: 10px; }
body.fp-ref .fr-phone--day .fr-ph__sb { font-size: 8.5px; height: 14px; }
body.fp-ref .fr-phone--day .fr-ph__bar { font-size: 13px; }
body.fp-ref .fr-illu--day { position: static; color: var(--fr-ink-3); }
body.fp-ref .fr-glance { font: 700 12.5px/1.3 var(--fr-head); color: var(--fr-ink-2); margin: 0 0 10px 4px !important; }
body.fp-ref .fr-split__list .fr-card { padding: 6px 10px; gap: 0; }
body.fp-ref .fr-split__list .fr-card li + li .fr-row { box-shadow: inset 0 1px 0 rgb(110 128 168 / .12); border-radius: 0; }

body.fp-ref .fr-rail { display: grid; gap: 14px; margin-top: 20px; }
body.fp-ref .fr-rail__in { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--fr-pad) * -1); padding: 4px var(--fr-pad) 18px; }
body.fp-ref .fr-rail__in::-webkit-scrollbar { display: none; }
body.fp-ref .fr-rail__in > li { flex: 0 0 calc(46% - 6px); scroll-snap-align: start; min-width: 0; }
body.fp-ref .fr-rail__in > li > * { position: relative; display: block; border-radius: 18px !important; overflow: hidden; background: var(--fr-card); box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow) !important; border: 0 !important; }
body.fp-ref .fr-rail__in img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s ease; }
body.fp-ref .fr-rail__in > li > a:hover img { transform: scale(1.03); }
body.fp-ref .fr-rail .pn-stile__pic { display: block; overflow: hidden; }
body.fp-ref .fr-rail .pn-stile__name { display: block; padding: 10px 12px 0; font: 700 13.5px/1.25 var(--fr-head); letter-spacing: -0.01em; color: var(--fr-ink); }
body.fp-ref .fr-rail .pn-stile__sub { display: block; padding: 2px 12px 12px; font-size: 12px; color: var(--fr-ink-2); }

body.fp-ref .fr-two { display: grid; gap: 20px; }
body.fp-ref .fr-acc, body.fp-ref .fr-faq { display: grid; gap: 10px; }
body.fp-ref .fr-acc__i, body.fp-ref .fr-faq__i { background: var(--fr-card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow); transition: box-shadow .2s ease; }
body.fp-ref :is(.fr-acc__i, .fr-faq__i)[open] { box-shadow: inset 0 0 0 1px rgb(26 92 255 / .22), var(--fr-shadow-l); }
body.fp-ref .fr-acc__i summary, body.fp-ref .fr-faq__i summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px 8px 10px; cursor: pointer; list-style: none; }
body.fp-ref .fr-faq__i summary { padding-left: 18px; min-height: 54px; }
body.fp-ref :is(.fr-acc__i, .fr-faq__i, .fr-faq__more) summary::-webkit-details-marker { display: none; }
body.fp-ref .fr-acc__h { flex: 1; font: 700 14px/1.3 var(--fr-head); letter-spacing: -0.01em; }
body.fp-ref .fr-faq__q { flex: 1; margin: 0 !important; font: 700 14px/1.35 var(--fr-head) !important; letter-spacing: -0.01em; color: var(--fr-ink) !important; }
body.fp-ref .fr-acc__chev { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--fr-tint); color: var(--fr-blue); transition: transform .2s ease, background .2s ease; }
body.fp-ref details[open] > summary .fr-acc__chev { transform: rotate(180deg); background: var(--fr-blue); color: #fff; }
body.fp-ref .fr-acc__i > p { padding: 0 18px 16px 64px; font-size: 13px; line-height: 1.55; color: var(--fr-ink-2); }
body.fp-ref .fr-faq__a { display: grid; gap: 4px; padding: 0 18px 14px; font-size: 13px; line-height: 1.55; color: var(--fr-ink-2); }
body.fp-ref .fr-faq__more { display: grid; gap: 10px; }
body.fp-ref .fr-faq__more > summary { list-style: none; cursor: pointer; justify-self: start; }
body.fp-ref .fr-faq__more > summary .fr-ico { width: 16px; height: 16px; }

body.fp-ref .fr-guide { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 8px 10px; align-items: start; }
body.fp-ref .fr-guide__copy { grid-column: 1 / -1; display: grid; gap: 18px; }
body.fp-ref .fr-guide__copy .fr-head { padding-right: 126px; }
body.fp-ref .fr-guide__copy .fr-lede { margin-right: -40px; }
body.fp-ref .fr-guide__copy .fr-h2 { font-size: 24px !important; }
body.fp-ref .fr-cut { position: absolute; right: var(--fr-pad); top: calc(var(--fr-sec) + 34px); width: 112px; height: 124px; }
body.fp-ref .fr-cut__blob { position: absolute; inset: 10px -4px 0 -4px; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: linear-gradient(160deg, #cfe2ff, #eef4ff); }
body.fp-ref .fr-cut__ring { position: absolute; inset: -6px -10px 4px -10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(26 92 255 / .16); transform: rotate(-12deg); }
body.fp-ref .fr-cut img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 42% 58% 46% 54% / 55% 45% 55% 45%; box-shadow: 0 18px 36px -14px rgb(20 56 150 / .45); }
body.fp-ref .fr-cut__chip { position: absolute; display: none !important; right: -6px; bottom: -16px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--fr-blue); font: 700 10px/1 var(--fr-head); box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow-l); white-space: nowrap; }
body.fp-ref .fr-rows--links { gap: 10px; }
body.fp-ref .fr-row--card, body.fp-ref .fr-row--chip { background: var(--fr-card); box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow); padding: 9px 14px 9px 9px; }
body.fp-ref .fr-row--card .fr-tile { width: 38px; height: 38px; border-radius: 12px; }

body.fp-ref .fr-app { display: grid; grid-template-columns: minmax(0, 1fr) 128px; grid-template-areas: "copy art" "pills pills"; gap: 12px; align-items: center; }
body.fp-ref .fr-app__copy { grid-area: copy; }
body.fp-ref .fr-app__art { grid-area: art; }
body.fp-ref .fr-app > .fr-pills { grid-area: pills; margin-top: 0 !important; }
body.fp-ref .fr-app > .fr-pills .fr-pill { flex: 1 1 0; justify-content: center; }
body.fp-ref .fr-app__copy { display: grid; gap: 6px; }
body.fp-ref .fr-app__art { position: relative; height: 236px; }
body.fp-ref .fr-app__art::before { content: ""; position: absolute; inset: 10px -40px; border-radius: 50%; background: radial-gradient(circle, rgb(56 140 255 / .32), transparent 66%); }
body.fp-ref .fr-phone--mini { position: relative; width: 108px; transform: rotate(7deg); margin: 6px auto 0; }
body.fp-ref .fr-phone--mini .fr-phone__s { font-size: 8px; padding: 7px 7px 9px; gap: 6px; }
@media (max-width: 899px) { body.fp-ref .fr-phone--mini :is(.fr-ph__k, .fr-ph__q) { display: none; } }
body.fp-ref .fr-ph__note--float { position: absolute; z-index: 2; right: -12px; bottom: 74px; width: 136px; padding: 7px 9px; gap: 7px; transform: rotate(-3deg); }
body.fp-ref .fr-ph__note--float b { font-size: 10px; }
body.fp-ref .fr-ph__note--float small { font-size: 9px; }

body.fp-ref .fr-safe { display: grid; grid-template-columns: minmax(0, 1fr); }
body.fp-ref .fr-safe .fr-head { padding-right: 112px; }
body.fp-ref .fr-safe__copy { display: grid; gap: 14px; }
body.fp-ref .fr-checks { display: grid; gap: 10px; font-size: 13px; }
body.fp-ref .fr-checks li { display: flex; gap: 10px; align-items: flex-start; }
body.fp-ref .fr-checks b { font-weight: 700; font-family: var(--fr-head); }
body.fp-ref .fr-checks small { color: var(--fr-ink-2); font-size: 12.5px; }
body.fp-ref .fr-shield { position: absolute; right: var(--fr-pad); top: calc(var(--fr-sec) + 30px); width: 104px; display: grid; place-items: center; }
body.fp-ref .fr-shield::before, body.fp-ref .fr-shield::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -38%); }
body.fp-ref .fr-shield::before { width: 150px; height: 150px; box-shadow: inset 0 0 0 1px rgb(26 92 255 / .14); }
body.fp-ref .fr-shield::after { width: 200px; height: 200px; box-shadow: inset 0 0 0 1px rgb(26 92 255 / .07); }
body.fp-ref .fr-shield svg { position: relative; width: 104px; height: 120px; filter: drop-shadow(0 18px 26px rgb(0 60 180 / .35)); }
body.fp-ref .fr-shield__glow { position: absolute; width: 170px; height: 170px; top: 20px; border-radius: 50%; background: radial-gradient(circle, rgb(56 140 255 / .32), transparent 66%); }

body.fp-ref .fr-qrail--day { margin-top: 20px; }
body.fp-ref .fr-quote--day { background: var(--fr-card); box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.fp-ref .fr-quote--day::before { color: rgb(26 92 255 / .08); }
body.fp-ref .fr-quote--day blockquote p { color: var(--fr-ink); font-weight: 600; }
body.fp-ref .fr-quote--day .fr-quote__who { color: var(--fr-ink-2); }
body.fp-ref .fr-quote--day .fr-quote__who a { color: var(--fr-ink); text-decoration-color: rgb(26 92 255 / .4); }
body.fp-ref .fr-quote--day .fr-stars { margin-left: auto; }

body.fp-ref .fr-help { display: grid; gap: 14px; }
body.fp-ref .fr-help__card { position: relative; overflow: hidden; padding: 22px 18px; display: grid; gap: 16px; background: linear-gradient(160deg, #fff 40%, #eef4ff); }
body.fp-ref .fr-help__card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(56 140 255 / .18), transparent 68%); pointer-events: none; }
body.fp-ref .fr-help__rows { display: grid; gap: 10px; }
body.fp-ref .fr-row--chip { background: var(--fr-day); box-shadow: inset 0 0 0 1px var(--fr-edge); }
body.fp-ref .fr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.fp-ref .fr-tilecard { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 6px 12px; min-height: 104px; border-radius: 16px; background: var(--fr-card); box-shadow: inset 0 0 0 1px var(--fr-edge), var(--fr-shadow); text-align: center; transition: transform .15s ease; }
body.fp-ref .fr-tilecard:hover { transform: translateY(-2px); }
body.fp-ref .fr-tilecard b { font: 700 12.5px/1.2 var(--fr-head); }
body.fp-ref .fr-tilecard small { font-size: 10.5px; line-height: 1.3; color: var(--fr-ink-2); }

body.fp-ref .fr-final { position: relative; overflow: hidden; isolation: isolate; margin-top: 64px; color: #fff; text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, #3f86ff 0%, var(--fr-blue) 45%, #0b38b8 100%); border-radius: 44px 44px 0 0 / 30px 30px 0 0; }
body.fp-ref .fr-final::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -170px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgb(160 225 255 / .55), transparent 70%); }
body.fp-ref .fr-final::after { content: ""; position: absolute; z-index: -1; left: -120px; bottom: -220px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgb(10 40 160 / .55), transparent 70%); pointer-events: none; }
body.fp-ref .fr-final__in { display: grid; justify-items: center; gap: 12px; padding-block: 44px 38px; }
body.fp-ref .fr-final__h { font: 800 28px/1.1 var(--fr-head) !important; letter-spacing: -0.025em; word-spacing: .03em; max-width: 15ch; text-wrap: balance; color: #fff !important; }
body.fp-ref .fr-final__p { font-size: 14px; color: #dbe7ff; max-width: 36ch; }
body.fp-ref .fr-final .fr-key { margin-top: 8px; }
body.fp-ref .fr-final__fine { font-size: 12px; color: #bcd0ff; }

/* ------------------------------------------------------------------ the light footer */
body.fp-ref .frf { background: #fff !important; color: var(--fr-ink) !important; border: 0 !important; box-shadow: none !important; padding: 30px 0 20px !important; margin: 0 !important; font: 400 12px/1.5 var(--fr-text); }
body.fp-ref .frf * { box-sizing: border-box; }
body.fp-ref .frf ul { list-style: none; margin: 0; padding: 0; }
body.fp-ref .frf p { margin: 0; }
body.fp-ref .frf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 20px 16px; align-items: start; }
body.fp-ref .frf__brand { grid-column: 1 / -1; display: grid; gap: 8px; }
body.fp-ref .frf__logo { font-size: 24px !important; color: var(--fr-ink) !important; }
body.fp-ref .frf__logo .pc-logo__dot { background: var(--fr-blue) !important; }
body.fp-ref .frf__about { color: var(--fr-ink-2); max-width: 46ch; font-size: 12.5px; }
body.fp-ref .frf__h { font: 700 12px/1.3 var(--fr-head); color: var(--fr-ink); margin-bottom: 6px !important; }
body.fp-ref .frf__col li a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fr-ink-2); font-size: 12.5px; }
body.fp-ref .frf__col li a:hover { color: var(--fr-blue); }
body.fp-ref .frf__col:nth-of-type(n+3) { grid-column: 1 / 3; }   /* night 1000 guest: phones lost the Support column (help, contact, report, report a photo of you) */
body.fp-ref .frf__col:nth-of-type(n+3) ul { columns: 2; column-gap: 16px; }
body.fp-ref .frf__round { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body.fp-ref .frf__dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(150deg, #f4f8ff, var(--fr-tint-2)); color: var(--fr-blue); box-shadow: inset 0 0 0 1px rgb(26 92 255 / .08); }
body.fp-ref .frf__round .frf__dot { margin: 0 !important; }   /* night 1000 guest: a footer link margin pulled the circles 8 px off their slots */
body.fp-ref .frf__dot--adult b { font: 800 12px/1 var(--fr-head); }
body.fp-ref .frf__bottom { display: grid; gap: 6px; margin-top: 20px; padding-top: 14px !important; background: transparent; }
body.fp-ref .frf__legal { display: flex; flex-wrap: wrap; gap: 0 14px; }
body.fp-ref .frf__legal a { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; color: var(--fr-ink-2); }
body.fp-ref .frf__line { font-size: 12px; color: var(--fr-ink-3); }
body.fp-ref .frf .pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 370px) {
  body.fp-ref { --fr-pad: 16px; }
  body.fp-ref .fr-h1 { font-size: 33px !important; }
  body.fp-ref .fr-phones .fr-phone { width: 116px; }
  body.fp-ref .fr-phones .fr-phone--c { width: 138px; }
  body.fp-ref .fr-phone--l { left: calc(50% - 158px); }
  body.fp-ref .fr-phone--r { left: calc(50% + 42px); }
  body.fp-ref .fr-phones { height: 352px; }
  body.fp-ref .fr-pill { padding: 0 12px; font-size: 12.5px; }
}

/* ------------------------------------------------------------------ desktop: the same order, composed on the 1200 px grid */
/* night 1000 guest: from the full header (about 1100 px) to 1299 px the home's 16 px links with 12 px sides ran into the logo
   and «Safety» into «Log in» (3–24 px overlap at 1140–1180 px); the links and keys get slimmer there, 1300 px and up unchanged */
@media (min-width: 900px) and (max-width: 1299px) {
  body.fp-ref .pc-header .pc-nav__link { padding-inline: 6px !important; font-size: 15px !important; }
  body.fp-ref .pc-header .pc-nav { gap: 10px !important; }
  body.fp-ref .pc-header .pc-btn--sm { font-size: 14px !important; padding-inline: 16px !important; }
}
@media (min-width: 900px) {
  body.fp-ref { --fr-pad: 32px; --fr-sec: 112px; }
  body.fp-ref .fr { font-size: 15px; }
  body.fp-ref .fr-night { padding-bottom: 120px; border-radius: 0 0 50% 50% / 0 0 90px 90px; }
  body.fp-ref .fr-glow--a { width: 900px; height: 900px; right: -260px; top: -380px; }
  body.fp-ref .fr-glow--b { width: 700px; height: 700px; left: -300px; top: 420px; }
  body.fp-ref .fr-glow--c { width: 700px; height: 700px; right: -200px; top: 900px; }
  body.fp-ref .fr-arc { height: 900px; width: 70%; }
  body.fp-ref .fr-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; padding-top: 72px; align-items: center; }
  body.fp-ref .fr-h1 { font-size: 72px !important; max-width: 10.5ch; letter-spacing: -0.038em; }
  body.fp-ref .fr-hero__sub { font-size: 24px; margin-top: 18px !important; }
  body.fp-ref .fr-hero__lede { font-size: 17.5px; max-width: 44ch; margin-top: 22px !important; }
  body.fp-ref .fr-ticks { font-size: 15.5px; gap: 12px; margin-top: 24px !important; }
  body.fp-ref .fr-tick { width: 24px; height: 24px; }
  body.fp-ref .fr-hero__copy .fr-key--block { display: inline-flex; width: auto; padding: 0 32px; min-height: 58px; font-size: 16.5px; margin-top: 32px; }
  body.fp-ref .fr-hero__copy .fr-pills { justify-content: flex-start; margin-top: 16px !important; }
  /* the right side: a big media card with the three steps as a glass card over its lower edge */
  body.fp-ref .fr-hero__side { position: relative; display: grid; padding-top: 0; }
  body.fp-ref .fr-media { aspect-ratio: 16 / 11.5; border-radius: 28px; }
  body.fp-ref .fr-media__cap { font-size: 17px; left: 24px; bottom: auto; top: 22px; right: 90px; }
  body.fp-ref .fr-media::after { background: linear-gradient(180deg, rgb(4 10 31 / .55) 0%, rgb(4 10 31 / 0) 30%, rgb(4 10 31 / 0) 60%, rgb(4 10 31 / .5)), linear-gradient(90deg, rgb(26 92 255 / .18), transparent 50%); }
  body.fp-ref .fr-media__play { width: 52px; height: 52px; top: 18px; right: 18px; }
  body.fp-ref .fr-rows--night { position: relative; z-index: 2; margin: -96px 22px 0; padding: 10px; border-radius: 22px; background: rgb(8 20 55 / .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px var(--fr-edge-n), 0 30px 60px -20px rgb(0 0 0 / .7); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body.fp-ref .fr-rows--night .fr-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 16px; min-height: 0; height: 100%; }
  body.fp-ref .fr-rows--night li + li .fr-row { box-shadow: inset 1px 0 0 rgb(150 172 220 / .1); border-radius: 0 16px 16px 0; }

  /* proof band: words on the left, the phone cluster large on the right */
  body.fp-ref .fr-proofband { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "proof phones" "quote phones" "again phones"; gap: 26px 72px; padding-top: 112px; align-items: start; }
  body.fp-ref .fr-proof { grid-area: proof; justify-content: flex-start; text-align: left; }
  body.fp-ref .fr-proof__t b { font-size: 24px; }
  body.fp-ref .fr-laurel { width: 30px; height: 76px; }
  body.fp-ref .fr-proofband > .fr-qrail, body.fp-ref .fr-proofband > .fr-quote { grid-area: quote; align-self: start; }
  body.fp-ref .fr-quote blockquote p { font-size: 18px; }
  body.fp-ref .fr-quote { padding: 26px 26px 22px; }
  body.fp-ref .fr-phones { grid-area: phones; height: 560px; align-self: center; }
  body.fp-ref .fr-phones::before { width: 560px; height: 140px; bottom: 28px; }
  body.fp-ref .fr-phone { width: 190px; padding: 5px; border-radius: 36px; }
  body.fp-ref .fr-phone__s { border-radius: 31px; font-size: 12px; padding: 10px 12px 14px; gap: 9px; }
  body.fp-ref .fr-phone__island { top: 12px; height: 12px; }
  body.fp-ref .fr-ph__sb { font-size: 10px; height: 16px; }
  body.fp-ref .fr-ph__sb i { width: 30px; height: 8px; }
  body.fp-ref .fr-ph__bar { font-size: 15px; }
  body.fp-ref .fr-ph__bar i { width: 20px; height: 20px; }
  body.fp-ref .fr-ph__h { font-size: 15px; }
  body.fp-ref .fr-ph__k { font-size: 12px; }
  body.fp-ref .fr-ph__line b { font-size: 22px; }
  body.fp-ref .fr-ph__big { font-size: 36px; }
  body.fp-ref .fr-ph__bars { height: 110px; }
  body.fp-ref .fr-ph__field b { font-size: 17px; }
  body.fp-ref .fr-ph__field { padding: 9px 11px; }
  body.fp-ref .fr-ph__btn { font-size: 12px; padding: 11px; }
  body.fp-ref .fr-ph__pic em { font-size: 10px; }
  body.fp-ref .fr-phone--c { width: 222px; top: 0; }
  body.fp-ref .fr-phone--l { left: calc(50% - 286px); top: 64px; }
  body.fp-ref .fr-phone--r { left: calc(50% + 96px); top: 64px; }
  body.fp-ref .fr-again { grid-area: again; align-self: start; }
  body.fp-ref .fr-again .fr-key--block { display: inline-flex; width: auto; justify-self: start; padding: 0 30px; }
  body.fp-ref .fr-again .fr-pills { justify-content: flex-start; }

  body.fp-ref .fr-h2 { font-size: 46px !important; max-width: 16ch; letter-spacing: -0.03em; }
  body.fp-ref .fr-lede { font-size: 17px; }
  body.fp-ref .fr-eyebrow { font-size: 11px; }
  body.fp-ref .fr-row__t b { font-size: 15.5px; }
  body.fp-ref .fr-row__t small { font-size: 14px; }
  body.fp-ref .fr-tile { width: 46px; height: 46px; border-radius: 14px; }
  body.fp-ref .fr-day::before { width: 900px; height: 500px; top: 40px; }
  body.fp-ref .fr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy art" "list art"; gap: 28px 80px; align-items: start; }
  body.fp-ref .fr-split__copy { grid-area: copy; }
  body.fp-ref .fr-split__list { grid-area: list; }
  body.fp-ref .fr-split__art { grid-area: art; align-self: center; }
  body.fp-ref .fr-split__art::before { width: 600px; height: 600px; top: 0; }
  body.fp-ref .fr-split__art::after { width: 640px; height: 640px; top: -20px; }
  body.fp-ref .fr-phone--day { width: 300px; }
  body.fp-ref .fr-phone--day .fr-phone__s { font-size: 13px; padding: 12px 16px 18px; gap: 13px; }
  body.fp-ref .fr-phone--day .fr-ph__bar { font-size: 18px; }
  body.fp-ref .fr-phone--day .fr-ph__who b { font-size: 14px; }
  body.fp-ref .fr-phone--day .fr-ph__who small { font-size: 11.5px; }
  body.fp-ref .fr-phone--day .fr-ph__tabs i { font-size: 11px; padding: 9px 4px; }
  body.fp-ref .fr-phone--day .fr-ph__pic--post em { font-size: 12px; padding: 9px 11px; }
  body.fp-ref .fr-phone--day .fr-ph__sb { font-size: 11px; }
  body.fp-ref .fr-split__list .fr-key--block { display: inline-flex; width: auto; padding: 0 30px; }

  body.fp-ref .fr-head { gap: 14px; }
  body.fp-ref #discover .fr-head { justify-items: center; text-align: center; margin-inline: auto; }
  body.fp-ref #discover .fr-h2, body.fp-ref #discover .fr-lede { margin-inline: auto; }
  body.fp-ref .fr-rail { margin-top: 36px; }
  body.fp-ref .fr-rail__in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  body.fp-ref .fr-rail__in > li:nth-child(even) { transform: translateY(26px); }
  body.fp-ref .fr-rail__in > li:nth-child(n+7) { display: none; }   /* night 1000 guest: six in a row, no orphan second row of two */
  body.fp-ref .fr-rail .fr-dots { display: none; }
  body.fp-ref .fr-rail + .fr-center { margin-top: 48px !important; }

  body.fp-ref .fr-two { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
  body.fp-ref .fr-acc__h { font-size: 16.5px; }
  body.fp-ref .fr-acc__i summary { min-height: 72px; padding: 12px 20px 12px 14px; }
  body.fp-ref .fr-acc__i > p { font-size: 15px; padding: 0 22px 20px 74px; }
  body.fp-ref .fr-faq__q { font-size: 16.5px !important; }
  body.fp-ref .fr-faq__i summary { min-height: 64px; padding: 10px 22px; }
  body.fp-ref .fr-faq__a { font-size: 15px; padding: 0 22px 18px; }

  body.fp-ref .fr-guide { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 80px; align-items: center; }
  body.fp-ref .fr-guide__copy { grid-column: auto; }
  body.fp-ref .fr-guide__copy .fr-head { padding-right: 0; }
  body.fp-ref .fr-guide__copy .fr-h2 { font-size: 46px !important; }
  body.fp-ref .fr-rows--links { grid-template-columns: 1fr; max-width: 540px; gap: 12px; }
  body.fp-ref .fr-row--card { padding: 12px 18px 12px 12px; }
  body.fp-ref .fr-cut { position: relative; right: auto; top: auto; width: 100%; max-width: 440px; height: 440px; justify-self: center; }
  body.fp-ref .fr-cut__chip { display: inline-flex !important; right: auto; left: -10px; bottom: 40px; font-size: 13px; padding: 10px 16px; gap: 8px; }
  body.fp-ref .fr-cut__ring { inset: -24px; }

  body.fp-ref .fr-app, body.fp-ref .fr-safe { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 80px; align-items: center; }
  body.fp-ref .fr-app { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-areas: "art copy" "art pills"; row-gap: 24px; align-content: center; }
  body.fp-ref .fr-app__copy { align-self: end; }
  body.fp-ref .fr-app > .fr-pills { align-self: start; }
  body.fp-ref .fr-app > .fr-pills .fr-pill { flex: none; }
  body.fp-ref .fr-app__art { height: 440px; }
  body.fp-ref .fr-app__art::before { inset: 0 0; }
  body.fp-ref .fr-phone--mini { width: 200px; margin-top: 20px; }
  body.fp-ref .fr-phone--mini .fr-phone__s { font-size: 12px; padding: 10px 12px 14px; gap: 10px; }
  body.fp-ref .fr-phone--mini .fr-ph__bar { font-size: 15px; }
  body.fp-ref .fr-phone--mini .fr-ph__btn { font-size: 12px; padding: 11px; }
  body.fp-ref .fr-ph__note--float { right: auto; bottom: auto; left: 4%; top: 170px; width: 230px; padding: 12px 14px; gap: 10px; }
  body.fp-ref .fr-ph__note--float b { font-size: 14px; }
  body.fp-ref .fr-ph__note--float small { font-size: 12px; }
  body.fp-ref .fr-checks { font-size: 15.5px; gap: 14px; }
  body.fp-ref .fr-checks small { font-size: 14.5px; }
  body.fp-ref .fr-safe .fr-head { padding-right: 0; }
  body.fp-ref .fr-shield { position: relative; right: auto; top: auto; width: auto; padding-top: 0; min-height: 380px; }
  body.fp-ref .fr-shield::before { width: 360px; height: 360px; transform: translate(-50%, -50%); }
  body.fp-ref .fr-shield::after { width: 480px; height: 480px; transform: translate(-50%, -50%); }
  body.fp-ref .fr-shield svg { width: 230px; height: 264px; }
  body.fp-ref .fr-shield__glow { width: 420px; height: 420px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

  body.fp-ref .fr-qrail__in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  body.fp-ref .fr-qrail .fr-dots { display: none; }
  body.fp-ref .fr-proofband .fr-qrail__in { grid-auto-flow: row; grid-template-columns: 1fr; }
  body.fp-ref .fr-proofband .fr-qrail__in > li:not(:first-child) { display: none; }
  body.fp-ref .fr-quote--day { padding: 26px; }
  body.fp-ref .fr-quote--day blockquote p { font-size: 16.5px; }

  body.fp-ref .fr-help { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: stretch; }
  body.fp-ref .fr-help__card { padding: 40px; }
  body.fp-ref .fr-tiles { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px; }
  body.fp-ref .fr-tiles > li { display: grid; }
  body.fp-ref .fr-tilecard { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; align-content: center; gap: 2px 16px; min-height: 0; padding: 18px 22px; }
  body.fp-ref .fr-tilecard .fr-tile { grid-row: span 2; }
  body.fp-ref .fr-tilecard b { font-size: 16px; }
  body.fp-ref .fr-tilecard small { font-size: 13.5px; }

  body.fp-ref .fr-final { margin-top: 120px; border-radius: 80px 80px 0 0 / 50px 50px 0 0; }
  body.fp-ref .fr-final::before { width: 900px; height: 900px; right: -300px; top: -500px; }
  body.fp-ref .fr-final__in { padding-block: 96px 84px; gap: 16px; }
  body.fp-ref .fr-final__h { font-size: 56px !important; letter-spacing: -0.035em; }
  body.fp-ref .fr-final__p { font-size: 18px; }

  body.fp-ref .frf { padding: 56px 0 30px !important; }
  body.fp-ref .frf__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) max-content; gap: 32px; }
  body.fp-ref .frf__brand { grid-column: auto; }
  body.fp-ref .frf__col:nth-of-type(n+3) { display: block; grid-column: auto; }
  body.fp-ref .frf__col:nth-of-type(n+3) ul { columns: auto; }
  body.fp-ref .frf__round { flex-direction: row; align-items: center; gap: 10px; }
  body.fp-ref .frf__round { min-width: max-content; }
  body.fp-ref .frf__round li { flex: 0 0 44px; width: 44px; }
  body.fp-ref .frf__round .frf__dot { margin: 0 !important; }   /* night 1000 guest: the 18+, help and safety circles overlapped (items shrank to 28 px) */
  body.fp-ref .frf__bottom { grid-template-columns: 1fr auto; align-items: center; margin-top: 36px; }
  body.fp-ref .frf__h { font-size: 13px; }
  body.fp-ref .frf__col li a { font-size: 14px; }
}
@media (min-width: 1360px) {
  body.fp-ref .fr-h1 { font-size: 80px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.fp-ref :is(.fr-key, .fr-key svg, .fr-dots i, .fr-acc__chev, .fr-media img, .fr-rail__in img, .fr-tilecard, a.fr-row, .fr-row__go) { transition: none; }
}