/* xeres.co.uk — the marketing half of the Xeres design system.

   Layout: a single reading column at 1120px, broken by full-bleed navy bands where the page
   changes subject. Colour is a blue family with one complement: navy for weight, Xeres Blue and
   sky for links and highlights, and orange, blue's complement, kept for the one action each view
   wants taken. Orange carries navy text, because white on orange fails contrast. Blue Violet stays
   in the mark. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --blue: #315fea;
  --blue-strong: #2449b8;
  --blue-soft: #eef3fe;
  --violet: #7b61ff;
  --ink: #111318;
  --slate: #5f6b8a;
  --cloud: #f6f8fc;
  --surface: #ffffff;
  --divider: #e3e6ee;
  --navy: #0b1f4d;
  --band: #071431;
  --band-text: #eef3ff;
  --band-muted: #a3b3d6;
  --band-line: #1d2f5c;
  --sky: #e6efff;
  --sky-strong: #8fb6ff;
  --orange: #ff7a29;
  --orange-strong: #ff9150;
  --on-orange: #0b1f4d;
  --ok: #22603a;
  --ok-bg: #eaf5ee;
  --warn-bg: #fff8e8;
  --warn-text: #6b4a05;

  /* Satoshi once licensed; until then Inter carries the display voice too. */
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);

  --radius-control: 8px;
  --shadow: 0 16px 40px rgb(17 19 24 / 12%);
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #6f92f3;
    --blue-strong: #9db5f7;
    --blue-soft: #14254d;
    --ink: #eef0f5;
    --slate: #9aa3b8;
    --cloud: #060d1f;
    --surface: #0d1833;
    --divider: var(--band-line);
    --band: #050d22;
    --sky: #14254d;
    --ok: #86d1a3;
    --ok-bg: #12291c;
    --warn-bg: #2b2310;
    --warn-text: #e8c76f;
    --shadow: 0 16px 40px rgb(0 0 0 / 45%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --blue: #6f92f3;
  --blue-strong: #9db5f7;
  --blue-soft: #14254d;
  --ink: #eef0f5;
  --slate: #9aa3b8;
  --cloud: #060d1f;
  --surface: #0d1833;
  --divider: var(--band-line);
  --band: #050d22;
  --sky: #14254d;
  --ok: #86d1a3;
  --ok-bg: #12291c;
  --warn-bg: #2b2310;
  --warn-text: #e8c76f;
  --shadow: 0 16px 40px rgb(0 0 0 / 45%);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-strong); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font: 500 var(--step--1)/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.lede { font-size: var(--step-1); color: var(--slate); max-width: 38em; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); padding: 8px 12px; }

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

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: color-mix(in srgb, var(--cloud) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--divider);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }

.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lockup:hover { color: var(--ink); }
.lockup svg { width: 26px; height: 26px; flex: none; }
.lockup span { font: 600 1.1875rem/1 var(--font-display); letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-control);
}
.nav a:hover { background: var(--blue-soft); }
.nav a[aria-current="page"] { color: var(--blue); }

.menu { display: none; margin-left: auto; position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  font-weight: 500;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  min-width: 220px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.menu-panel a { padding: 10px 12px; color: var(--ink); text-decoration: none; border-radius: var(--radius-control); }
.menu-panel a:hover { background: var(--blue-soft); }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu { display: block; }
}

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

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

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: 600 0.9375rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.button-primary { background: var(--orange); color: var(--on-orange); }
.button-primary:hover { background: var(--orange-strong); color: var(--on-orange); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--divider); }
.button-secondary:hover { border-color: var(--blue); color: var(--ink); }
.nav .button { padding: 9px 16px; margin-left: 8px; }

/* ---- Hero -------------------------------------------------------------------------------- */

.hero { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue) 10%, #4f9bff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* The governed file. Everything on it is something the product actually records. */
.record {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.record-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--divider);
}
.record-kind {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font: 500 0.6875rem/1 var(--font-mono);
}
.record-title { display: grid; min-width: 0; }
.record-title b { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.record-title small { color: var(--slate); font-size: var(--step--1); }
.record dl { margin: 0; display: grid; }
.record dl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--divider);
  font-size: 0.875rem;
}
.record dl > div:last-child { border-bottom: 0; }
.record dt { color: var(--slate); }
.record dd { margin: 0; overflow-wrap: anywhere; }
.record .mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font: 500 0.75rem/1.5 var(--font-body);
  background: var(--ok-bg);
  color: var(--ok);
}
.pill-hold { background: var(--warn-bg); color: var(--warn-text); }

