/* Crownup site: shared tokens, type, components (card, phone, badge).
   Web fonts are free Google lookalikes of the app's licensed PP fonts:
   PP Right Grotesk Wide -> Archivo (wdth 125) · PP Right Didone -> Bodoni Moda
   PP Mori -> Inter Tight · PP Neue Montreal Mono -> Geist Mono */

:root {
  --black: #000;
  --ink: #f5f5f7;
  --ink-2: rgba(245, 245, 247, .66);
  --ink-3: rgba(245, 245, 247, .42);
  --line: rgba(245, 245, 247, .10);
  --line-2: rgba(245, 245, 247, .16);
  --panel: #0b0b0d;
  --panel-2: #111114;

  --blue: #5B9BFF;
  --amber: #FFC83D;
  --green: #3BE08B;
  --violet: #A27BFF;
  --orange: #FF8A4C;

  --ti: linear-gradient(135deg, #7A7E86 0%, #BABDC3 26%, #E4E6E9 44%, #A9ADB3 56%, #80848B 78%, #AEB1B7 100%);

  --f-wide: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 16px;
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--ink);
  font: 400 17px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #000; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.wordmark { font-family: var(--f-wide); font-stretch: 125%; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.h-display {
  font-family: var(--f-sans); font-weight: 600; letter-spacing: -.035em; line-height: .98;
  font-size: clamp(44px, 7.4vw, 104px); margin: 0; text-wrap: balance;
}
.h-serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; margin: 0; text-wrap: balance; }
.h-2 { font-family: var(--f-sans); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(34px, 4.6vw, 64px); margin: 0; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--ink-2); margin: 0; text-wrap: pretty; max-width: 34ch; }
.mono { font-family: var(--f-mono); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: 14px; pointer-events: none; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__brand, .nav__cta { pointer-events: auto; }
.nav__brand { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; font-size: 15px; min-width: 0; white-space: nowrap; }
.nav__brand svg { width: 26px; height: auto; flex-shrink: 0; }
@media (max-width: 359px) { .nav__brand { font-size: 11px; letter-spacing: .12em; } .nav__cta { padding: 0 12px; font-size: 13px; } }
.nav__links { pointer-events: auto; display: none; gap: 28px; font-size: 14px; color: var(--ink-2); }
.nav__links a { text-decoration: none; }
.nav__links a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav__links { display: flex; } }
.nav__cta { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: #000; text-decoration: none; font-size: 14px; font-weight: 600; }
.nav.is-solid::before { content: ""; position: absolute; inset: 0; height: 64px; background: linear-gradient(#000 40%, transparent); pointer-events: none; z-index: -1; }

/* ---------- store row ---------- */
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.store__apple { display: inline-block; line-height: 0; border-radius: 9px; }
.store__apple img { height: 48px; width: auto; }   /* official badge, unaltered, >= 40 px tall */
.store__android { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 14px; }
.store__android b { color: var(--ink-2); font-weight: 500; }
.store__note { font-size: 13px; color: var(--ink-3); width: 100%; }

/* ---------- the Crownup Card (CSS port of FCDCardSkins) ---------- */
.card {
  --metal: linear-gradient(135deg, #1C1C1F 0%, #111113 25%, #0B0B0D 50%, #141417 75%, #09090A 100%);
  --edge: linear-gradient(135deg, #A4A6AC, #3A3B3F 25%, #75777D 50%, #2A2B2E 75%, #B8BABF);
  --ink-card: #E2E3E6; --ink-card-2: rgba(226, 227, 230, .62);
  --sheen: 221, 226, 234; --sheen-a: .10;
  --glow: var(--amber);
  --sx: 30%; --sy: 20%;
  position: relative; aspect-ratio: 1.586; width: 100%;
  border-radius: 5.4% / 8.6%;
  border: 1.5px solid transparent;
  background: var(--metal) padding-box, var(--edge) border-box;
  color: var(--ink-card); text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9), 0 18px 40px -20px rgba(0,0,0,.8);
  overflow: hidden; isolation: isolate;
  container-type: inline-size;
  transform-style: preserve-3d;
}
.card[data-metal="steel"] {
  --metal: linear-gradient(135deg, #52555B, #63666C 25%, #6B6E74 50%, #5A5D63 75%, #46494E);
  --edge: linear-gradient(135deg, #C9CBD0, #4A4D52 25%, #9B9EA3 50%, #3E4146 75%, #C2C4C8);
  --ink-card: #EDEEF0; --ink-card-2: rgba(237, 238, 240, .7); --sheen: 238, 241, 245; --sheen-a: .14;
}
.card[data-metal="platinum"] {
  --metal: linear-gradient(135deg, #A2A5AB, #B6B9BE 25%, #C0C3C7 50%, #B0B3B8 75%, #96999F);
  --edge: linear-gradient(135deg, #F4F5F7, #8C8F95 25%, #DCDFE2 50%, #7A7D83 75%, #EFF0F2);
  --ink-card: #2A2D32; --ink-card-2: rgba(31, 33, 37, .66); --sheen: 244, 247, 251; --sheen-a: .22;
}
.card[data-metal="gold"] {
  --metal: linear-gradient(135deg, #A27E45, #BF9C5F 25%, #CCAE73 50%, #BC985A 75%, #8F6D37);
  --edge: linear-gradient(135deg, #F4E0AE, #87672F 25%, #DCC083 50%, #6E5222 75%, #EAD29A);
  --ink-card: #3A2912; --ink-card-2: rgba(44, 30, 10, .7); --sheen: 255, 243, 210; --sheen-a: .24;
}
/* brushed grain (no image file) */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%; mix-blend-mode: overlay; opacity: .55;
}
/* tilt sheen: a broad wash + a narrow glint that follow --sx/--sy */
.card::after {
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 55% at var(--sx) var(--sy), rgba(var(--sheen), calc(var(--sheen-a) * 1.6)), transparent 70%),
    linear-gradient(115deg, transparent calc(var(--sx) - 8%), rgba(var(--sheen), var(--sheen-a)) var(--sx), transparent calc(var(--sx) + 8%));
  mix-blend-mode: screen;
}
.card__frame { position: absolute; inset: 4.2%; border-radius: 3.2% / 5%; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; z-index: 1; pointer-events: none; }
.card[data-metal="platinum"] .card__frame, .card[data-metal="steel"] .card__frame { display: none; }
.card__in { position: absolute; inset: 0; z-index: 2; padding: 7.5% 7.5% 6.5%; display: grid; grid-template-rows: auto 1fr auto; }
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__logo { display: inline-flex; align-items: center; gap: 2.2cqw; font-family: var(--f-wide); font-stretch: 125%; font-weight: 600; font-size: 3.3cqw; letter-spacing: .2em; color: var(--ink-card-2); }
.card__logo svg { width: 7cqw; height: auto; }
.card__level { font-family: var(--f-wide); font-stretch: 125%; font-weight: 600; font-size: 2.7cqw; letter-spacing: .2em; padding: 1.1cqw 2.2cqw; border-radius: 99px; border: 1px solid currentColor; color: var(--ink-card-2); }
.card__mid { align-self: end; }
.card__name { font: 500 5.6cqw/1.1 var(--f-sans); letter-spacing: -.01em; }
.card__hours { font: 600 15cqw/1 var(--f-sans); letter-spacing: -.045em; margin-top: 1cqw; font-variant-numeric: tabular-nums; }
.card__hours small { font-size: .5em; font-weight: 500; letter-spacing: 0; margin-left: .12em; }
.card__bottom { display: flex; justify-content: space-between; align-items: end; gap: 4cqw; font: 400 2.9cqw/1.2 var(--f-mono); color: var(--ink-card-2); letter-spacing: .02em; margin-top: 2.6cqw; }
.card__bottom .v { display: inline-flex; align-items: center; gap: 1.4cqw; }
.card__bottom svg { width: 4.6cqw; height: 4.6cqw; }
.card__ink { text-shadow: 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.10); }
.card[data-metal="platinum"] .card__ink, .card[data-metal="gold"] .card__ink { text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.18); }
.card-glow { position: absolute; inset: 6% 4%; border-radius: 10%; background: var(--glow, var(--amber)); filter: blur(46px); opacity: .32; z-index: -1; transform: translateZ(-40px); }

/* ---------- phone frame ---------- */
.phone {
  --r: 15.5%;
  position: relative; width: 100%; aspect-ratio: 1206 / 2622;
  border-radius: var(--r) / 7.2%;
  padding: 3.2%;
  background: linear-gradient(145deg, #3a3b3f, #121214 30%, #1d1e21 60%, #4a4b50);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 50px 100px -40px rgba(0,0,0,.95), 0 30px 60px -30px rgba(0,0,0,.8);
}
.phone::before { content: ""; position: absolute; inset: 1.2%; border-radius: calc(var(--r) - 1%) / 6.8%; background: #000; }
.phone img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 12.4% / 5.8%; }
.phone::after { content: ""; position: absolute; top: 4.3%; left: 50%; width: 29%; height: 3.1%; transform: translateX(-50%); background: #000; border-radius: 99px; }

/* ---------- buttons / chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 99px; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; }
.btn--light { background: var(--ink); color: #000; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--green)); box-shadow: 0 0 10px var(--c, var(--green)); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* the real app icon (iOS squircle-ish corner) */
.app-icon { display: block; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.6); }
.crown-mark { display: block; height: auto; }
/* Logo lockup: the crown's band sits on the letters' baseline, crown about 1.6x the cap height (matches the app card). */
.nav__brand .crown-mark { width: 21px; flex-shrink: 0; }