/*
  Squad: the one stylesheet for every page. No build step: edit it and deploy.

  The look is the app's Night theme (Squad repo: apps/mobile/DESIGN.md, src/theme/colors.ts): a near-black
  page, glass cards (white at a few percent with a 1px edge, no blur), pill buttons, and one accent,
  cyan #00E6FF, with charcoal text and icons on it. Night is the default. A phone set to light mode gets
  the app's warm ivory Light theme instead.

  The invite and pay pages' scripts find their elements by id and fill them in. These rules style the
  classes those pages already carry (.skeleton, .btn, .pay-group, .bank-row and so on), so the scripts
  never have to change.

  All motion is CSS and sits in the prefers-reduced-motion: no-preference block near the end. Without
  it, every page shows its finished state straight away.
*/

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  /* Night: the app's darkColor */
  --page: #050506; /* pageSolid */
  --ink: #f5f3f0; /* inkStrong */
  --ink-body: #dcdad6; /* long reading text, a touch softer than ink */
  --ink-soft: #9b9a9d; /* inkSoft: 7:1 on the page */
  --card: rgba(255, 255, 255, 0.035); /* glass */
  --card-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005) 55%, rgba(255, 255, 255, 0.015));
  --field: rgba(255, 255, 255, 0.06); /* fieldWarm */
  --chip: rgba(255, 255, 255, 0.09); /* chipWarm */
  --edge: rgba(255, 255, 255, 0.085); /* outline: the 1px edge on every card */
  --rim: rgba(255, 255, 255, 0.1); /* light catching a card's top edge (GlassFill) */
  --inset: rgba(0, 0, 0, 0.3); /* a well sunk into the glass */
  --hover: rgba(255, 255, 255, 0.045);
  --press: rgba(255, 255, 255, 0.08);

  --accent: #00e6ff; /* the one accent */
  --accent-end: #61d5ff; /* accentSoft: where the primary gradient ends */
  --accent-ink: #00e6ff; /* coralInk: the accent as text */
  --on-accent: #1a1714; /* onCoral: text and icons on the accent, 11:1 */
  --accent-pale: rgba(0, 230, 255, 0.16); /* coralPale */
  --accent-wash: rgba(0, 230, 255, 0.07); /* coralWash */
  --accent-edge: rgba(0, 230, 255, 0.3);
  --accent-shadow: rgba(0, 230, 255, 0.32);
  --glow: rgba(0, 230, 255, 0.3); /* the light behind the logo, from LogoReveal */
  --glow-mid: rgba(0, 230, 255, 0.1);
  --glow-end: rgba(0, 230, 255, 0);

  --quiet: rgba(255, 255, 255, 0.05); /* NightButton's quiet pill */
  --quiet-edge: rgba(255, 255, 255, 0.14);
  --quiet-hover: rgba(255, 255, 255, 0.09);
  --idle: rgba(255, 255, 255, 0.07); /* a button that can't be used yet */
  --idle-ink: rgba(255, 255, 255, 0.5);
  --skeleton: rgba(255, 255, 255, 0.07);
  --skeleton-hi: rgba(255, 255, 255, 0.14);
  --logo: #f5f3f0; /* the logo is ivory on Night and ink on Light, never cyan */
  --lift: none; /* a shadow under glass shows through as a smudge */

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='none' stroke='black' stroke-width='40' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='128' y='128' width='336' height='336' rx='57'/%3E%3Cpath d='M383.5 128l.5-24a56.16 56.16 0 0 0-56-56H112a64.19 64.19 0 0 0-64 64v216a56.16 56.16 0 0 0 56 56h24'/%3E%3C/g%3E%3C/svg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg fill='none' stroke='black' stroke-width='40' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='144' y='32' width='224' height='448' rx='52'/%3E%3Cpath d='M224 400h64'/%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M268 112l144 144-144 144M392 256H100' fill='none' stroke='black' stroke-width='48' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    /* Light: the app's lightColor */
    --page: #faf8f4; /* ivory */
    --ink: #171717;
    --ink-body: #2b2825;
    --ink-soft: #6e6961;
    --card: #fffdfc; /* cardWarm */
    --card-sheen: none;
    --field: #f3eee7;
    --chip: #efeae2;
    --edge: #e6dfd6;
    --rim: rgba(255, 255, 255, 0);
    --inset: #f7f3ee;
    --hover: rgba(23, 23, 23, 0.035);
    --press: rgba(23, 23, 23, 0.07);

    --accent-ink: #006e7a; /* cyan is too light to read as text on ivory */
    --accent-pale: #d1f9fd;
    --accent-wash: #edfbfc;
    --accent-edge: rgba(0, 110, 122, 0.26);
    --accent-shadow: rgba(0, 150, 170, 0.3);
    --glow: rgba(0, 230, 255, 0.2);
    --glow-mid: rgba(0, 230, 255, 0.07);

    --quiet: #fffdfc;
    --quiet-edge: #e0d9cf;
    --quiet-hover: #f6f2ec;
    --idle: #efeae2;
    --idle-ink: #6e6961;
    --skeleton: #efe9e1;
    --skeleton-hi: #f9f6f1;
    --logo: #171717;
    --lift: 0 1px 2px rgba(110, 92, 69, 0.05), 0 12px 28px -14px rgba(138, 122, 102, 0.28); /* warm, never black */
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent-pale);
}

