:root, [data-theme="light"] {
  --bg: #f4f4f2; --panel: #ffffff; --panel-2: #fafaf9; --sunk: #ececea; --sunk-2: #e0e0dd;
  --ink: #1b1c1d; --ink-2: #5c5f61; --ink-3: #6a6e71;
  --rule: #dedeDA; --rule-2: #c6c7c3;
  --accent: #2f4858; --accent-soft: #e4eaee; --accent-ink: #ffffff;
  --ok: #3f6b4f; --warn: #8a6414; --bad: #97372c;
  --band: #1b1c1d;
  --lift: 0 1px 2px rgba(27, 28, 29, 0.05), 0 16px 40px rgba(27, 28, 29, 0.12);
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #16181a; --panel: #1e2124; --panel-2: #1a1d20; --sunk: #101214; --sunk-2: #282c30;
  --ink: #eceeef; --ink-2: #a8adb1; --ink-3: #8d9397;
  --rule: #2a2e32; --rule-2: #3a4046;
  --accent: #9dbcd0; --accent-soft: #22303a; --accent-ink: #16181a;
  --ok: #7fa98c; --warn: #c6a35d; --bad: #d4837a;
  --band: #0e1011;
  --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
}
/* "screen and" is load-bearing, not tidiness: without it this block applies when printing, and
   the sticker sheet comes off a dark-mode machine as near-white ink on paper. Scoping it to
   screen means the print block needs no second copy of the light palette to override. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #16181a; --panel: #1e2124; --panel-2: #1a1d20; --sunk: #101214; --sunk-2: #282c30;
    --ink: #eceeef; --ink-2: #a8adb1; --ink-3: #8d9397;
    --rule: #2a2e32; --rule-2: #3a4046;
    --accent: #9dbcd0; --accent-soft: #22303a; --accent-ink: #16181a;
    --ok: #7fa98c; --warn: #c6a35d; --bad: #d4837a;
    --band: #0e1011;
    --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
  }
}


* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
button, input, select { font-family: var(--sans); color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }


/* Clipped sideways because cards fly in from past the page edge; clip, unlike hidden, makes no scroll box. */
.vcs-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); overflow-x: clip; }
.vcs-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 40px; border-bottom: 1px solid var(--rule); background: var(--bg);
}
.vcs-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}
.vcs-logo { display: block; flex: none; }
.vcs-topnav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 15px; }
.vcs-topnav a { color: var(--ink-2); text-decoration: none; }
.vcs-topnav a:hover, .vcs-topnav a[aria-current="page"] { color: var(--ink); }
.vcs-main { flex: 1; padding: 64px 40px 96px; }
.vcs-column { max-width: 680px; margin: 0 auto; }
.vcs-wide { max-width: 1200px; margin: 0 auto; }
.vcs-gutter { padding: 0 40px; }
.vcs-titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vcs-title {
  margin: 0; font-size: 40px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em;
}
.vcs-subtitle { margin: 18px 0 0; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
/* A hairline, not a coloured bar. The old accent sweep was the other project's signature. */
.vcs-sweep { height: 1px; background: var(--rule-2); margin: 40px 0 36px; }
.vcs-back {
  display: inline-block; padding: 0 0 14px; font-size: 14px;
  color: var(--ink-2); text-decoration: none;
}
.vcs-back:hover { color: var(--ink); }
.vcs-footer {
  padding: 28px 40px; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: 14px;
}
.vcs-footer a { color: var(--ink-3); }
.vcs-footer-links { display: flex; gap: 22px; flex-wrap: wrap; max-width: 680px; margin: 0 auto; }
.vcs-footer-wide .vcs-footer-links { max-width: 1200px; }


/* Barely rounded. Volvo's surfaces are square-ish; 12px radii would read as a consumer app. */
.vcs-check { display: inline-flex; gap: .35rem; align-items: center; margin-right: .75rem; }
.vcs-list { list-style: none; margin: 0; padding: 0; }
.vcs-error { color: var(--bad); border-left: 3px solid var(--bad); padding-left: .75rem; }
.vcs-panel {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
  padding: 28px 30px; margin: 0 0 20px;
}
.vcs-panel h2 {
  margin: 0 0 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.vcs-surface { background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; }
/* The cut line and the code itself are always white-on-black-ink, whatever the page theme is:
   this square leaves the screen on paper, and a camera thresholds luminance. */
.vcs-cutline {
  display: inline-block; background: #fff; padding: 6mm;
  border: 1px dashed #767676; border-radius: 0;
}
.vcs-ruler { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.vcs-ruler-line { display: block; height: 2px; background: var(--ink-2); }
.vcs-prose { line-height: 1.65; color: var(--ink-2); }
.vcs-prose p { margin: 0 0 14px; }
.vcs-prose p:last-child, .vcs-prose ul:last-child { margin-bottom: 0; }
.vcs-prose ul { margin: 0 0 14px; padding-left: 20px; }
.vcs-prose li { margin: 0 0 10px; }
.vcs-prose strong { color: var(--ink); font-weight: 600; }
/* Long tokens — a VIN, an email address — must wrap rather than widen the page on a phone. */
.vcs-prose { overflow-wrap: anywhere; }
.vcs-lead { font-size: 18px; color: var(--ink); }
.vcs-kicker {
  display: block; margin: 0 0 8px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.vcs-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.vcs-row:last-child { border-bottom: 0; }
.vcs-row-main { flex: 1; min-width: 0; }
.vcs-row-note { color: var(--ink-3); font-size: 14px; }
.vcs-badge {
  display: inline-block; padding: 3px 9px; border-radius: 2px;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--sunk-2); color: var(--ink-2);
}
.vcs-badge-ok { color: var(--ok); }
.vcs-badge-warn { color: var(--warn); }
.vcs-badge-bad { color: var(--bad); }
.vcs-notice {
  border: 1px solid var(--rule-2); border-left: 2px solid var(--ink-3);
  background: var(--sunk); border-radius: 2px;
  padding: 20px 24px; margin: 0 0 20px; color: var(--ink-2); line-height: 1.6;
}
.vcs-notice-bad { border-left-color: var(--bad); }
.vcs-field { display: block; margin: 0 0 18px; }
.vcs-label { display: block; margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.vcs-input, .vcs-select {
  width: 100%; padding: 11px 13px; font-size: 16px;
  background: var(--panel); border: 1px solid var(--rule-2); border-radius: 2px;
}
.vcs-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vcs-icon {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.vcs-button {
  display: inline-block; padding: 13px 26px; border: 1px solid var(--ink); border-radius: 2px;
  cursor: pointer; text-align: center; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.6;
  background: var(--ink); color: var(--bg);
  transition: background 140ms linear, color 140ms linear, border-color 140ms linear;
}
.vcs-button:hover { background: transparent; color: var(--ink); }
/* Outline by default, filled on hover — the inverse of the primary, as Volvo's secondaries read. */
.vcs-button-quiet {
  background: transparent; border-color: var(--rule-2); color: var(--ink-2); font-weight: 400;
}
.vcs-button-quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
/* For a control repeated down a list, where a full-height button would outweigh the row. */
.vcs-button-small { padding: 8px 18px; }
.vcs-button:disabled, .vcs-button:disabled:hover {
  background: var(--sunk-2); border-color: var(--sunk-2); color: var(--ink-3);
  cursor: not-allowed;
}
/* Fires a real, uncancellable 30-minute climate run — coloured as a consequence, not a convenience. */
.vcs-button-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.vcs-button-danger:hover { background: transparent; color: var(--bad); }
/* The way *to* a destructive page, seen every visit; the filled one lives on that page itself. */
.vcs-button-danger-quiet { background: transparent; border-color: var(--bad); color: var(--bad); }
.vcs-button-danger-quiet:hover { background: var(--bad); color: #fff; }


.vcs-hero { display: flex; align-items: center; gap: 80px; padding: 80px 0 128px; }
.vcs-hero-copy { flex: 0 0 460px; display: flex; flex-direction: column; }
.vcs-display {
  margin: 0; font-size: 60px; font-weight: 300; line-height: 1.04; letter-spacing: -0.025em;
  text-wrap: balance;
}
.vcs-hero-sub { margin: 24px 0 0; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.vcs-hero-free { margin: 28px 0 24px; font-size: 17px; }
.vcs-hero-free strong { font-weight: 600; }
.vcs-trust {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 40px 0 0; padding: 20px 0 0;
  list-style: none; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2);
}
.vcs-trust li { display: flex; align-items: center; gap: 8px; }
.vcs-trust .vcs-icon { color: var(--ink-3); }
.vcs-hero-media { flex: 1; min-width: 0; position: relative; }
/* Clips the photo, so it can settle from slightly zoomed without spilling over the page. */
.vcs-hero-frame { overflow: hidden; border-radius: 2px; background: var(--sunk); }
/*
 * Explicit width/height on the element keep the space reserved so nothing jumps as it loads;
 * object-fit crops toward the moose, which sits right of centre in the photograph.
 */
.vcs-hero-img {
  display: block; width: 100%; height: 560px; object-fit: cover; object-position: 78% 50%;
}
.vcs-float {
  position: absolute; left: -56px; bottom: -64px; width: 340px; padding: 20px 24px 8px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--lift);
}
.vcs-float .vcs-kicker { margin: 0; }
.vcs-slots { list-style: none; margin: 6px 0 0; padding: 0; }
.vcs-slot { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.vcs-slot:last-child { border-bottom: 0; }
.vcs-slot-time {
  flex: 0 0 64px; font-size: 24px; font-weight: 300; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vcs-slot-what { display: flex; flex-direction: column; line-height: 1.35; }
.vcs-slot-what strong { font-size: 15px; font-weight: 600; }
.vcs-slot-what span { font-size: 14px; color: var(--ink-3); }

.vcs-h2 {
  margin: 0; font-size: 36px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance;
}
.vcs-copy { margin: 0; font-size: 17px; color: var(--ink-2); }
.vcs-copy strong { font-weight: 600; color: var(--ink); }
.vcs-copy-lead { margin: 0; font-size: 20px; line-height: 1.45; color: var(--ink); }
.vcs-split {
  display: flex; gap: 80px; align-items: flex-start; padding: 96px 0; border-top: 1px solid var(--rule);
}
.vcs-split-open { border-top: 0; padding-top: 112px; }
.vcs-split-flat { border-top: 0; padding: 0; }
.vcs-split-lead { flex: 0 0 400px; display: flex; flex-direction: column; gap: 16px; }
.vcs-split-lead .vcs-h2 { margin-bottom: 8px; }
.vcs-split-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.vcs-section { padding: 96px 0 112px; border-top: 1px solid var(--rule); }

.vcs-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 28px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
}
.vcs-day { display: flex; flex-direction: column; gap: 6px; min-height: 220px; }
.vcs-day-empty { background: var(--bg); border-radius: 2px; }
.vcs-day-name {
  padding: 0 2px 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.vcs-block { padding: 8px 10px; border-radius: 2px; background: var(--accent-soft); line-height: 1.3; }
.vcs-block strong { display: block; font-size: 15px; font-weight: 600; color: var(--accent); }
.vcs-block span { font-size: 13px; color: var(--ink-2); }

.vcs-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/*
 * The week as a time-of-day calendar: morning and evening bands at 2px a minute, the hours between
 * left out. Full bleed and clipped, because its cards fly in from past the edges. On phones, where
 * seven time columns cannot fit, the day list stands in for it.
 */
.vcs-weekband { padding: 112px 40px 128px; border-top: 1px solid var(--rule); overflow: clip; }
.vcs-weekband-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
}
.vcs-say { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.vcs-say p {
  margin: 0; font-size: 46px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance;
}
.vcs-cal {
  width: 100%; padding: 24px 28px 20px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
}
.vcs-cal-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.vcs-cal-day {
  height: 31px; padding: 0 8px; font-size: 13px; line-height: 21px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.vcs-cal-gutter { position: relative; }
.vcs-cal-gutter span {
  position: absolute; right: 12px; transform: translateY(-50%);
  font-size: 12px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.vcs-cal-col {
  position: relative; border-left: 1px solid var(--rule);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 120px;
}
.vcs-cal-weekend { background-color: var(--panel-2); }
.vcs-cal-morning { height: 241px; }
.vcs-cal-evening { height: 121px; }
.vcs-cal-col.vcs-cal-morning, .vcs-cal-col.vcs-cal-evening { border-bottom: 1px solid var(--rule); }
.vcs-cal-break { grid-column: 1 / -1; height: 28px; display: flex; align-items: center; padding-left: 56px; }
.vcs-cal-break span { flex: 1; border-top: 1px dashed var(--rule-2); }
.vcs-cal-block {
  position: absolute; left: 4px; right: 4px; z-index: 1; height: 48px;
  display: flex; flex-direction: column; padding: 7px 9px 0; line-height: 1.25;
  background: var(--accent-soft); border-top: 2px solid var(--accent); border-radius: 0 0 2px 2px;
}
.vcs-cal-block strong { font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.vcs-cal-block span { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcs-week-phone { display: none; }

.vcs-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  margin: 48px 0 0; padding: 0; list-style: none;
}
.vcs-step { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; border-top: 1px solid var(--ink); }
.vcs-step .vcs-kicker { margin: 0; }
.vcs-step h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.vcs-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.vcs-pull {
  margin: 64px 0 0; max-width: 820px;
  font-size: 26px; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em;
}

.vcs-sunk-band { background: var(--sunk); padding: 104px 40px 112px; }
.vcs-routes { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vcs-route {
  display: flex; flex-direction: column; gap: 6px; min-height: 180px; padding: 24px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
}
.vcs-route .vcs-badge { align-self: flex-start; margin-bottom: 18px; }
.vcs-route h3 { margin: 0; font-size: 18px; font-weight: 600; }
.vcs-route p { margin: 0; font-size: 16px; color: var(--ink-2); }
.vcs-futures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; }
.vcs-future {
  display: flex; flex-direction: column; gap: 14px; padding: 36px 36px 40px;
  background: var(--bg); border: 1px solid var(--rule-2); border-radius: 2px;
}
.vcs-future .vcs-kicker { margin: 0; }
.vcs-future h3 { margin: 0; font-size: 27px; font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; }
.vcs-future p { margin: 0; font-size: 16px; color: var(--ink-2); }
.vcs-future strong { font-weight: 600; color: var(--ink); }
.vcs-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; padding: 0;
  list-style: none; font-size: 14px;
}
.vcs-flow li { display: flex; align-items: center; gap: 8px; }
.vcs-flow-step {
  padding: 7px 12px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--panel); color: var(--ink-2);
}
.vcs-flow .vcs-icon { width: 14px; height: 14px; color: var(--ink-3); }
/*
 * Deliberately spans and not buttons: these illustrate a screen that does not exist yet, and a
 * real <button> here would be a control that does nothing when pressed.
 */
.vcs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vcs-chip {
  padding: 9px 16px; border: 1px solid var(--rule-2); border-radius: 2px;
  color: var(--ink-2); font-size: 14px;
}

.vcs-perms {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
}
.vcs-perms > div { padding: 28px 30px; }
.vcs-perms > div + div { border-left: 1px solid var(--rule); background: var(--panel-2); }
.vcs-perms .vcs-kicker { margin: 0; }
.vcs-perm-list { list-style: none; margin: 14px 0 0; padding: 0; }
.vcs-perm-list li {
  display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule);
  font-size: 15px; line-height: 1.45;
}
.vcs-perm-list li:last-child { border-bottom: 0; }
.vcs-perm-list .vcs-icon { margin-top: 3px; }
.vcs-perm-yes .vcs-kicker, .vcs-perm-yes .vcs-icon { color: var(--ok); }
.vcs-perm-yes .vcs-icon { stroke-width: 1.75; }
.vcs-perm-no li { color: var(--ink-2); }
.vcs-perm-no .vcs-icon { color: var(--ink-3); }
.vcs-perm-after { margin: 14px 0 0; font-size: 15px; }
.vcs-statement { margin: 0; font-size: 22px; line-height: 1.4; }
.vcs-statement + .vcs-copy { margin-top: -18px; }
.vcs-copy + .vcs-copy { margin-top: -16px; }
.vcs-aside {
  display: flex; gap: 80px; align-items: flex-start;
  margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--rule);
}
.vcs-aside h3 {
  flex: 0 0 400px; margin: 0; font-size: 27px; font-weight: 300; line-height: 1.25; letter-spacing: -0.02em;
}
.vcs-aside-body { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

.vcs-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.vcs-card {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 26px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
}
.vcs-card h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.vcs-card p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.vcs-columns {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px;
  font-size: 16px; color: var(--ink-2);
}
.vcs-columns p { margin: 0; }
.vcs-columns strong { font-weight: 600; color: var(--ink); }

.vcs-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start;
  padding: 96px 0 112px; border-top: 1px solid var(--rule);
}
.vcs-pair > div:first-child { display: flex; flex-direction: column; gap: 16px; }
.vcs-pair .vcs-h2 { margin-bottom: 8px; }
.vcs-caveat {
  display: flex; flex-direction: column; gap: 14px; padding: 32px 34px;
  background: var(--sunk); border: 1px solid var(--rule-2); border-radius: 2px;
  font-size: 16px; color: var(--ink-2);
}
.vcs-caveat p { margin: 0; }
.vcs-caveat-head { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }

.vcs-story { background: var(--panel); border-top: 1px solid var(--rule); padding: 104px 40px 112px; }
.vcs-story-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.vcs-story .vcs-logo { margin-bottom: 8px; }
.vcs-story .vcs-h2 { margin-bottom: 8px; }
.vcs-story p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-2); }

.vcs-cta { background: var(--band); color: #eceeef; padding: 112px 40px; }
.vcs-cta-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.vcs-cta h2 {
  margin: 0; font-size: 52px; font-weight: 300; line-height: 1.08; letter-spacing: -0.025em;
  text-wrap: balance;
}
.vcs-cta p { margin: 0; max-width: 600px; font-size: 19px; line-height: 1.5; color: #a8adb1; }
.vcs-cta .vcs-cta-free { color: #eceeef; font-weight: 600; }
.vcs-cta .vcs-actions { justify-content: center; margin-top: 12px; }
.vcs-cta .vcs-row-note { font-size: 14px; color: #a8adb1; }
.vcs-cta .vcs-button { background: #f4f4f2; border-color: #f4f4f2; color: #1b1c1d; }
.vcs-cta .vcs-button:hover { background: transparent; color: #f4f4f2; }
.vcs-cta .vcs-button:disabled, .vcs-cta .vcs-button:disabled:hover {
  background: #2a2e32; border-color: #2a2e32; color: #8b8f92;
}
.vcs-cta .vcs-fineprint { margin-top: 28px; max-width: 560px; font-size: 14px; color: #8b8f92; }


.vcs-app-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 24px 40px; padding-bottom: 40px;
}
.vcs-app-title { margin: 0; font-size: 52px; font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; }
.vcs-app { display: flex; gap: 32px; align-items: flex-start; }
.vcs-app-main { flex: 1; min-width: 0; padding: 24px 32px 8px; }
.vcs-app-main > .vcs-kicker { margin: 0; }
.vcs-empty { margin: 12px 0 18px; }
.vcs-sched-list { list-style: none; margin: 4px 0 0; padding: 0; }
.vcs-sched {
  display: grid; grid-template-columns: 100px minmax(0, 1fr) 104px auto;
  grid-template-areas: "time main next edit" "time note next edit";
  column-gap: 24px; row-gap: 4px; align-items: center;
  margin: 0 -32px; padding: 22px 32px; border-bottom: 1px solid var(--rule);
  transition: background-color 160ms ease;
}
.vcs-sched:hover { background-color: var(--panel-2); }
.vcs-sched:last-child { border-bottom: 0; }
.vcs-sched-time {
  grid-area: time; font-size: 36px; font-weight: 300; letter-spacing: -0.015em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vcs-sched-main { grid-area: main; align-self: end; display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.vcs-sched-main strong { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.vcs-sched-main span { font-size: 15px; color: var(--ink-2); }
.vcs-sched-note { grid-area: note; align-self: start; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.vcs-sched-next { grid-area: next; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.35; }
.vcs-sched-next .vcs-kicker { margin: 0; font-size: 12px; }
.vcs-sched-next strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vcs-sched > .vcs-button { grid-area: edit; }
.vcs-sched-paused .vcs-sched-time, .vcs-sched-paused .vcs-sched-main strong { color: var(--ink-3); }
.vcs-carcard { flex: 0 0 380px; }
.vcs-carcard > section { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 28px 26px; }
.vcs-carcard > section + section { border-top: 1px solid var(--rule); }
.vcs-carcard > .vcs-carcard-quiet { background: var(--panel-2); }
.vcs-carcard .vcs-kicker { margin: 0; }
.vcs-carcard p { margin: 0; font-size: 15px; }
.vcs-carcard .vcs-row-note { font-size: 14px; line-height: 1.5; }
.vcs-car-name {
  font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere;
}
.vcs-settings {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 80px;
  margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--rule);
}
.vcs-settings section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vcs-settings h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.vcs-settings p { margin: 0; font-size: 15px; color: var(--ink-2); }
.vcs-settings section > .vcs-button { margin-top: 10px; }
.vcs-illustration { max-width: 100%; height: auto; margin: 6px 0; }
.vcs-settings h3 { margin: 10px 0 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.vcs-settings ul { margin: 0; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.vcs-settings li { margin: 0 0 6px; }
/* The codes section is the one settings block long enough to read as prose. */
.vcs-settings section#codes { grid-column: 1 / -1; }
.vcs-inline-form { display: flex; gap: 12px; width: 100%; max-width: 420px; margin-top: 10px; }
.vcs-inline-form .vcs-select, .vcs-inline-form .vcs-input { flex: 1; width: auto; min-width: 0; }


@property --vcs-seen { syntax: "<integer>"; inherits: true; initial-value: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vcs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vcs-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes vcs-drift-down { to { transform: translateY(70px); } }
@keyframes vcs-drift-up { to { transform: translateY(-50px); } }
@keyframes vcs-seen { from { --vcs-seen: 0; } to { --vcs-seen: 1; } }
@keyframes vcs-fly {
  0% {
    opacity: 0; box-shadow: 0 24px 48px rgba(27, 28, 29, 0.2);
    transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-r)) scale(1.1);
  }
  12% { opacity: 1; }
  100% { opacity: 1; box-shadow: 0 0 0 rgba(27, 28, 29, 0); transform: none; }
}
@keyframes vcs-say-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
@keyframes vcs-say-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vcs-open-gap { from { max-height: 0; } to { max-height: 240px; } }
@keyframes vcs-arrive {
  0% { opacity: 0; box-shadow: 0 24px 48px rgba(27, 28, 29, 0.2); transform: translateX(110vw) rotate(6deg) scale(1.04); }
  15% { opacity: 1; }
  100% { opacity: 1; box-shadow: 0 0 0 rgba(27, 28, 29, 0); transform: none; }
}
@keyframes vcs-saved { 0%, 55% { background-color: var(--accent-soft); } 100% { background-color: transparent; } }

.vcs-rise { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vcs-rise-1 { animation-delay: 70ms; }

@media (prefers-reduced-motion: no-preference) {
  .vcs-hero-copy { animation: vcs-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
  .vcs-hero-img { animation: vcs-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .vcs-float { animation: vcs-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 250ms both; }

  /* A page opened every day should not perform: one quick fade. */
  .vcs-app-page { animation: vcs-fade 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

  /*
   * Only on the visit straight after saving a schedule, never an ordinary load: the list opens a
   * gap, that row flies in from the right, and a tint says it saved. Filled backwards only, so
   * afterwards it is an ordinary row again, hover included.
   */
  .vcs-sched-new {
    animation:
      vcs-open-gap 0.45s cubic-bezier(0.65, 0, 0.35, 1) backwards,
      vcs-arrive 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards,
      vcs-saved 2.2s linear 1.1s backwards;
  }
}

@supports (animation-timeline: view()) {
  /* Where photo and card sit side by side, they drift apart as the hero scrolls away. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 1041px) {
    .vcs-hero-frame {
      animation: vcs-drift-down linear both;
      animation-timeline: scroll(root); animation-range: 0px 900px;
    }
    .vcs-float {
      animation: vcs-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 250ms both, vcs-drift-up linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0px 900px;
    }
  }

  /* Once half the calendar is on screen, every card flies in from its own edge, on a timer. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    .vcs-weekband {
      timeline-scope: --vcs-cal;
      animation: vcs-seen linear both;
      animation-timeline: --vcs-cal; animation-range: entry 50% entry 60%;
    }
    .vcs-cal { view-timeline: --vcs-cal block; }
    .vcs-say { display: grid; }
    .vcs-say p { grid-area: 1 / 1; }
    .vcs-say-2, .vcs-cal-block { opacity: 0; }

    @container style(--vcs-seen: 1) {
      .vcs-cal-block { animation: vcs-fly 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--fly-delay) both; }
      .vcs-say-1 { animation: vcs-say-out 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s both; }
      .vcs-say-2 { animation: vcs-say-in 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 1.4s both; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}


@media (max-width: 1040px) {
  .vcs-hero { flex-direction: column; align-items: stretch; gap: 40px; padding: 56px 0 104px; }
  .vcs-hero-copy { flex: none; max-width: 620px; }
  .vcs-hero-img { height: 440px; }
  .vcs-float { left: 24px; bottom: -48px; }
  .vcs-split, .vcs-aside { flex-direction: column; gap: 32px; }
  .vcs-split-lead, .vcs-aside h3 { flex: none; }
  .vcs-routes { width: 100%; }
  .vcs-app { flex-direction: column; align-items: stretch; }
  .vcs-carcard { flex: none; }
  .vcs-say p { font-size: 36px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .vcs-topbar { padding: 16px 20px; }
  .vcs-main { padding: 36px 20px 64px; }
  .vcs-gutter { padding: 0 20px; }
  .vcs-footer { padding: 22px 20px; }
  .vcs-panel { padding: 22px 20px; }
  .vcs-title { font-size: 30px; }
  .vcs-subtitle { font-size: 17px; }
  .vcs-sweep { margin: 28px 0 26px; }

  .vcs-display { font-size: 40px; line-height: 1.06; }
  .vcs-hero { padding: 36px 0 72px; gap: 32px; }
  .vcs-hero-sub { margin-top: 18px; font-size: 17px; }
  .vcs-hero-free { margin: 20px 0 20px; font-size: 16px; }
  .vcs-hero .vcs-actions .vcs-button { flex: 1 1 100%; }
  .vcs-trust { margin-top: 24px; gap: 8px 18px; }
  .vcs-hero-media { margin: 0 -20px; }
  .vcs-hero-img { height: 300px; object-position: 74% 50%; }
  .vcs-hero-frame { border-radius: 0; }
  .vcs-float { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 20px 0; padding: 16px 20px 4px; }
  .vcs-h2 { font-size: 28px; }
  .vcs-split, .vcs-section, .vcs-pair { padding: 48px 0 56px; gap: 24px; }
  .vcs-split-open { padding-top: 56px; }
  .vcs-split-flat { padding: 0; }
  .vcs-week { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 16px; }
  .vcs-day {
    flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
  }
  .vcs-day:has(+ .vcs-day-empty) { border-bottom: 0; }
  .vcs-day-empty { display: none; }
  .vcs-day-name { flex: 0 0 40px; padding: 0; }
  .vcs-block { display: flex; align-items: baseline; gap: 5px; padding: 5px 9px; }
  .vcs-block strong { display: inline; font-size: 14px; }
  .vcs-block span { font-size: 14px; }
  .vcs-weekband { padding: 56px 20px 60px; }
  .vcs-weekband-inner { gap: 24px; }
  .vcs-say p { font-size: 28px; }
  .vcs-cal { display: none; }
  .vcs-week-phone { display: grid; }
  .vcs-steps, .vcs-routes, .vcs-futures, .vcs-trio, .vcs-columns, .vcs-pair, .vcs-perms,
  .vcs-aside-body, .vcs-settings { grid-template-columns: minmax(0, 1fr); }
  .vcs-steps { gap: 28px; margin-top: 28px; }
  .vcs-pull { margin-top: 40px; font-size: 21px; }
  .vcs-sunk-band, .vcs-story, .vcs-cta { padding: 56px 20px 60px; }
  .vcs-route { min-height: 0; }
  .vcs-route .vcs-badge { margin-bottom: 8px; }
  .vcs-futures { margin-top: 40px; }
  .vcs-future { padding: 24px 20px 28px; }
  .vcs-future h3 { font-size: 23px; }
  .vcs-perms > div { padding: 22px 20px; }
  .vcs-perms > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .vcs-aside { margin-top: 48px; padding-top: 32px; gap: 16px; }
  .vcs-aside h3 { font-size: 23px; }
  .vcs-aside-body, .vcs-columns { gap: 14px; }
  .vcs-trio { margin-top: 28px; }
  .vcs-columns { margin-top: 28px; }
  .vcs-caveat { padding: 24px 20px; }
  .vcs-cta-inner { align-items: stretch; text-align: left; gap: 14px; }
  .vcs-cta h2 { font-size: 32px; }
  .vcs-cta p { font-size: 17px; }
  .vcs-cta .vcs-actions { justify-content: flex-start; }
  .vcs-cta .vcs-fineprint { margin-top: 16px; }

  .vcs-app-title { font-size: 38px; }
  .vcs-app-head { padding-bottom: 24px; gap: 20px; }
  .vcs-app-head .vcs-button { width: 100%; }
  .vcs-app { gap: 16px; }
  .vcs-app-main { padding: 18px 18px 4px; }
  .vcs-sched {
    grid-template-columns: 82px minmax(0, 1fr) auto;
    grid-template-areas: "time main edit" "note note note" "next next next";
    column-gap: 16px; row-gap: 8px; margin: 0 -18px; padding: 18px;
  }
  .vcs-sched-time { font-size: 32px; }
  .vcs-sched-main { align-self: center; }
  .vcs-sched-main strong { font-size: 16px; }
  .vcs-sched-main span { font-size: 14px; }
  .vcs-sched-next { flex-direction: row; align-items: baseline; gap: 8px; }
  .vcs-carcard > section { padding: 18px; }
  .vcs-carcard > .vcs-carcard-quiet .vcs-button { width: 100%; }
  .vcs-settings { margin-top: 48px; padding-top: 28px; gap: 36px; }
  .vcs-inline-form { max-width: none; }
  .vcs-settings section > .vcs-button { width: 100%; }
}


@media print {
  @page { margin: 12mm; }
  .vcs-topbar, .vcs-back, .vcs-footer, .vcs-noprint { display: none; }
  .vcs-shell { min-height: 0; }
  .vcs-main { padding: 0; }
  .vcs-panel { border: 0; background: none; padding: 0; box-shadow: none; }
  /* A hedge against a renderer that restarts the animation and snapshots inside 500ms. A
     human-initiated print is already fine: the keyframe ends at the element's natural state and
     the "both" fill mode holds it. "animation: none" rather than "opacity: 1", which would lose
     to the animation-origin value. */
  .vcs-rise { animation: none; }
  .vcs-ruler-line { height: 0; border-top: 2px solid #000; }
  .vcs-cutline { break-inside: avoid; break-after: avoid; }
  .vcs-ruler { break-inside: avoid; }
}