/* ArcComplete — components: navigation, mega menu, buttons, links, cards, device, forms, footer, veil, mobile bar */

/* ---------------------------------------------------------------- navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; }
.nav__inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 80px; margin-top: 0; padding-inline: var(--gutter);
  border-radius: 0; background: transparent; border: 1px solid transparent;
  transition: height var(--interface) var(--ease-soft), max-width var(--interface) var(--ease-soft), margin var(--interface) var(--ease-soft),
              background var(--interface) var(--ease-soft), border-color var(--interface) var(--ease-soft), box-shadow var(--interface) var(--ease-soft),
              border-radius var(--interface) var(--ease-soft), padding var(--interface) var(--ease-soft), transform var(--interface) var(--ease-soft);
  /* backdrop-filter is deliberately NOT transitioned. Animating a blur radius makes the
     browser recompute the blur behind the bar on every frame of the 360ms transition, and
     the bar is on screen for the whole scroll. Measured on the homepage: dropping it takes
     the median frame from 18.7ms to 14.6ms and the 95th percentile from 35.4ms to 25.1ms,
     with no visible difference — the blur simply appears with the rest of the compact
     state instead of fading in. */
}
.nav.is-compact .nav__inner {
  height: 58px; max-width: 1180px; margin-top: 12px; padding-inline: 14px 12px;
  border-radius: var(--r-nav);
  background: rgba(16, 19, 27, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow-3);
}
.nav__progress { position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--arc), var(--violet)); transform-origin: left; transform: scaleX(var(--read, 0)); opacity: 0; transition: opacity var(--interface) var(--ease-soft); pointer-events: none; }
.nav.is-compact .nav__progress { opacity: 0.9; }
.nav.is-compact .nav__brand span { font-size: 16px; }
.nav.is-hidden .nav__inner { transform: translateY(-120%); }
.nav.is-on-warm .nav__inner { background: rgba(244, 242, 236, 0.84); border-color: rgba(11, 12, 15, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(11, 12, 15, 0.06), 0 12px 40px rgba(11, 12, 15, 0.12); }
.nav.is-on-warm .nav__brand, .nav.is-on-warm .nav__link:hover, .nav.is-on-warm .nav__link[aria-current="page"], .nav.is-on-warm .nav__burger { color: var(--warm-fg); }
.nav.is-on-warm .nav__link { color: var(--warm-fg-2); }
.nav.is-on-warm .nav__brand img { filter: brightness(0); }
.nav.is-on-warm .btn--primary { background: var(--warm-fg); color: var(--warm); }

.nav__brand { display: inline-flex; align-items: center; gap: 14px; color: var(--fg); }
.nav__brand img { height: 22px; width: auto; transition: filter var(--interface) var(--ease-soft); }
.nav__brand span { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.nav.is-compact .nav__brand img { height: 20px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--fg-2);
  transition: color var(--micro) var(--ease-out), background var(--micro) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--fg); }
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; margin-left: -3.5px;
  border: 1.5px solid var(--arc); border-right-color: transparent; border-radius: 50%;
}
.nav__link .chev { width: 12px; height: 12px; transition: transform var(--micro) var(--ease-out); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--fg); }
.nav__burger svg { width: 22px; height: 22px; }

.nav-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(7, 8, 12, 0.55); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); opacity: 0; pointer-events: none; transition: opacity var(--interface) var(--ease-out); }
.nav-backdrop.is-on { opacity: 1; pointer-events: auto; }