/* ---- Sections ---------------------------------------------------------------------------- */

.section { padding-block: clamp(56px, 8vw, 96px); }
.section-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--slate); font-size: var(--step-1); }

.band { background: var(--band); color: var(--band-text); }
.band .eyebrow, .band .section-head p, .band .muted { color: var(--band-muted); }
.band a { color: var(--sky-strong); }
/* A button keeps its own colours inside the header and on a band, where plain links are restyled. */
.nav a.button-primary, .band a.button-primary, .cta a.button-primary { color: var(--on-orange); }
.nav a.button-primary:hover { background: var(--orange-strong); }
.band a.button-secondary, .cta a.button-secondary { background: transparent; color: var(--band-text); border-color: var(--band-line); }
.band a.button-secondary:hover, .cta a.button-secondary:hover { border-color: var(--sky-strong); color: var(--band-text); }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.point { display: grid; gap: 10px; align-content: start; min-width: 0; }
.point p { color: var(--slate); }
.band .point p { color: var(--band-muted); }
.point-rule { width: 32px; height: 2px; background: var(--blue); }

/* Three planes: whose each one is, said once, in a diagram rather than a paragraph. */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--band-line); border-radius: 14px; overflow: hidden; }
.plane { padding: 26px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.plane + .plane { border-left: 1px solid var(--band-line); }
.plane-owner { font: 500 var(--step--1)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.plane-owner.yours { color: #86d1a3; }
.plane-owner.ours { color: var(--sky-strong); }
.plane ul { margin: 0; padding-left: 1.1em; color: var(--band-muted); display: grid; gap: 6px; }
@media (max-width: 860px) {
  .planes { grid-template-columns: minmax(0, 1fr); }
  .plane + .plane { border-left: 0; border-top: 1px solid var(--band-line); }
}

/* Industry tiles. Each names the records that sector actually keeps. */
.sector {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.sector:hover { border-color: var(--blue); color: var(--ink); }
.sector p { color: var(--slate); font-size: 0.9375rem; }
.sector .records { font: 400 0.8125rem/1.6 var(--font-mono); color: var(--slate); }
.sector .more { color: var(--blue); font-weight: 600; font-size: 0.9375rem; margin-top: auto; }

/* Retention levels: a real choice a customer makes, so laid out as a comparison. */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.level {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--divider);
  background: var(--surface);
  min-width: 0;
}
.level p { color: var(--slate); font-size: 0.9375rem; }
.level .who { font: 400 0.8125rem/1.5 var(--font-mono); color: var(--ink); }
@media (max-width: 860px) { .levels { grid-template-columns: minmax(0, 1fr); } }

/* The onboarding path. Numbered because the order is forced: each step needs the one before. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--divider);
}
.steps li:last-child { border-bottom: 1px solid var(--divider); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font: 500 0.875rem/1.6 var(--font-mono);
  color: var(--blue);
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--slate); }
.band .steps li { border-color: var(--band-line); }
.band .steps p, .band .checks span { color: var(--band-muted); }
.band .steps li::before { color: var(--orange); }

.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.checks li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23315fea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.checks b { font-weight: 600; }
.checks span { color: var(--slate); }

/* A schedule line as a records manager would write it. */
.schedule {
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
  overflow-x: auto;
}
.schedule table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 520px; }
.schedule th, .schedule td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.schedule th { font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
.schedule tr:last-child td { border-bottom: 0; }
.schedule td.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.note { font-size: var(--step--1); color: var(--slate); margin-top: 12px; }

/* ---- Call to action ---------------------------------------------------------------------- */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 18px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgb(255 122 41 / 26%), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgb(49 95 234 / 35%), transparent 60%),
    var(--band);
  color: var(--band-text);
}
.cta p { color: var(--band-muted); margin-top: 8px; }
@media (max-width: 760px) { .cta { grid-template-columns: minmax(0, 1fr); } }

/* ---- Form -------------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  min-width: 0;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 500; font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--cloud);
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  padding: 10px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 0.9375rem; padding: 12px 14px; border-radius: var(--radius-control); }
.form-status.ok { background: var(--ok-bg); color: var(--ok); }
.form-status.problem { background: var(--warn-bg); color: var(--warn-text); }

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

.site-footer { border-top: 1px solid var(--divider); padding-block: 40px; color: var(--slate); font-size: 0.9375rem; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.site-footer h3 { font: 500 var(--step--1)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--slate); text-decoration: none; }
.site-footer a:hover { color: var(--blue); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

@media (prefers-reduced-motion: no-preference) {
  .record { animation: settle 700ms cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes settle { from { transform: translateY(10px); opacity: 0.6; } to { transform: none; opacity: 1; } }
}
.footer-line { margin-top: 12px; max-width: 22rem; }

/* ---- Centred hero ------------------------------------------------------------------------ */

/* One line of promise, one of proof, two actions. The visual underneath is the argument. */
.hero-center { padding-block: clamp(56px, 10vw, 120px) 0; text-align: center; position: relative; overflow: hidden; }
.hero-center::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 620px;
  background:
    radial-gradient(40% 50% at 30% 40%, rgb(49 95 234 / 16%), transparent 70%),
    radial-gradient(30% 40% at 72% 30%, rgb(255 122 41 / 14%), transparent 70%);
  pointer-events: none;
}
.hero-center .wrap { position: relative; display: grid; justify-items: center; gap: 24px; }
.hero-center h1 { max-width: 14em; font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); }
.hero-center h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue) 10%, #4f9bff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-center .lede { margin-inline: auto; }
.hero-center .actions { justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
}
.chip b { background: var(--sky); color: var(--blue); border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 0.75rem; }
.chip:hover { border-color: var(--blue); color: var(--ink); }

