/* =========================================================================
   Balant: shared styles for every page.
   Order: tokens, base, layout, header, buttons, type, surfaces, forms,
   footer, motion. Home-page sections live in landing.css.
   Palette: cool off-white, slate ink, navy actions, indigo accents, and a
   twilight painting behind the hero panel and the closing panel.
   ========================================================================= */

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

/* Light surfaces. Cards re-declare them so they keep dark ink if they
   ever sit inside a dark band. */
:root,
.card {
  --bg: #f5f6f9;
  --bg-alt: #eceff5;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --tile: #e7eaf1;
  --ink: #121726;
  --ink-2: #474f63;
  --ink-3: #5f687c;
  --line: #e2e6ee;
  --line-strong: #cbd2de;
  --link: #3450c8;
  --focus: #3450c8;
  --check: #3450c8;
  --btn-bg: #1f2d5c;
  --btn-ink: #ffffff;
  --btn-bg-hover: #2a3b74;
  --btn-2-bg: #e6e9f2;
  --btn-2-ink: #121726;
  --btn-2-bg-hover: #dadfeb;
}

/* Dark bands: the same names with inverted values, on deep navy. */
.theme-dark {
  --bg: #0f1630;
  --bg-alt: #172042;
  --ink: #f2f4fa;
  --ink-2: rgb(242 244 250 / .74);
  --ink-3: rgb(242 244 250 / .6);
  --line: rgb(242 244 250 / .14);
  --line-strong: rgb(242 244 250 / .28);
  --link: #aab8ff;
  --focus: #aab8ff;
  --check: #a8b6ff;
  --btn-bg: #ffffff;
  --btn-ink: #121726;
  --btn-bg-hover: #e6e9f4;
  --btn-2-bg: rgb(255 255 255 / .12);
  --btn-2-ink: #ffffff;
  --btn-2-bg-hover: rgb(255 255 255 / .2);
  --panel: rgb(255 255 255 / .04);
  background-color: var(--bg);
  color: var(--ink);
}