/* mega menu */
.mega {
  position: absolute; left: 50%; top: calc(100% + 8px); z-index: 101;
  width: min(1100px, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%) translateY(-6px);
  background: rgba(16, 19, 27, 0.92);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.5);
  padding: 28px;
  display: grid; grid-template-columns: 300px 1fr; gap: 28px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--interface) var(--ease-out), transform var(--interface) var(--ease-out), visibility 0s linear var(--interface);
}
.mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.mega__intro { padding: 12px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.mega__intro .mega__title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.mega__intro p { color: var(--fg-2); font-size: 15px; max-width: 24ch; }
.mega__intro .link-underline { margin-top: 22px; display: inline-flex; font-size: 15px; white-space: nowrap; }
.mega__preview { position: relative; margin-top: 26px; height: 156px; }
.mega__shot { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); color: var(--fg);
  background: linear-gradient(160deg, var(--accent-soft), rgba(0, 0, 0, 0.35) 70%); border: 1px solid var(--accent-soft); box-shadow: 0 0 60px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
.mega[data-preview="body"] .mega__shot[data-accent="body"], .mega[data-preview="focus"] .mega__shot[data-accent="focus"], .mega[data-preview="learn"] .mega__shot[data-accent="learn"],
.mega[data-preview="life"] .mega__shot[data-accent="life"], .mega[data-preview="social"] .mega__shot[data-accent="social"], .mega[data-preview="money"] .mega__shot[data-accent="money"] { opacity: 1; transform: none; }
.mega__shot .ui-label { color: var(--accent); }
.mega__shot .ui-value { font-size: 22px; }
.mega__shot .ui-bar { margin-top: auto; }
.mega__shot .status { font-size: 12px; margin-top: 2px; }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mega__item {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-md);
  color: var(--fg); transition: background var(--micro) var(--ease-out), border-color var(--micro) var(--ease-out);
  border: 1px solid transparent; opacity: 0;
}
.mega.is-open .mega__item { animation: mega-in 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes mega-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mega__item:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.mega__item .app-icon { margin-bottom: -2px; }
.mega__item b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
.mega__item small { display: block; color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.mega__item .status { margin-top: auto; font-size: 13px; }
.mega__item--current { background: rgba(0, 116, 252, 0.07); border-color: rgba(0, 116, 252, 0.2); }
.mega__mini { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.3); font-size: 11px; color: var(--fg-3); }
.mega__mini b { font-size: 14px; color: var(--fg); }
.mega__mini .ui-bar { margin-top: 2px; }

/* mobile full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 95; background: var(--void); color: var(--fg);
  padding: 96px var(--gutter) 40px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--interface) var(--ease-out), visibility 0s linear var(--interface);
}
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu__group + .menu__group { margin-top: 36px; }
.menu__label { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-3); margin-bottom: 12px; }
.menu__link { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.menu__link small { margin-left: auto; font-size: 13px; color: var(--fg-3); font-weight: 400; letter-spacing: 0; text-align: right; }
.menu__link--product { font-size: 20px; }
.menu__link .app-icon { margin-right: 2px; }
.menu__cta { margin-top: 40px; }

@media (max-width: 1023px) {
  .nav__links, .nav__actions .btn { display: none; }
  .nav__burger { display: inline-flex; }
  .mega { display: none; }
}

/* ---------------------------------------------------------------- buttons & links */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 22px; border-radius: var(--r-btn); overflow: hidden;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform var(--micro) var(--ease-out), background var(--micro) var(--ease-out), color var(--micro) var(--ease-out), border-color var(--micro) var(--ease-out), filter var(--micro) var(--ease-out), box-shadow var(--micro) var(--ease-out);
}
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); opacity: 0; }
.btn:hover::after { animation: shine 480ms var(--ease-out) both; }
@keyframes shine { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow { width: 14px; height: 14px; transition: transform var(--micro) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--fg); color: var(--bg); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost { color: var(--s-fg); border: 1px solid var(--s-line-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--s-fg-2); background: rgba(255, 255, 255, 0.03); }
.theme-warm .btn--ghost:hover { background: rgba(0, 0, 0, 0.03); }
.btn--arc { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 8px 30px var(--accent-glow); }
.btn--arc:hover { filter: brightness(1.08); }
.btn--pill { border-radius: var(--r-pill); height: 40px; padding: 0 16px; font-size: 14px; }
.btn--sm { height: 42px; padding: 0 16px; font-size: 14px; }
/* A finger is not a mouse pointer: nothing tappable goes below 44px on a touch screen. */
@media (pointer: coarse) {
  .btn--pill, .btn--sm { min-height: 44px; }
  .nav__link, .subnav__links a { min-height: 44px; display: inline-flex; align-items: center; }
}
.theme-warm .btn--primary { background: var(--warm-fg); color: var(--warm); }

.link-underline {
  display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-size: 0% 1px; background-position: 0 100%;
  transition: background-size var(--micro) var(--ease-out), color var(--micro) var(--ease-out);
}
.link-underline:hover, .link-underline:focus-visible { background-size: 100% 1px; }
.link-underline .arrow { width: 13px; height: 13px; transition: transform var(--micro) var(--ease-out); }
.link-underline:hover .arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative; background: var(--s-surface); color: var(--s-fg);
  border: 1px solid var(--s-line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--interface) var(--ease-out), background var(--interface) var(--ease-out), transform var(--interface) var(--ease-out);
}
.card::before, .entry::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity 400ms var(--ease-out);
}
.card:hover::before, .entry:hover::before { opacity: 0.85; }
.card--tint:hover { border-color: var(--accent-soft); background: color-mix(in srgb, var(--s-surface) 88%, var(--accent) 12%); }
.card--lift:hover { transform: translateY(-3px); }
.theme-warm .card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 40px rgba(11, 12, 15, 0.06); }
.card--pad { padding: 28px; }
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- faq (warm; homepage and ArcBody page) */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; }
.faq__search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; margin-bottom: 8px; border-radius: var(--r-sm); border: 1px solid var(--s-line-strong); background: #fff; color: var(--s-fg-3); }
.faq__search input { flex: 1; border: 0; outline: none; background: none; font: inherit; color: var(--s-fg); }
.faq__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.faq__item { border-bottom: 1px solid var(--s-line); scroll-margin-top: 110px; }
.faq__item[hidden] { display: none; }
.faq__link { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--s-fg-3); text-decoration: underline; text-underline-offset: 3px; }
.faq__link:hover, .faq__item:target .faq__link { color: var(--accent); }
.faq__none { padding: 24px 0; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.015em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--s-line-strong); color: var(--s-fg-2); transition: transform 300ms var(--ease-out), background 300ms var(--ease-out), border-color 300ms var(--ease-out); }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.faq__answer { padding: 0 56px 26px 0; color: var(--s-fg-2); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.faq__answer p + p { margin-top: 10px; }

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .faq__head { position: static; }
}
@media (max-width: 640px) { .faq__answer { padding-right: 0; } }