/* ---- Product cards ----------------------------------------------------------------------- */

.product {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
a.product:hover { border-color: var(--blue); color: var(--ink); }
.product p { color: var(--slate); }
.product-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sky); color: var(--blue); }
.product-mark svg { width: 24px; height: 24px; }
.product-mark.later { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.status { justify-self: start; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); }
.status.later { background: var(--warn-bg); color: var(--warn-text); }
.product .more { color: var(--blue); font-weight: 600; text-decoration: none; }

/* ---- Pricing ----------------------------------------------------------------------------- */

/* Product and billing are radio buttons, so the page works with no script; the labels are the
   controls people see, and the radios stay focusable for the keyboard. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto 28px; }
.pick {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 18px 20px;
  border: 2px solid var(--divider);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pick:hover { transform: translateY(-2px); border-color: var(--sky-strong); }
.pick .product-mark { grid-row: span 2; }
.pick b { font-size: 1.0625rem; }
.pick small { color: var(--slate); }
.pick::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--divider);
}
#p-docs:checked ~ .picker [for="p-docs"],
#p-case:checked ~ .picker [for="p-case"] { border-color: var(--orange); box-shadow: 0 10px 30px rgb(255 122 41 / 18%); }
#p-docs:checked ~ .picker [for="p-docs"]::after,
#p-case:checked ~ .picker [for="p-case"]::after {
  border-color: var(--orange);
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%230b1f4d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
#p-docs:focus-visible ~ .picker [for="p-docs"],
#p-case:focus-visible ~ .picker [for="p-case"],
#b-annual:focus-visible ~ .billing [for="b-annual"],
#b-monthly:focus-visible ~ .billing [for="b-monthly"] { outline: 2px solid var(--blue); outline-offset: 3px; }

.billing { display: flex; justify-content: center; margin-bottom: 32px; }
.billing-track { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--divider); }
.billing label { padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.9375rem; color: var(--slate); }
.billing label span { color: var(--orange); font-weight: 600; margin-left: 4px; }
#b-annual:checked ~ .billing [for="b-annual"],
#b-monthly:checked ~ .billing [for="b-monthly"] { background: var(--navy); color: #fff; }
#p-case:checked ~ .billing { visibility: hidden; }

.panel { display: none; }
#p-docs:checked ~ .panel-docs, #p-case:checked ~ .panel-case { display: block; animation: rise 320ms cubic-bezier(.2, .7, .2, 1) both; }
#b-annual:checked ~ .panel .monthly, #b-monthly:checked ~ .panel .annual { display: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tier {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 16px;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--divider);
  background: var(--surface);
  min-width: 0;
}
.tier h3 { font-size: var(--step-2); }
.tier .for { color: var(--slate); font-size: 0.9375rem; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price b { font: 600 2.5rem/1 var(--font-display); letter-spacing: -0.03em; }
.price small { color: var(--slate); font-size: 0.875rem; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font-size: 0.9375rem; }
.tier li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.tier li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23315fea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.tier .button { justify-content: center; }
.tier-featured {
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(255 122 41 / 20%), transparent 60%),
    var(--band);
  color: var(--band-text);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--band));
  box-shadow: 0 24px 60px rgb(7 20 49 / 30%);
  transform: translateY(-8px);
}
.tier-featured .for, .tier-featured .price small { color: var(--band-muted); }
.tier-featured li::before { background-color: rgb(255 255 255 / 10%); }
.tier-featured .button-secondary { background: transparent; color: var(--band-text); border-color: var(--band-line); }
.badge { justify-self: start; font: 600 0.75rem/1 var(--font-body); padding: 6px 10px; border-radius: 999px; background: var(--orange); color: var(--on-orange); }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) {
  .tiers { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .tier-featured { transform: none; }
}
@media (max-width: 560px) { .picker { grid-template-columns: minmax(0, 1fr); } }

.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare .yes { color: var(--blue); font-weight: 700; }
.compare .no { color: var(--slate); }
.compare tr.group td { font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); background: var(--cloud); }

.later-panel { max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: 16px; justify-items: center; padding: clamp(28px, 5vw, 48px); border-radius: 18px; border: 2px dashed var(--divider); background: var(--surface); }
.later-panel p { color: var(--slate); }

.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { border: 1px solid var(--divider); border-radius: 12px; background: var(--surface); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--slate); margin-top: 10px; }

.center { text-align: center; margin-inline: auto; justify-items: center; }
.panel-docs .section-head { margin-top: clamp(48px, 7vw, 80px); }

@media (prefers-reduced-motion: reduce) {
  .pick, .panel { transition: none; animation: none !important; }
}
.planes a.plane { color: var(--band-text); text-decoration: none; transition: background 160ms ease; }
.planes a.plane:hover { background: rgb(255 255 255 / 5%); color: var(--band-text); }
.point-rule { background: var(--orange); }

/* ---- Home: product-first ----------------------------------------------------------------- */

