/* discover.eloai.io (26 Oct 2026). Owner: "extremely minimalist like Apple". The app is full of life; its site is the
 * opposite: white, quiet, one idea per screen, Apple's type (the system's San Francisco), and one accent, the app's own
 * ember (design bar M2; Discover/App/Brand.swift), with colour only where the bubbles are. Every colour is a token below,
 * and v2/tests/test_discover.py checks each text colour against its background (WCAG AA, 4.5:1). No web fonts, no
 * images but our own, nothing from another company. */
:root {
  --bg: #fff;
  --alt: #f5f5f7;
  --ink: #2A1E1A;            /* the app's ink */
  --ink-2: #6e6e73;
  --ink-3: #6e6e73;          /* was #86868b: 3.6:1 on white, under AA for the small print it carries */
  --line: #d2d2d7;
  --accent: #C93D1D;         /* the text ember: white on it 5.04:1, it on white 5.04:1 */
  --accent-hover: #B0351A;
  --on-accent: #fff;
  --link: #C93D1D;
  --glyph: #E8492A;          /* the ember, for drawings and glyphs only (white on it 3.88:1) */
  --band: #f5f5f7;          /* grey, not near-black (owner, 26 Oct 2026: no black sections) */
  --on-band: #2A1E1A;
  --on-band-2: #6e6e73;
  --link-on-band: #C93D1D;   /* text ember on #f5f5f7: 4.63:1 */
  --safety: #fff4f2;
  --bad: #b42318;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Hebrew", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body.d-body { margin: 0; font: 400 17px/1.47 var(--font); letter-spacing: -0.022em; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
[dir="rtl"] body.d-body, body.d-body [dir="rtl"] { letter-spacing: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.d-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.d-skip { position: absolute; top: 8px; inset-inline-start: 12px; z-index: 99; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; background: var(--ink); color: var(--on-accent); padding: 8px 14px; border-radius: 980px; }
.d-skip:focus { width: auto; height: auto; clip-path: none; }

/* ---- the bar: 52 points, frosted, a name and two words ---- */
.d-bar { position: sticky; top: 0; z-index: 50; height: 52px; background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.d-bar-in { max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center;
  justify-content: space-between; }
.d-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 21px; font-weight: 600;
  letter-spacing: 0.011em; }
.d-mark:hover { text-decoration: none; }
.d-links { display: flex; gap: 24px; }
.d-links a { color: var(--ink); font-size: 12px; letter-spacing: -0.01em; opacity: 0.8; }
.d-links a:hover { opacity: 1; text-decoration: none; }

/* ---- type ---- */
.d-eyebrow { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: 0.011em; color: var(--ink-2); }
.d-h1 { margin: 0; font-size: clamp(48px, 8vw, 96px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em;
  text-wrap: balance; }
.d-h2 { margin: 0; font-size: clamp(36px, 5vw, 56px); line-height: 1.07; font-weight: 700; letter-spacing: -0.02em;
  text-wrap: balance; }
[dir="rtl"] .d-h1, [dir="rtl"] .d-h2 { letter-spacing: 0; }
.d-sub { margin: 14px auto 0; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2; color: var(--ink); max-width: 30ch;
  letter-spacing: 0.004em; }
.d-lead { margin: 16px auto 0; font-size: clamp(19px, 1.9vw, 21px); line-height: 1.42; color: var(--ink-2); max-width: 38ch;
  letter-spacing: 0.011em; text-wrap: pretty; }
.d-start { margin-inline: 0; text-align: start; justify-content: flex-start; }

/* ---- buttons: Apple's pills ---- */
.d-ctas { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: center; margin-top: 28px; }
.d-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px;
  border-radius: 980px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 500; letter-spacing: -0.022em;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.d-btn:hover { background: var(--accent-hover); text-decoration: none; }
.d-btn:active { transform: scale(0.97); }
.d-more { font-size: 17px; }
.d-more::after { content: " ›"; }
[dir="rtl"] .d-more::after { content: " ‹"; }
.d-status { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); letter-spacing: -0.016em; }

/* ---- the hero: the words, then the map and its bubbles ---- */
.d-hero { text-align: center; padding: clamp(56px, 9vw, 104px) 22px 0; }
.d-map { margin: clamp(32px, 5vw, 56px) 0 0; }
.d-art { display: block; width: 100%; height: clamp(320px, 50vw, 720px); }
.d-b { animation: d-float 7s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.d-b2 { animation-delay: -1.2s; animation-duration: 8s; }
.d-b3 { animation-delay: -2.6s; }
.d-b4 { animation-delay: -3.4s; animation-duration: 6s; }
.d-b5 { animation-delay: -0.6s; animation-duration: 9s; }
.d-b6 { animation-delay: -4.1s; animation-duration: 8.5s; }
.d-b7 { animation-delay: -2s; }
.d-b8 { animation-delay: -5s; animation-duration: 7.5s; }
.d-b9 { animation-delay: -3s; animation-duration: 6.5s; }
.d-b10 { animation-delay: -1.8s; }
@keyframes d-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.d-route { animation: d-walk 26s linear infinite; }
@keyframes d-walk { to { stroke-dashoffset: -280; } }
@media (prefers-reduced-motion: reduce) { .d-b, .d-route { animation: none; } }

/* ---- the quiet sections: one idea each ---- */
.d-sec { max-width: 1024px; margin: 0 auto; padding: clamp(72px, 10vw, 128px) 22px 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.d-sec-words { text-align: start; }
.d-sec .d-lead { margin-inline: 0; }
.d-small { width: 100%; max-width: 440px; height: auto; justify-self: center; }
.d-flip .d-sec-words { order: 2; }
@media (max-width: 734px) {
  .d-sec { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .d-sec-words { text-align: center; }
  .d-sec .d-lead { margin-inline: auto; }
  .d-flip .d-sec-words { order: 0; }
}

/* ---- privacy: the one dark band, in the app's ink ---- */
.d-band { margin-top: clamp(80px, 11vw, 136px); background: var(--band); color: var(--on-band); text-align: center;
  padding: clamp(72px, 10vw, 120px) 22px; }
.d-band .d-lead { color: var(--on-band-2); }
.d-band a { color: var(--link-on-band); }
.d-band p:last-child { margin: 22px 0 0; }

/* ---- the close ---- */
.d-close { text-align: center; padding: clamp(80px, 11vw, 128px) 22px clamp(88px, 12vw, 140px); }

/* ---- the footer ---- */
.d-foot { background: var(--alt); color: var(--ink-2); font-size: 12px; line-height: 1.34; letter-spacing: -0.01em; }
.d-foot-in { max-width: 1024px; margin: 0 auto; padding: 20px 22px 24px; }
.d-note { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.d-foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
.d-foot-links a { color: var(--ink); }
.d-fine { margin: 0; color: var(--ink-3); }
.d-foot-min .d-foot-in { text-align: center; }

/* ---- the privacy policy and support, read like Apple's legal pages ---- */
.d-doc { max-width: 692px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) 22px clamp(72px, 9vw, 112px); }
.d-doc-title { margin: 0; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.d-stamp { margin: 12px 0 0; color: var(--ink-3); font-size: 14px; }
.d-callout { margin: 28px 0 0; padding: 16px 20px; border-radius: 18px; background: var(--alt); color: var(--ink-2); }
.d-doc-sec { margin-top: 44px; }
.d-doc-sec h2, .d-contact h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: 0.009em; }
.d-doc-sec p, .d-doc li { margin: 0 0 12px; color: var(--ink); }
.d-doc ul { margin: 0; padding-inline-start: 22px; }
.d-doc li { margin-bottom: 8px; }
.d-contact { margin-top: 40px; padding: 28px; border-radius: 22px; background: var(--alt); }
.d-contact p { margin: 0; color: var(--ink-2); }
.d-contact .d-ctas { margin-top: 18px; }
.d-safety { background: var(--safety); }
.d-qa { border-bottom: 1px solid var(--line); }
.d-qa summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.d-qa summary::-webkit-details-marker { display: none; }
.d-qa summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 22px; line-height: 1; }
.d-qa[open] summary::after { content: "−"; }
.d-qa p { margin: 0 0 18px; color: var(--ink-2); }
.d-fine-print { margin-top: 40px; color: var(--ink-3); font-size: 12px; }

/* ---- the invitation page: one card in the middle of the screen ---- */
.d-invite { min-height: calc(100vh - 52px - 120px); display: grid; place-items: center; padding: 48px 22px; gap: 24px; }
.d-invite-card { max-width: 520px; width: 100%; text-align: center; }
.d-invite-art { display: block; width: 180px; height: 120px; margin: 0 auto 12px; }
.d-invite-status { margin: 28px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--alt); color: var(--ink); }
.d-invite-beta { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }
.d-invite-code { margin: 18px 0 0; color: var(--ink-3); font-size: 14px; }
.d-invite-code code { font: 600 15px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 8px; background: var(--alt); }
.d-invite-bad { margin: 18px 0 0; color: var(--bad); font-size: 15px; }
.d-invite-private { margin: 22px 0 0; color: var(--ink-3); font-size: 13px; }
.d-invite-links { margin: 22px 0 0; display: flex; gap: 22px; justify-content: center; align-items: center; }
.d-switch { font: inherit; font-size: 15px; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.d-switch:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.d-404 { min-height: 50vh; }