.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;
}

/* ---------- Page frame ---------- */

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* keeps the logo's light from widening the page */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 20px;
}

.page > main {
  width: 100%;
  max-width: 440px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- The logo: the app icon's own shapes ---------- */

.logo-reveal {
  --bob: -36px;
  position: relative;
  width: 84px;
  margin: 0 auto;
  color: var(--logo);
}

.logo-lg {
  --bob: -24px;
  width: clamp(132px, 38vw, 172px);
}

.logo-reveal svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The soft light behind the friends, as on the app's welcome screen: the accent at 30%, fading out. */
.logo-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 240%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow), var(--glow-mid) 50%, var(--glow-end));
  pointer-events: none;
}

.brand {
  display: inline-flex;
  padding: 10px 0;
  color: var(--logo);
  border-radius: 8px;
}

.brand svg {
  display: block;
  width: auto;
  height: 26px;
}

/* ---------- Headings and text ---------- */

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.eyebrow,
.label,
.code-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow,
.label {
  color: var(--accent-ink);
}

.title {
  max-width: 100%;
  font-size: clamp(30px, 8.8vw, 40px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.sub {
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* What shows until the script has the squad's name, or what's owed. */
.skeleton {
  color: transparent !important;
  background: var(--skeleton);
  border-radius: 14px;
  user-select: none;
  -webkit-user-select: none;
}

@media (scripting: none) {
  .skeleton {
    display: none;
  }
}

noscript .sub {
  text-align: center;
}

/* ---------- Glass cards ---------- */

.card,
.pay-group {
  position: relative;
  background: var(--card-sheen), var(--card);
  border: 1px solid var(--edge);
  border-radius: 18px;
  box-shadow: var(--lift);
}

/* Light catching the top edge, like the app's GlassFill. Nothing in Light. */
.card::after,
.pay-group::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--rim), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ---------- Buttons: pills ---------- */

.btn {
  position: relative;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.btn:active {
  transform: scale(0.965);
}

/* The accent lightening to its soft end, with a charcoal label: every primary action in the app. */
.btn-primary {
  min-height: 56px;
  color: var(--on-accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-end));
  box-shadow: 0 10px 26px -10px var(--accent-shadow);
}

.btn-secondary {
  background: var(--quiet);
  border-color: var(--quiet-edge);
}

/* A store that isn't listed yet: a flat, quieter pill, not a faded one (DESIGN.md, Buttons). Its label gets
   "— coming soon" added by the script, so it's smaller and drops the icon to stay on one line. */
.btn[aria-disabled="true"] {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--idle-ink);
  background: var(--idle);
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.btn[aria-disabled="true"]::before {
  content: none;
}

/* Icons are masks on ::before, because the scripts rewrite these buttons' text and would wipe a child icon. */
.btn::before {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

#copy,
.bank-copy {
  --icon: var(--icon-copy);
}

.btn-store {
  --icon: var(--icon-phone);
}

.pay-group .btn-primary {
  --icon: var(--icon-arrow);
}

#copy::before,
.btn-store::before,
.pay-group .btn-primary::before {
  content: "";
}

/* The arrow trails the label, as on the app's primary button. */
.pay-group .btn-primary::before {
  order: 1;
  width: 18px;
  height: 18px;
}

/* One sweep of light across a primary button as it appears (NightButton's sheen). Shown only with motion. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.btn[aria-disabled="true"]::after {
  content: none;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: 0 14px 34px -10px var(--accent-shadow), 0 0 0 4px var(--accent-wash);
  }

  .btn-secondary:hover {
    background: var(--quiet-hover);
  }
}

/* ---------- Invite page: /j/<code> ---------- */

.invite,
.pay {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invite .hero-text,
.pay .hero-text {
  margin-bottom: 8px;
}

.code-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The invite code, set in the app's invite-code field: an inset of glass. */
.code-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px 20px;
  border-radius: 18px;
  background: var(--card-sheen), var(--field);
  border: 1px solid var(--edge);
  text-align: center;
}

.code-label {
  color: var(--ink-soft);
}

.code {
  font-family: var(--mono);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* balances the spacing after the last letter */
  color: var(--ink);
  user-select: all;
  -webkit-user-select: all;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.steps li,
.doc ol > li {
  counter-increment: step;
}

.steps li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-body);
  text-align: left;
}

.steps li::before,
.doc ol > li::before {
  content: counter(step);
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.steps li::before {
  margin-top: -2px;
}

.foot {
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-soft);
}

.foot a {
  display: inline-block; /* wraps as one piece, never "Open the invite in the / app" */
  padding: 4px 0;
  font-weight: 700;
}

/* ---------- Pay page: /pay/<token> ---------- */

.page-pay .title,
.pay-total {
  font-variant-numeric: tabular-nums;
}

.pay-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pay-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 16px;
}

.pay-group h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.pay-group h2 + .pay-note {
  margin-top: -8px;
}

.pay-note {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

/* A second way to pay the same person is a quiet pill: one accent button per card. */
.pay-group .btn-primary ~ .btn-primary {
  color: var(--ink);
  background: var(--quiet);
  border-color: var(--quiet-edge);
  box-shadow: none;
}

.pay-group .btn-primary ~ .btn-primary::after {
  content: none;
}

.pay-total {
  text-align: center;
  font-weight: 700;
}

.bank {
  overflow: hidden;
  border-radius: 16px;
  background: var(--inset);
  border: 1px solid var(--edge);
}

.bank-row {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-top: 1px solid var(--edge);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.bank-row:first-child {
  border-top: 0;
}

.bank-row > span:first-child {
  min-width: 0;
}

.bank-row:active {
  background: var(--press);
}

.bank-row:focus-visible {
  outline-offset: -3px;
  border-radius: 16px;
}

.bank-label {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: var(--ink-soft);
}

.bank-value {
  display: block;
  margin-top: 1px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.bank-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.bank-copy::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Icon on the left and the words beside it, like a row in the app; the store buttons span the card. */
.about {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  padding: 18px 16px 16px;
}

.about .about-icon {
  grid-row: span 2;
}

.about .pay-note {
  grid-column: 2;
}

.about .actions {
  grid-column: 1 / -1;
}

.about-icon,
.row-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip);
  color: var(--accent-ink);
}

.about-icon svg,
.row-icon svg {
  width: 20px;
  height: 20px;
}

.about .pay-note:first-of-type {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}

.about .actions {
  margin-top: 10px;
}

@media (hover: hover) {
  .bank-row:hover {
    background: var(--hover);
  }
}

/* ---------- Home ---------- */

.page-home {
  padding-top: 0;
}

.page-home > main {
  max-width: 560px;
  gap: 36px;
}

.hero {
  width: 100%;
  max-width: 560px;
  min-height: 80vh;
  min-height: min(80svh, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 0 48px;
}

.headline {
  width: 100%;
  margin-top: 28px;
  font-size: clamp(34px, 9.6vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.headline-lead {
  display: block;
}

/* "Your squad's" + a phrase that flips to the next one every few seconds, as on the welcome screen. */
.cycle {
  position: relative;
  display: block;
  height: 1.3em;
  overflow: hidden;
  color: var(--accent-ink);
}

.cycle > span {
  position: absolute;
  inset: 0;
  line-height: 1.3em;
  white-space: nowrap;
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cycle > span:first-child {
  opacity: 1;
}

.lead {
  margin-top: 6px;
  font-size: 17px;
  line-height: 24px;
  color: var(--ink-soft);
}

.store {
  width: 100%;
  max-width: 340px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.store .actions {
  width: 100%;
}

/* The app's "Joining <squad>" chip, for what's coming. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--quiet);
  border: 1px solid var(--quiet-edge);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

.soon-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.soon-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}

.label {
  margin: 0 0 10px 4px;
}

.rows {
  padding: 4px 0;
}

.row {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
}

/* The hairline between rows starts after the icon, like the app's RowRule. */
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  right: 0;
  height: 1px;
  background: var(--edge);
}

.row-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--ink);
}

.row-text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-foot {
  width: 100%;
  max-width: 440px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-soft);
  text-align: center;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
}

.site-foot a {
  display: inline-block;
  padding: 13px 0;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-foot .mail a {
  padding: 4px 0 13px;
  color: var(--ink);
}

.page-home .site-foot,
.page-doc .site-foot {
  max-width: 680px;
  padding-top: 8px;
  border-top: 1px solid var(--edge);
}

@media (hover: hover) {
  .site-foot a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

/* ---------- Legal pages: /privacy/, /terms/, /delete-account/ ---------- */

.page-doc > main {
  max-width: 680px;
  gap: 0;
}

.doc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 36px;
}

/* The three documents as the app's segmented control: the open one in pale accent. */
.doc-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  border-radius: 999px;
  background: var(--field);
  border: 1px solid var(--edge);
}

.doc-tabs a {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.doc-tabs a[aria-current="page"] {
  background: var(--accent-pale);
  border-color: var(--accent-edge);
  color: var(--accent-ink);
}

@media (hover: hover) {
  .doc-tabs a:not([aria-current]):hover {
    background: var(--hover);
    color: var(--ink);
  }
}

.doc h1 {
  font-size: clamp(32px, 8.4vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.doc .meta {
  margin: 12px 0 28px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-soft);
}

.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-body);
  overflow-wrap: anywhere;
}

.doc p {
  margin: 0 0 14px;
}

.doc strong {
  font-weight: 700;
  color: var(--ink);
}

.doc h2 {
  margin: 44px 0 12px;
  font-size: 21px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.doc h3 {
  margin: 28px 0 8px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.doc ul,
.doc ol {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.doc ul > li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
}

.doc ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.825em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
}

.doc ol {
  counter-reset: step;
}

.doc ol > li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 40px;
}

.doc ol > li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
}

/* "The short version": the one accent-tinted card on the page. */
.doc .callout {
  margin: 8px 0 20px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
}

.doc .callout p {
  margin: 0;
}

.doc .table-wrap {
  margin: 16px 0 20px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
}

.doc th,
.doc td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--edge);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-body);
  overflow-wrap: break-word; /* not "anywhere": that lets the table squeeze a column to one letter */
}

