/* Lockspot site: shared styles for every page. Dark only. Tokens mirror the app (src/theme.ts). */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/PlusJakartaSans-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2044, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/PlusJakartaSans-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2044, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/PlusJakartaSans-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2044, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/PlusJakartaSans-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2044, U+20AC, U+2122, U+2190-2193, U+2212; }
/* Anton is only drawn upper case, so its file holds just space to Z, dashes, curly quotes and the ellipsis (subset-fonts.mjs --caps). */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Anton-400.woff2) format('woff2'); unicode-range: U+0020-005A, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; }
/* Metric-matched stand-ins while the web font loads, to keep layout shift small. The bold face is tuned to the 800 weight. */
@font-face { font-family: 'PJS Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 104%; ascent-override: 99.8%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: 'PJS Fallback'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'); size-adjust: 101.2%; ascent-override: 102.6%; descent-override: 21.9%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --bg: #0E0E10;
  --map: #141417;
  --card: #1C1C1F;
  --card-2: #26262A;
  --border: #2E2E33;
  --border-2: #34343B;
  --handle: #3A3A40;
  --text: #FFFFFF;
  --text-2: #A1A1AA;
  --text-3: #8A8A93;
  --text-4: #C7C7CC;
  --accent: #6C63E6;
  --meme: #111113;
  --meme-border: #2A2A2F;
  --font: 'Plus Jakarta Sans', 'PJS Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-meme: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t1: 120ms; --t2: 180ms; --t3: 320ms; --t4: 600ms;
  --header-h: 56px;
  --gutter: 16px;
  --section: clamp(64px, 10vw, 128px);
  --r-card: 26px; --r-row: 20px; --r-tile: 18px; --r-sheet: 28px; --r-meme: 30px;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --header-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 500 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Links: white text, lilac underline (lilac text on charcoal is only 4.2:1). */
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.tnum { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: var(--gutter); top: 8px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--text); color: #000; font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- type ---------- */
.h1 { font-weight: 800; font-size: clamp(44px, 6.4vw, 76px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.h2 { font-weight: 800; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.h3 { font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.lede { font-weight: 500; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text-2); }
.label { display: block; font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.muted { color: var(--text-2); }
.small { font-size: 14px; line-height: 1.5; }
.hl { background: var(--accent); color: #fff; border-radius: 11px; padding: 0 .12em .04em; margin-inline: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- wordmark (src/components/ui.tsx Wordmark) ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.54px; line-height: 1; }
.wordmark__tile { width: 18px; height: 18px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; flex: none; }
.wordmark__tile::after { content: ''; width: 7px; height: 7px; border-radius: 2px; background: #fff; }

/* ---------- header ---------- */
.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); border-bottom: 1px solid transparent; transition: background-color var(--t2) ease, border-color var(--t2) ease; }
[data-scrolled] .site-header { background: rgb(14 14 16 / .85); border-bottom-color: var(--border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current='page'] { color: var(--text); }
.site-nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.header-get { margin-left: 8px; }
.show-sm { display: none; }
@media (max-width: 599px) {
  .hide-sm { display: none !important; }
  .show-sm { display: inline; }
  .site-nav a:not(.btn) { padding: 0 8px; }
  [data-launched='true'] .site-nav .nav-how { display: none; }
}
/* Wide screens: with JS, the header button waits until the hero's call to action scrolls away. Hidden also means out of the tab order. */
@media (min-width: 600px) {
  .js .header-get { transform: translateY(-150%); visibility: hidden; }
  .js[data-cta-away] .header-get { transform: none; visibility: visible; }
}
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  .js .header-get { transition: transform 300ms var(--ease), visibility 0s linear 300ms; }
  .js[data-cta-away] .header-get { transition: transform 300ms var(--ease); }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 800 16px/1.2 var(--font); color: #fff; text-decoration: none; cursor: pointer; transition: filter var(--t2) ease, background-color var(--t2) ease; -webkit-tap-highlight-color: transparent; }
.btn--primary { background: var(--accent); }
.btn--secondary { background: var(--card-2); border-color: var(--handle); font-weight: 700; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.98); }
/* Primary darkens on hover: brightening the lilac would drop white text below 4.5:1 (#5F56DB keeps 5.5:1). */
@media (hover: hover) { .btn--primary:hover { background: #5F56DB; } .btn--secondary:hover, .icon-btn:hover { filter: brightness(1.08); } }
.icon-btn { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: #fff; cursor: pointer; padding: 0; transition: filter var(--t2) ease; }
.icon-btn:active { transform: scale(.96); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--t1) var(--ease), filter var(--t2) ease, background-color var(--t2) ease; }
  .icon-btn { transition: transform var(--t1) var(--ease), filter var(--t2) ease; }
}
.icon-btn svg { width: 20px; height: 20px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- icons (symbols in the page sprite, drawn with currentColor) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--b { stroke-width: 2.2; } .ic--c { stroke-width: 2.4; }

/* ---------- CTA switch: data-launched on <html> picks pre-launch or launched calls to action ---------- */
[data-launched='false'] .if-launched, [data-launched='true'] .if-prelaunch { display: none !important; }
.cta-soon { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 999px; background: var(--card); border: 1px solid var(--handle); color: #fff; font: 700 16px/1.25 var(--font); text-decoration: none; text-align: center; text-wrap: balance; }
.cta-soon svg { flex: none; width: 18px; height: 18px; }
a.cta-soon, [data-prelaunch-link='true'] p.cta-soon { display: none; }
[data-prelaunch-link='true'] a.cta-soon { display: inline-flex; }
/* Apple's badge, unmodified and never animated. It is a background so nothing is requested before launch. */
.appstore-badge { display: inline-block; height: 54px; aspect-ratio: 119.66407 / 40; margin: 13.5px; background: url(badges/download-on-the-app-store.svg) center / contain no-repeat; }
@media (max-width: 599px) { .appstore-badge { height: 48px; margin: 12px; } }
.appstore-badge, .appstore-badge * { animation: none !important; transition: none !important; transform: none !important; }

/* ---------- cards, chips ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--text); }
.chip .ic { width: 16px; height: 16px; }

/* ---------- FAQ (native details) ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-row); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; font-weight: 700; font-size: 17px; line-height: 1.35; cursor: pointer; border-radius: var(--r-row); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--accent), var(--accent)) center / 14px 2.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2.5px 14px no-repeat; transition: transform var(--t2) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 20px 18px; color: var(--text-4); font-size: 16px; line-height: 1.6; }
.faq .answer p + p { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .25s var(--ease), content-visibility .25s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- inner pages ---------- */
.page { padding-block: clamp(40px, 7vw, 80px) var(--section); }
.prose { max-width: 720px; }
.prose h1 { font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.prose .meta { margin-top: 12px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.prose .intro { margin-top: 20px; color: var(--text-4); }
.prose h2 { margin-top: 44px; font-weight: 800; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.prose h3 { margin-top: 24px; font-weight: 800; font-size: 18px; line-height: 1.3; }
.prose p, .prose li { color: var(--text-4); }
.prose p { margin-top: 12px; }
.prose ul, .prose ol { margin-top: 12px; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--text); font-weight: 700; }
.prose .card { margin-top: 24px; }
.prose .card h2 { margin-top: 0; font-size: 20px; }
.prose .card p:first-of-type, .prose .card ul:first-of-type { margin-top: 10px; }
.toc { margin-top: 28px; padding: 18px 22px; border-radius: var(--r-row); border: 1px solid var(--border); }
.toc .label { margin-bottom: 6px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2 240px; column-gap: 28px; }
.toc li { margin: 0; break-inside: avoid; color: var(--text-2); }
.prose .toc li + li { margin-top: 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; }
.fixes { display: grid; gap: 14px; margin-top: 28px; }
.fixes .card { margin-top: 0; }
.fixes h2 { margin-top: 0; font-size: 20px; }

/* ---------- footer ---------- */
.site-footer { margin-top: 0; border-top: 1px solid var(--border); padding-top: 48px; padding-bottom: max(24px, env(safe-area-inset-bottom)); color: var(--text-2); font-size: 14px; line-height: 1.55; }
.site-footer__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 4fr 3fr 5fr; } }
.site-footer .tag { margin-top: 6px; color: var(--text); font-weight: 700; font-size: 15px; }
.site-footer p + p { margin-top: 10px; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 32px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.site-footer .copy { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ---------- not found ---------- */
.nf { min-height: 60vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; }
.nf img { width: 120px; height: 120px; }
.nf .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- reveal on scroll (JS adds .js; with reduced motion nothing hides) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: 80ms; } .js .reveal.d2 { transition-delay: 160ms; } .js .reveal.d3 { transition-delay: 240ms; }
}