.button-quiet { background: transparent; color: var(--ink); padding-inline: 12px; }
.button-quiet:hover { color: var(--blue); }
.hero-center h1 em.file { white-space: nowrap; font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.04em; }
@media (max-width: 560px) { .hero-center h1 em.file { white-space: normal; overflow-wrap: anywhere; } }

/* A window onto the product. Every value in it is a thing XeresDocs records. */
.app {
  width: 100%;
  margin-top: clamp(40px, 6vw, 64px);
  text-align: left;
  border-radius: 18px;
  border: 1px solid var(--divider);
  background: var(--surface);
  box-shadow: 0 40px 80px -20px rgb(7 20 49 / 35%), 0 0 0 8px color-mix(in srgb, var(--sky) 60%, transparent);
  overflow: hidden;
}
.app-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--divider); background: var(--cloud); }
.app-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--divider); }
.app-bar p { margin-left: 10px; font: 400 0.8125rem/1 var(--font-mono); color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.app-main { padding: 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--blue); border-radius: 12px; font-weight: 500; }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; flex: none; }
.search span { flex: 1; min-width: 0; }
.search span::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: var(--blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.search kbd { font: 400 0.75rem/1 var(--font-mono); color: var(--slate); white-space: nowrap; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.results li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; transition: background 160ms ease; }
.results li:hover, .results li.is-open { background: var(--sky); }
.results b { display: block; font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results small { color: var(--slate); font-size: 0.8125rem; }
.file-kind { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font: 500 0.625rem/1 var(--font-mono); }
.app-side { border-left: 1px solid var(--divider); padding: 20px; display: grid; gap: 12px; align-content: start; background: var(--cloud); min-width: 0; }
.app-label { font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.versions { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.versions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: 10px; background: var(--surface); font-size: 0.875rem; }
.versions small { grid-column: 1; color: var(--slate); font-size: 0.75rem; }
.versions span { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--blue); }
.versions .is-current { border-color: var(--orange); }
.versions .is-current span { color: var(--orange); }
.app-fact { font-weight: 600; font-size: 0.9375rem; }
.app-fact small { font-weight: 400; color: var(--slate); }
@media (max-width: 760px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { border-left: 0; border-top: 1px solid var(--divider); }
}

.proof { padding-block: clamp(40px, 6vw, 64px) 0; }
.proof .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--divider); }
.proof-metric { color: var(--slate); }
.proof-metric b { font: 600 2rem/1 var(--font-display); color: var(--orange); margin-right: 6px; vertical-align: -0.1em; }
.proof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.proof-list li { font: 600 1rem/1 var(--font-display); color: var(--slate); letter-spacing: -0.01em; opacity: 0.85; }