/* ---------------------------------------------------------------- numbers (the strip under a hero, in place of ratings) */
/* section.band sets the padding with higher specificity than .band--tight, so this names the element too */
section.numbers-band { padding-block: clamp(40px, 5vw, 64px); }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.numbers__item { display: flex; flex-direction: column; gap: 8px; padding: 28px clamp(16px, 2vw, 28px); }
.numbers__item + .numbers__item { border-left: 1px solid var(--s-line); }
.numbers dt { font-size: clamp(36px, 4vw, 56px); font-weight: 500; letter-spacing: var(--track-tight); line-height: 1; color: var(--s-fg); }
.numbers dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--s-fg-2); max-width: 22ch; text-wrap: pretty; }
.numbers__note { margin-top: 14px; }

/* ---------------------------------------------------------------- promises (privacy, switching, adaptive targets) */
.promises__head { display: flex; flex-direction: column; gap: 20px; max-width: var(--measure-wide); }
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--s-line); }
.promise { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 28px 0; border-bottom: 1px solid var(--s-line); }
.promise h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.promise p { color: var(--s-fg-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.promises__note { margin-top: 20px; }
/* two promise sections in a row read as one chapter: no second top padding */
section.promises-band + section.promises-band { padding-top: 0; }
section.promises-band + section.promises-band .promises__head { padding-top: clamp(40px, 5vw, 64px); }

@media (max-width: 900px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers__item:nth-child(3) { border-left: 0; }
  .numbers__item:nth-child(n + 3) { border-top: 1px solid var(--s-line); }
}
@media (max-width: 400px) {
  .numbers__item { padding-inline: 12px 8px; }
  .numbers dd { font-size: 14px; }
}

/* ---------------------------------------------------------------- forms */
.waitlist { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; }
.waitlist__row { display: flex; gap: 10px; }
.waitlist input:not([type="checkbox"]) {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 18px;
  color: var(--s-fg); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--s-line-strong); border-radius: var(--r-btn); outline: none;
  transition: border-color var(--micro) var(--ease-out), background var(--micro) var(--ease-out), box-shadow var(--micro) var(--ease-out);
}
.theme-warm .waitlist input:not([type="checkbox"]) { background: #fff; }
.waitlist input::placeholder { color: var(--s-fg-3); }
.waitlist input:not([type="checkbox"]):focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* the tester tick box: the whole line is the tap target, at least 44px tall */
.waitlist__tester { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; align-self: flex-start; font-size: 15px; color: var(--s-fg-2); cursor: pointer; text-align: left; }
.waitlist__tester input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.waitlist__field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--s-fg-2); text-align: left; }
.waitlist__note { margin-top: 12px; font-size: 14px; color: var(--s-fg-3); }
.waitlist[data-state="done"] input, .waitlist[data-state="done"] .btn, .waitlist[data-state="done"] .waitlist__tester, .waitlist[data-state="done"] .waitlist__field { display: none; }
.waitlist__done { display: none; align-items: center; gap: 10px; height: 50px; color: var(--s-fg); }
.waitlist[data-state="done"] .waitlist__done { display: inline-flex; }
@media (max-width: 520px) { .waitlist__row { flex-direction: column; } }

