/* Verabay — one stylesheet, no build step, no external request.
   The visual reference the client gave is apple.com: centred compositions, very large tight
   headlines, white and #f5f5f7 alternating, one blue action, the product itself as the image. */

:root {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --page: #ffffff;
  --page-alt: #f5f5f7;
  --line: #d2d2d7;
  --link: #0066cc;
  --link-hover: #0055aa;
  --on-link: #ffffff;
  --focus: #0066cc;

  /* The product's own safety colour. It appears here only where the product uses it. */
  --alert-ink: #7a3e00;
  --alert-face: #fdf1e0;
  --alert-line: #e6b980;

  --screen-face: #ffffff;
  --screen-line: #e3e3e6;
  --screen-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08);

  --type: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 22px;
  --shell: 980px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f7;
    --ink-soft: #a1a1a6;
    --page: #000000;
    --page-alt: #101012;
    --line: #38383c;
    --link: #2997ff;
    --link-hover: #58aeff;
    --on-link: #000000;
    --focus: #2997ff;

    --alert-ink: #ffcf8f;
    --alert-face: #2a1c08;
    --alert-line: #6b4a15;

    --screen-face: #1c1c1e;
    --screen-line: #2e2e31;
    --screen-shadow: 0 1px 2px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.5);
  }
}

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

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

body {
  font-family: var(--type);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.centred { text-align: center; }

/* Navigation ------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .nav {
    background: color-mix(in srgb, var(--page) 80%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.nav-inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

.nav-link { font-size: 14px; text-decoration: none; }
.nav-link:hover { text-decoration: underline; }

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

.display, .display-2, .display-3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}

.display   { font-size: clamp(2.6rem, 8vw, 4.75rem); }
.display-2 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
.display-3 { font-size: clamp(1.7rem, 4.2vw, 2.3rem); letter-spacing: -0.02em; }

.lede {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34em;
  margin-top: 20px;
}

.centred .lede { margin-inline: auto; }

.aside { font-size: 15px; color: var(--ink-soft); margin-top: 14px; }

.caption {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 16px;
  text-align: center;
  max-width: 40em;
  margin-inline: auto;
}

/* Action ----------------------------------------------------------------- */

.actions { margin-top: 30px; }

.action {
  display: inline-block;
  background: var(--link);
  color: var(--on-link);
  text-decoration: none;
  font-size: 17px;
  padding: 13px 26px;
  border-radius: 980px;
  min-height: 44px;
  transition: background-color .2s ease;
}

.action:hover { background: var(--link-hover); color: var(--on-link); }

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

.hero { padding: 72px 0 96px; }
.band { padding: 104px 0; }
.band-grey { background: var(--page-alt); }
.band-close { padding-bottom: 120px; }

.stage { margin-top: 56px; }
.stage-narrow { margin-top: 48px; max-width: 700px; }

/* The product's own screens --------------------------------------------- */

.screen {
  background: var(--screen-face);
  border: 1px solid var(--screen-line);
  border-radius: 14px;
  box-shadow: var(--screen-shadow);
  overflow: hidden;
}

.screen-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--screen-line);
}

.screen-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.screen-meta  { font-size: 14px; color: var(--ink-soft); }

.screen-note {
  padding: 14px 20px 18px;
  font-size: 14px;
  color: var(--ink-soft);
  border-top: 1px solid var(--screen-line);
}

/* Queue ------------------------------------------------------------------ */

.queue { list-style: none; }

.row { padding: 18px 20px; border-bottom: 1px solid var(--screen-line); }
.row:last-child { border-bottom: none; }

.row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.flag {
  font-size: 12px;
  font-weight: 600;
  color: var(--alert-ink);
  background: var(--alert-face);
  border: 1px solid var(--alert-line);
  border-radius: 100px;
  padding: 2px 9px;
}

