/* Pear Sign · phase 9 site shell. Shared by every page mockup after the homepage:
   tokens, sky, island menu (+ phone menu), glass, buttons, FAQ, footer.
   Values come from design/design-system/project/tokens.json. Mockup code only. */

:root {
  /* sky + accent */
  --iris: #080813; --night: #11163a; --dusk: #3b4e86; --frozen: #a0bddb; --frozen-soft: #cfe0f2; --ember: #e9b9a4;
  /* text */
  --ink: #f4f6fb; --ink-muted: rgb(244 246 251 / .66); --ink-subtle: #8d96b8; --on-light: #080813;
  /* solid surfaces */
  --surface: #0c0f22; --surface-raised: #151a35; --surface-chrome: #151936; --surface-selected: #1c2348; --control: #2a3058;
  /* glass + lines */
  --glass-fill: rgb(255 255 255 / .06); --glass-hover: rgb(255 255 255 / .14);
  --field-fill: rgb(255 255 255 / .08); --field-fill-hover: rgb(255 255 255 / .12);
  --line: rgb(255 255 255 / .10); --line-strong: rgb(255 255 255 / .18); --island: #0a0a10;
  /* status */
  --success: #4ade80; --warning: #f5b85b; --danger: #ff6b6b;
  /* type + motion */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-enter: cubic-bezier(.16,1,.3,1); --ease-press: cubic-bezier(.32,.72,0,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1); --ease-move: cubic-bezier(.65,0,.35,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--iris); scrollbar-color: var(--control) var(--iris); }
body { margin: 0; background: transparent; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: rgb(160 189 219 / .35); color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--frozen); outline-offset: 3px; }

/* ---------- sky ---------- */
canvas#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; }
.dim { position: fixed; inset: 0; z-index: -1; background: var(--iris); opacity: .62; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) {
  .dim { opacity: var(--dim-from, 0); animation: sky-dim linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes sky-dim { to { opacity: .62; } }
} }