:root {
  --accent: #3450c8;
  --accent-ink: #26399e;
  --accent-soft: #e9edfb;
  --amber-ink: #7a4d0b;
  --amber-soft: #f6ead2;
  --danger: #b42318;
  --danger-soft: #fdf0ee;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;

  --shadow-card: 0 1px 2px rgb(18 23 38 / .04), 0 12px 32px -18px rgb(18 23 38 / .22);
  --shadow-lift: 0 2px 6px rgb(18 23 38 / .06), 0 26px 50px -24px rgb(18 23 38 / .38);
  --shadow-panel: 0 2px 8px rgb(8 12 28 / .2), 0 44px 90px -34px rgb(8 12 28 / .62);

  --wrap: 1200px;
  --gutter: 40px;
  --nav-h: 64px;
  --band-pad: clamp(72px, 9vw, 120px);

  /* Marketing type scale and rhythm (app.css keeps its own --t-* sizes). */
  --t-display: clamp(2.4rem, 1.15rem + 3.2vw, 4rem);     /* hero h1: 38px at 400 wide, 64px at 1440 */
  --t-h2: clamp(1.9rem, 1.2rem + 2.1vw, 2.75rem);        /* section titles: 30px to 44px */
  --t-h3: clamp(1.125rem, 1rem + .4vw, 1.3rem);
  --t-lede: clamp(1.0625rem, .95rem + .35vw, 1.1875rem); /* ledes: 17px to 19px */
  --head-gap: clamp(36px, 5vw, 64px);
  --r-xl: 20px;
  /* The panel a section's sample sits on: between --bg-alt and --tile. */
  --panel: #e9ecf3;

  /* Motion: one entrance curve and one for small changes. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);

  /* The painted backdrop. painting.jpg is rendered from painting.svg. */
  --painting: url("img/painting.1b9ead6cea15.jpg");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --icon-check-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --icon-alert: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><circle cx='8' cy='8' r='6.2'/><path d='M8 4.8v3.6'/><circle cx='8' cy='11' r='.4' fill='black'/></svg>");
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --nav-h: 58px; }
}

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

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main { display: block; flex: 1 0 auto; }
main:focus { outline: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: #dfe4fb; color: #121726; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -60px; left: 12px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.nw { white-space: nowrap; }

/* Layout ---------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page { padding-block: clamp(40px, 6vw, 72px) clamp(72px, 9vw, 112px); }
.band { padding-block: var(--band-pad); }
.band-alt { --panel: #e2e6ee; background-color: var(--bg-alt); }

/* Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(245 246 249 / .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgb(18 23 38 / .07);
}
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}
/* The logo mark: white B on a blue tile. Same drawing as icon.svg, inline so
   it never shows a stale cached image. */
.brand-mark {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 22%;
  background: linear-gradient(135deg, #4f71f6, #26399e);
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
.nav-right { display: flex; align-items: center; gap: 36px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link {
  color: var(--ink-2);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-sign-in { white-space: nowrap; }
/* The desktop nav's links underline from the left on hover. */
.nav-links .nav-link { position: relative; }
.nav-links .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.nav-links .nav-link:hover::after,
.nav-links .nav-link:focus-visible::after { transform: scaleX(1); }

/* Phones and tablets: the links move into a menu under the header. It is a
   <details>, so it opens without JS, and the sticky header is its containing
   block, so the panel spans the header's width. Under 480px the header's
   button moves into the menu too, so the brand, the menu and the gutters fit. */
.nav-menu { display: none; }
.nav-menu-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: -6px;
  border-radius: var(--r-sm);
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu-btn::marker { content: ""; }
.nav-menu-btn:hover { background: var(--tile); }
.nav-menu-icon {
  display: block;
  width: 18px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}
.nav-menu[open] .nav-menu-icon {
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat;
  transform: rotate(45deg);
}
.nav-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  max-height: calc(100dvh - var(--nav-h));
  padding: 4px var(--gutter) 16px;
  overflow-y: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 24px 40px -24px rgb(18 23 38 / .3);
}
.nav-menu-panel .nav-link {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
}
.nav-menu-panel .nav-link:first-child { border-top: 0; }
.nav-menu-panel .btn { justify-self: start; margin-top: 14px; }
@media (max-width: 960px) {
  .nav-links,
  .nav-sign-in { display: none; }
  .nav-menu { display: block; }
  .nav-right { gap: 20px; }
}
@media (max-width: 480px) {
  .nav-right { gap: 12px; }
  /* Two classes, so it outranks .btn's display further down. */
  .nav-right .nav-cta { display: none; }
}

/* Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn .arrow { display: inline-block; transition: transform .18s ease; }
.btn:hover .arrow.down { transform: translateY(2px); }
/* On hover the arrow slips out to the right and back in from the left. */
@media (hover: hover) {
  .btn:hover .arrow:not(.down) { animation: arrow-slide .45s var(--ease-soft); }
}
@keyframes arrow-slide {
  0% { transform: translateX(0); opacity: 1; }
  32% { transform: translateX(6px); opacity: 0; }
  33% { transform: translateX(-6px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-secondary { background: var(--btn-2-bg); color: var(--btn-2-ink); }
.btn-secondary:hover { background: var(--btn-2-bg-hover); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 46px; padding: 0 20px; }
.btn-block { width: 100%; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--btn-bg); }
.btn:disabled:hover .arrow { transform: none; animation: none; }

/* Type ------------------------------------------------------------------ */

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.small { font-size: 13px; color: var(--ink-3); }

/* Surfaces -------------------------------------------------------------- */

.card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* The painted backdrop: painting + film grain, darkened inside dark bands.
   Set --painting-pos on a section to choose the crop. */
.painted {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #2b2f52;
}
.painted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--grain) 0 0 / 180px 180px repeat,
    var(--painting) var(--painting-pos, 50% 50%) / cover no-repeat;
}
.theme-dark.painted::before {
  background:
    var(--grain) 0 0 / 180px 180px repeat,
    linear-gradient(rgb(10 14 30 / .7), rgb(10 14 30 / .8)),
    var(--painting) var(--painting-pos, 50% 50%) / cover no-repeat;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--btn-2-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill-amber { background: var(--amber-soft); color: var(--amber-ink); }

/* Marks content that must be replaced before launch. */
.placeholder-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px dashed #c2862f;
  border-radius: 999px;
  background: #fff5e2;
  color: #8a5300;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.tick {
  position: relative;
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.tick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: var(--icon-check) 50% 50% / 11px 11px no-repeat;
  mask: var(--icon-check) 50% 50% / 11px 11px no-repeat;
}

.checklist { list-style: none; padding: 0; display: grid; gap: 10px; }
.checklist > li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.checklist > li::before {
  content: "";
  position: absolute;
  top: .1em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--check);
  -webkit-mask: var(--icon-check) 50% 50% / 16px 16px no-repeat;
  mask: var(--icon-check) 50% 50% / 16px 16px no-repeat;
}

/* Forms ----------------------------------------------------------------- */

.label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.label .small { font-weight: 400; }
.input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #9aa1af; }
.input:hover { border-color: #b3bccb; }
.input:focus { outline: none; border-color: var(--btn-bg); box-shadow: 0 0 0 3px rgb(52 80 200 / .14); }

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

.site-footer {
  padding-block: 44px 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-3);
  font-size: 14px;
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 64px;
}
.foot-tag { margin-top: 12px; max-width: 34ch; }
.foot-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.foot-tm { max-width: 62ch; }

/* Legal pages (Privacy Policy, Terms of Service) ------------------------ */

/* 404 page. */
.not-found { display: grid; justify-items: start; gap: 16px; max-width: 40rem; margin-inline: auto; padding-block: clamp(24px, 6vw, 72px); }
.not-found h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.6rem); letter-spacing: -0.03em; }
.not-found p { color: var(--ink-2); }

.legal { max-width: 72ch; margin-inline: auto; }
.legal h1 { margin-top: 12px; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.6rem); letter-spacing: -0.03em; }
.legal-updated { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.legal h2 { margin-top: 40px; font-size: 21px; }
.legal h3 { margin-top: 22px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.legal p, .legal ul { margin-top: 12px; color: var(--ink-2); }
.legal > p:first-of-type { margin-top: 0; }
.legal-updated + p { margin-top: 28px; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .placeholder-pill { vertical-align: 1px; }
.legal-table { margin-top: 16px; overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--ink); font-weight: 600; }
.legal-table td { color: var(--ink-2); }
.legal-table td:first-child { color: var(--ink); white-space: nowrap; }

/* Motion ---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards;
}
.reveal.d1 { animation-delay: .04s; }
.reveal.d2 { animation-delay: .14s; }
.reveal.d3 { animation-delay: .26s; }
.reveal.d4 { animation-delay: .4s; }
.reveal.d5 { animation-delay: .52s; }
.reveal.d6 { animation-delay: .64s; }
@keyframes rise { to { opacity: 1; transform: none; } }

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