/* Fonts are the ones used on linkupapp.io */
@font-face { font-family: 'Cy Grotesk Grand Dark'; src: url('/static/fonts/cy-grotesk-grand-dark.woff2') format('woff2'); font-weight: 400 900; font-display: block; }
@font-face { font-family: 'Volkswagen Serial'; src: url('/static/fonts/volkswagen-serial-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Volkswagen Serial'; src: url('/static/fonts/volkswagen-serial-medium.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Buckin Black'; src: url('/static/fonts/buckin-black.woff2') format('woff2'), url('/static/fonts/buckin-black.otf') format('opentype'); font-weight: 400 900; font-display: block; }
@font-face { font-family: 'Inter Display'; src: url('/static/fonts/inter-display-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #000;
  --text: #2c2c30;
  --grey: #6e6e73;
  --line: rgba(0, 0, 0, .07);
  --tint: rgba(81, 70, 110, .06);
  --purple: #8325ff;
  --grad: linear-gradient(90deg, #8325ff 0%, #6b40ff 47.3%, #4993ff 100%);
  --shadow: rgba(0, 0, 0, .11) 0 .6px .6px -1.25px, rgba(0, 0, 0, .1) 0 2.29px 2.29px -2.5px, rgba(0, 0, 0, .04) 0 10px 10px -3.75px;
  --shadow-hover: rgba(0, 0, 0, .12) 0 .6px .6px -1.25px, rgba(0, 0, 0, .1) 0 3px 4px -2.5px, rgba(81, 70, 110, .12) 0 18px 30px -8px;
  --display: 'Cy Grotesk Grand Dark', 'Arial Black', sans-serif;
  --body: 'Volkswagen Serial', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
html, body { overflow-x: clip; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: #0d0d0d; color: #fff; padding: 10px 16px; border-radius: 100px; }
:focus-visible { outline: 2.5px solid var(--purple); outline-offset: 3px; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 100px); line-height: 1; letter-spacing: 0; margin: 0; text-transform: uppercase; }
.display-md { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.2; }
.display-sm { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--grey); max-width: 620px; margin: 20px auto 0; }

/* ---------- header (mirrors linkupapp.io) ---------- */
.topbar { position: sticky; top: 0; z-index: 20; isolation: isolate; }
.topbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 55%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.topbar-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 94px; padding: 0 40px; }
.logo { position: absolute; left: 50%; transform: translateX(-50%); }
.logo img { width: 157px; height: 46px; object-fit: contain; }
.pill-dark { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 19px; border-radius: 100px; background: #0d0d0d; color: #fff; text-decoration: none; font: 400 16px/1.4 'Inter Tight', 'Inter Display', sans-serif; letter-spacing: .5px; white-space: nowrap; transition: transform .2s ease; }
.pill-dark:hover { transform: scale(1.03); }
.pill-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.socials { display: flex; gap: 32px; }
.socials a { color: #000; display: flex; transition: opacity .2s; }
.socials a:hover { opacity: .6; }

/* ---------- shared surfaces ---------- */
.card { background: #fff; border-radius: 32px; box-shadow: var(--shadow); }
a.card, .card a { text-decoration: none; }
.badge { flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 30%; background: #f4f2fa; }
.badge img { width: 56%; height: 56%; object-fit: contain; }

/* ---------- search ---------- */
.search { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 100px; box-shadow: var(--shadow); padding: 0 24px; height: 64px; }
.search:focus-within { box-shadow: var(--shadow-hover), 0 0 0 2px rgba(131, 37, 255, .35); }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: 500 18px var(--body); color: var(--ink); height: 100%; -webkit-appearance: none; appearance: none; }
.search input:focus { outline: none; }
.search input::placeholder { color: #9a9aa0; }
.search input::-webkit-search-cancel-button { display: none; }
.search-hero { max-width: 560px; margin: 40px auto 0; height: 60px; padding: 0 22px; }
.search-hero input { font-size: 18px; }
.search-icon { flex: none; color: #8e8e93; }
.search-side { height: 52px; padding: 0 16px; gap: 10px; }
.search-side input { font-size: 16px; }
.search-results { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(17, 12, 34, .16), 0 0 0 1px var(--line); padding: 8px; max-height: 60vh; overflow: auto; text-align: left; }
.search-results a { display: block; text-decoration: none; padding: 12px 16px; border-radius: 16px; }
.search-results a:hover, .search-results a.active { background: var(--tint); }
.search-results strong { display: block; font-weight: 500; font-size: 17px; line-height: 1.35; }
.search-results small { color: var(--grey); font-size: 14px; }
.search-results mark, .search-page mark { background: none; color: var(--purple); }
.search-empty { padding: 14px 16px; color: var(--grey); font-size: 16px; margin: 0; }

/* ---------- home ---------- */
.hero { text-align: center; padding: 72px 24px 24px; }
.section { max-width: 1120px; margin: 0 auto; padding: 120px 24px 0; text-align: center; }
.section-title-sm { font-size: clamp(24px, 2.4vw, 32px); }
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; text-align: left; }
.topic { display: flex; flex-direction: column; padding: 28px; min-height: 230px; transition: transform .2s ease, box-shadow .2s ease; }
.topic:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.topic .badge { margin-bottom: 24px; }
.topic-title { font-family: 'Buckin Black', var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; color: #000; }
.topic-desc { color: var(--grey); font-weight: 500; font-size: 16px; line-height: 1.5; margin-top: 10px; }
.topic-count { margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--grey); }

.safety { border-radius: 48px; padding: 88px 48px 48px; background: url('/static/footer-bg.png') center / cover no-repeat, #faf9ff; }
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; text-align: left; }
.safety-card { display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: 28px; transition: transform .2s ease, box-shadow .2s ease; }
.safety-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.safety-card .badge { margin-bottom: 22px; }
.safety-card strong { font-family: 'Buckin Black', var(--display); font-weight: 400; font-size: 24px; line-height: 1.15; }
.safety-card span { color: var(--grey); font-weight: 500; font-size: 16px; line-height: 1.5; margin: 10px 0 22px; }
.safety-card em { margin-top: auto; font-style: normal; font-weight: 500; font-size: 15px; color: var(--purple); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(131, 37, 255, .35); }
.safety-card:hover em { text-decoration-color: var(--purple); }
.emergency { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
.emergency p { margin: 0; color: var(--grey); font-weight: 500; font-size: 16px; }
.emergency strong { color: var(--ink); font-weight: 500; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255, 59, 48, .5); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .45); } 70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }

.faq { max-width: 880px; margin: 56px auto 0; padding: 8px 32px; text-align: left; border-radius: 24px; }
.faq a { display: flex; align-items: center; gap: 18px; padding: 22px 0; font-weight: 500; font-size: 18px; }
.faq a + a { border-top: 1px solid var(--line); }
.faq .plus { color: var(--purple); flex: none; transition: transform .25s ease; }
.faq a:hover .plus { transform: rotate(90deg); }
.faq a:hover span { color: var(--purple); }

.stuck { max-width: 1120px; margin: 120px auto 0; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.stuck .badge { margin-bottom: 22px; }
.stuck p { color: var(--grey); font-weight: 500; font-size: 20px; max-width: 520px; margin: 16px 0 28px; }

/* ---------- topic + article layout ---------- */
.page-head { max-width: 1120px; margin: 0 auto; padding: 48px 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.page-head .badge { margin: 32px 0 22px; }
.page-head .search-hero { width: 100%; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 15px; color: var(--grey); font-weight: 500; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.article .crumbs { justify-content: flex-start; }

.layout { max-width: 1180px; margin: 0 auto; padding: 72px 24px 0; display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.article-layout { padding-top: 48px; }
.side-sticky { position: sticky; top: 118px; max-height: calc(100vh - 130px); overflow: auto; padding: 4px 4px 24px; }
.side .search { margin-bottom: 24px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { display: block; text-decoration: none; font-size: 16px; font-weight: 500; color: var(--grey); padding: 8px 14px; border-radius: 14px; line-height: 1.35; }
.side-nav a:hover { color: var(--ink); background: var(--tint); }
.side-nav a[aria-current] { color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.side-back .badge { --s: 30px !important; }
.side-back { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 17px; margin: 0 0 14px 10px; }
.side-group button { all: unset; cursor: pointer; display: flex; width: calc(100% - 28px); justify-content: space-between; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #9a9aa0; padding: 14px 14px 6px; }
.side-group button::after { content: '+'; }
.side-group.open button::after { content: '–'; }
.side-group:not(.open) > div { display: none; }

.group { margin-bottom: 48px; }
.group h2 { font-family: 'Buckin Black', var(--display); font-weight: 400; font-size: 28px; line-height: 1.2; margin: 0 0 18px; }
.list { padding: 6px 28px; border-radius: 24px; }
.list a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 0; font-weight: 500; font-size: 18px; line-height: 1.4; }
.list a + a { border-top: 1px solid var(--line); }
.list .arrow { flex: none; color: #c4c4ca; transition: transform .2s ease, color .2s ease; }
.list a:hover span { color: var(--purple); }
.list a:hover .arrow { color: var(--purple); transform: translateX(3px); }
.list small { display: block; color: var(--grey); font-size: 15px; margin-top: 2px; }

.article h1 { font-family: 'Buckin Black', var(--display); font-weight: 400; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.1; margin: 20px 0 32px; }
.prose { max-width: 720px; font-size: 19px; line-height: 1.7; color: var(--text); }
.prose p { margin: 0 0 20px; }
.prose h2 { font-family: 'Buckin Black', var(--display); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--ink); margin: 44px 0 16px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 24px; }
.prose li { margin: 0 0 10px; padding-left: 6px; }
.prose li::marker { color: var(--purple); font-weight: 500; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { color: var(--purple); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.note { background: #f6f3ff; border-radius: 24px; padding: 20px 24px; margin: 0 0 24px; font-size: 18px; }
.note p { margin: 0 0 6px; }
.note p:last-child { margin: 0; }
.note-warn { background: #fff4ee; }
.related { margin-top: 56px; max-width: 720px; }
.related h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 22px; margin: 0 0 18px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; max-width: 720px; }
.pager a { padding: 20px 24px; border-radius: 24px; font-weight: 500; font-size: 17px; line-height: 1.35; transition: box-shadow .2s; }
.pager a:hover { box-shadow: var(--shadow-hover); }
.pager small { display: block; color: var(--grey); font-size: 14px; margin-bottom: 4px; }
.pager .next { text-align: right; }

/* ---------- search page / contact ---------- */
.narrow { max-width: 800px; margin: 0 auto; padding: 56px 24px 0; }
.search-page a { display: block; text-decoration: none; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.search-page small { color: var(--grey); font-size: 14px; }
.search-page strong { display: block; font-weight: 500; font-size: 20px; margin-top: 2px; }
.search-page p { margin: 6px 0 0; color: var(--grey); font-size: 16px; }
.search-page a:hover strong { color: var(--purple); }
.contact-list { margin: 8px 0 48px; }

/* ---------- footer (mirrors linkupapp.io) ---------- */
.footer { margin-top: 120px; min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 24px 90px; background: url('/static/footer-bg.png') center / cover no-repeat; }
.footer-big { margin: 0; }
.badges { display: flex; gap: 10px; margin-top: 22px; }
.badges a { transition: transform .2s ease; }
.badges a:hover { transform: scale(1.03); }
.badges img { height: 65px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 42px; }
.footer-links a { font: 400 16px/1 'Inter Display', 'Inter', sans-serif; color: #000; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .topics { grid-template-columns: 1fr 1fr; }
  .safety { padding: 72px 28px 40px; }
  .safety-grid { gap: 14px; }
  .safety-card { padding: 26px 22px 22px; }
  .layout { grid-template-columns: 1fr; gap: 0; padding-top: 40px; }
  .side-nav, .side-back { display: none; }
  .side-sticky { position: static; max-height: none; overflow: visible; padding: 0; }
  .side .search { margin-bottom: 32px; }
}
@media (max-width: 760px) {
  .safety-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .topbar-inner { height: 72px; padding: 0 16px; }
  .pill-dark { height: 38px; padding: 0 14px; font-size: 14px; }
  .pill-lg { height: 52px; font-size: 15px; }
  .logo img { width: 120px; height: 35px; }
  .socials { gap: 0; margin-right: -10px; }
  .socials a { padding: 10px; }
  .socials svg { width: 20px; height: 20px; }
  .footer-links a { padding: 6px 0; }
  .crumbs a { padding: 4px 0; }
  .hero { padding: 48px 16px 8px; }
  .lede { font-size: 17px; }
  .search-hero { height: 54px; margin-top: 28px; padding: 0 18px; }
  .search-hero input { font-size: 16px; }
  .emergency { align-items: flex-start; text-align: left; }
  .emergency .dot { margin-top: 7px; }
  .emergency p { font-size: 15px; }
  .safety-card { padding: 26px 22px 22px; }
  .section { padding: 88px 16px 0; }
  .topics { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .topic { min-height: 0; padding: 24px; border-radius: 28px; }
  .safety { padding: 56px 20px 36px; border-radius: 32px; }
  .faq { padding: 4px 22px; margin-top: 36px; }
  .faq a { font-size: 16px; padding: 18px 0; gap: 14px; }
  .stuck { margin-top: 88px; padding: 0 16px; }
  .stuck p { font-size: 17px; }
  .page-head { padding: 32px 16px 0; }
  .page-head .badge { --s: 60px !important; margin: 28px 0 16px; }
  .layout, .narrow { padding-left: 16px; padding-right: 16px; }
  .list { padding: 4px 20px; }
  .list a { font-size: 16px; padding: 16px 0; }
  .prose { font-size: 17px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .footer { min-height: 0; padding: 88px 16px 64px; margin-top: 88px; }
  .badges { flex-wrap: wrap; justify-content: center; }
  .badges img { height: 48px; }
  .footer-links { gap: 12px 20px; }
}
@media (max-width: 400px) {
  .topbar-inner { padding: 0 12px; }
  .pill-dark:not(.pill-lg) { height: 34px; padding: 0 12px; font-size: 13px; letter-spacing: .2px; }
  .logo img { width: 100px; height: 30px; }
  .socials { margin-right: -6px; }
  .socials a { padding: 6px; }
  .socials svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }