/* Jevify waitlist. The look is the app's own (the orbit redesign, Sources/JevifyApp/Theme.swift in the
   app repo): a near-white canvas under soft glows in the Finder tag colours, one ink, New York for the
   titles and SF for the rest, white cards, glass, one black button. Light only, like the app. */

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* New York where the system has it (Safari), Newsreader everywhere else */
  --serif: ui-serif, "New York", "Newsreader", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --canvas: #fdfdfc;
  --ink: #1b1a19;
  --soft: #6b6863;
  --hair: rgba(0, 0, 0, .08);
  --danger: #d6453d;
  --green: #34c759;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--canvas); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; z-index: 50; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- the glows: the app's six, behind everything ---------- */
.glows { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glows i { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 16s ease-in-out infinite alternate; }
.glows i:nth-child(1) { width: 48%; height: 62%; left: -10%; top: -16%; background: rgba(247, 172, 164, .48); }
.glows i:nth-child(2) { width: 40%; height: 55%; left: 34%; top: -30%; background: rgba(250, 226, 150, .48); animation-delay: -3s; }
.glows i:nth-child(3) { width: 44%; height: 60%; right: -12%; top: -8%; background: rgba(214, 196, 245, .52); animation-delay: -6s; }
.glows i:nth-child(4) { width: 46%; height: 58%; left: -8%; bottom: -34%; background: rgba(186, 228, 196, .48); animation-delay: -9s; }
.glows i:nth-child(5) { width: 52%; height: 64%; right: -6%; bottom: -38%; background: rgba(176, 208, 246, .52); animation-delay: -11s; }
.glows i:nth-child(6) { width: 40%; height: 48%; left: 30%; top: 26%; background: rgba(255, 255, 255, .95); animation: none; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(34px, -22px) scale(1.08); } }

/* ---------- surfaces ---------- */
.card { background: rgba(255, 255, 255, .93); box-shadow: 0 14px 34px -18px rgba(40, 30, 20, .3), 0 0 0 .5px rgba(0, 0, 0, .07); }
.glass { background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
         box-shadow: 0 16px 34px -18px rgba(40, 30, 60, .28), 0 0 0 .5px rgba(255, 255, 255, .9) inset, 0 0 0 .5px rgba(0, 0, 0, .06); }
.primary { height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: #111; color: #fff; font-size: 14.5px; font-weight: 600;
           display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer;
           box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); transition: transform .12s, opacity .2s; }
.primary:hover { transform: translateY(-1px); }
.primary:active { transform: scale(.97); }
.primary:disabled { opacity: .5; cursor: default; transform: none; }
.primary span { opacity: .55; font-size: 13px; font-weight: 400; }

/* ---------- top bar ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 36px 0; max-width: 1240px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }
.top__links { font-size: 13.5px; color: var(--soft); }
.top__links a { text-decoration: none; }
.top__links a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 64px 24px 0; }
.over { font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--soft); margin-bottom: 16px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.016em; text-wrap: balance; }
.lede { font-size: 17px; line-height: 1.5; color: var(--soft); max-width: 580px; margin: 18px auto 0; }

/* ---------- the orbit: the app's sort screen, running ---------- */
.orbit { position: relative; max-width: 1000px; height: 384px; margin: 28px auto 0; }
.src { position: absolute; left: 50%; top: 174px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.pill { font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .85); padding: 4px 11px; border-radius: 99px;
        box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 12px -6px rgba(0, 0, 0, .2); }
.ot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ball { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 20%, white);
        box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, white), 0 10px 20px -12px var(--c); transition: transform .18s; }