.outcome { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--divider); transition: transform 200ms ease, box-shadow 200ms ease; }
.outcome:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.outcome-was { font: 400 0.8125rem/1.4 var(--font-mono); color: var(--slate); text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.outcome p { color: var(--slate); }

.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cap { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--band-line); border-radius: 16px; background: rgb(255 255 255 / 3%); transition: border-color 160ms ease, background 160ms ease; min-width: 0; }
.cap:hover { border-color: var(--sky-strong); background: rgb(255 255 255 / 6%); }
.cap p { color: var(--band-muted); font-size: 0.9375rem; }
.cap-ui { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; margin-bottom: 6px; border-radius: 12px; background: rgb(255 255 255 / 5%); min-height: 92px; align-content: flex-start; }
.tag { font: 500 0.75rem/1 var(--font-mono); padding: 7px 9px; border-radius: 999px; background: rgb(143 182 255 / 14%); color: var(--sky-strong); white-space: nowrap; }
.tag-orange { background: rgb(255 122 41 / 18%); color: var(--orange); }
@media (max-width: 960px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .caps { grid-template-columns: minmax(0, 1fr); } }

.scenario { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--divider); color: var(--ink); text-decoration: none; transition: transform 200ms ease, border-color 200ms ease; min-width: 0; }
.scenario:hover { transform: translateY(-4px); border-color: var(--blue); color: var(--ink); }
.scenario-who { justify-self: start; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--sky); color: var(--blue); }
.scenario p { color: var(--slate); }
.scenario .more { color: var(--blue); font-weight: 600; }
.scenario:hover .more { color: var(--orange); }

.trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: trio; }
.trio li { counter-increment: trio; display: grid; gap: 10px; align-content: start; min-width: 0; }
.trio h3::before { content: counter(trio) '. '; color: var(--orange); }
.trio p { color: var(--band-muted); }
.mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 16px; margin-bottom: 8px; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 40px rgb(0 0 0 / 25%); }
.mini small { font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.mini b { grid-column: 1; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .pill { grid-row: 1 / span 2; grid-column: 2; }
@media (max-width: 860px) { .trio { grid-template-columns: minmax(0, 1fr); } }

.result { display: grid; gap: 8px; padding: 24px 0; border-top: 3px solid var(--navy); }
.result b { font: 600 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; color: var(--blue); }
.result p { color: var(--slate); }

.teaser { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 20px; border: 1px solid var(--divider); background: var(--surface); }
.teaser h2 { margin-block: 8px; }
.teaser p:not(.eyebrow) { color: var(--slate); }
.teaser-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.teaser-tiers li { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--cloud); border: 1px solid var(--divider); }
.teaser-tiers li span { font-size: 0.8125rem; color: var(--slate); }
.teaser-tiers .is-featured { border-color: var(--orange); }
@media (max-width: 960px) { .teaser { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .teaser-tiers { grid-template-columns: minmax(0, 1fr); } }

.nav .nav-login { color: var(--slate); margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  .search span::after { animation: none; }
  .outcome, .scenario, .cap { transition: none; }
}

/* ---- Sign in ----------------------------------------------------------------------------- */

.finder { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 560px; margin-inline: auto; }
.finder-field { flex: 1 1 260px; display: flex; align-items: center; border: 1px solid var(--divider); border-radius: var(--radius-control); background: var(--surface); padding-inline: 12px; }
.finder-field:focus-within { outline: 2px solid var(--blue); border-color: var(--blue); }
.finder-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 12px 0; outline: none; text-align: right; }
.finder-field span { color: var(--slate); font-family: var(--font-mono); font-size: 0.875rem; }