/* ---------------------------------------------------------------- device (ArcBody concept UI) */
.device {
  position: relative; width: 300px; aspect-ratio: 1440 / 3088; margin-inline: auto;
  border-radius: var(--r-device); background: #0C0E14;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 6px #151922, 0 0 0 7px rgba(255, 255, 255, 0.06),
              0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.45), 0 60px 120px rgba(0, 0, 0, 0.55),
              0 40px 90px -30px var(--accent-glow);
  overflow: hidden; color: var(--fg);
  transition: transform 300ms var(--ease-out);
}
.device::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 26%, transparent 44%);
}
.device--sm { width: 250px; border-radius: var(--r-device-sm); }
.screen { position: absolute; inset: 0; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.screen--tight { gap: 12px; }
[data-views] .screen { opacity: 0; transform: translateX(12px); pointer-events: none; }
[data-views][data-view="today"] .screen[data-screen="today"], [data-views][data-view="nutrition"] .screen[data-screen="nutrition"], [data-views][data-view="training"] .screen[data-screen="training"] { opacity: 1; transform: none; }
.device__tabs { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); display: flex; gap: 6px; }
.device__tabs i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); transition: background 300ms var(--ease-out), transform 300ms var(--ease-out); }
[data-view="today"] ~ .device__tabs i:nth-child(1), [data-view="nutrition"] ~ .device__tabs i:nth-child(2), [data-view="training"] ~ .device__tabs i:nth-child(3) { background: var(--accent); transform: scale(1.3); }
.ui-top { display: flex; align-items: baseline; justify-content: space-between; padding-top: 16px; }
.ui-top b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.ui-top span, .ui-label, .mega__mini > span:first-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-sub b, .ui-row span { font-variant-numeric: tabular-nums; }
.ui-top span { color: var(--fg-3); font-size: 12px; }
.ui-card { background: var(--elevated); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--r-md); padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
.ui-card--row { display: flex; align-items: center; gap: 12px; }
.ui-label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ui-value { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ui-value small { font-size: 11px; color: var(--fg-3); font-weight: 400; margin-left: 4px; letter-spacing: 0.04em; }
.ui-value--accent { color: var(--accent); }
.ui-sub { font-size: 12px; color: var(--fg-2); }
.ui-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ui-bar i { display: block; height: 100%; width: var(--w, 50%); background: var(--fg-2); border-radius: 2px; transition: width 900ms var(--ease-out); }
.ui-bar--arc i { background: var(--accent); }
.ui-ring { width: 64px; height: 64px; flex: none; }
.ui-ring circle { fill: none; stroke-width: 4; }
.ui-ring .track { stroke: rgba(255, 255, 255, 0.07); }
.ui-ring .fill { stroke: var(--accent); stroke-linecap: butt; stroke-dasharray: 176; stroke-dashoffset: calc(176 * (1 - var(--p, 0.81))); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 900ms var(--ease-out); }
.ui-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; }
.ui-row:first-child { border-top: 0; }
.ui-row span { color: var(--fg-3); }
.ui-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.18); display: inline-grid; place-items: center; }
.ui-check.is-done { border-color: var(--accent); background: var(--accent); }
.ui-check svg { width: 10px; height: 10px; }
.ui-fab { position: absolute; right: 20px; bottom: 26px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; z-index: 4; transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out); }
.ui-tabs { display: flex; gap: 6px; }
.ui-tab { padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--fg-3); border: 1px solid rgba(255, 255, 255, 0.06); }
.ui-tab.is-on { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.ui-line { width: 100%; height: 64px; }
.ui-line path { fill: none; stroke-width: 1.5; }
.ui-line .grid { stroke: rgba(255, 255, 255, 0.06); }
.ui-line .trend { stroke: var(--accent); }
.ui-glow { position: absolute; left: 50%; bottom: -8%; width: 120%; height: 30%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse closest-side, var(--accent-soft), transparent 100%); pointer-events: none; }

/* app row (products page hero) */
.app-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.app-row__item { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--fg-2); transition: border-color var(--micro) var(--ease-out), color var(--micro) var(--ease-out), background var(--micro) var(--ease-out); }
.app-row__item:hover { color: var(--fg); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.03); }
.app-row__item.is-live { border-color: var(--accent-soft); color: var(--fg); }