.doc thead th {
  border-top: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.doc td:first-child {
  font-weight: 700;
  color: var(--ink);
}

/* On a phone, the services table becomes one block per service, each line with its own small heading. */
@media (max-width: 639px) {
  .doc table,
  .doc tbody,
  .doc tr,
  .doc td {
    display: block;
  }

  .doc thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .doc tr {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--edge);
  }

  .doc tbody tr:first-child {
    border-top: 0;
  }

  .doc td {
    padding: 0;
    border: 0;
  }

  .doc td:first-child {
    font-size: 16px;
    line-height: 22px;
  }

  .doc td + td {
    margin-top: 10px;
  }

  .doc td + td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
}

/* ---------- Not found ---------- */

.page-lost > main {
  justify-content: center;
  padding-bottom: 8vh;
}

.page-lost .actions {
  width: 100%;
}

/* ---------- Wider screens ---------- */

@media (min-width: 720px) {
  .page {
    padding-top: 56px;
  }

  .doc-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .doc-tabs {
    width: auto;
  }
}

@media (max-width: 359px) {
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .code {
    font-size: 28px;
  }

  .soon {
    gap: 8px;
    padding: 7px 14px;
    font-size: 13px;
  }

  .doc-tabs a {
    padding: 0 8px;
    font-size: 13px;
  }
}

