/* One look on every page: Everbead's own dark palette (Palette.swift), the nav with the app icon, and the quiet links line.
   Headlines use SF Rounded (ui-rounded), the app's own face; other browsers fall back to the system font.
   Pages link this file and the icons with ?v=2. When one of them changes, raise the number on every page:
   everbead.app tells browsers to keep CSS and images for 4 hours (Cloudflare's Browser Cache TTL). */
:root{
  --bg:#000;--ink:#F5F5F7;--ink-2:#B4B4BA;--ink-3:#8E8E94;
  --flame:#FF4D1F;--flame-text:#FF8A5C;--danger:#FF5E7A;
  --line:rgba(255,255,255,.1);--field:rgba(255,255,255,.07);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:linear(0,.006 1%,.023 2%,.087 4%,.33 9%,.563 14%,.739 19%,.864 24%,.947 29%,.997 34%,1.025 40%,1.036 45%,1.034 52%,1.017 63%,1.005 74%,1);
  --sys:-apple-system,system-ui,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --round:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,BlinkMacSystemFont,sans-serif;
  --gutter:clamp(20px,4.4vw,64px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
html{scrollbar-color:#2A2A2E var(--bg);text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--sys);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(255,77,31,.4);color:#fff}
:focus-visible{outline:2px solid var(--flame-text);outline-offset:3px;border-radius:8px}
a{color:inherit;text-underline-offset:.2em;text-decoration-color:rgba(255,77,31,.7)}
a:hover{color:var(--flame-text)}
h1,h2{font-family:var(--round);font-weight:700;text-wrap:balance}

/* The nav: the app icon and the name on the left, what's coming on the right. */
.nav{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gutter) 0}
.mark{display:inline-flex;align-items:center;gap:10px;font:700 21px/1 var(--round);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.mark:hover{color:var(--ink)}
.mark img{width:26px;height:26px;border-radius:6px;box-shadow:0 0 0 .5px rgba(255,255,255,.18)}
.nav .soon{font-size:14px;color:var(--ink-3)}

/* The last line of every page: the links Apple and search engines look for. */
.links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 4px;padding:24px var(--gutter) max(14px,env(safe-area-inset-bottom));font-size:13px;color:var(--ink-3)}
.links a{display:inline-flex;align-items:center;min-height:36px;padding:0 8px;color:var(--ink-2);text-decoration:none}
.links a:hover,.links a[aria-current]{color:var(--ink)}
.links .gap{width:16px}

@media (max-width:900px){ .links .gap{flex-basis:100%;height:0} }
@media (max-width:700px){ .nav{padding-top:18px} .nav .soon{display:none} }

/* Privacy, support and the comparisons: one calm reading column, its title where the home page's headline sits. */
body:has(> .doc){display:flex;flex-direction:column;min-height:100svh}
.doc{flex:1 0 auto;width:100%;max-width:680px;margin:0 auto;padding:clamp(110px,15svh,150px) 20px 72px}
.doc h1{font-size:clamp(40px,5vw,56px);line-height:1.04;letter-spacing:-.03em}
.doc .date{font-size:15px;color:var(--ink-3);margin-top:12px}
.doc .short{font-size:20px;line-height:1.45;font-weight:600;color:var(--ink);margin-top:32px;padding:20px;border-radius:20px;background:var(--field);border:1px solid var(--line)}
.doc h2{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:44px 0 10px}
.doc p,.doc li{font-size:17px;line-height:1.6;color:var(--ink-2)}
.doc p + p,.doc ul + p{margin-top:12px}
.doc ul{padding-left:22px;margin-top:10px;display:grid;gap:6px}
.doc strong{color:var(--ink);font-weight:600}

/* Comparison pages: one plain table; on a phone each row stacks, with each app's name over its answer. */
.doc .table{margin-top:28px;overflow-x:auto;border-radius:20px;background:var(--field);border:1px solid var(--line)}
.doc table{width:100%;border-collapse:collapse}
.doc th,.doc td{font-size:15px;line-height:1.45;text-align:left;vertical-align:top;padding:14px 16px;border-top:.5px solid var(--line);color:var(--ink-2)}
.doc thead th{border-top:0;font:700 15px var(--round);color:var(--ink)}
.doc tbody th{font-weight:600;color:var(--ink);width:26%}
@media (max-width:900px){ .doc{padding-top:100px} }
@media (max-width:560px){
  .doc thead{display:none}
  .doc table,.doc tbody,.doc tr,.doc th,.doc td{display:block;width:auto}
  .doc tbody tr{padding:14px 16px;border-top:.5px solid var(--line)}
  .doc tbody tr:first-child{border-top:0}
  .doc tbody th,.doc td{width:auto;padding:0;border:0}
  .doc td{margin-top:8px}
  .doc td::before{content:attr(data-col);display:block;font-size:13px;font-weight:600;color:var(--ink-3)}
}