/* ---------------------------------------------------------------- misc */
.icon { width: 24px; height: 24px; }
.icon svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- footer */
.footer { --p: 0; position: relative; background: var(--void); color: var(--fg); border-top: 1px solid var(--line); padding: 88px 0 40px; overflow: hidden; }
.footer__wm { position: absolute; left: 50%; bottom: -0.16em; font-size: clamp(120px, 21vw, 320px); font-weight: 500; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; pointer-events: none; user-select: none;
  color: rgba(245, 244, 239, 0.07); transform: translate(-50%, calc((1 - var(--p)) * 18%)); transition: transform 120ms linear;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 92%); mask-image: linear-gradient(180deg, #000 20%, transparent 92%); }
.footer__status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 13px; color: var(--fg-2); width: fit-content; max-width: none; white-space: nowrap; }
.footer__brand .footer__status { max-width: none; }
.footer__status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-body); box-shadow: 0 0 0 4px var(--c-body-soft); animation: status-pulse 2.6s var(--ease-in-out) infinite; }
.footer__status b { font-weight: 500; color: var(--fg); }
@keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--c-body-soft); } 50% { box-shadow: 0 0 0 6px var(--c-body-soft); } }
.footer__sig { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--fg-2); }
.footer__top { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__brand img { height: 26px; width: auto; }
.footer__brand p { color: var(--fg-3); font-size: 14px; max-width: 30ch; }
.footer__col h3 { font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-3); font-weight: 500; margin-bottom: 16px; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--fg-2); transition: color var(--micro) var(--ease-out); }
.footer__col a:hover { color: var(--fg); }
.footer__col a .arrow { width: 12px; height: 12px; opacity: 0; transform: translateX(-4px); transition: opacity var(--micro) var(--ease-out), transform var(--micro) var(--ease-out); }
.footer__col a:hover .arrow { opacity: 1; transform: none; }
.footer__col a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); flex: none; }
.footer__col small { display: block; font-size: 12px; color: var(--fg-3); margin-top: 2px; padding-left: 15px; }
.footer__bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); flex-wrap: wrap; }
.footer__mark { position: absolute; right: -16%; bottom: -52%; width: 40vw; max-width: 600px; opacity: 0.3; pointer-events: none; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__mark { display: none; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- page transition veil */
.veil { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--void); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.veil.is-leaving { opacity: 1; pointer-events: auto; }
.veil.is-arriving { opacity: 1; transition: none; }
.veil__pulse { position: absolute; left: var(--vx, 50%); top: var(--vy, 50%); width: 24px; height: 24px; border-radius: 50%; background: var(--accent); opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none; }
.veil.is-leaving .veil__pulse { animation: veil-pulse 560ms var(--ease-in-out) both; }
@keyframes veil-pulse { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(130); } }
.veil__mark { position: relative; height: 26px; width: auto; opacity: 0; transition: opacity 200ms var(--ease-out) 100ms; }
.veil.is-leaving .veil__mark { opacity: 1; }
.veil__arc { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; overflow: visible; }
.veil__arc path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 40 100; stroke-dashoffset: 40; opacity: 0; }
.veil.is-leaving .veil__arc path { animation: veil-sweep 460ms var(--ease-in-out) 40ms both; }
@keyframes veil-sweep { 0% { stroke-dashoffset: 40; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }

/* ---------------------------------------------------------------- mobile sticky bar */
.mobile-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 85; display: none; padding: 8px; border-radius: var(--r-md); background: rgba(16, 19, 27, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); transform: translateY(120%); transition: transform var(--interface) var(--ease-soft); }
.mobile-bar .btn { width: 100%; }
.mobile-bar.is-on { transform: none; }
@media (max-width: 1023px) { .mobile-bar { display: block; } }
/* The bar floats over the page, so it also floats over the warm sheets. nav.js gives it
   the same treatment the navigation gets, or it reads as a dark slab dropped on cream. */
.mobile-bar.is-on-warm { background: rgba(244, 242, 236, 0.86); border-color: rgba(11, 12, 15, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 40px rgba(11, 12, 15, 0.16); }
/* Nothing reserved room for it, so the end of the document — the copyright and sign-off —
   sat underneath the bar and could not be scrolled into view. */
@media (max-width: 1023px) {
  .footer { padding-bottom: 124px; }
}
/* A phone held sideways has about 390px of height. The bar at its usual size takes a fifth
   of that on top of the navigation, which leaves very little page. Shrink it rather than
   hide it: the navigation's own waitlist button is already hidden at this width, so hiding
   the bar would leave no call to action at all. */
@media (max-width: 1023px) and (max-height: 460px) {
  .mobile-bar { left: 8px; right: 8px; bottom: 8px; padding: 5px; }
  .mobile-bar .btn { height: 40px; font-size: 14px; }
  .footer { padding-bottom: 78px; }
}
.promises__link { margin-top: 24px; }