.ball svg { width: 24px; height: 24px; stroke: var(--c); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ot .nm { font-size: 12.5px; color: #3b3935; white-space: nowrap; }
.ot .nm b { color: var(--ink); margin-left: 3px; font-variant-numeric: tabular-nums; }
.ot.bump .ball { transform: scale(1.12); }
.chip { position: absolute; width: 14px; height: 18px; border-radius: 3px; background: #fff; border: 1.5px solid var(--c); box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
        transition: left .7s cubic-bezier(.3, .7, .3, 1), top .7s cubic-bezier(.3, .7, .3, 1), opacity .7s; z-index: 3; pointer-events: none; }

/* ---------- the waitlist form ---------- */
.wl { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 30px auto 0; max-width: 560px; }
.wl__bar { display: flex; gap: 8px; padding: 6px; border-radius: 16px; width: 100%; max-width: 480px; }
.wl__bar input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; padding: 0 12px; font-size: 15px; outline: none; }
.wl__bar input::placeholder { color: var(--soft); }
.wl__bar:focus-within { box-shadow: 0 16px 34px -18px rgba(40, 30, 60, .28), 0 0 0 1.5px var(--ink); }
.wl__bar:has(input[aria-invalid="true"]) { box-shadow: 0 16px 34px -18px rgba(40, 30, 60, .28), 0 0 0 1.5px var(--danger); }
.err { font-size: 13px; color: var(--danger); min-height: 0; }
.err:empty { display: none; }
.wl__fine { font-size: 13px; color: var(--soft); }
.wl__status { font-size: 13.5px; min-height: 20px; }
.wl__status[data-tone="error"] { color: var(--danger); }
.wl__status[data-tone="demo"] { color: var(--soft); border-top: 1.5px dashed var(--hair); padding-top: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* after a sign-up: the app's receipt, one white card with the green tick */
.wl.wl--done { background: rgba(255, 255, 255, .93); box-shadow: 0 14px 34px -18px rgba(40, 30, 20, .3), 0 0 0 .5px rgba(0, 0, 0, .07);
               border-radius: 20px; padding: 26px 30px; gap: 6px; max-width: 480px; }
.wl__done-title { font-family: var(--serif); font-size: 28px; letter-spacing: -0.012em; display: flex; align-items: center; gap: 12px; outline: none; }
.wl__done-title::before { content: ""; width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: 0 8px 18px -8px rgba(52, 199, 89, .8);
                          background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.5' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.wl__done-body { color: var(--soft); }

/* ---------- privacy: one line that opens into the four facts ---------- */
.privacy { max-width: 560px; margin: 14px auto 0; }
.privacy summary { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; cursor: pointer; list-style: none;
                   font-size: 13.5px; color: var(--soft); }
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary:hover, .privacy[open] summary { color: var(--ink); }
.privacy summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
                          transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.privacy[open] summary::after { transform: translateY(1px) rotate(225deg); }
.privacy ul { list-style: none; text-align: left; margin-top: 10px; border-radius: 16px; padding: 4px 20px; font-size: 14px; color: #3b3935; }
.privacy li { padding: 11px 0; border-top: 1px solid var(--hair); }
.privacy li:first-child { border-top: 0; }

/* ---------- footer ---------- */
.foot { max-width: 720px; margin: 0 auto; padding: 40px 24px 48px; text-align: center; font-size: 13.5px; color: var(--soft); }
.foot a { text-decoration: none; color: var(--ink); }
.foot a:hover { text-decoration: underline; }
.foot__small { font-size: 12.5px; margin-top: 10px; }

/* ---------- phone: six folders in a tighter ring ---------- */
@media (max-width: 720px) {
  .top { padding: 18px 16px 0; }
  .top__links { display: none; }
  .hero { padding: 40px 16px 0; }
  .hero h1 br { display: none; }
  .lede { font-size: 16px; }
  .orbit { height: 320px; margin-top: 16px; }
  .src { top: 150px; }
  .src svg { width: 66px; height: 52px; }
  .ot { left: var(--mx); top: var(--my); }
  .ot.desk { display: none; }
  .ball { width: 48px; height: 48px; }
  .ball svg { width: 20px; height: 20px; }
  .ot .nm { font-size: 12px; }
  .wl__bar input { padding: 0 8px; }
  .primary { padding: 0 12px; }
  .primary span { display: none; }
  .privacy ul { padding: 2px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .glows i { animation: none; }
  .ot .nm b { display: none; }
  .primary, .ball, .privacy summary::after { transition: none; }
}