/* ---------- Motion: none of this runs under Reduce Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* The logo puts itself together, as on the app's welcome screen (LogoReveal, at the app's pace): the
     middle friend pops in, then left, then right; each one's shoulders spread out from under its head;
     the light comes up behind them; SQUAD settles in letter by letter; and the heads bob once, left to right. */
  .logo-reveal .head {
    transform-box: fill-box;
    transform-origin: center;
    animation: logo-pop 0.31s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .logo-reveal .head-m {
    animation-delay: 0.12s;
  }

  .logo-reveal .head-l {
    animation-delay: 0.19s;
  }

  .logo-reveal .head-r {
    animation-delay: 0.26s;
  }

  .logo-reveal .sh {
    stroke-dasharray: 1 1.2;
    animation: logo-draw 0.34s cubic-bezier(0.33, 1, 0.68, 1) both;
  }

  .logo-reveal .sh-m {
    animation-delay: 0.2s;
  }

  .logo-reveal .sh-l {
    animation-delay: 0.27s;
  }

  .logo-reveal .sh-r {
    animation-delay: 0.34s;
  }

  .logo-reveal .ltr {
    animation: logo-letter 0.31s var(--ease) both;
  }

  .logo-reveal .ltr-1 {
    --x: -89px;
    animation-delay: 0.5s;
  }

  .logo-reveal .ltr-2 {
    --x: -45px;
    animation-delay: 0.54s;
  }

  .logo-reveal .ltr-3 {
    --x: 0px;
    animation-delay: 0.57s;
  }

  .logo-reveal .ltr-4 {
    --x: 42px;
    animation-delay: 0.6s;
  }

  .logo-reveal .ltr-5 {
    --x: 86px;
    animation-delay: 0.64s;
  }

  .logo-reveal .bob {
    animation: logo-bob 0.25s ease-in-out both;
  }

  .logo-reveal .bob-l {
    animation-delay: 0.93s;
  }

  .logo-reveal .bob-m {
    animation-delay: 0.98s;
  }

  .logo-reveal .bob-r {
    animation-delay: 1.03s;
  }

  /* The light comes up with the friends, then keeps breathing, slowly. */
  .logo-glow {
    animation:
      glow-in 0.66s 0.43s ease-out both,
      glow-breathe 7s 1.3s ease-in-out infinite alternate;
  }

  /* Page entrance: each block drops in from above as it fades in, one after another (the app's riseIn).
     The invite and pay pages lead with their words; the home page lets the logo land first, as the
     app's welcome screen does. */
  .rise {
    animation: rise 0.44s var(--ease) both;
    animation-delay: calc(var(--rise-at, 0.06s) + var(--d, 0) * 0.06s);
  }

  .page-home {
    --rise-at: 0.4s;
  }

  /* What the invite and pay scripts reveal drops in the same way when it appears, a beat behind the
     heading even when the answer comes back at once, so the page still fills in from the top. */
  .code-block,
  .actions,
  .steps,
  .foot,
  .pay-group,
  .about {
    animation: rise 0.44s var(--ease) both;
    animation-delay: 0.16s;
  }

  .actions,
  .pay-group:nth-child(2) {
    animation-delay: 0.22s;
  }

  .steps,
  .pay-group:nth-child(3) {
    animation-delay: 0.28s;
  }

  .foot,
  .about,
  .pay-group:nth-child(n + 4) {
    animation-delay: 0.34s;
  }

  /* The squad's name fades up in place of its placeholder, which shimmers while it waits. */
  .title,
  .sub {
    animation: text-in 0.4s var(--ease) both;
  }

  .skeleton {
    background-image: linear-gradient(90deg, var(--skeleton) 20%, var(--skeleton-hi) 50%, var(--skeleton) 80%);
    background-size: 250% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }

  /* The headline's phrase flips up to the next one, every 2.6s. */
  .cycle > span {
    animation: phrase 10.4s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  }

  .cycle > span:nth-child(1) {
    animation-delay: 0.75s;
  }

  .cycle > span:nth-child(2) {
    animation-delay: 3.35s;
  }

  .cycle > span:nth-child(3) {
    animation-delay: 5.95s;
  }

  .cycle > span:nth-child(4) {
    animation-delay: 8.55s;
  }

  .soon-dot::after {
    animation: ping 2.4s var(--ease) infinite;
  }

  .btn {
    transition:
      transform 0.2s var(--ease),
      box-shadow 0.25s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;
  }

  .btn:active {
    transition-duration: 0.08s;
  }

  .btn-primary::after {
    animation: sheen 0.9s 0.55s cubic-bezier(0.33, 1, 0.68, 1) both;
  }

  .bank-row,
  .doc-tabs a,
  .site-foot a {
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

  /* On the home page, the cards rise into place as they scroll in, where the browser can do it in CSS. */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes logo-pop {
  from {
    transform: scale(0);
  }
}

@keyframes logo-draw {
  from {
    stroke-dashoffset: 1.1;
  }
}

@keyframes logo-letter {
  from {
    opacity: 0;
    transform: translateX(var(--x, 0px));
  }
}

@keyframes logo-bob {
  50% {
    transform: translateY(var(--bob));
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
}

@keyframes glow-breathe {
  to {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.14);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(-32px);
  }
}

@keyframes lift {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes text-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes phrase {
  0% {
    opacity: 0;
    transform: perspective(700px) translateY(0.65em) rotateX(-90deg);
  }
  6.25%,
  25% {
    opacity: 1;
    transform: perspective(700px) translateY(0) rotateX(0deg);
  }
  31.25%,
  100% {
    opacity: 0;
    transform: perspective(700px) translateY(-0.65em) rotateX(90deg);
  }
}

@keyframes ping {
  from {
    opacity: 0.55;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

@keyframes sheen {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(100%);
  }
}

/* ---------- Print: the legal pages, on paper ---------- */

@media print {
  :root {
    color-scheme: light;
    --page: #fff;
    --ink: #000;
    --ink-body: #111;
    --ink-soft: #444;
    --card: #fff;
    --card-sheen: none;
    --field: #fff;
    --chip: #eee;
    --edge: #ccc;
    --accent-ink: #000;
    --accent-wash: #fff;
    --accent-edge: #999;
    --logo: #000;
    --lift: none;
  }

  .page {
    padding: 0;
  }

  .logo-glow,
  .doc-tabs,
  .site-foot {
    display: none;
  }
}