/* Site header and footer, the same on every public page: the landing pages and platform pages (React),
   the blog, legal and contact pages (server-rendered, src/server/lib/site-chrome.ts) and the sign-in pages.
   Served as a static file so both can link it. Everything is scoped to .pf-chrome. */
.pf-chrome {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bg: #fff;
  --surface: #f5f5f7;
  --text: #191919;
  --text-muted: #5c5c63;
  --deep: #12261e;
  --lime: #d4ef5a;
  --step-display: clamp(52px, 7.3vw, 104px);
  --step-h3: 28px;
  --step-lead: 22px;
  --step-body: 18px;
  --step-small: 14px;
  --radius: 16px;
  --public-ease: cubic-bezier(.23, 1, .32, 1);
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.pf-chrome, .pf-chrome *, .pf-chrome *::before, .pf-chrome *::after { box-sizing: border-box; }
:where(.pf-chrome) :is(p, ul, small) { margin: 0; }
:where(.pf-chrome) a { color: inherit; text-decoration: none; }
:where(.pf-chrome) :is(button, summary) { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; padding: 0; list-style: none; }
:where(.pf-chrome) summary::-webkit-details-marker { display: none; }
.pf-chrome :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.pf-chrome.pf-wrap, .pf-chrome .pf-wrap { width: min(100% - 80px, 1200px); margin-inline: auto; }
.pf-brand { display: inline-flex; align-items: center; gap: 8px; }
.pf-brand > span { font-size: 1.35em; line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.pf-brand svg { flex-shrink: 0; }

.pf-public-skip { position: fixed; top: 10px; left: 10px; padding: 12px 20px; background: var(--text); color: var(--bg); z-index: 100; transform: translateY(-160%); border-radius: 8px; }
.pf-public-skip:focus { transform: none; }
.pf-marketing-header { position: sticky; z-index: 40; top: 0; background: var(--bg); box-shadow: 0 1px 0 #19191900; transition: background-color 220ms ease, box-shadow 220ms ease; } /* taste-skill-ignore: the sticky bar's edge, invisible at rest */
/* Once the page scrolls, the bar turns slightly see-through with a hairline edge. */
.pf-marketing-header[data-scrolled] { background: rgb(255 255 255 / .82); box-shadow: 0 1px 0 #19191912; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); } /* taste-skill-ignore: the one sticky bar, only once scrolled */
.pf-nav { position: relative; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.pf-nav-brand { font-size: 18px; flex-shrink: 0; }
.pf-nav-brand .font-display { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.045em; }
.pf-nav-links, .pf-nav-actions { display: flex; align-items: center; gap: 2px; font-size: var(--step-small); font-weight: 500; }
.pf-nav-actions { gap: 4px; }
.pf-nav-actions .pf-public-button { margin-left: 10px; }
/* Links are pills: a soft fill on hover, and on the page you're on. */
.pf-nav-links > a, .pf-signin, .pf-platform-menu > :is(button, summary) { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; transition: background-color 160ms ease, color 160ms ease; }
.pf-nav-links > a[aria-current=page], .pf-platform-menu[data-current] > :is(button, summary), .pf-platform-menu:is([data-expanded=true], [open]) > :is(button, summary) { background: var(--surface); }
.pf-public-button { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 14px 26px; border-radius: 999px; font-size: var(--step-body); font-weight: 600; background: var(--text); color: #fff; transition: background-color 180ms ease, transform 160ms var(--public-ease); }
.pf-public-button svg { transition: transform 180ms var(--public-ease); }
.pf-button-small { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.pf-button-small svg { display: none; }
.pf-mobile-menu { display: none; }
.pf-platform-menu > :is(button, summary) { gap: 4px; font-size: var(--step-small); font-weight: 500; }
.pf-platform-menu > :is(button, summary) svg { transition: transform 200ms var(--public-ease); }
.pf-platform-menu:is([data-expanded=true], [open]) > :is(button, summary) svg { transform: rotate(180deg); }
/* The panel is centred under the whole bar, so it never runs off the screen edge. */
.pf-platform-panel { position: absolute; top: calc(100% - 6px); left: 50%; display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 8px; width: min(840px, 100%); padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -24px #12261e47, 0 0 0 1px #12261e12; transform: translateX(-50%); transform-origin: 50% 0; animation: pf-menu-in 240ms var(--public-ease) both; } /* taste-skill-ignore: an open menu floats above the page */
.pf-platform-panel[hidden] { display: none; }
.pf-platform-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pf-platform-panel li { animation: pf-menu-item 320ms var(--public-ease) both; animation-delay: calc(var(--i, 0) * 28ms + 50ms); }
.pf-platform-panel li a { position: relative; display: flex; gap: 14px; align-items: center; padding: 12px 36px 12px 12px; border-radius: 14px; transition: background-color 150ms ease; }
.pf-platform-panel li a[aria-current=page] { background: var(--surface); }
.pf-platform-panel strong { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.pf-platform-panel small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.pf-platform-go { position: absolute; top: 14px; right: 12px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 160ms ease, transform 200ms var(--public-ease); }
.pf-platform-tile { --brand: #191919; display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--brand) 11%, #fff); transition: transform 200ms var(--public-ease); }
.pf-platform-tile[data-platform=instagram] { --brand: #e1306c; }
.pf-platform-tile[data-platform=facebook] { --brand: #0866ff; }
.pf-platform-tile[data-platform=youtube] { --brand: #ff0000; }
.pf-platform-tile[data-platform=bluesky] { --brand: #1185fe; }
.pf-platform-tile:is([data-platform=tiktok], [data-platform=threads]) { background: var(--surface); }
.pf-platform-promo { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; background: var(--deep); color: #fff; animation: pf-menu-item 360ms var(--public-ease) 120ms both; }
.pf-platform-promo-icons { display: flex; gap: 8px; margin-bottom: auto; padding-bottom: 28px; color: var(--lime); }
.pf-platform-promo strong { font-size: 19px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
.pf-platform-promo > span:not([class]) { font-size: 13px; line-height: 1.45; color: #c9d4cd; }
.pf-platform-promo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--lime); }
.pf-platform-promo-link svg { transition: transform 200ms var(--public-ease); }
.pf-mobile-panel { gap: 0; }
.pf-mobile-links { display: flex; flex-direction: column; padding-bottom: 6px; }
.pf-mobile-group { margin-top: 16px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.pf-mobile-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 14px; }
.pf-mobile-platforms a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--surface); font-size: 15px; font-weight: 550; }
.pf-mobile-platforms a[aria-current=page] { background: #eef5cd; }
.pf-mobile-platforms .pf-platform-tile { width: 36px; height: 36px; border-radius: 11px; background: #fff; }
.pf-mobile-foot { display: flex; gap: 24px; padding-top: 6px; }
.pf-chrome .pf-mobile-cta { width: 100%; margin-top: 12px; }
.pf-footer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding-block: 8px 40px; }
.pf-footer-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 220px; padding: 28px; border-radius: var(--radius); background: var(--surface); }
.pf-footer-tile small { font-size: var(--step-small); color: var(--text-muted); line-height: 1.5; }
.pf-footer-statement { grid-column: 1 / 4; }
.pf-footer-statement p { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; max-width: 18ch; }
.pf-footer-nav { grid-column: 4 / 7; justify-content: flex-start; gap: 6px; }
.pf-footer-platforms { grid-column: 7 / 9; justify-content: flex-start; gap: 6px; }
.pf-footer-nav a, .pf-footer-platforms a { font-size: var(--step-body); padding-block: 3px; width: fit-content; }
.pf-footer-time { grid-column: 9 / 11; }
.pf-footer-time p { font-size: var(--step-lead); line-height: 1.35; font-weight: 600; letter-spacing: -.015em; }
.pf-footer-time time { font-variant-numeric: tabular-nums; }
.pf-footer-mail { grid-column: 11 / 13; }
.pf-footer-mail a { font-size: var(--step-lead); font-weight: 600; letter-spacing: -.015em; overflow-wrap: anywhere; }
.pf-footer-mark { grid-column: 1 / 9; min-height: 320px; flex-direction: row; justify-content: center; align-items: center; gap: clamp(16px, 2vw, 32px); background: var(--text); color: #fff; }
.pf-footer-mark svg { width: clamp(56px, 7vw, 104px); height: auto; }
.pf-footer-mark span { font-size: var(--step-display); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.pf-footer-start { grid-column: 9 / 13; min-height: 320px; background: var(--lime); color: var(--deep); transition: background-color 180ms ease, transform 160ms var(--public-ease); }
.pf-footer-start span { font-size: var(--step-h3); line-height: 1.2; font-weight: 600; letter-spacing: -.025em; max-width: 10ch; }
.pf-footer-start svg { align-self: flex-end; transition: transform 220ms var(--public-ease); }
@keyframes pf-menu-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes pf-menu-item { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pf-chrome .pf-public-button { background: var(--text); color: #fff; }
.pf-chrome .pf-public-button:active, .pf-footer-start:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .pf-chrome .pf-public-button:hover { background: #343434; }
  .pf-nav-links > a:hover, .pf-signin:hover, .pf-platform-menu > :is(button, summary):hover { background: var(--surface); }
  .pf-platform-panel li a:hover { background: var(--surface); }
  .pf-platform-panel li a:hover .pf-platform-go { opacity: 1; transform: none; }
  .pf-platform-panel li a:hover .pf-platform-tile { transform: scale(1.06); }
  .pf-platform-promo:hover .pf-platform-promo-link svg { transform: translate(3px, -3px); }
  .pf-footer-platforms a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pf-footer-nav a:hover, .pf-footer-mail a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pf-footer-start:hover { background: #c6e244; }
  .pf-footer-start:hover svg { transform: translate(4px, -4px); }
}
@media (max-width: 1100px) {
  .pf-chrome.pf-wrap, .pf-chrome .pf-wrap { width: min(100% - 48px, 1200px); }
  .pf-nav-links > a, .pf-platform-menu > :is(button, summary) { padding-inline: 11px; }
  .pf-nav-actions .pf-signin { display: none; }
  .pf-footer-statement { grid-column: 1 / 7; }
  .pf-footer-nav { grid-column: 7 / 10; }
  .pf-footer-platforms { grid-column: 10 / 13; }
  .pf-footer-time { grid-column: 1 / 7; min-height: 180px; }
  .pf-footer-mail { grid-column: 7 / 13; min-height: 180px; }
  .pf-footer-mark { grid-column: 1 / 13; min-height: 240px; }
  .pf-footer-start { grid-column: 1 / 13; min-height: 200px; }
}
@media (max-width: 860px) {
  .pf-nav-links { display: none; }
}
@media (max-width: 760px) {
  .pf-chrome { --step-display: clamp(40px, 11vw, 68px); --step-lead: 19px; --step-h3: 24px; --step-body: 17px; }
  .pf-chrome.pf-wrap, .pf-chrome .pf-wrap { width: calc(100% - 40px); }
  .pf-nav { height: 66px; gap: 18px; }
  .pf-nav-brand { font-size: 16px; }
  .pf-nav-actions { display: none; }
  .pf-mobile-menu { display: block; margin-left: auto; }
  .pf-mobile-menu > :is(button, summary) { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
  .pf-mobile-menu nav { position: absolute; inset: 65px 0 auto; padding: 14px 24px 25px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 12px 24px -24px #0005; transform-origin: top right; } /* taste-skill-ignore: open menu overlay */
  .pf-mobile-menu nav[hidden] { display: none; }
  .pf-mobile-menu nav { max-height: calc(100dvh - 66px); overflow-y: auto; }
  .pf-mobile-links a, .pf-mobile-foot a { font-size: 17px; padding: 12px 0; }
  .pf-mobile-links a[aria-current=page] { font-weight: 650; }
  .pf-public-button { min-height: 50px; font-size: var(--step-small); padding: 13px 20px; }
  .pf-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-bottom: 24px; }
  .pf-footer-tile { padding: 20px; min-height: 0; }
  .pf-footer-mark { grid-column: 1 / -1; order: -2; min-height: 160px; }
  .pf-footer-start { grid-column: 1 / -1; order: -1; min-height: 160px; }
  .pf-footer-nav, .pf-footer-platforms { grid-column: span 1; min-height: 200px; }
  .pf-footer-mail { grid-column: 1 / -1; min-height: 0; }
  .pf-footer-time, .pf-footer-statement { grid-column: 1 / -1; min-height: 0; }
  .pf-footer-mail a { font-size: 17px; }
  details.pf-mobile-menu:not([open]) > nav { display: none; }
}
@media (max-width: 440px) {
  .pf-chrome.pf-wrap, .pf-chrome .pf-wrap { width: calc(100% - 36px); }
  .pf-public-button { padding-inline: 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-platform-panel, .pf-platform-panel li, .pf-platform-promo { animation: none; }
  .pf-marketing-header { transition: none; }
}