/* ---------- layout + type ---------- */
main { position: relative; z-index: 2; }
.wrap { width: min(1240px, 100%); margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.h1 { font-weight: 600; font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -.04em; line-height: 1.02; }
.h1 em, .h2 em { font-style: normal; color: var(--frozen); }
.h2 { font-weight: 600; font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.035em; line-height: 1.05; }
.lead { color: var(--ink-muted); font-size: 18px; line-height: 1.55; max-width: 46ch; margin: 18px 0 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* ---------- glass ---------- */
.glass { background: var(--glass-fill); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .08), 0 30px 70px -30px rgb(0 0 0 / .55); }
@media (prefers-reduced-transparency: reduce) { .glass { background: #141833; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border: 0; border-radius: 99px;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .5s var(--ease-press), background .3s, color .3s, opacity .3s; }
.btn:active { transform: scale(.97); }
.btn.sm { padding: 11px 18px; font-size: 15px; }
.btn.light { background: var(--ink); color: var(--on-light); }
.btn.light:hover { background: #fff; }
.btn.ghost { background: rgb(255 255 255 / .08); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.ghost:hover { background: var(--glass-hover); }
.btn:disabled, .btn[aria-disabled="true"] { background: rgb(255 255 255 / .06); color: var(--ink-subtle); box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed; transform: none; }

/* ---------- sign-in buttons (Apple, Google) ---------- */
.btn.sso { font-family: -apple-system, system-ui, "Onest", sans-serif; }
.btn.sso .ico { width: 19px; height: 19px; }
.btn.apple { background: #fff; color: #000; }
.btn.apple .ico { margin-top: -2px; }
.btn.apple:hover { background: #f2f2f2; }
/* Google's dark-theme button: #131314 fill, #8E918F border, #E3E3E3 text */
.btn.google { background: #131314; color: #e3e3e3; box-shadow: inset 0 0 0 1px #8e918f; font-family: "Roboto", "Onest", sans-serif; font-weight: 500; }
.btn.google:hover { background: #1f1f20; }

/* ---------- single-column pages (Buy, Log in, Support, Waitlist, 404) ---------- */
.solo { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding-block: calc(110px + env(safe-area-inset-top, 0px)) 72px; }
.solo > div { display: grid; justify-items: center; width: min(460px, 100%); }
.solo h1 { font-weight: 600; font-size: clamp(44px, 6vw, 72px); letter-spacing: -.045em; line-height: 1; }
.solo h1 em { font-style: normal; color: var(--frozen); }
.solo .lead { margin: 18px auto 0; text-align: center; max-width: 36ch; }
.solo .stack { display: grid; gap: 12px; width: 100%; margin-top: 36px; text-align: left; }
.solo .stack .btn { width: 100%; height: 54px; }
.solo .small { margin: 22px 0 0; color: var(--ink-muted); font-size: 15px; }
.solo .small a, .solo .small button { color: var(--frozen); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.solo .small a:hover, .solo .small button:hover { text-decoration: underline; }
.solo .field { background: rgb(8 8 19 / .6); }
.solo .btn.ghost { background: rgb(8 8 19 / .55); }
.solo .btn.ghost:hover { background: rgb(8 8 19 / .7); }
.solo .msg { color: var(--ink-muted); }
.solo .msg.err { color: var(--danger); }
.solo .field:hover, .solo .field:focus-within { background: rgb(8 8 19 / .72); }

/* ---------- status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge .ico { width: 15px; height: 15px; }
.badge.warn { background: rgb(245 184 91 / .14); color: var(--warning); }
.badge.ok { background: rgb(74 222 128 / .14); color: var(--success); }
.badge.tag { background: var(--frozen); color: var(--on-light); }

/* ---------- text field (borderless, floating label) ---------- */
.field { position: relative; display: block; height: 56px; border-radius: 14px; background: var(--field-fill); transition: background .3s var(--ease-press), box-shadow .3s; }
.field:hover { background: var(--field-fill-hover); }
.field:focus-within { background: var(--field-fill-hover); box-shadow: inset 0 0 0 1.5px var(--frozen); }
.field input { position: absolute; inset: 0; width: 100%; border: 0; background: none; outline: none; color: var(--ink); font: inherit; font-size: 16px; padding: 22px 16px 6px; caret-color: var(--frozen); }
.field .lab { position: absolute; left: 16px; top: 50%; translate: 0 -50%; font-size: 16px; color: var(--ink-subtle); pointer-events: none; transition: all .25s var(--ease-press); }
.field input:focus + .lab, .field input:not(:placeholder-shown) + .lab { top: 15px; font-size: 12px; font-weight: 500; }
.field.bad { background: rgb(255 107 107 / .12); box-shadow: inset 0 0 0 1.5px var(--danger); }
.field.bad .lab { color: var(--danger); }
.msg { margin: 8px 4px 0; font-size: 14px; line-height: 1.45; color: var(--ink-subtle); }
.msg.err { color: var(--danger); }

/* ---------- island menu ---------- */
.island { position: fixed; z-index: 40; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0;
  height: 52px; width: var(--w, 520px); max-width: calc(100vw - 24px); border-radius: 99px; overflow: hidden;
  background: var(--island); color: #fff; font-size: 14px;
  box-shadow: 0 16px 40px rgb(0 0 0 / .28), inset 0 0 0 1px rgb(255 255 255 / .08);
  transition: width .75s var(--ease-press); }
.isl-nav, .isl-live { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; transition: opacity .35s, filter .35s, transform .5s var(--ease-press); }
.isl-nav { gap: 2px; padding: 0 6px 0 14px; width: max-content; }
.isl-nav a, .isl-nav button { all: unset; cursor: pointer; color: rgb(255 255 255 / .72); padding: 9px 12px; border-radius: 99px; }
.isl-nav a:hover, .isl-nav button:hover { color: #fff; background: rgb(255 255 255 / .08); }
.isl-nav a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / .1); }
.isl-nav :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.isl-nav .isl-mark { color: #fff; display: flex; align-items: center; gap: 7px; font-weight: 600; padding-left: 4px; margin-right: 8px; }
.isl-nav .isl-go { background: #fff; color: var(--island); font-weight: 600; }
.isl-nav .isl-go:hover { background: #fff; color: var(--island); }
.isl-nav .isl-menu { display: none; padding: 8px 10px; }
.isl-menu svg { display: block; width: 20px; height: 20px; }
.isl-live { justify-content: space-between; padding: 0 12px 0 10px; opacity: 0; filter: blur(4px); transform: scale(.92); pointer-events: none; }
.island.busy .isl-nav { opacity: 0; filter: blur(4px); transform: scale(.92); pointer-events: none; }
.island.busy .isl-live { opacity: 1; filter: none; transform: none; }
.isl-app { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.isl-app i { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(140deg, #e8505b, #f7a35c); }
.isl-ring { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#34c759 var(--p, 0%), rgb(255 255 255 / .15) 0); }
.isl-ring::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--island); }
.isl-nav .isl-me { width: 34px; height: 34px; padding: 0; margin-left: 4px; border-radius: 50%; display: grid; place-items: center;
  background: var(--frozen); color: var(--on-light); font-weight: 700; font-size: 14px; }
.isl-nav .isl-me:hover { background: var(--frozen-soft); color: var(--on-light); }
/* account menu under the island (logged in) */
.amenu { position: fixed; z-index: 41; min-width: 220px; padding: 6px; border-radius: 20px; background: var(--surface-chrome);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -12px rgb(0 0 0 / .6); display: grid; }
.amenu p { margin: 0; padding: 10px 12px 8px; font-size: 13px; color: var(--ink-subtle); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.amenu p b { color: var(--ink); font-weight: 600; }
.amenu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-decoration: none; font-size: 15px; font-weight: 500; }
.amenu a .ico { color: var(--ink-subtle); }
.amenu a:hover, .amenu a:focus-visible { background: var(--surface-selected); outline: none; }
@media (prefers-reduced-motion: no-preference) { .amenu:not([hidden]) { animation: amenu-in .2s var(--ease-enter); } @keyframes amenu-in { from { opacity: 0; transform: translateY(-6px); } } }
@media (max-width: 760px) {
  .isl-nav .hide { display: none; }
  .isl-nav .isl-menu { display: block; }
}

/* ---------- phone menu (full-screen glass, opened from the island) ---------- */
.mmenu { position: fixed; inset: 0; z-index: 39; display: grid; align-content: start; gap: 6px;
  padding: calc(96px + env(safe-area-inset-top, 0px)) 24px 32px;
  background: rgb(8 8 19 / .78); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-press), visibility 0s .4s; }
.mmenu.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-press); }
.mmenu a { font-size: 36px; font-weight: 600; letter-spacing: -.035em; text-decoration: none; padding: 6px 0; color: var(--ink-muted); }
.mmenu a[aria-current="page"] { color: var(--frozen); }
.mmenu .btn { margin-top: 24px; font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .mmenu > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-enter), transform .7s var(--ease-enter); }
  .mmenu.open > * { opacity: 1; transform: none; }
  .mmenu.open > :nth-child(2) { transition-delay: .04s; } .mmenu.open > :nth-child(3) { transition-delay: .08s; }
  .mmenu.open > :nth-child(4) { transition-delay: .12s; } .mmenu.open > :nth-child(5) { transition-delay: .16s; }
}
@media (prefers-reduced-transparency: reduce) { .mmenu { background: var(--iris); backdrop-filter: none; } }

/* ---------- FAQ ---------- */
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-size: 18px; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm { width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .08); display: grid; place-items: center; flex: none; transition: transform .5s var(--ease-press), background .3s, color .3s; }
.faq-list summary .pm svg { width: 15px; height: 15px; }
.faq-list details[open] summary .pm { transform: rotate(45deg); background: var(--frozen); color: var(--on-light); }
.faq-list details p { margin: 0; padding: 0 4px 24px; color: var(--ink-muted); line-height: 1.6; max-width: 60ch; }

/* ---------- footer ---------- */
footer.site { position: relative; z-index: 2; border-top: 1px solid var(--line); padding-block: 32px 96px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
footer.site nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer.site a { text-decoration: none; } footer.site a:hover { color: var(--ink); }
footer.site span a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}