.row-car   { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.row-said  { font-size: 15px; margin-top: 9px; max-width: 46em; }
.row-state { font-size: 13px; color: var(--ink-soft); margin-top: 9px; }

.row-safety { background: var(--alert-face); }
.row-safety .flag { background: var(--screen-face); }

/* Needs-attention cards -------------------------------------------------- */

.card { padding: 18px 20px; border-bottom: 1px solid var(--screen-line); }
.card:last-child { border-bottom: none; }
.card-urgent { background: var(--alert-face); }
.card-kind { font-size: 13px; color: var(--ink-soft); }
.card-head { font-size: 17px; font-weight: 600; margin-top: 2px; letter-spacing: -0.01em; }
.card-body { font-size: 15px; color: var(--ink-soft); margin-top: 6px; }

/* Next step -------------------------------------------------------------- */

.choices { padding: 6px 0; }

.choice { display: flex; gap: 12px; padding: 12px 20px; align-items: flex-start; }

.choice-text { display: block; }
.choice b  { display: block; font-size: 15px; font-weight: 600; }
.choice em { display: block; font-size: 13px; font-style: normal; color: var(--ink-soft); margin-top: 2px; }

.dot {
  width: 17px; height: 17px;
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-top: 3px;
  flex: none;
}

.is-chosen .dot { border-color: var(--link); border-width: 5px; background: var(--screen-face); }

/* Timeline --------------------------------------------------------------- */

.timeline { list-style: none; padding: 6px 0 10px; }

.timeline li { display: flex; gap: 16px; padding: 10px 20px; font-size: 15px; align-items: baseline; }

.when { color: var(--ink-soft); font-size: 13px; flex: none; width: 84px; }
.what { flex: 1; }

/* Four short points ------------------------------------------------------ */

.points { display: grid; gap: 44px 40px; }

.point h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.point p  { margin-top: 8px; color: var(--ink-soft); font-size: 16px; }

@media (min-width: 720px) {
  .points { grid-template-columns: 1fr 1fr; }
}

/* Being built now -------------------------------------------------------- */

.next-list {
  list-style: none;
  margin-top: 32px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.next-list li {
  font-size: 17px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.next-list li:last-child { border-bottom: none; }

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

.footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 44px;
  font-size: 13px;
  color: var(--ink-soft);
}

.footer p + p { margin-top: 8px; }
.footer a { font-size: 13px; }

/* Motion ----------------------------------------------------------------- */
/* One deliberate moment: the safety enquiry arrived third and rises to the top, which is what the
   product does with a safety report. The two rows below settle by the same distance. */

@keyframes rise {
  0%, 12%  { transform: translateY(212px); opacity: 0; }
  30%      { opacity: 1; }
  100%     { transform: translateY(0); opacity: 1; }
}

@keyframes settle {
  0%, 12% { transform: translateY(-212px); }
  100%    { transform: translateY(0); }
}

.row-rise  { animation: rise 1.6s cubic-bezier(.2,.8,.2,1) both; }
.row-shift { animation: settle 1.6s cubic-bezier(.2,.8,.2,1) both; }

/* The interface panels arrive as you reach them, once each, and only these three. */
@keyframes lift {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .reveal .screen {
    animation: lift linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row-rise, .row-shift, .reveal .screen { animation: none; }
  .action { transition: none; }
}

/* Narrow ----------------------------------------------------------------- */

@media (max-width: 600px) {
  .hero { padding: 44px 0 64px; }
  .band { padding: 72px 0; }
  .stage { margin-top: 40px; }
  .when { width: 70px; }
  .timeline li, .choice, .row, .card { padding-inline: 16px; }
}

/* Print ------------------------------------------------------------------ */
/* Backgrounds are dropped when printing, which would leave white text on white paper. */

@media print {
  .action { color: var(--ink); background: transparent; border: 1px solid var(--ink); }
  .nav { position: static; }
  .screen { box-shadow: none; }
}

/* The documentation page ------------------------------------------------- */
/* Denser than the front page on purpose: this is read, not scanned. */

.hero-doc { padding: 56px 0 8px; }

.doc {
  max-width: 720px;
  padding-top: 56px;
  padding-bottom: 88px;
}

.doc-part + .doc-part { margin-top: 56px; }

.doc h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.doc p { margin-top: 16px; max-width: 38em; }
.doc b { font-weight: 600; }

.doc-note {
  background: var(--page-alt);
  border-left: 3px solid var(--alert-line);
  padding: 16px 18px;
  border-radius: 0 8px 8px 0;
  max-width: none;
}

.steps { list-style: none; counter-reset: step; margin-top: 8px; }

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-top: 28px;
}

/* The steps are numbered because they are a sequence — you cannot record a decision on an
   enquiry you have not opened. */
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--page-alt);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.steps h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.steps p { margin-top: 6px; color: var(--ink-soft); }

.plain-list { list-style: none; margin-top: 8px; }

.plain-list li {
  margin-top: 16px;
  padding-left: 18px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  max-width: 38em;
}

.plain-list b { color: var(--ink); }

.table-wrap { overflow-x: auto; margin-top: 20px; }

.roles {
  border-collapse: collapse;
  width: 100%;
  min-width: 540px;
  font-size: 15px;
}

.roles th, .roles td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.roles th {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom-width: 1px;
}

.roles tbody td { color: var(--ink-soft); }
.roles tbody td:first-child { color: var(--ink); white-space: nowrap; }