/* Schedulo website. Palette, type and parts follow the Schedulo brand guidelines 2.0 and its web UI kit (15_Web_UI_Kit). */

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/Montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/Montserrat-700.woff2") format("woff2"); }

:root {
  --navy: #071433;
  --navy-2: #0c1d47;
  --navy-3: #13285c;
  --electric: #1E4BFF;
  --electric-hover: #1A3FE0;
  --electric-active: #1535C2;
  --bright: #3F7BFF;
  --cyan: #00C2FF;
  --sky: #209FFF;
  --light: #E5E9F7;
  --white: #FFFFFF;
  --page: #FFFFFF;
  --surface: #FFFFFF;
  --stripe: #FAFBFE;
  --ring-rest: var(--navy);
  --bg: #F4F6FB;
  --text: #071433;
  --muted: #4A5677;
  --line: #D5DBEE;
  --faint: #6B7593;
  --dim: #AEB8D6;
  --night: radial-gradient(ellipse 55% 45% at 82% 22%, rgba(46,98,255,.38), rgba(46,98,255,0) 70%), linear-gradient(162deg, #0D2058 0%, #081845 38%, #071433 62%, #060F2B 100%);

  --txc: #1E4BFF;
  --bus: #00A6E8;
  --bus-dark: #00668F;
  --licence: #FF8800;
  --licence-dark: #A35200;

  --accent: var(--electric);
  --accent-text: var(--electric);
  --radius: 22px;
  --shadow: 0 10px 30px rgba(7, 20, 51, .12);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--page);
  line-height: 1.6;
  font-size: 16px;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* spaced capitals, as the brand's descriptors */
.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 14px;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 46em; }
.on-navy .lede { color: #C9D2EC; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 20, 51, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: #DDE3F5; text-decoration: none; font-weight: 500; font-size: .95rem;
  padding: 8px 14px; border-radius: 10px;
}
.nav a:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); background: var(--navy-3); }
.nav .btn { margin-left: 8px; }
.menu-btn {
  display: none; background: none; border: 1px solid rgba(255,255,255,.25); color: var(--white);
  border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer;
}
@media (max-width: 900px) {
  .menu-btn { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; padding: 12px 20px 20px;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav.open { display: flex; }
  .nav .btn { margin: 8px 0 0; text-align: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer;
  padding: 13px 22px; border-radius: 12px; border: 2px solid transparent;
  background: var(--electric); color: var(--white);
  transition: background .15s, transform .15s;
}
.btn:hover { background: var(--electric-hover); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn.ghost:hover { background: rgba(255,255,255,.08); }
.btn.ghost-dark { background: transparent; color: var(--navy); border-color: var(--line); }
.btn.ghost-dark:hover { background: var(--bg); }
.btn.sm { padding: 9px 16px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- sections ---------- */
section { padding: 96px 0; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.bg-soft { background: var(--bg); }
.on-navy { background: var(--navy); color: var(--white); }
.on-navy .eyebrow { color: var(--bright); }
.on-navy a:not(.btn) { color: #8FB0FF; }

/* the brand's background graphic: soft rounded blue sweeps on navy */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(30, 75, 255, .55), transparent 60%),
    radial-gradient(900px 500px at 105% 70%, rgba(0, 194, 255, .18), transparent 60%),
    linear-gradient(180deg, #071433 0%, #0a1a44 100%);
  color: var(--white);
  padding: 88px 0 96px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(30,75,255,.0), rgba(63,123,255,.22));
}
.hero::before { width: 900px; height: 160px; right: -260px; top: 90px; transform: rotate(-18deg); }
.hero::after { width: 700px; height: 110px; right: -200px; bottom: 40px; transform: rotate(-18deg); opacity: .6; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 span { color: var(--bright); }
.hero .lede { color: #C9D2EC; }
.pillars {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 34px;
  font-size: .78rem; font-weight: 600; letter-spacing: .3em; color: #AFC0EA;
}
.pillars span + span::before { content: "|"; color: var(--electric); margin-right: 18px; }
.hero-grid > *, .split > * { min-width: 0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

.page-hero { padding: 80px 0 72px; }
.page-hero .product-lockup { margin-bottom: 26px; }

/* ---------- app window mock ---------- */
.window {
  background: #0b1a40; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; font-size: 12px; color: #C9D2EC;
}
.window-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #08143a; border-bottom: 1px solid rgba(255,255,255,.08); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3a66; display: block; }
.window-bar b { margin-left: 10px; font-weight: 600; color: #fff; letter-spacing: .02em; }
.window-bar em { margin-left: auto; font-style: normal; color: #8796c4; }
.gantt { padding: 14px 14px 18px; }
.gantt-axis { display: grid; grid-template-columns: 54px repeat(6, 1fr); color: #7f8fbf; margin-bottom: 8px; }
.gantt-row { display: grid; grid-template-columns: 54px 1fr; align-items: center; height: 30px; }
.gantt-row > span { color: #AFC0EA; font-weight: 600; }
.track { position: relative; height: 20px; border-left: 1px dashed rgba(255,255,255,.12); }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(255,255,255,.14); }
.trip {
  position: absolute; top: 0; height: 20px; border-radius: 6px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  animation: slide .9s cubic-bezier(.2,.8,.2,1) both;
}
.trip.c1 { background: #3F7BFF; color: #fff; }
.trip.c2 { background: #00C2FF; }
.trip.c3 { background: #8CD7F5; }
.trip.c4 { background: #E5E9F7; }
.trip.dead { background: transparent; border: 1px dashed #5d6c9c; color: #8796c4; }
@keyframes slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .trip { animation: none; } html { scroll-behavior: auto; } }
.window-foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08); background: #08143a; }
.window-foot b { color: #fff; }

/* timetable grid mock (Schedulo TXC) */
.ttable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ttable th, .ttable td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.ttable th:first-child, .ttable td:first-child { text-align: left; color: #AFC0EA; }
.ttable thead th { color: #fff; font-weight: 600; }
.ttable td.hl { background: rgba(30,75,255,.35); color: #fff; border-radius: 4px; }
.pill-ok { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(46, 204, 113, .16); color: #7be0a6; font-weight: 600; }
.pill-warn { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255, 184, 0, .16); color: #ffd16b; font-weight: 600; }

/* ---------- product lockups and tiles ---------- */
.product-lockup { display: flex; align-items: center; gap: 16px; }
.product-lockup img { width: 64px; height: 64px; border-radius: 16px; }
.product-lockup .pname { font-weight: 700; font-size: 1.3rem; letter-spacing: .01em; }
.product-lockup .pdesc { font-size: .74rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; opacity: .75; }

.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .products { grid-template-columns: 1fr; } }
.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.product-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--radius) var(--radius) 0 0; background: var(--pc); }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(7,20,51,.06), 0 18px 40px rgba(7,20,51,.12); }
.product-card h3 { font-size: 1.35rem; margin-top: 22px; }
.product-card p { color: var(--muted); }
.product-card ul { margin: 0 0 22px; padding: 0; list-style: none; }
.product-card li { padding: 5px 0 5px 26px; position: relative; font-size: .95rem; }
.product-card li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 6px; border-radius: 4px; background: var(--pc); }
.product-card .more { margin-top: auto; font-weight: 600; color: var(--pc-text); }
.product-card .badge { align-self: flex-start; margin-bottom: 18px; }

.badge {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: var(--light); color: #1335C0;
}
.badge.live { background: #E3F6EC; color: #11713F; }

.p-txc { --pc: var(--txc); --pc-text: var(--txc); }
.p-bus { --pc: var(--bus); --pc-text: var(--bus-dark); }
.p-licence { --pc: var(--licence); --pc-text: var(--licence-dark); }

/* the family */
.family { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.family > * { flex: 0 0 calc((100% - 80px) / 6); }
@media (max-width: 900px) { .family > * { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 560px) { .family > * { flex-basis: calc((100% - 16px) / 2); } }
.fam {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 20px 16px; text-align: center;
}
.fam img { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 14px; }
.fam b { display: block; font-size: .95rem; letter-spacing: .06em; }
.fam small { display: block; color: #AFC0EA; font-size: .74rem; margin-top: 2px; }
.fam .badge { margin-top: 10px; font-size: .62rem; }
.fam.soon { opacity: .78; }
.fam.soon .badge { background: rgba(255,255,255,.08); color: #C9D2EC; }

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.features.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .features, .features.two { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.bg-soft .feature { box-shadow: 0 1px 2px rgba(7,20,51,.04); }
.feature .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent-text); margin-bottom: 16px;
}
.feature .ico svg { width: 22px; height: 22px; }
.feature p { color: var(--muted); margin: 0; font-size: .97rem; }
.feature h3 { margin-bottom: .4em; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps, .steps.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps, .steps.three { grid-template-columns: 1fr; } }
.step { position: relative; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step .n {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent); color: var(--white); font-weight: 700; margin-bottom: 16px;
}
.step p { color: var(--muted); margin: 0; font-size: .95rem; }
.on-navy .step { background: var(--navy-2); border-color: rgba(255,255,255,.1); }
.on-navy .step p { color: #C9D2EC; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--accent-text); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .95rem; }
.on-navy .stat b { color: var(--white); }
.on-navy .stat span { color: #C9D2EC; }

/* split: copy beside a visual */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding: 8px 0 8px 34px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231E4BFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.on-navy .checks li::before { background-color: rgba(63,123,255,.22); }

/* round trip diagram */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: stretch; }
.flow .node { background: var(--navy-2); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 24px; }
.flow .node img { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 14px; }
.flow .node p { color: #C9D2EC; margin: 0; font-size: .95rem; }
.flow .arrow { display: grid; place-items: center; color: var(--bright); font-size: 1.6rem; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow .arrow { transform: rotate(90deg); } }

/* audiences */
.audience { border-left: 4px solid var(--accent); padding: 4px 0 4px 20px; }
.audience p { color: var(--muted); margin: 0; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); margin: 12px 0 0; }

/* contact */
.contact-card {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
  background: linear-gradient(135deg, #0c1d47, #13285c); color: var(--white);
  border-radius: 24px; padding: 48px; position: relative; overflow: hidden;
}
.contact-card::after {
  content: ""; position: absolute; width: 520px; height: 120px; border-radius: 999px; right: -160px; top: -20px;
  background: linear-gradient(90deg, transparent, rgba(30,75,255,.45)); transform: rotate(-18deg);
}
.contact-card > * { position: relative; z-index: 1; }
.contact-card p { color: #C9D2EC; }
.mail {
  display: block; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--white) !important;
  text-decoration: none; word-break: break-all;
}
.mail:hover { text-decoration: underline; }
@media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; padding: 32px 24px; } }

/* form-free enquiry builder */
.enquiry { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 24px; }
.enquiry label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 6px; color: #DDE3F5; }
.enquiry select, .enquiry input, .enquiry textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--navy); background: var(--white);
  border: 0; border-radius: 10px; padding: 11px 12px; margin-bottom: 14px;
}
.enquiry textarea { min-height: 96px; resize: vertical; }
.enquiry .btn { width: 100%; }
.enquiry small { display: block; color: #AFC0EA; margin-top: 10px; font-size: .8rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #C9D2EC; padding: 64px 0 28px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 4px 0; }
.site-footer a { color: #C9D2EC; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer .brand img { height: 32px; margin-bottom: 16px; }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 22px; font-size: .85rem; color: #8796c4;
}
.foot-base .pillars { margin: 0; font-size: .7rem; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.no-js .reveal { opacity: 1; transform: none; }
@media (max-width: 700px) { section { padding: 64px 0; } .hero { padding: 56px 0 64px; } .pillars span + span::before { display: none; } .pillars { gap: 6px 14px; } }

/* ---------- gallery of illustrations ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: start; }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.g-item { margin: 0; min-width: 0; }
.g-lead { grid-column: 1 / -1; }
.g-item figcaption { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.g-item figcaption b { color: var(--text); margin-right: 4px; }
@media (max-width: 860px) { .gallery, .gallery.cols-3 { grid-template-columns: 1fr; } }
@media (min-width: 961px) { .page-hero .hero-grid { grid-template-columns: .92fr 1.18fr; } }

/* ---------- app illustrations (made-up data) ---------- */
.app {
  display: grid; grid-template-columns: 150px 1fr; grid-template-rows: 1fr auto;
  background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); font-size: 11.5px; line-height: 1.4; text-align: left;
}
.hero-app .app { box-shadow: 0 30px 80px rgba(0,0,0,.45); border-color: rgba(255,255,255,.2); }
.app-side { background: var(--navy); color: #C9D2EC; padding: 12px 8px; grid-row: 1 / 3; }
.app-side small { display: block; font-size: 9px; letter-spacing: .14em; color: #7f8fbf; margin: 10px 8px 4px; font-weight: 600; }
.app-side span { display: block; padding: 4px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-side span.on { background: var(--navy-3); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--electric); }
.app-side .doc { color: #fff; font-weight: 600; }
.app-logo { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; letter-spacing: .02em; font-size: 12px; padding: 0 4px; }
.app-logo img { border-radius: 5px; }
.app-logo em { font-style: normal; color: var(--bright); }
.app-logo.dark { color: var(--navy); }
.app-logo.dark em { color: var(--bus); }
.app-main { padding: 12px 14px; min-width: 0; }
.app-bar { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.app-bar i, .btn-mini {
  font-style: normal; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; background: #fff; color: #071433; white-space: nowrap; display: inline-block;
}
.btn-mini.primary { background: var(--electric); border-color: var(--electric); color: #fff; font-weight: 700; }
.bus .btn-mini.primary { background: #0073A8; border-color: #0073A8; }
.app-bar .sp, .app-tools .sp, .app-status .sp, .app-top .sp { flex: 1; border: 0; padding: 0; }
.app-title { font-weight: 700; font-size: 15px; }
.app-sub { color: var(--muted); margin-bottom: 10px; }
.app-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.app-tools .sel { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-weight: 600; }
.app-tools .seg { background: var(--bg); border-radius: 6px; padding: 3px 8px; color: var(--muted); }
.app-tools .seg b { color: var(--navy); }
.app-status {
  grid-column: 2; display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden;
}
.app-status .ok { background: #E3F6EC; color: #11713F; border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.tt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.tt { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tt th, .tt td { padding: 4px 7px; text-align: right; border-bottom: 1px solid #EEF1F8; white-space: nowrap; }
.tt th { background: var(--bg); font-weight: 600; font-size: 10px; color: var(--muted); text-align: center; }
.tt th:first-child, .tt td:first-child { text-align: left; }
.tt tr.tp td { font-weight: 700; }
.tt td.hl { background: var(--light); box-shadow: inset 0 0 0 1.5px var(--electric); }
.chip { display: inline-block; background: var(--electric); color: #fff; font-weight: 700; border-radius: 4px; padding: 0 5px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.tile b { display: block; font-size: 15px; }
.tile small { color: var(--muted); }
.tile.good { background: #E3F6EC; border-color: #BFE8D0; } .tile.good b { color: #11713F; }
.tile.warn, .tile.warn2 { background: #FFF5DB; border-color: #F5E2A8; } .tile.warn b, .tile.warn2 b { color: #8A5A00; }
.tile.info { background: #E8F0FF; border-color: #C9D8FB; } .tile.info b { color: #1335C0; }
.tile.late { background: #FDE8E8; border-color: #F5C6C6; } .tile.late b { color: #B42318; }
.tiles.five .tile b { font-size: 12px; }
.note { border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; }
.note.ok { background: #E3F6EC; color: #11713F; }
.note.warn { background: #FFF5DB; color: #6B4500; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-bottom: 10px; }
.card p { margin: 4px 0 0; color: var(--muted); }
.list { width: 100%; border-collapse: collapse; }
.list td, .list th { padding: 6px 8px; border-bottom: 1px solid #EEF1F8; text-align: left; vertical-align: top; }
.list th { color: var(--muted); font-weight: 600; font-size: 10.5px; }
.sev { display: inline-block; border-radius: 999px; padding: 1px 8px; font-weight: 600; background: #E3F6EC; color: #11713F; }
.sev.warn { background: #FFF5DB; color: #8A5A00; }
.sev.info { background: #E8F0FF; color: #1335C0; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 8px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; padding-bottom: 14px; }
.bar i { display: block; border-radius: 3px 3px 0 0; }
.bar i.on { background: var(--electric); }
.bus .bar i.on { background: var(--bus); }
.bar i.late { background: #F5A3A3; border-radius: 0; }
.bar small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 9px; }
.legend { font-size: 10px; } .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; }
.legend i.on { background: var(--electric); } .legend i.late { background: #F5A3A3; }
.map-card { padding: 6px; background: #F8FAFE; } .netmap { width: 100%; height: auto; }

/* Schedulo Bus: a top bar, key figures and the Gantt */
.app.top { grid-template-columns: 1fr; grid-template-rows: auto; }
.app-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-top .co { color: #B26A00; font-weight: 600; }
.app-top .day { border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.app-top .tabs { display: flex; gap: 2px; }
.app-top .tabs span { padding: 4px 9px; border-radius: 6px; color: var(--muted); }
.app-top .tabs span.on { background: #E6F6FD; color: #00668F; font-weight: 700; }
.kf { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); background: #FAFBFE; }
.kf div { padding: 8px 6px; text-align: center; border-right: 1px solid var(--line); }
.kf div:last-child { border-right: 0; }
.kf b { display: block; color: #0073A8; font-size: 15px; }
.kf small { color: var(--muted); font-size: 9.5px; }
.baxis { display: grid; grid-template-columns: 44px repeat(7, 1fr); color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.brow { display: grid; grid-template-columns: 44px 1fr; align-items: center; height: 27px; }
.brow > span { font-weight: 600; }
.btrack { position: relative; height: 18px; }
.btrack::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #D5DCEE; }
.bt {
  position: absolute; top: 0; height: 18px; border-radius: 5px; font-size: 9.5px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden;
  animation: slide .9s cubic-bezier(.2,.8,.2,1) both;
}
.bt.a { background: #3F6FD8; } .bt.b { background: #00A6E8; } .bt.c { background: #7A5AF0; }
.bt.d { background: #fff; border: 1px dashed #9AA6C6; color: var(--muted); }
.bt.p { background: #4A78D0; }
.bt.m { background: #E3F6EC; color: #11713F; border: 1px solid #9FDDB9; border-radius: 999px; }
.issues { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); }
.opt { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.opt > b { font-size: 13px; }
.opt p { margin: 2px 0 8px; color: var(--muted); }
.cmp td:nth-child(2), .cmp td:nth-child(3), .cmp td:nth-child(4), .cmp th { text-align: right; }
.cmp .gain { color: #11713F; font-weight: 700; }
.opt-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* activation */
.app.act { grid-template-columns: 1fr; background: #F4F6FC; padding: 26px; max-width: 440px; width: 100%; }
.act-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 6px; justify-items: start; }
.act-card img { border-radius: 10px; margin-bottom: 4px; }
.act-card b { font-size: 15px; }
.act-card small { color: var(--muted); }
.act-card label { margin-top: 8px; font-weight: 600; }
.act-card .field { width: 100%; border: 1px solid #C9D2EC; border-radius: 6px; padding: 8px; color: #9AA6C6; font-family: ui-monospace, monospace; min-height: 44px; }
.act-card .row { display: flex; gap: 6px; margin-top: 4px; }
.act-card p { margin: 8px 0 0; color: var(--muted); }
.act-card code { color: var(--navy); font-weight: 700; }
@media (max-width: 600px) {
  .app { grid-template-columns: 1fr; }
  .app-side, .app-status { display: none; }
  .tiles, .tiles.five { grid-template-columns: repeat(2, 1fr); }
  .tiles.four { grid-template-columns: repeat(2, 1fr); }
  .kf { grid-template-columns: repeat(3, 1fr); }
  .kf div:nth-child(n+4) { display: none; }
  .app-top .tabs, .app-top .co { display: none; }
}

/* ---------- downloads ---------- */
.dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dl {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.dl:hover { border-color: var(--bright); transform: translateY(-1px); }
.dl-ico {
  flex: none; width: 44px; height: 52px; border-radius: 8px; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
}
.dl b { display: block; font-weight: 600; }
.dl small { color: var(--muted); }
.dl-go { margin-left: auto; color: var(--electric); font-size: 1.2rem; font-weight: 700; }

/* ---------- what's new ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .news { grid-template-columns: 1fr; } }
.news-item { border: 1px solid var(--line); border-top: 5px solid var(--pc); border-radius: var(--radius); padding: 24px; background: var(--surface); }
.news-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.news-head img { width: 40px; height: 40px; border-radius: 10px; }
.news-head b { display: block; }
.news-head small { color: var(--muted); }
.news-item ul { margin: 0; padding-left: 18px; color: var(--muted); }
.news-item li { padding: 4px 0; }

/* contact addresses */
.mails { margin: 22px 0 0; }
.mails dt { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8FB0FF; margin-top: 14px; }
.mails dd { margin: 2px 0 0; }
.mails a { color: #fff !important; font-weight: 700; font-size: clamp(1rem, 2vw, 1.25rem); text-decoration: none; word-break: break-all; }
.mails a:hover { text-decoration: underline; }
.site-footer li { line-height: 1.4; padding: 6px 0; }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .gallery.cols-3 { grid-template-columns: 1fr; } }
@media (min-width: 961px) { .page-hero .hero-grid { grid-template-columns: .92fr 1.18fr; } }

/* ---------- version and roadmap ---------- */
.ver-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px;
  border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: .85rem; color: #DDE3F5;
}
.ver-pill b { color: #fff; }
.ver-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 4px rgba(46,204,113,.2); }
.roadmap-sec { padding: 72px 0; }
.roadmap {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, white); border-radius: 24px; padding: 40px;
  background: color-mix(in srgb, var(--accent) 5%, white);
}
.roadmap-side { display: grid; gap: 14px; }
.ver-card, .soon-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.ver-card small { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ver-card b { font-size: 2rem; color: var(--accent-text); }
.soon-card p { margin: 10px 0 0; color: var(--muted); }
.soon-card .badge { background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent-text); }
@media (max-width: 860px) { .roadmap { grid-template-columns: 1fr; padding: 28px 22px; } }
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
.contact-card.solo { grid-template-columns: 1fr; padding: 28px; }
.contact-card.solo::after { display: none; }
.mail-line { margin-top: 12px !important; }
.mail-line a { font-weight: 700; font-size: 1.05rem; color: var(--electric); text-decoration: none; word-break: break-all; }
.mail-line a:hover { text-decoration: underline; }
.feature p + p { margin-top: 12px; }
.nav .btn[aria-current="page"] { background: var(--electric); }

/* =================== Schedulo symbol touches ===================
   The symbol's schedule bars (a tick, its stem and a two-tone pill), the ring O with its
   Electric Blue quarter, and app-icon tiles, used across the page as the brand board does. */
:root { --bar: url("../img/bar-blue.svg"); --bar-on-navy: url("../img/bar-white.svg"); }
.theme-bus { --bar: url("../img/bar-bus.svg"); --bar-on-navy: url("../img/bar-bus-white.svg"); }
.theme-licence { --bar: url("../img/bar-licence.svg"); --bar-on-navy: url("../img/bar-licence-white.svg"); }

/* headings' eyebrows start with a schedule bar */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; flex: none; width: 34px; height: 10px; background: var(--bar) center/contain no-repeat; }
.on-navy .eyebrow::before, .hero .eyebrow::before, .contact-card .eyebrow::before { background-image: var(--bar-on-navy); }
.section-head.center .eyebrow { justify-content: center; }

/* top bar: the current page is underlined with a bar; the symbol sits faintly behind */
.site-header { overflow: hidden; }
.header-sym { position: absolute; right: 8%; top: -34px; height: 150px; width: auto; opacity: .07; pointer-events: none; }
.site-header .wrap { position: relative; }
.nav a { position: relative; }
.nav a[aria-current="page"]:not(.btn) { background: transparent; }
.nav a[aria-current="page"]:not(.btn)::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 9px;
  background: url("../img/bar-nav.svg") right center / auto 100% no-repeat;
  border-radius: 5px;
}
.nav a:not(.btn):hover::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: rgba(63,123,255,.6);
}
@media (max-width: 900px) {
  .nav a[aria-current="page"]:not(.btn)::after { left: 14px; right: auto; width: 60px; bottom: 2px; }
  .header-sym { display: none; }
}

/* buttons are schedule bars: a pill with its stem and tick at the end */
.btn { border-radius: 999px; position: relative; margin-right: 14px; }
.btn::after {
  content: ""; position: absolute; right: -14px; top: 50%; width: 12px; height: 18px; transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor) right center / 2.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) left center / 100% 2.5px no-repeat;
  color: var(--electric); border-radius: 1px; transition: right .2s;
}
.btn:hover::after { right: -17px; }
.btn.ghost::after, .on-navy .btn::after, .hero .btn::after, .contact-card .btn::after { color: #8FB0FF; }
.btn.ghost-dark::after { color: var(--navy); }
.btn.sm { margin-right: 12px; }
.btn.sm::after { height: 14px; width: 10px; right: -12px; }
.nav .btn { margin-right: 12px; }
.btn-row { gap: 12px 24px; }
/* the form's button: the dark segment of the bar slides across while it is pressed */
.enquiry .btn { width: calc(100% - 14px); overflow: visible; background: linear-gradient(90deg, #071433 0 0, var(--electric) 0); transition: background .3s; }
.enquiry .btn:hover { background: linear-gradient(90deg, #13285c 0 38%, var(--electric) 38%); }

/* list bullets and product-card bullets are small bars */
.product-card li::before { width: 22px; height: 8px; top: 10px; border-radius: 0; background: var(--bar) left center/contain no-repeat; }
.p-bus li::before { background-image: url("../img/bar-bus.svg"); }
.p-licence li::before { background-image: url("../img/bar-licence.svg"); }
.product-card li { padding-left: 32px; }
.news-item ul { list-style: none; padding: 0; }
.news-item li { position: relative; padding-left: 30px; }
.news-item li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 7px; background: url("../img/bar-blue.svg") left/contain no-repeat; }
.news-item.p-bus li::before { background-image: url("../img/bar-bus.svg"); }
.news-item.p-licence li::before { background-image: url("../img/bar-licence.svg"); }
.pver { font-size: .82rem; font-weight: 600; color: var(--muted); margin: 14px 0 -8px; letter-spacing: .02em; }

/* feature icons as app-icon tiles */
.feature .ico {
  width: 46px; height: 46px; border-radius: 13px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.theme-licence .feature .ico, [style*="#FF8800"] .feature .ico { color: #071433; }
.gl .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent)); }
.gl .ico svg { width: 20px; height: 20px; }

/* figures inside the ring O */
.figures { padding: 0; margin-top: -44px; position: relative; z-index: 2; }
.rings {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(7,20,51,.14); border: 1px solid var(--line);
}
.ringstat { display: flex; align-items: center; gap: 16px; padding: 24px; border-right: 1px solid var(--line); }
.ringstat:last-child { border-right: 0; }
.ring {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--electric) 0 var(--part), var(--ring-rest) var(--part) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 13px, #000 14px);
          mask: radial-gradient(circle, transparent 0 13px, #000 14px);
}
.ringstat b { display: block; font-size: 1.6rem; line-height: 1.1; }
.ringstat span { color: var(--muted); font-size: .88rem; }
@media (max-width: 900px) { .rings { grid-template-columns: 1fr 1fr; } .ringstat:nth-child(2) { border-right: 0; } .ringstat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .rings { grid-template-columns: 1fr; } .ringstat { border-right: 0; border-bottom: 1px solid var(--line); } .figures { margin-top: -28px; } }

/* at a glance */
.glance-sec { padding: 72px 0; }
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gl { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.gl small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.gl b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.4; margin-top: 2px; }
@media (max-width: 960px) { .glance { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .glance { grid-template-columns: 1fr; } }

/* which app do I need? */
.cmp-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.compare thead th { background: var(--navy); color: #fff; font-weight: 600; }
.compare thead th:first-child { border-radius: 19px 0 0 0; }
.compare thead th:last-child { border-radius: 0 19px 0 0; }
.compare thead th img { display: inline-block; vertical-align: middle; border-radius: 9px; margin-right: 10px; }
.compare tbody th { color: var(--muted); font-weight: 600; width: 18%; white-space: nowrap; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) { background: var(--stripe); }
.yes, .no { display: inline-block; width: 22px; height: 7px; margin-right: 8px; vertical-align: 2px; background: url("../img/bar-blue.svg") left/contain no-repeat; }
.no { opacity: .3; filter: grayscale(1); }

/* the symbol as a divider and as the background pattern on navy */
.sym-divider { display: flex; align-items: center; gap: 18px; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sym-divider::before, .sym-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sym-divider img { width: 44px; height: auto; }
.on-navy { position: relative; overflow: hidden; }
.on-navy > .wrap { position: relative; z-index: 1; }
.on-navy::before {
  content: ""; position: absolute; right: -60px; bottom: -40px; width: 340px; height: 320px; opacity: .06; pointer-events: none;
  background: url("../img/symbol-white.svg") center/contain no-repeat;
}
.on-navy::after {
  content: ""; position: absolute; left: -200px; top: 40px; width: 700px; height: 120px; border-radius: 999px; transform: rotate(-16deg);
  background: linear-gradient(90deg, rgba(30,75,255,.18), transparent); pointer-events: none;
}
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; right: -40px; top: -30px; width: 260px; height: 250px; opacity: .05;
  background: url("../img/symbol-white.svg") center/contain no-repeat; pointer-events: none;
}
.site-footer .wrap { position: relative; }
.site-footer h4::before { content: ""; display: inline-block; width: 26px; height: 8px; margin-right: 10px; vertical-align: 0; background: url("../img/bar-white.svg") left/contain no-repeat; }
/* the progress strip under the 'how it works' steps */
.step { overflow: hidden; }
.step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--navy) 0 35%, var(--accent) 35%); opacity: .9; }

/* =================== phone, tablet and computer ===================
   Tablets get two columns where phones get one; phones keep tap targets at least 40px tall,
   and nothing is wider than the screen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
.badge { font-size: .72rem; }
@media (min-width: 561px) and (max-width: 900px) {
  .features, .features.two { grid-template-columns: 1fr 1fr; }
  .products { grid-template-columns: 1fr 1fr; }
  .products > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .nav a { padding-left: 9px; padding-right: 9px; }
  .header-sym { right: 2%; }
}
@media (max-width: 900px) {
  .site-footer a { display: inline-block; padding: 8px 0; }
  .site-footer li { margin: 0; }
}
@media (max-width: 700px) {
  .hero .eyebrow, .page-hero .eyebrow { letter-spacing: .16em; font-size: .7rem; align-items: flex-start; }
  .hero .eyebrow::before, .page-hero .eyebrow::before { margin-top: 4px; }
  .btn-row .btn { width: calc(100% - 14px); justify-content: center; text-align: center; }
  .rings { grid-template-columns: 1fr 1fr; }
  .ringstat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ringstat:nth-child(even) { border-right: 0; }
  .ringstat:nth-child(n+3) { border-bottom: 0; }
  .ring { width: 42px; height: 42px; -webkit-mask: radial-gradient(circle, transparent 0 10px, #000 11px); mask: radial-gradient(circle, transparent 0 10px, #000 11px); }
  .ringstat b { font-size: 1.35rem; }
  .figures { margin-top: -28px; }
  /* the comparison scrolls sideways inside its box, with the row names kept in view */
  .compare { min-width: 640px; }
  .compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); white-space: normal; min-width: 110px; }
  .compare tbody tr:nth-child(even) th { background: var(--stripe); }
  .compare thead th:first-child { position: sticky; left: 0; z-index: 2; }
  .cmp-wrap::after { content: "Swipe sideways to see all the apps"; display: block; padding: 10px 18px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); position: sticky; left: 0; }
  .enquiry input, .enquiry select, .enquiry textarea { font-size: 16px; } /* stops iPhones zooming in on the form */
  .glance-sec { padding: 56px 0; }
}
@media (max-width: 380px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  h1, .page-hero h1 { font-size: 2rem; }
}
@media (max-width: 1100px) { .mails a { display: inline-block; padding: 8px 0; } }
/* the dropdown menu hangs below the header on phones and tablets, so the header must not clip it */
@media (max-width: 900px) { .site-header { overflow: visible; } }

/* =================== the dark and light switch ===================
   A schedule bar from the symbol, tick and stem included: the dark segment slides across the
   pill, with the sun showing by day and the moon by night. */
.site-header .wrap { justify-content: flex-start; }
.brand { margin-right: auto; }
.head-tools { order: 3; display: flex; align-items: center; gap: 12px; }
.nav { order: 2; }
.mode { display: inline-flex; align-items: center; background: none; border: 0; padding: 6px 2px; cursor: pointer; color: #fff; border-radius: 14px; }
.mode-tick { position: relative; width: 9px; height: 22px; margin-right: 1px; flex: none; }
.mode-tick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; border-radius: 2px; background: #3F7BFF; }
.mode-tick::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.5px; margin-top: -1.25px; background: #3F7BFF; }
.mode-track { position: relative; display: block; width: 58px; height: 24px; border-radius: 12px; background: #209FFF; overflow: hidden; transition: background .25s, box-shadow .25s; }
.mode-seg { position: absolute; top: 0; bottom: 0; left: 0; width: 28px; border-radius: 12px; background: #0E2260; box-shadow: inset 0 0 0 1px #3F7BFF; transition: left .25s ease, background .25s; }
.mode svg { position: absolute; top: 5px; width: 14px; height: 14px; transition: opacity .2s; }
.mode .sun { left: 7px; }
.mode .moon { right: 7px; opacity: 0; }
.mode[aria-pressed="true"] .mode-track { background: #0E2260; box-shadow: inset 0 0 0 1px #3F7BFF; }
.mode[aria-pressed="true"] .mode-seg { left: 30px; background: #1E4BFF; box-shadow: none; }
.mode[aria-pressed="true"] .sun { opacity: 0; }
.mode[aria-pressed="true"] .moon { opacity: 1; }
.mode:hover .mode-track { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .mode-seg, .mode-track, .mode svg { transition: none; } }
@media (min-width: 901px) { .head-tools { margin-left: 14px; } }

/* =================== dark mode ===================
   Navy pages with lifted navy cards. The pictures of the apps stay as the apps look. */
[data-theme="dark"] {
  color-scheme: dark;
  --page: #081430;
  --bg: #0B1A3D;
  --surface: #0F2050;
  --stripe: #122557;
  --text: #E8EDFB;
  --muted: #AAB7DC;
  --line: rgba(143, 176, 255, .18);
  --light: #1A2E66;
  --accent-text: #7FA4FF;
  --ring-rest: #3A4F8C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
}
[data-theme="dark"] body { --bar: var(--bar-on-navy); }
[data-theme="dark"] [style*="--accent-text:#1E4BFF"] { --accent-text: #7FA4FF !important; }
[data-theme="dark"] [style*="--accent-text:#00668F"] { --accent-text: #4CCBF7 !important; }
[data-theme="dark"] [style*="--accent-text:#A35200"] { --accent-text: #FFA640 !important; }
[data-theme="dark"] .p-txc { --pc-text: #7FA4FF; }
[data-theme="dark"] .p-bus { --pc-text: #4CCBF7; }
[data-theme="dark"] .p-licence { --pc-text: #FFA640; }
[data-theme="dark"] a { color: #8FB0FF; }
[data-theme="dark"] .btn, [data-theme="dark"] .nav a { color: #fff; }
[data-theme="dark"] .nav a:not(.btn) { color: #DDE3F5; }
[data-theme="dark"] .btn.ghost-dark { color: var(--text); }
[data-theme="dark"] .btn.ghost-dark::after { color: #8FB0FF; }
[data-theme="dark"] .on-navy { background: #040B20; }
[data-theme="dark"] .site-footer { background: #040B20; border-top: 1px solid var(--line); }
[data-theme="dark"] .site-header { background: rgba(4, 11, 32, .96); }
[data-theme="dark"] .badge { background: #1A2E66; color: #BFD0FF; }
[data-theme="dark"] .badge.live { background: rgba(46, 204, 113, .16); color: #7BE0A6; }
[data-theme="dark"] .compare thead th { background: #1A2E66; }
[data-theme="dark"] .sym-divider img { content: url("../img/symbol-white.svg"); opacity: .8; }
[data-theme="dark"] .checks li::before, [data-theme="dark"] .checks > *::before { filter: brightness(1.4); }
[data-theme="dark"] .contact-card { background: linear-gradient(135deg, #0F2050, #16306E); border: 1px solid var(--line); }
[data-theme="dark"] .enquiry input, [data-theme="dark"] .enquiry select, [data-theme="dark"] .enquiry textarea { background: #081430; color: var(--text); border-color: rgba(143,176,255,.3); }
[data-theme="dark"] .app, [data-theme="dark"] .g-item img { box-shadow: 0 0 0 1px rgba(143,176,255,.2), 0 20px 50px rgba(0,0,0,.45); }
[data-theme="dark"] .fam.soon { opacity: .9; }
[data-theme="dark"] .step::after { background: linear-gradient(90deg, #3A4F8C 0 35%, var(--accent) 35%); }
[data-theme="dark"] .g-item figcaption b { color: var(--text); }
[data-theme="dark"] .skip { color: var(--navy); }

/* =================== in practice: marks and first steps =================== */
.prac-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.prac-grid.solo { grid-template-columns: 1fr; }
.prac-grid h3 { font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 16px; }
.marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prac-grid.solo .marks { grid-template-columns: repeat(3, 1fr); }
.mark { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px 8px 8px; font-weight: 600; font-size: .9rem; line-height: 1.35; position: relative; }
.mark .ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent)); }
.mark .ico svg { width: 17px; height: 17px; }
.theme-licence .mark .ico { color: #071433; }
.go { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.go-steps { list-style: none; margin: 0; padding: 0; counter-reset: go; }
.go-steps li { counter-increment: go; position: relative; padding: 0 0 20px 56px; }
.go-steps li:last-child { padding-bottom: 0; }
.go-steps li::before {
  content: counter(go); position: absolute; left: 0; top: 0; width: 38px; height: 24px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff;
  background: linear-gradient(90deg, var(--navy) 0 45%, var(--accent) 45%);
}
.theme-licence .go-steps li::before { color: #fff; }
.go-steps li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 28px; bottom: 4px; width: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.go-steps b { display: block; margin-bottom: 2px; }
.go-steps span { color: var(--muted); font-size: .95rem; }
[data-theme="dark"] .go-steps li::before { background: linear-gradient(90deg, #3A4F8C 0 45%, var(--accent) 45%); }
@media (max-width: 960px) { .prac-grid { grid-template-columns: 1fr; } .prac-grid.solo .marks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .marks, .prac-grid.solo .marks { grid-template-columns: 1fr; } }

/* ---------- roadmap: coming in the next release ---------- */
.roadmap .next-list { margin: 4px 0 18px; }
.roadmap .next-list li { padding-top: 6px; padding-bottom: 6px; }
.roadmap .next-list b { color: var(--accent-text, var(--text)); }
[data-theme="dark"] .roadmap .next-list b { color: #fff; }
[data-theme="dark"] .roadmap {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface));
}
[data-theme="dark"] .soon-card .badge { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: #fff; }

/* ---------- questions page ---------- */
.faq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faq-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; font-weight: 600;
}
.faq-chip:hover { background: rgba(255,255,255,.16); }
.faq-chip .ico { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--electric); color: #fff; }
.faq-chip .ico svg { width: 16px; height: 16px; }
.faq-group { padding: 64px 0; scroll-margin-top: 70px; }
.faq-head { max-width: 820px; margin: 0 auto 8px; display: flex; align-items: center; gap: 14px; }
.faq-head h2 { margin: 0; }
.faq-head .ico { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--electric) 12%, var(--surface)); color: var(--electric); flex: none; }
.faq-head .ico svg { width: 22px; height: 22px; }
[data-theme="dark"] .faq-head .ico { color: var(--bright); }
.faq details p a { color: var(--accent-text, var(--electric)); }
@media (max-width: 600px) { .faq-group { padding: 44px 0; } .faq-chip { font-size: .92rem; } }

/* five menu items and the button: each on one line; below 1060px wide they move into the Menu button */
.nav a { white-space: nowrap; }
@media (min-width: 901px) { .brand { flex: none; } }
@media (min-width: 1061px) and (max-width: 1180px) {
  .nav { gap: 0; }
  .nav a { padding-left: 8px; padding-right: 8px; font-size: .9rem; }
  .nav .btn { margin-left: 4px; margin-right: 8px; }
}
@media (min-width: 901px) and (max-width: 1060px) {
  .menu-btn { display: inline-block; }
  .site-header { overflow: visible; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; padding: 12px 20px 20px;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav.open { display: flex; }
  .nav a { padding-left: 14px; padding-right: 14px; font-size: .95rem; }
  .nav .btn { margin: 8px 0 0; text-align: center; }
  .nav a[aria-current="page"]:not(.btn)::after { left: 14px; right: auto; width: 60px; bottom: 2px; }
}
[data-theme="dark"] .faq-chip { color: #fff; }

/* =================== interactive home page =================== */
/* the hero's vehicle blocks: each trip can be hovered or tapped */
button.trip { border: 0; padding: 0; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
button.trip.dead { border: 1px dashed #5d6c9c; }
button.trip:hover, button.trip.on, button.trip:focus-visible { outline: 2px solid #fff; outline-offset: 1px; z-index: 2; }
.gantt-tip { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); color: #DDE3F5; font-weight: 600; min-height: 40px; }

/* product switcher */
.pswitch { display: grid; gap: 22px; }
.ptabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ptab {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.ptab img { border-radius: 10px; flex: none; }
.ptab b { display: block; font-size: 1.02rem; }
.ptab small { color: var(--muted); }
.ptab:hover { transform: translateY(-2px); }
.ptab[aria-selected="true"] { border: 2px solid var(--pc, var(--electric)); padding: 13px 15px; }
.ptab.p-txc { --pc: #1E4BFF; } .ptab.p-bus { --pc: #00A6E8; } .ptab.p-licence { --pc: #FF8800; } .ptab.p-coach { --pc: #F20D78; }
.ppanel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 34px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ppanel + .ppanel { margin-top: 18px; }
.ppanel[hidden] { display: none; }
.ppanel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 6px 0 10px; }
.ppanel .pver { color: var(--muted); font-weight: 600; font-size: .9rem; margin: 0; }
.ppanel .checks { margin: 14px 0 22px; }
.ppanel.in { animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* how they work together: three steps you click through */
.stepper { display: grid; gap: 22px; }
.sbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sbtn {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #DDE3F5; font: inherit;
}
.sbtn img { border-radius: 8px; flex: none; }
.sbtn .sn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); font-weight: 800; color: #fff; }
.sbtn[aria-selected="true"] { background: rgba(63,123,255,.18); border-color: var(--bright); color: #fff; }
.sbtn[aria-selected="true"] .sn { background: var(--electric); }
.spanel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.spanel + .spanel { margin-top: 28px; }
.spanel[hidden] { display: none; }
.spanel h3 { color: #fff; font-size: 1.5rem; margin: 8px 0 10px; }
.spanel p { color: #C9D2EC; }
.spanel.in { animation: rise .45s ease both; }

/* quick links */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qcard { display: grid; gap: 6px; padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform .15s; }
.qcard:hover { transform: translateY(-3px); }
.qcard .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--electric) 12%, var(--surface)); color: var(--electric); }
.qcard .ico svg { width: 22px; height: 22px; }
.qcard b { font-size: 1.1rem; margin-top: 6px; }
.qcard span:last-child { color: var(--muted); }
[data-theme="dark"] .qcard { color: var(--text); }
[data-theme="dark"] .qcard .ico { color: var(--bright); }

@media (max-width: 900px) {
  .ppanel, .spanel { grid-template-columns: 1fr; gap: 24px; }
  .ppanel { padding: 24px 18px; }
  .quick { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ptabs, .sbtns { grid-template-columns: 1fr; }
  .ptab small { display: none; }
}

/* =================== product pages in depth =================== */
.subnav { position: sticky; top: 72px; z-index: 40; background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.subnav-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-in.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.subnav-in.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.subnav-in.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
@media (min-width: 1100px) { .subnav-in { gap: 2px; } .subnav a { padding: 7px 10px; } }
.subnav a { flex: none; padding: 7px 13px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.subnav a:hover { color: var(--text); background: var(--bg); }
.subnav a.on { background: var(--accent, var(--electric)); color: #fff; }
.subnav[style*="#00A6E8"] a.on { background: #00668F; }
.subnav[style*="#FF8800"] a.on { background: #FF8800; color: #071433; }
[data-theme="dark"] .subnav a { color: var(--muted); }
[data-theme="dark"] .subnav a.on { color: #fff; }
[data-theme="dark"] .subnav[style*="#FF8800"] a.on { color: #071433; }
section[id] { scroll-margin-top: 130px; }

.deep-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.deep.flip .deep-text { order: 2; }
.deep h2 { margin-top: 8px; }
.deep .checks li { padding-top: 6px; padding-bottom: 6px; }
.deep-img { margin: 0; min-width: 0; }
.deep-cap { color: var(--muted); font-size: .9rem; margin-top: 10px; }
@media (max-width: 960px) { .deep-grid { grid-template-columns: 1fr; gap: 28px; } .deep.flip .deep-text { order: 0; } }

/* =================== more illustrations (made-up data) =================== */
.split2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; align-items: start; }
.split2 > .card, .split2 > .list { margin-bottom: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 6px; }
.kv span { color: var(--muted); } .kv b { font-weight: 700; }
.okc { color: #11713F; }
.mut { color: var(--muted); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.amb { color: #8A5A00; font-weight: 700; }
.list tr.sel td { background: #E8F0FF; }
.chip.b { background: #00A6E8; }
.mapsvg { width: 100%; height: auto; display: block; border-radius: 6px; }
.legend i.wp { background: #F2B900; transform: rotate(45deg); }
.legend i.osm { background: transparent; border: 2px solid #7A5AF0; }
.legend i.div { background: #FF8800; } .legend i.closed { background: #E5484D; }
.bar i.pk { background: #1335C0 !important; }
/* a printed page */
.paper-wrap { background: #E9EDF6; border-radius: 16px; padding: 18px; box-shadow: var(--shadow); color: #071433; }
.styles { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: 11px; }
.styles span { background: #fff; border: 1px solid #DCE2F2; border-radius: 999px; padding: 3px 10px; font-weight: 600; color: #4A5677; }
.styles span.on { background: #1E4BFF; border-color: #1E4BFF; color: #fff; }
.paper { background: #fff; border-radius: 4px; padding: 18px 18px 12px; box-shadow: 0 10px 30px rgba(7,20,51,.18); font-size: 11.5px; }
.paper-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 3px solid #1E4BFF; margin-bottom: 8px; }
.paper-head b { font-size: 15px; display: block; } .paper-head small { color: #4A5677; }
.pchip { background: #1E4BFF; color: #fff; font-weight: 800; font-size: 20px; border-radius: 8px; padding: 6px 12px; }
.pchip.bus { background: #00668F; font-size: 15px; }
.board .paper-head { border-bottom-color: #00A6E8; }
.ptt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ptt td, .ptt th { padding: 5px 6px; border-bottom: 1px solid #EEF1F8; text-align: right; white-space: nowrap; }
.ptt th { color: #4A5677; font-size: 10px; text-align: left; }
.ptt td:first-child { text-align: left; font-weight: 600; }
.board .ptt td { text-align: left; }
.ptt tr:nth-child(even) td { background: #F6F8FD; }
.paper-foot { display: flex; justify-content: space-between; color: #4A5677; font-size: 10px; margin-top: 10px; }
/* live punctuality */
.pst { display: inline-block; border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.pst.on { background: #E3F6EC; color: #11713F; } .pst.late { background: #FFF5DB; color: #8A5A00; }
.pst.early { background: #FDE8E8; color: #B42318; } .pst.bunch { background: #E8F0FF; color: #1335C0; }
.alerts { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.alerts p { margin: 7px 0 0; color: var(--muted); }
/* collaborate and sharing */
.codebox { display: flex; align-items: center; gap: 8px; border: 1px dashed #9AA6C6; border-radius: 10px; padding: 9px 10px; margin-bottom: 10px; background: #F6F8FD; }
.codebox small { color: var(--muted); } .codebox b { font-family: ui-monospace, monospace; font-size: 13px; flex: 1; }
.person { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.person > div { flex: 1; min-width: 90px; } .person small { display: block; color: var(--muted); }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 10px; color: #fff; background: #1E4BFF; flex: none; }
.av.edit { background: #00A6E8; } .av.view { background: #7A5AF0; } .av.wait { background: #9AA6C6; }
.role { border-radius: 999px; padding: 1px 8px; font-weight: 700; background: #E8F0FF; color: #1335C0; }
.role.edit { background: #E6F6FD; color: #00668F; } .role.view { background: #F0EBFF; color: #5B3CC4; }
.log { list-style: none; padding: 0; margin: 6px 0 0; } .log li { padding: 4px 0; border-bottom: 1px solid #EEF1F8; color: var(--muted); }
.log b { color: var(--navy); margin-right: 4px; }
.lock { color: #11713F !important; font-weight: 600; margin-top: 8px !important; }
/* expiry and status */
.bstat { display: inline-block; border-radius: 999px; padding: 1px 8px; font-weight: 700; white-space: nowrap; }
.bstat.ok { background: #E3F6EC; color: #11713F; } .bstat.amber { background: #FFF5DB; color: #8A5A00; } .bstat.red { background: #FDE8E8; color: #B42318; }
/* fares */
.tri { border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tri td, .tri th { padding: 4px 7px; border: 1px solid #EEF1F8; text-align: center; }
.tri th { text-align: left; background: #F6F8FD; white-space: nowrap; }
.tix { list-style: none; padding: 0; margin: 6px 0; } .tix li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #EEF1F8; }
.tix span { color: var(--muted); }
/* Schedulo Bus */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #00A6E8; margin-right: 6px; vertical-align: 0; }
.ticks { list-style: none; padding: 0; margin: 6px 0; } .ticks li { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.tick { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #9AA6C6; flex: none; }
.tick.on { background: #0073A8; border-color: #0073A8; box-shadow: inset 0 0 0 2px #fff; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; text-align: center; }
.cal i { font-style: normal; color: var(--muted); font-weight: 700; font-size: 10px; }
.cal span { padding: 4px 0; border-radius: 5px; background: #F6F8FD; }
.cal span.bh { background: #00A6E8; color: #fff; font-weight: 700; } .cal span.sh { background: #E6F6FD; color: #00668F; }
.legend i.bh { background: #00A6E8; } .legend i.sh { background: #E6F6FD; border: 1px solid #9DD9F2; }
.receipt { width: 230px; background: #fff; color: #071433; font-family: ui-monospace, monospace; font-size: 10.5px; padding: 16px 14px 18px; box-shadow: 0 14px 34px rgba(7,20,51,.22);
  display: grid; gap: 4px; justify-items: center; border-radius: 2px;
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/12px 8px repeat-x; }
.receipt .r-co { letter-spacing: .1em; } .receipt .r-duty { font-size: 16px; }
.receipt small { color: #4A5677; }
.receipt table { width: 100%; border-collapse: collapse; margin: 6px 0; border-top: 1px dashed #9AA6C6; border-bottom: 1px dashed #9AA6C6; }
.receipt td { padding: 3px 2px; vertical-align: top; } .receipt td:first-child { font-weight: 700; white-space: nowrap; padding-right: 8px; }
.r-tot { display: flex; justify-content: space-between; width: 100%; font-size: 12px; }
.pair { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
@media (max-width: 600px) { .pair { grid-template-columns: 1fr; justify-items: center; } .split2 { grid-template-columns: 1fr; } }
/* Licence Manager */
.app.lic .app-logo.dark em { color: #FF8800; }
.app.lic .btn-mini.primary { background: #FF8800; border-color: #FF8800; color: #071433; }
.ptiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.ptile { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid #DCE2F2; }
.ptile img { border-radius: 8px; } .ptile small { font-weight: 700; font-size: 9px; letter-spacing: .06em; color: #4A5677; }
.ptile.on { border: 2px solid #FF8800; background: #FFF4E6; }
.presets { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; }
.presets span { border: 1px solid #DCE2F2; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.presets span.on { background: #FF8800; border-color: #FF8800; color: #071433; }
.chain { background: #fff; color: #071433; border-radius: 18px; padding: 24px; box-shadow: var(--shadow); display: grid; justify-items: center; gap: 0; border: 1px solid #DCE2F2; }
.cnode { border-radius: 14px; padding: 12px 16px; text-align: center; min-width: 170px; }
.cnode b { display: block; } .cnode small { color: #4A5677; }
.cnode.own { background: #071433; color: #fff; } .cnode.own small { color: #C9D2EC; }
.cnode.mgr { background: #FFF4E6; border: 2px solid #FF8800; } .cnode.usr { background: #F6F8FD; border: 1px solid #DCE2F2; }
.cline { width: 2px; height: 26px; background: #FF8800; } .cline.short { height: 18px; }
.crow { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.capps { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #DCE2F2; color: #4A5677; font-size: .88rem; }
.capps img { border-radius: 8px; flex: none; }

/* the pictures of the apps keep their own light look in dark mode */
[data-theme="dark"] .app, [data-theme="dark"] .paper-wrap, [data-theme="dark"] .chain, [data-theme="dark"] .receipt {
  --muted: #4A5677; --line: #DCE2F2; --bg: #F6F8FD; --light: #E5E9F7; --text: #071433; --surface: #fff; color: #071433;
}
.pair > *, .deep-img > * { min-width: 0; }
.paper { overflow-x: auto; }
@media (max-width: 600px) { .pair .paper-wrap { width: 100%; } .ptt td, .ptt th { padding: 4px 4px; } }
.pair { grid-template-columns: minmax(0, 1fr) auto; }
.pair .receipt { width: 200px; }
@media (max-width: 600px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.pair .paper-wrap { padding: 12px; } .board .ptt { font-size: 10.5px; } .board .ptt td, .board .ptt th { padding: 4px 4px; }
@media (max-width: 700px) {
  .ptabs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ptab { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .ptab[aria-selected="true"] { padding: 9px 5px; }
  .ptab b { font-size: .82rem; }
}
@media (max-width: 700px) {
  .sbtns { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sbtn { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .sbtn img { display: none; }
  .sbtn b { font-size: .8rem; font-weight: 700; }
}

/* =================== Schedulo brand guidelines 2.0 ===================
   Brought in line with the guidelines and the web UI kit: the night gradient behind the header,
   heroes, navy bands and footer; 14px buttons; Montserrat sizes from the type scale; left-aligned
   headings; Electric Blue for the one thing to act on, Bright Blue on navy; product accents only
   in each product's own label, symbol and app icon. */
body { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; }
h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: 0; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: 0; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 40em; }
.on-navy .lede, .hero .lede { color: #C9D1EA; }
p, li { max-width: 75ch; }
.section-head { max-width: 760px; text-align: left; }

/* eyebrows: SemiBold capitals, letter-spaced, Electric Blue on light and Bright Blue on navy */
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .3em; line-height: 1.2; color: var(--electric); }
.eyebrow::before { content: none; display: none; }
.on-navy .eyebrow, .hero .eyebrow, .contact-card .eyebrow, .spanel .eyebrow { color: var(--bright); }

/* the night gradient behind the navy bands and footer; the header bar, with the symbol behind it
   and the current page marked with a schedule bar, and the hero's blue sweeps stay as they were */
.on-navy, .site-footer { background: var(--night); }
.on-navy::before, .on-navy::after, .site-footer::before, .contact-card::after { content: none; display: none; }
.contact-card { background: var(--night); border-radius: var(--radius); }
.contact-card.solo { background: var(--navy); }
.brand img { height: 40px; width: auto; }
@media (max-width: 380px) { .brand img { height: 32px; } }

/* buttons stay schedule bars, with the stem and tick at the end; Electric Blue, pressed darker */
.btn:active { background: var(--electric-active); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn.ghost-dark { color: var(--electric); border-color: var(--electric); }
.btn.ghost-dark::after { color: var(--electric); }
.s-link { color: var(--electric); font-weight: 600; text-decoration: none; white-space: nowrap; }
.s-link::after { content: " \2192"; }

/* pills and badges */
.pill { display: inline-flex; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; line-height: 1;
  padding: 10px 18px; border-radius: 999px; border: 2px solid var(--bright); color: var(--bright); }
.badge { border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 6px 10px; background: #EEF2FF; color: #1535C2; }
.badge.live { background: #E3F6EC; color: #11713F; }
.fam .badge { font-size: 11px; }
.fam.soon .badge { background: #FFF1DE; color: #8A4B00; }
.fam.soon { opacity: 1; }

/* cards: white, 1px line, radius 22px, soft shadow; dark cards a 7% to 3% white gradient */
.feature, .qcard, .news-item, .ptab, .ppanel, .go, .gl, .step, .ver-card, .soon-card, .dl, .cmp-wrap, .rings, .product-card {
  border-radius: var(--radius); border: 1px solid var(--line);
}
.feature, .qcard, .news-item, .ppanel, .go, .product-card { box-shadow: var(--shadow); }
.on-navy .step, .flow .node, .sbtn, .fam, .enquiry {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1.5px solid rgba(255,255,255,.12);
}
.sbtn, .ptab { border-radius: 18px; }
.sbtn[aria-selected="true"] { background: rgba(63,123,255,.18); border-color: var(--bright); }

/* icons: line icons in Electric Blue circle badges, the glyph half the circle */
.feature .ico, .gl .ico, .qcard .ico, .faq-head .ico, .mark .ico, .faq-chip .ico {
  border-radius: 50%; background: var(--electric); color: #fff; box-shadow: none;
}
.feature .ico { width: 48px; height: 48px; } .feature .ico svg { width: 24px; height: 24px; }
.gl .ico, .qcard .ico, .faq-head .ico { width: 44px; height: 44px; } .gl .ico svg, .qcard .ico svg, .faq-head .ico svg { width: 22px; height: 22px; }
.theme-licence .feature .ico, [style*="#FF8800"] .feature .ico, .theme-licence .mark .ico { color: #fff; }
[data-theme="dark"] .qcard .ico, [data-theme="dark"] .faq-head .ico { color: #fff; }

/* product accents stay in the product's label, symbol and app icon */
.p-txc, .p-bus, .p-licence, .p-coach, .p-roster, .p-web, .p-account { --pc: var(--electric); --pc-text: var(--electric); }
.theme-bus, .theme-licence { --bar: url("../img/bar-blue.svg"); --bar-on-navy: url("../img/bar-white.svg"); }
.news-item { border-top: 1px solid var(--line); }
.news-item li::before, .news-item.p-bus li::before, .news-item.p-licence li::before { background-image: url("../img/bar-blue.svg"); width: 22px; height: 6px; top: 12px; }
.product-card::before { content: none; }
.ptab[aria-selected="true"] { border: 2px solid var(--electric); }
.subnav a.on, .subnav[style] a.on { background: var(--electric); color: #fff; }
.roadmap { border: 2px dashed color-mix(in srgb, var(--electric) 35%, white); background: #F7F9FF; border-radius: var(--radius); }
.ver-card b { color: var(--electric); }
.gl small, .stat b, .prac-grid h3 { color: var(--electric); }
.audience { border-left-color: var(--electric); }
.faq summary::after { color: var(--electric); }
.step .n { background: var(--electric); color: #fff; }
.step::after { background: linear-gradient(90deg, var(--navy) 0 35%, var(--electric) 35%); }
.go-steps li::before { background: linear-gradient(90deg, var(--navy) 0 45%, var(--electric) 45%); }
.go-steps li:not(:last-child)::after { background: color-mix(in srgb, var(--electric) 35%, transparent); }
.mark .ico { background: var(--electric); }
.on-navy .stat b { color: #fff; }

/* product heroes open with the product's own logo */
.product-logo { display: block; height: 64px; width: auto; max-width: 100%; margin-bottom: 26px; }
.product-logo.wide { height: 56px; }
@media (max-width: 560px) { .product-logo { height: 48px; } .product-logo.wide { height: 36px; } }

/* forms: SemiBold 14px labels; inputs radius 10px with a 1.5px line and an Electric focus ring */
.enquiry label { font-size: 14px; }
.enquiry select, .enquiry input, .enquiry textarea { border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px; font-size: 16px; font-weight: 500; }
.enquiry select:focus, .enquiry input:focus, .enquiry textarea:focus { outline: none; border-color: var(--electric); box-shadow: 0 0 0 4px rgba(30,75,255,.15); }
.enquiry small { color: var(--dim); }

/* footer: night, logo and owner line, Product / Learn / Contact, then the copyright line and the tagline */
.site-footer { color: #C9D1EA; }
.site-footer h4 { font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; color: #fff; }
.site-footer h4::before { content: none; display: none; }
.site-footer .brand img { height: 44px; }
.site-footer .owner { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.foot-base { color: var(--dim); }
.pillars { font-weight: 500; letter-spacing: .4em; color: #C9D1EA; }
.pillars span + span::before { color: var(--cyan); }
.foot-social { display: inline-flex !important; align-items: center; gap: 10px; }
.foot-social .ico, .li-link .ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--electric); color: #fff; flex: none; }
.foot-social .ico svg, .li-link .ico svg { width: 16px; height: 16px; }
.li-link { display: inline-flex; align-items: center; gap: 10px; word-break: normal !important; }

/* LinkedIn on the contact page */
.social-card { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 22px 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.social-card .badge-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--electric); color: #fff; }
.social-card .badge-ico .ico svg { width: 26px; height: 26px; display: block; }
.social-card b { display: block; font-size: 1.1rem; }
.social-card small { color: var(--muted); font-size: .95rem; }
.social-card .s-link { margin-left: auto; }
.social-card:hover .s-link { text-decoration: underline; }
@media (max-width: 600px) { .social-card { flex-wrap: wrap; } .social-card .s-link { margin-left: 70px; } }

/* screenshots and pictures of the apps: radius 16 to 22px, a 1px border and a soft shadow */
.app, .window, .paper-wrap, .chain { border-radius: 18px; }
.hero-app .app { border-color: rgba(255,255,255,.2); }
.shot-real { display: block; line-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; }
.shot-real img { display: block; width: 100%; height: auto; }
.shot-real:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(7, 20, 51, .18); }
.shot-real:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero-app .shot-real, .on-navy .shot-real, .hero .shot-real { border-color: rgba(255,255,255,.2); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.act-shot, .reveal > .shot-real { max-width: 520px; width: 100%; }
@media (max-width: 700px) { .shot-real { border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .shot-real, .shot-real:hover { transition: none; transform: none; } }


/* dark mode keeps the brand's navy, with the night gradient where navy bands sit */
[data-theme="dark"] .site-footer, [data-theme="dark"] .on-navy { background: var(--night); }
[data-theme="dark"] .btn.ghost-dark { color: #8FB0FF; border-color: #8FB0FF; }
[data-theme="dark"] .roadmap { background: var(--surface); border-color: rgba(143,176,255,.35); }
[data-theme="dark"] .ver-card b, [data-theme="dark"] .gl small, [data-theme="dark"] .stat b, [data-theme="dark"] .prac-grid h3 { color: #8FB0FF; }
[data-theme="dark"] .eyebrow { color: #8FB0FF; }
[data-theme="dark"] .badge { background: #1A2E66; color: #BFD0FF; }
[data-theme="dark"] .fam.soon .badge { background: rgba(255,136,0,.18); color: #FFC680; }
[data-theme="dark"] .social-card { color: var(--text); }
[data-theme="dark"] .s-link { color: #8FB0FF; }
.hero:not(.page-hero) h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.hero h1 span { display: block; }

/* =================== the Midnight Rail look in the app pictures ===================
   Schedulo TXC 0.5.8 and Schedulo Bus 1.0.9 on: a navy rail with the pages grouped by job, a slim top bar. */
.app-side.rail span { font-size: 11px; padding: 3px 8px; }
.app-side.rail span.on { background: rgba(63,123,255,.18); color: #fff; box-shadow: inset 3px 0 0 var(--bright); }
.app-side.rail small { margin-top: 9px; }
.app-side.rail .ver { margin-top: 14px; color: #6B7593; letter-spacing: .04em; }
.app-bar { align-items: center; }
.app-bar .fname { font-weight: 700; margin-right: 6px; white-space: nowrap; }
.app-bar .fname em, .app-top .co em { font-style: normal; font-weight: 600; color: #11713F; background: #E3F6EC; border-radius: 999px; padding: 0 7px; margin-left: 4px; font-size: 10px; }
.app-bar i.save { background: var(--electric); border-color: var(--electric); color: #fff; font-weight: 700; }
.app.bus { grid-template-rows: auto; }
.app.bus .app-side { grid-row: 1; }
.app.bus .app-top { margin: -12px -14px 10px; padding: 8px 12px; }
.app.bus .app-top .co { color: var(--navy); }
.app.bus .kf { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.app.bus .kf b, .kf b { color: var(--navy); }
.bus .btn-mini.primary { background: var(--electric); border-color: var(--electric); }
.app-top .tabs span.on { background: #E8EEFF; color: #1535C2; }
@media (max-width: 600px) { .app.bus .app-top .day { display: none; } }

/* =================== screens: one at a time =================== */
.viewer { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.vtabs { display: grid; gap: 8px; }
.vtab { text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; cursor: pointer; display: grid; gap: 2px; transition: border-color .15s, background .15s; }
.vtab b { font-size: 1rem; }
.vtab span { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.vtab:hover { border-color: var(--bright); }
.vtab[aria-selected="true"] { border: 2px solid var(--electric); padding: 11px 13px; background: color-mix(in srgb, var(--electric) 5%, var(--surface)); }
.vpanel { margin: 0; min-width: 0; }
.vpanel + .vpanel { margin-top: 18px; }
.vpanel[hidden] { display: none; }
.vpanel.in { animation: rise .4s ease both; }
@media (max-width: 860px) {
  .viewer { grid-template-columns: 1fr; }
  .vtabs { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; padding-bottom: 4px; }
  .vtab span { display: none; }
}

/* =================== print studio, reports and brand kit (Schedulo Bus) =================== */
.studio, .reports, .brandkit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: var(--text); }
.studio-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--navy); color: #fff; font-size: .9rem; }
.studio-bar span { color: var(--dim); font-size: .82rem; }
.stabs { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.stab { flex: none; font: inherit; font-weight: 600; font-size: .88rem; padding: 8px 10px; border: 0; background: none; color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; }
.stab[aria-selected="true"] { color: var(--electric); border-bottom-color: var(--electric); }
.spane { padding: 14px 16px 18px; }
.spane[hidden] { display: none; }
.spane.in { animation: rise .35s ease both; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.chips-l { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; min-width: 70px; }
.chip-btn { font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.chip-btn:hover { border-color: var(--bright); }
.chip-btn[aria-pressed="true"] { background: var(--electric); border-color: var(--electric); color: #fff; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--electric); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the previews stay paper-white in both looks */
.pv, .bk-prev { --muted: #4A5677; --line: #DCE2F2; --text: #071433; color: #071433; background: #fff; font-size: 12px; line-height: 1.4; margin-top: 6px; transition: background-color .2s, color .2s; }
.pv { border: 1px solid #DCE2F2; border-radius: 6px; box-shadow: 0 10px 26px rgba(7,20,51,.14); padding: 14px; }
.pv table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pv td, .pv th { padding: 5px 6px; text-align: left; border-bottom: 1px solid #EEF1F8; white-space: nowrap; }

/* running board styles */
.pv-head { display: flex; gap: 10px; align-items: center; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 3px solid #1E4BFF; }
.pv-head b { display: block; font-size: 14px; } .pv-head small { color: #4A5677; }
.pv-num { background: #1E4BFF; color: #fff; font-weight: 800; font-size: 17px; border-radius: 6px; padding: 5px 10px; }
.pv-tt th { font-size: 10px; color: #4A5677; }
.pv-tt td:first-child { font-weight: 700; }
.pv-foot { display: flex; justify-content: space-between; color: #4A5677; font-size: 10px; margin-top: 8px; }
.board-pv[data-style="metro"] .pv-head { border: 0; background: #071433; color: #fff; margin: -14px -14px 8px; padding: 12px 14px; border-radius: 6px 6px 0 0; }
.board-pv[data-style="metro"] .pv-head small { color: #AEB8D6; }
.board-pv[data-style="metro"] .pv-num { background: #00C2FF; color: #071433; border-radius: 999px; }
.board-pv[data-style="twotone"] .pv-tt tbody tr:nth-child(even) td { background: #E8EEFF; }
.board-pv[data-style="twotone"] .pv-tt tbody tr:nth-child(odd) td { background: #F7F9FF; }
.board-pv[data-style="twotone"] .pv-head { border-bottom-color: #3F7BFF; }
.board-pv[data-style="easy"] { font-size: 15px; }
.board-pv[data-style="easy"] .pv-tt td { padding: 8px 6px; border-bottom: 2px solid #071433; }
.board-pv[data-style="easy"] .pv-num { background: #071433; font-size: 22px; }
.board-pv[data-style="easy"] .pv-head { border-bottom-color: #071433; }
.board-pv[data-style="dot"] { background: #111; color: #FFB000; font-family: ui-monospace, "Courier New", monospace; border-color: #333; }
.board-pv[data-style="dot"] .pv-head { border-bottom: 1px dashed #FFB000; }
.board-pv[data-style="dot"] .pv-head small, .board-pv[data-style="dot"] .pv-foot, .board-pv[data-style="dot"] .pv-tt th { color: #C98A00; }
.board-pv[data-style="dot"] .pv-num { background: #FFB000; color: #111; border-radius: 0; }
.board-pv[data-style="dot"] td { border-bottom-color: #2a2a2a; }
.board-pv[data-style="railway"] .pv-head { border-bottom: 0; border-top: 6px solid #071433; padding-top: 10px; }
.board-pv[data-style="railway"] .pv-num { background: #fff; color: #071433; border: 3px solid #071433; border-radius: 0; }
.board-pv[data-style="railway"] .pv-tt th { background: #071433; color: #fff; }
.board-pv[data-style="railway"] .pv-tt td { border-bottom: 1px solid #071433; }

/* duty card layouts */
.card-pv { display: flex; gap: 12px; font-family: ui-monospace, "Courier New", monospace; max-width: 250px; margin-left: auto; margin-right: auto; }
.card-pv .cp-side { display: none; }
.card-pv .cp-main { flex: 1; min-width: 0; display: grid; gap: 3px; justify-items: center; text-align: center; }
.card-pv .cp-co { letter-spacing: .1em; text-transform: uppercase; } .card-pv .cp-duty { font-size: 16px; }
.card-pv small { color: #4A5677; }
.card-pv table { margin: 6px 0; border-top: 1px dashed #9AA6C6; border-bottom: 1px dashed #9AA6C6; text-align: left; }
.card-pv td { white-space: normal; border: 0; padding: 3px 2px; } .card-pv td:first-child { font-weight: 700; padding-right: 8px; white-space: nowrap; }
.card-pv .cp-tot { display: flex; justify-content: space-between; width: 100%; font-size: 13px; }
.card-pv .cp-bar { display: none; }
.card-pv[data-layout="pocket"], .card-pv[data-layout="day"] { font-family: inherit; max-width: none; }
.card-pv[data-layout="pocket"] .cp-side { display: grid; place-content: center; text-align: center; background: #1E4BFF; color: #fff; border-radius: 6px; padding: 10px; min-width: 70px; }
.card-pv[data-layout="pocket"] .cp-side b { font-size: 20px; }
.card-pv[data-layout="pocket"] .cp-main, .card-pv[data-layout="day"] .cp-main { justify-items: start; text-align: left; }
.card-pv[data-layout="pocket"] .cp-co, .card-pv[data-layout="day"] .cp-co { letter-spacing: 0; text-transform: none; color: #4A5677; font-weight: 600; }
.card-pv[data-layout="day"] .cp-bar { display: block; position: relative; height: 16px; width: 100%; background: #EEF1F8; border-radius: 4px; margin: 6px 0 2px; }
.card-pv[data-layout="day"] .cp-bar i { position: absolute; top: 0; bottom: 0; background: #1E4BFF; border-radius: 4px; }
.card-pv[data-layout="day"] .cp-bar i.brk { background: repeating-linear-gradient(45deg, #9AA6C6 0 3px, #fff 3px 6px); }
.card-pv[data-layout="lanyard"] { max-width: 170px; font-family: inherit; border-radius: 12px; border-top: 14px solid #1E4BFF; }
.card-pv[data-layout="lanyard"] table tr:nth-child(n+4) { display: none; }

/* public timetables */
.tt-pv .tp-banner { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.tt-pv .tp-banner b { display: block; font-size: 14px; } .tt-pv .tp-banner small { color: #4A5677; }
.tt-pv .tp-route { background: #1E4BFF; color: #fff; font-weight: 800; font-size: 18px; border-radius: 6px; padding: 4px 11px; }
.tt-pv .tp-grid th { font-weight: 600; } .tt-pv .tp-grid td { text-align: right; }
.tt-pv .tp-grid tr:nth-child(odd) th, .tt-pv .tp-grid tr:nth-child(odd) td { font-weight: 700; }
.tt-pv .then { display: none; text-align: center !important; white-space: normal !important; font-weight: 400 !important; font-size: 10px; color: #4A5677; }
.tt-pv .tp-note { margin: 8px 0 0; color: #4A5677; font-size: 10px; }
.tt-pv[data-tpl="banner"] .tp-banner { background: #071433; color: #fff; margin: -14px -14px 10px; padding: 14px; border-radius: 6px 6px 0 0; }
.tt-pv[data-tpl="banner"] .tp-banner small { color: #AEB8D6; }
.tt-pv[data-tpl="banner"] .tp-route { background: #00C2FF; color: #071433; }
.tt-pv[data-tpl="every"] .tp-grid td:nth-child(n+4):not(.then) { display: none; }
.tt-pv[data-tpl="every"] .then { display: table-cell; }
.tt-pv[data-tpl="large"] { font-size: 16px; }
.tt-pv[data-tpl="large"] .tp-grid td:nth-child(n+4) { display: none; }
.tt-pv[data-tpl="large"] .tp-grid td, .tt-pv[data-tpl="large"] .tp-grid th { padding: 8px 6px; border-bottom: 2px solid #071433; }

/* times at a stop */
.stop-pv .sp-head b { display: block; font-size: 15px; } .stop-pv .sp-head small { color: #4A5677; }
.stop-pv .sp-head { border-bottom: 3px solid #1E4BFF; padding-bottom: 8px; margin-bottom: 6px; }
.stop-pv .sp-hm th { width: 40px; font-size: 14px; color: #1E4BFF; } .stop-pv .sp-hm td { letter-spacing: .12em; font-weight: 600; }
.stop-pv .sp-board { display: none; list-style: none; margin: 0; padding: 0; }
.stop-pv[data-tpl="board"] { background: #071433; color: #fff; border-color: #071433; }
.stop-pv[data-tpl="board"] .sp-head { border-bottom-color: #00C2FF; } .stop-pv[data-tpl="board"] .sp-head small { color: #AEB8D6; }
.stop-pv[data-tpl="board"] .sp-hm { display: none; }
.stop-pv[data-tpl="board"] .sp-board { display: grid; gap: 6px; font-family: ui-monospace, "Courier New", monospace; color: #FFB000; }
.stop-pv .sp-board li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.stop-pv .sp-r { background: #FFB000; color: #071433; font-weight: 800; text-align: center; border-radius: 4px; }

/* reports */
.reports .spane { min-height: 220px; }
.rep td.num, .rep th.num { text-align: right; }
.rep tr.tot td { font-weight: 800; border-top: 2px solid var(--navy); }
.rt { display: inline-block; min-width: 26px; text-align: center; font-weight: 800; color: #fff; background: var(--rc, var(--electric)); border-radius: 5px; padding: 0 6px; font-size: .8rem; }
.busesout { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.busesout i { flex: 1; background: linear-gradient(180deg, var(--bright), var(--electric)); border-radius: 4px 4px 0 0; transition: filter .15s; }
.busesout i:hover { filter: brightness(1.2); }
.bo-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; margin-top: 4px; }
.rep-foot { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 16px; }
.reports .list td, .reports .list th { font-size: .88rem; }

/* brand kit */
.bk-prev { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; background: transparent; --brand: #071433; }
.bk-prev[data-font="serif"] { font-family: Georgia, "Times New Roman", serif; }
.bk-prev[data-font="mono"] { font-family: ui-monospace, "Courier New", monospace; }
.bk-board, .bk-card { background: #fff; border: 1px solid #DCE2F2; border-radius: 6px; box-shadow: 0 8px 22px rgba(7,20,51,.12); overflow: hidden; }
.bk-head { display: flex; gap: 10px; align-items: center; background: var(--brand); color: #fff; padding: 10px 12px; transition: background .25s; }
.bk-head b { display: block; } .bk-head small { opacity: .8; }
.bk-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.bk-row { display: grid; grid-template-columns: 50px 1fr auto; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #EEF1F8; font-variant-numeric: tabular-nums; }
.bk-row span:first-child { font-weight: 700; }
.bk-card { display: flex; }
.bk-side { background: var(--brand); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; padding: 14px 12px; transition: background .25s; }
.bk-card div { padding: 10px 12px; } .bk-card b, .bk-card small { display: block; } .bk-card small { color: #4A5677; }
@media (max-width: 600px) { .bk-prev { grid-template-columns: 1fr; } .chips-l { min-width: 0; width: 100%; } }

/* =================== which licence key do I need =================== */
.keyb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.keyb fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keyb legend, .keyb > label[for] { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.kb-prod { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; position: relative; }
.kb-prod input { position: absolute; opacity: 0; pointer-events: none; }
.kb-prod img { border-radius: 9px; flex: none; }
.kb-prod b { display: block; font-size: .95rem; } .kb-prod small { color: var(--muted); }
.kb-prod:has(input:checked) { border: 2px solid var(--electric); padding: 9.5px; background: color-mix(in srgb, var(--electric) 5%, var(--surface)); }
.kb-prod:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.keyb select { font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
.kb-lock { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.kb-lock input { width: 18px; height: 18px; accent-color: var(--electric); }
.kb-card { display: grid; gap: 4px; background: var(--night); color: #fff; border-radius: 16px; padding: 16px 18px; margin: 6px 0; }
.kb-card small { font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--bright); }
.kb-card b { font-size: 1.2rem; } .kb-card span { color: #C9D1EA; font-size: .92rem; }
.keyb .btn { width: calc(100% - 14px); }
.keyb .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (max-width: 480px) { .keyb fieldset { grid-template-columns: 1fr; } }

/* =================== the questions page: search =================== */
.faq-search { display: grid; grid-template-columns: 1fr; gap: 6px; max-width: 560px; margin-top: 24px; }
.faq-search label { font-weight: 600; font-size: 14px; color: #fff; }
.faq-search input { font: inherit; font-size: 16px; padding: 13px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; }
.faq-search input::placeholder { color: #AEB8D6; }
.faq-search input:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 4px rgba(63,123,255,.25); }
#faq-n { color: #C9D1EA; font-size: .9rem; min-height: 1.2em; }
.faq-group[hidden], .faq details[hidden] { display: none; }
/* phones: the running board drops its trip column so the times, from and to stay readable */
@media (max-width: 480px) { .board-pv .pv-tt th:nth-child(4), .board-pv .pv-tt td:nth-child(4) { display: none; } }

/* ===== Scroll animations =====
   Each part plays once when it scrolls into view (site.js adds .armed below the fold, then .play).
   Without JavaScript, or for visitors who turn off motion, everything simply shows as it is. */

/* 1. app pictures build themselves: the rail slides in, then the trips and blocks fill their rows */
@keyframes build { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes railIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.app .bt { transform-origin: left; animation-name: build; animation-duration: .5s; animation-fill-mode: backwards; animation-delay: calc(.35s + var(--i, 0) * 45ms); }
.app .app-side { animation: railIn .6s cubic-bezier(.2,.8,.2,1) backwards; }
.app.armed .bt, .app.armed .app-side, .gantt-live.armed .trip { animation-play-state: paused; }
.gantt-live .trip { animation-delay: calc(var(--i, 0) * 50ms); }

/* 3. OPTIMIZE plays out: the proposal ticks down, the savings appear, then ACCEPT pulses */
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30,75,255,.55); } 60% { box-shadow: 0 0 0 9px rgba(30,75,255,0); } }
.opt.armed .gain { opacity: 0; }
.opt.play .gain { animation: rise .4s ease 1.2s backwards; }
.opt.play .btn-mini.primary { animation: pulse 1s ease 1.6s 2; }

/* 5. schedule bars sweep in above section headings */
.sbars { display: grid; gap: 4px; width: 46px; margin-bottom: 12px; }
.sbars i { display: block; height: 6px; border-radius: 999px; background: var(--electric); transform-origin: left; }
.sbars i:nth-child(2) { width: 76%; margin-left: 18%; background: var(--cyan); }
.sbars i:nth-child(3) { width: 56%; background: var(--bright); }
.section-head.center .sbars { margin-left: auto; margin-right: auto; }
.sbars.armed i { transform: scaleX(0); }
.sbars.play i { animation: build .6s cubic-bezier(.2,.8,.2,1) backwards; }
.sbars.play i:nth-child(2) { animation-delay: .12s; } .sbars.play i:nth-child(3) { animation-delay: .24s; }

/* 6. the roadmap draws itself: a line runs from the current version to what's next */
.roadmap-side { position: relative; padding-left: 30px; }
.roadmap-side::before { content: ""; position: absolute; left: 9px; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--electric); transform-origin: top; }
.roadmap-side > div { position: relative; }
.roadmap-side > div::before { content: ""; position: absolute; left: -28px; top: 22px; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--electric); }
.roadmap-side.armed::before { transform: scaleY(0); }
.roadmap-side.armed > div { opacity: 0; }
.roadmap-side.play::before { animation: drawDown 1s cubic-bezier(.4,0,.2,1) backwards; }
.roadmap-side.play > div { animation: rise .45s ease backwards; }
.roadmap-side.play > div:nth-child(2) { animation-delay: .7s; }
@keyframes drawDown { from { transform: scaleY(0); } to { transform: none; } }

/* 7. the departure board flips line by line */
.stop-pv .sp-board { perspective: 500px; }
.stop-pv.flip .sp-board li { transform-origin: center top; animation: flipIn .5s cubic-bezier(.3,1.4,.5,1) backwards; }
.stop-pv.flip .sp-board li:nth-child(2) { animation-delay: .15s; } .stop-pv.flip .sp-board li:nth-child(3) { animation-delay: .3s; } .stop-pv.flip .sp-board li:nth-child(4) { animation-delay: .45s; }
@keyframes flipIn { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }

/* B. the emblem in the corner fills as you read down the page; click it to go back to the top */
.read-emblem { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(7,20,51,.18);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
.read-emblem.show { opacity: 1; transform: none; pointer-events: auto; }
.read-emblem svg { width: 32px; height: auto; }
.read-emblem .tr { fill: var(--line); }
.read-emblem:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media print { .read-emblem { display: none; } }

/* C. a schedule bar under each section heading fills as you read through the section */
.read-bar { display: block; width: min(100%, 320px); height: 8px; border-radius: 999px; background: var(--line); margin-top: 18px; position: relative; overflow: hidden; }
.read-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--navy) 0 40%, var(--electric) 40%); transform-origin: left; transform: scaleX(var(--k, 1)); }
[data-theme="dark"] .read-bar i { background: linear-gradient(90deg, #8FB0FF 0 40%, var(--electric) 40%); }
.section-head.center .read-bar { margin-left: auto; margin-right: auto; }
.on-navy .read-bar { background: rgba(255,255,255,.15); }

/* E. the bar pattern drifts behind navy bands, each bar at its own speed */
.drift { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.drift i { position: absolute; height: 22px; border-radius: 999px; background: linear-gradient(90deg, rgba(63,123,255,.06), rgba(63,123,255,.4)); will-change: transform; }

/* G. the emblem stacks up at the end of each page, with a way back to the top */
.foot-end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-end svg { width: 54px; height: auto; flex: none; }
.foot-end p { margin: 0; flex: 1 1 220px; color: #C9D1EA; }
.foot-end .to-top { font: inherit; font-weight: 700; font-size: .9rem; color: #fff; background: var(--electric); border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.foot-end .to-top:hover { background: var(--electric-hover); }
.foot-end .to-top:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.foot-end.armed .row { opacity: 0; transform: translateY(-140%); }
.foot-end.play .row { animation: drop .55s cubic-bezier(.3,1.35,.5,1) backwards; }
.foot-end.play .row:nth-child(1) { animation-delay: .42s; } .foot-end.play .row:nth-child(2) { animation-delay: .28s; } .foot-end.play .row:nth-child(3) { animation-delay: .14s; }
.foot-end svg .row { transform-box: fill-box; }
@keyframes drop { from { opacity: 0; transform: translateY(-140%); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .app .bt, .app .app-side, .gantt-live .trip, .opt.play *, .sbars i, .roadmap-side::before, .roadmap-side > div, .stop-pv .sp-board li, .foot-end .row { animation: none !important; }
  .read-emblem { transition: none; }
}
@media (max-width: 600px) { .read-emblem { width: 44px; height: 44px; border-radius: 14px; } .read-emblem svg { width: 26px; } }

/* Roadside publicity: a network map from the routes, in three looks, with a diversion */
.pubkit { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.pubkit .spane { padding: 14px; display: grid; gap: 10px; }
.pub-pv { --paper: #F7F8FB; --street: #DCE2EE; --text: #071433; --r7: #1E4BFF; --r12: #00A99D; --river: #BFDDF5; --park: #D6EDD9; border-radius: 10px; overflow: hidden; border: 1px solid #DCE2F2; background: var(--paper); }
.pub-pv[data-look="dark"] { --paper: #0A1230; --street: #1E2B55; --text: #E8ECF8; --r7: #3F7BFF; --r12: #00C2FF; --river: #12305E; --park: #13324A; }
.pub-pv[data-look="mono"] { --paper: #FFFFFF; --street: #E5E5E5; --text: #111111; --r7: #111111; --r12: #777777; --river: #EEEEEE; --park: #F2F2F2; }
.pub-pv svg { display: block; width: 100%; height: auto; }
.pub-pv .paper { fill: var(--paper); } .pub-pv .river { fill: none; stroke: var(--river); stroke-width: 12; }
.pub-pv .park { fill: var(--park); }
.pub-pv .streets path { stroke: var(--street); stroke-width: 6; fill: none; }
.pub-pv .rt7, .pub-pv .rt12 { fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.pub-pv .rt7 { stroke: var(--r7); } .pub-pv .rt12 { stroke: var(--r12); stroke-dasharray: none; }
.pub-pv[data-look="mono"] .rt12 { stroke-dasharray: 8 5; }
.pub-pv .stop { fill: var(--paper); stroke: var(--text); stroke-width: 2.2; }
.pub-pv .labels text { font: 600 10px var(--font, Montserrat, sans-serif); fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.pub-pv .divn { display: none; }
.pub-pv[data-div="on"] .divn { display: inline; }
.pub-pv .closed { stroke: #E5484D; stroke-width: 5; opacity: .35; fill: none; }
.pub-pv .cross { stroke: #E5484D; stroke-width: 3; stroke-linecap: round; fill: none; }
.pub-pv .way { fill: none; stroke: #FF8800; stroke-width: 4; stroke-dasharray: 7 5; stroke-linejoin: round; }
.pub-key { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; font-size: 12px; color: var(--text); background: var(--paper); border-top: 1px solid var(--street); }
.pub-key span { display: inline-flex; align-items: center; gap: 6px; }
.pub-key i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }
.pub-key .k7 { background: var(--r7); } .pub-key .k12 { background: var(--r12); } .pub-key .kd { background: repeating-linear-gradient(90deg, #FF8800 0 6px, transparent 6px 10px); }
.pub-pv .kdiv { display: none; } .pub-pv[data-div="on"] .kdiv { display: inline-flex; }

/* =================== client login (header) ===================
   The way in to the client area (account.schedulo.uk): an outlined pill on the navy header that
   fills Electric Blue on hover, with the person icon in Bright Blue. Icon only on small phones. */
.login {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background .15s, border-color .15s;
}
.login svg { width: 18px; height: 18px; flex: none; color: #8FB0FF; transition: color .15s; }
.login:hover, .login:focus-visible { background: var(--electric); border-color: var(--electric); color: #fff; }
.login:hover svg, .login:focus-visible svg { color: #fff; }
@media (max-width: 1240px) and (min-width: 1061px) { .login span { display: none; } .login { width: 38px; padding: 0; justify-content: center; } }
[data-theme="dark"] .login { color: #fff; }
@media (max-width: 520px) { .login span { display: none; } .login { width: 38px; padding: 0; justify-content: center; } }

/* Guides: long-form articles */
.article { max-width: 780px; }
.article h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 1.8em; }
.article h2:first-child { margin-top: 0; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.article li { margin-bottom: .45em; }
.article .tip { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 18px 22px; margin: 1.6em 0; }
.article .tip p:last-child { margin-bottom: 0; }
.article .meta { color: var(--muted); font-size: .9rem; }
/* Real app screenshots in the guides: a little wider than the text on big screens */
.article .shot { --shot-w: min(1040px, calc(100vw - 32px)); width: var(--shot-w); position: relative; left: 50%; margin: 2em 0 2.2em calc(var(--shot-w) / -2); }
.shot-frame { display: block; cursor: zoom-in; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.shot-frame img { width: 100%; height: auto; }
.shot figcaption { max-width: 780px; margin: 14px auto 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.shot-tag { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--txc); vertical-align: 1px; }
.shot-tag.bus { background: var(--bus-dark); }
.shot-tag.coach { background: #C2095F; }
.article .shot-note { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }
[data-theme="dark"] .shot-frame { border-color: rgba(143, 176, 255, .28); }
[data-theme="dark"] .shot-tag { background: #2E5BFF; }
[data-theme="dark"] .shot-tag.bus { background: #00799F; }
[data-theme="dark"] .shot-tag.coach { background: #C2095F; }
@media (max-width: 700px) { .shot-frame { border-radius: 10px; } }
.guide-list a.feature { display: block; text-decoration: none; color: inherit; }
.guide-list a.feature:hover h3, .guide-list a.feature:focus-visible h3 { color: var(--accent-text); }

/* News, guides and case studies: tabs and post cards */
.posts-section { padding-top: 56px; }
.post-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.post-tabs a { padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--muted); text-decoration: none; }
.post-tabs a:hover { color: var(--text); background: var(--bg); }
.post-tabs a[aria-current="page"] { background: var(--electric); color: #fff; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--text); transition: transform .15s, border-color .15s; }
.post-card:hover, .post-card:focus-visible { transform: translateY(-3px); border-color: var(--bright); }
.post-img { display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; border-bottom: 1px solid var(--line); }
.post-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.post-type { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); background: var(--light); border-radius: 999px; padding: 4px 10px; }
.post-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.post-summary { color: var(--muted); font-size: .96rem; }
.post-more { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--accent-text); }
.post-more::after { content: " \2192"; }
.post-empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.article figure { margin: 1.6em 0; }
.article figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.article figcaption { margin-top: 8px; font-size: .88rem; color: var(--muted); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } .post-tabs { display: flex; } .post-tabs a { flex: 1; text-align: center; padding: 9px 10px; } }
.news-more { margin: 14px 0 0; font-weight: 600; font-size: .92rem; }
.news-more a { color: var(--electric); }
[data-theme="dark"] .news-more a { color: #8FB0FF; }
.roadmap .checks { margin: 14px 0 8px; }

/* =================== software feedback (product-feedback, unlisted) =================== */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fb-section { padding: 64px 0 96px; }
.fb-wrap { max-width: 860px; }
.fb-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 40px 36px; }
.fb-steps { list-style: none; margin: 0; padding: 0; counter-reset: fb; }
.fb-step { counter-increment: fb; position: relative; padding: 32px 0 30px 60px; border-bottom: 1px solid var(--line); }
.fb-step::before {
  content: counter(fb); position: absolute; left: 0; top: 30px; width: 40px; height: 26px; border-radius: 13px;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff;
  background: linear-gradient(90deg, var(--navy) 0 45%, var(--accent) 45%);
}
[data-theme="dark"] .fb-step::before { background: linear-gradient(90deg, #3A4F8C 0 45%, var(--accent) 45%); }
.fb-step h2 { font-size: 1.3rem; margin: 0 0 .35em; }
.fb-step h2 small, .fb-form .fb-step h2 small { display: inline; font-size: .85rem; font-weight: 500; color: var(--faint); margin: 0; }
.fb-stars.big legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fb-help { color: var(--muted); font-size: .95rem; margin: 0 0 18px; }
.fb-form label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 6px; }
.fb-form input:not([type="radio"]):not([type="checkbox"]), .fb-form textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text); background: var(--page);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; transition: border-color .15s, box-shadow .15s;
}
.fb-form input:not([type="radio"]):not([type="checkbox"]):focus, .fb-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.fb-form [aria-invalid="true"] { border-color: #DC2626 !important; }
.fb-form textarea { resize: vertical; min-height: 120px; }
.fb-form p { margin: 0; }
.fb-form small { display: block; color: var(--faint); font-size: .8rem; margin-top: 6px; }
.fb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }

/* about you: the company, and the tickbox to share their name (empty unless they tick it) */
.fb-form .fb-company { margin-top: 18px; }
.fb-form label small { display: inline; margin: 0; font-weight: 500; color: var(--faint); }
.fb-form .fb-consent { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 0; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--page); cursor: pointer; font-weight: 400; font-size: inherit; transition: border-color .15s, background .15s, box-shadow .15s; }
.fb-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-consent b { display: block; font-size: .95rem; line-height: 1.4; }
.fb-form .fb-consent small { display: block; margin-top: 4px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.fb-consent-box { flex: none; position: relative; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--line); background: var(--surface); transition: background .15s, border-color .15s; }
.fb-consent:hover .fb-consent-box { border-color: var(--accent); }
.fb-consent input:checked ~ .fb-consent-box { background: var(--accent); border-color: var(--accent); }
.fb-consent input:checked ~ .fb-consent-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.fb-consent:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--page)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.fb-consent:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* the products: tick a card, then its stars appear */
.fb-group { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.fb-form .fb-group { margin: 22px 0 10px; }
.fb-form .fb-products + .fb-group { margin-top: 28px; }
.fb-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fb-product { border: 1.5px solid var(--line); border-radius: 16px; background: var(--page); transition: border-color .15s, box-shadow .15s, background .15s; }
.fb-product:has(input[data-product]:checked), .fb-product.on {
  border-color: var(--pc); background: color-mix(in srgb, var(--pc) 6%, var(--page));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 16%, transparent);
}
.fb-form .fb-pick { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; margin: 0; cursor: pointer; font-weight: 400; font-size: inherit; }
.fb-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-pick:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 16px; }
.fb-pick img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 14px rgba(7,20,51,.18); }
.fb-pick b { display: block; font-size: 1rem; line-height: 1.3; }
.fb-pick small { margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.fb-tick { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: background .15s, border-color .15s; }
.fb-pick input:checked ~ .fb-tick { background: var(--pc); border-color: var(--pc); }
.fb-pick input:checked ~ .fb-tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.fb-score { display: none; padding: 0 16px 16px; }
.fb-product:has(input[data-product]:checked) .fb-score, .fb-product.on .fb-score, .no-js .fb-score { display: block; }
.fb-score .fb-stars { border-top: 1px dashed var(--line); padding-top: 12px; }

/* star ratings: radios from 5 down to 1, shown in reverse so the stars fill from the left */
.fb-stars { border: 0; margin: 0; padding: 0; min-width: 0; }
.fb-stars legend { font-size: .8rem; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.fb-star-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.fb-star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-form .fb-star-row label { margin: 0; cursor: pointer; padding: 2px; color: var(--line); transition: color .12s, transform .12s; }
.fb-star-row svg { width: 28px; height: 28px; fill: currentColor; }
.fb-stars.big .fb-star-row svg { width: 44px; height: 44px; }
.fb-star-row input:checked ~ label, .fb-star-row label:hover, .fb-star-row label:hover ~ label { color: var(--licence); }
.fb-star-row:hover input:checked ~ label:not(:hover):not(:hover ~ label) { color: color-mix(in srgb, var(--licence) 40%, var(--line)); }
.fb-star-row label:hover { transform: scale(1.12); }
.fb-star-row input:focus-visible + label { outline: 3px solid var(--cyan); outline-offset: 1px; border-radius: 6px; }
.fb-word { display: block; min-height: 1.4em; font-size: .85rem; font-weight: 600; color: var(--licence-dark); margin-top: 4px; }
[data-theme="dark"] .fb-word { color: #FFA640; }
.fb-stars.big .fb-word { font-size: 1rem; }

/* positives and negatives, one point per line */
.fb-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fb-points li { position: relative; display: flex; gap: 8px; align-items: center; }
.fb-points li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .95rem; line-height: 1; }
[data-points="positives"] li::before { content: "+"; background: #E3F5EC; color: #047857; }
[data-points="negatives"] li::before { content: "−"; background: #FDECEC; color: #B91C1C; }
[data-theme="dark"] [data-points="positives"] li::before { background: rgba(46,204,113,.16); color: #7BE0A6; }
[data-theme="dark"] [data-points="negatives"] li::before { background: rgba(248,113,113,.16); color: #FCA5A5; }
.fb-points .fb-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fb-points .fb-x:hover { background: var(--bg); color: var(--text); }
.fb-add { margin-top: 12px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent-text); background: transparent; border: 1.5px dashed var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.fb-add:hover { border-color: var(--accent); }
.fb-add span { font-size: 1.1rem; margin-right: 4px; }

.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 28px; }
.fb-send .btn { min-width: 200px; }
.fb-send .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.fb-send small { flex: 1 1 260px; margin: 0; }
.fb-errors, .fb-alert { background: #FDECEC; color: #7F1D1D; border: 1px solid #F5B5B5; border-radius: 14px; padding: 14px 18px; margin-top: 22px; font-size: .95rem; }
.fb-errors ul { margin: 6px 0 0; padding-left: 20px; }
[data-theme="dark"] .fb-errors, [data-theme="dark"] .fb-alert { background: rgba(220,38,38,.14); color: #FECACA; border-color: rgba(248,113,113,.4); }
.fb-alert { display: none; margin: 0 0 18px; }
.fb-alert:target { display: block; }
.fb-alert p { margin: 4px 0 0; }

/* sent */
.fb-done { display: none; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 56px 32px; }
.fb-done:target, .fb-done.show { display: block; }
.fb-done:target ~ .fb-form, .fb-done.show ~ .fb-form { display: none; }
.fb-done:focus { outline: none; }
.fb-done-ico { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent)); }
.fb-done-ico svg { width: 32px; height: 32px; }
.fb-done p { color: var(--muted); max-width: 34em; margin: 0 auto 1em; }
.fb-done .btn-row { justify-content: center; margin-top: 24px; }

@media (max-width: 860px) {
  .fb-products { grid-template-columns: 1fr; }
  .fb-pick { flex-direction: row; align-items: center; padding-right: 52px; }
  .fb-tick { top: 50%; margin-top: -13px; }
}
@media (max-width: 640px) {
  .fb-form { padding: 4px 18px 26px; border-radius: 18px; }
  .fb-step { padding: 26px 0 24px; }
  .fb-step::before { position: static; display: inline-grid; margin-bottom: 10px; }
  .fb-two { grid-template-columns: 1fr; }
  .fb-stars.big .fb-star-row svg { width: 38px; height: 38px; }
  .fb-send .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fb-star-row label { transition: none; } .fb-star-row label:hover { transform: none; } }

/* ---------- consultancy page ---------- */
/* hero: the "Consultancy Line", a route map whose stops are the things we help with */
.cx-route {
  position: relative; padding: 26px 26px 22px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.cx-route-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cx-route-head b { display: block; font-size: 1.1rem; }
.cx-route-head small { color: #AFC0EA; font-size: .85rem; }
.cx-route-no { flex: none; display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 10px; border-radius: 10px; background: var(--electric); color: #fff; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.cx-stops { --line-x: 21px; position: relative; list-style: none; margin: 0; padding: 0; }
.cx-stops::before { content: ""; position: absolute; left: calc(var(--line-x) - 4px); top: 16px; bottom: 16px; width: 8px; border-radius: 8px; background: linear-gradient(180deg, var(--cyan), var(--electric) 55%, var(--bright)); }
.cx-stops li { position: relative; max-width: none; }
.cx-stops a { display: block; position: relative; padding: 9px 12px 9px 54px; border-radius: 12px; color: #fff; text-decoration: none; transition: background .2s; }
.cx-stops a::before { content: ""; position: absolute; left: calc(var(--line-x) - 9px); top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--navy); box-shadow: 0 0 0 2px #fff; }
.cx-stops a:hover, .cx-stops a:focus-visible { background: rgba(255,255,255,.08); }
.cx-stops a:hover::before { background: var(--cyan); }
.cx-stops b { display: block; font-size: 1rem; }
.cx-stops small { display: block; color: #AFC0EA; font-size: .82rem; }
.cx-bus { position: absolute; left: calc(26px + 21px - 17px); top: 74px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cyan); color: var(--navy); box-shadow: 0 6px 18px rgba(0,194,255,.45); animation: cx-ride 9s ease-in-out infinite; pointer-events: none; }
.cx-bus svg { width: 20px; height: 20px; }
@keyframes cx-ride { 0%, 6% { transform: translateY(0); } 44%, 56% { transform: translateY(calc(var(--ride, 300px))); } 94%, 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cx-bus { animation: none; } }

/* who we help: pill tabs and speech bubbles */
.cx-who { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.cx-who-tab { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: .95rem; padding: 10px 18px 10px 10px; border-radius: 999px; cursor: pointer; background: var(--surface); color: var(--text); border: 1.5px solid var(--line); transition: background .2s, border-color .2s, color .2s; }
.cx-who-tab .ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--electric) 14%, var(--surface)); color: var(--accent-text); }
.cx-who-tab .ico svg { width: 18px; height: 18px; }
.cx-who-tab:hover { border-color: var(--electric); }
.cx-who-tab[aria-selected="true"] { background: var(--electric); border-color: var(--electric); color: #fff; }
.cx-who-tab[aria-selected="true"] .ico { background: #fff; color: var(--electric); }
.cx-panel { padding: 34px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); align-items: start; gap: 40px; }
.cx-panel[hidden] { display: none; }
.no-js .cx-panel[hidden] { display: grid; margin-top: 20px; }
.cx-panel.in { animation: cx-in .35s ease-out; }
@keyframes cx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cx-panel h3 { font-size: 1.4rem; margin-bottom: .4em; }
.cx-quotes { display: grid; gap: 14px; }
.cx-quotes-l { font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-text); }
.cx-bubble { position: relative; margin: 0; padding: 16px 20px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; max-width: 30em; }
.cx-bubble.r { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--electric); color: #fff; border-color: var(--electric); }

/* where we can help: service tiles */
.cx-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .cx-services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cx-services { grid-template-columns: 1fr; } }
.cx-svc { display: flex; flex-direction: column; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); scroll-margin-top: 90px; transition: transform .2s, box-shadow .2s; }
.cx-svc:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(7,20,51,.16); }
.cx-svc:target { outline: 3px solid var(--cyan); outline-offset: 3px; }
.cx-svc img { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px; }
.cx-svc h3 { margin-bottom: .4em; }
.cx-svc p { color: var(--muted); margin: 0 0 18px; font-size: .97rem; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cx-tag { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; }
.cx-tag.op { background: #E6F7FD; color: #00668F; }
.cx-tag.la { background: #EEF2FF; color: #1535C2; }
[data-theme="dark"] .cx-tag.op { background: rgba(0,166,232,.18); color: #7FDBFF; }
[data-theme="dark"] .cx-tag.la { background: rgba(63,123,255,.2); color: #A9C2FF; }
[data-theme="dark"] .cx-svc:hover { box-shadow: 0 16px 40px rgba(0,0,0,.45); }

/* the health check */
.cx-check { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .cx-check { grid-template-columns: 1fr; } }
.cx-qs { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.cx-q { position: relative; display: block; padding: 15px 18px 15px 56px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; font-weight: 500; transition: border-color .2s, background .2s; }
.cx-q:hover { border-color: var(--electric); }
.cx-q input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cx-q::before { content: ""; position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 7px; border: 2px solid var(--dim); background: var(--surface) center/16px no-repeat; transition: background-color .15s, border-color .15s; }
.cx-q:has(input:checked) { border-color: var(--electric); background: color-mix(in srgb, var(--electric) 8%, var(--surface)); }
.cx-q:has(input:checked)::before { border-color: var(--electric); background-color: var(--electric); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cx-q:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.cx-result { position: sticky; top: 90px; padding: 28px; border-radius: var(--radius); background: var(--night); color: #fff; box-shadow: var(--shadow); }
.cx-result h3 { font-size: 1.45rem; margin: 6px 0 .3em; }
.cx-result p { color: #C9D2EC; margin: 0 0 12px; }
.cx-result small { display: block; margin-top: 12px; color: #AFC0EA; font-size: .8rem; }
.cx-result .btn { margin-top: 8px; }
.cx-gauge { height: 14px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
/* the colours run across the whole track, cyan to orange; the fill uncovers more of them as you tick */
.cx-gauge-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--electric) 55%, #FF8800); clip-path: inset(0 calc(100% - var(--p, 4%)) 0 0 round 999px); transition: clip-path .45s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .cx-gauge-fill { transition: none; } }
.cx-score { margin: 10px 0 0 !important; font-size: .9rem; color: #AFC0EA !important; }
.cx-score b { color: #fff; font-size: 1.1rem; }
.cx-picks { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-picks a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: rgba(63,123,255,.22); border: 1px solid rgba(127,164,255,.5); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.cx-picks a:hover { background: rgba(63,123,255,.4); }
.no-js .cx-result { display: none; }
@media (max-width: 900px) { .cx-result { position: static; } }

/* true or false: cards that flip */
.cx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.cx-card { position: relative; display: grid; min-height: 250px; padding: 0; font: inherit; text-align: left; color: #fff; background: none; border: 0; cursor: pointer; perspective: 1000px; border-radius: var(--radius); }
.cx-front, .cx-back { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cx-front { background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border: 1.5px solid rgba(255,255,255,.16); }
.cx-front b { font-size: 1.12rem; line-height: 1.35; }
.cx-front small { margin-top: auto; color: var(--cyan); font-weight: 600; }
.cx-card-l { font-size: 12px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--bright); }
.cx-back { transform: rotateY(180deg); background: #fff; color: var(--navy); font-size: .95rem; line-height: 1.5; border: 1.5px solid #fff; }
.cx-card[aria-pressed="true"] .cx-front { transform: rotateY(-180deg); }
.cx-card[aria-pressed="true"] .cx-back { transform: rotateY(0); }
.cx-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.cx-verdict { align-self: flex-start; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; }
.cx-verdict.f { background: #FFF1DE; color: #8A4B00; }
.cx-verdict.t { background: #E3F6EC; color: #11713F; }
[data-theme="dark"] .cx-back { background: var(--surface); color: var(--text); border-color: rgba(143,176,255,.3); }
.no-js .cx-card { cursor: default; }
.no-js .cx-back { transform: none; grid-area: auto; }
.no-js .cx-front small { display: none; }
@media (prefers-reduced-motion: reduce) { .cx-front, .cx-back { transition: none; } }

/* ways to work: tickets */
.cx-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cx-ways { grid-template-columns: 1fr; } }
.cx-way { position: relative; padding: 30px 26px 26px; border-radius: var(--radius); background: var(--surface); border: 1.5px dashed var(--dim); }
.cx-way::before, .cx-way::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--bg); border: 1.5px dashed var(--dim); }
.cx-way::before { left: -14px; clip-path: inset(0 0 0 50%); }
.cx-way::after { right: -14px; clip-path: inset(0 50% 0 0); }
.cx-way.hot { border: 2px solid var(--electric); box-shadow: var(--shadow); }
.cx-way-l { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.cx-way h3 { font-size: 1.4rem; }
.cx-way p { color: var(--muted); margin: 0; }

/* the closing call to action */
.cx-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: 48px; border-radius: var(--radius); background: var(--night); color: #fff; }
.cx-cta p { color: #C9D2EC; margin: 0; }
.cx-cta .eyebrow { color: var(--bright); }
.cx-cta-go { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (max-width: 860px) { .cx-cta { grid-template-columns: 1fr; padding: 32px 24px; } }
.no-js .cx-bus { display: none; }
.cx-front { background: linear-gradient(135deg, #16306c, #0c1d47); }
[data-theme="dark"] .cx-result { border: 1px solid rgba(143,176,255,.28); }
@media (max-width: 620px) { .cx-panel { padding: 22px 18px; } .cx-route { padding: 20px 14px 18px; } .cx-who-tab { width: 100%; } }
@media (max-width: 620px) { .cx-card { min-height: 190px; } }

/* ---------- menu drop-downs (Products, Resources) ---------- */
/* the header no longer clips, so a drop-down can hang below it; the faint symbol is clipped instead */
.site-header { overflow: visible; }
.header-sym { clip-path: inset(34px 0 44px 0); }
.nav-dd { position: relative; }
.nav-dd-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; font-size: .95rem;
  color: #DDE3F5; background: none; border: 0; padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.nav-dd-btn::before { content: ""; order: 2; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s, margin .2s; opacity: .8; }
.nav-dd-btn[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 3px; }
.nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.nav-dd-btn[data-current="true"] { color: #fff; }
.nav-dd-btn[data-current="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 9px;
  background: url("../img/bar-nav.svg") right center / auto 100% no-repeat; border-radius: 5px;
}
.nav-dd-menu {
  position: absolute; left: -12px; top: calc(100% + 14px); z-index: 60; min-width: 320px; padding: 10px;
  display: grid; gap: 2px; border-radius: 18px;
  background: radial-gradient(ellipse 80% 60% at 90% 0%, rgba(46,98,255,.35), rgba(46,98,255,0) 70%), linear-gradient(162deg, #0D2058 0%, #081845 45%, #071433 100%);
  border: 1px solid rgba(143,176,255,.22); box-shadow: 0 24px 60px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s;
}
/* a bridge, so the pointer can travel from the button to the menu without it closing */
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.no-js .nav-dd:hover .nav-dd-menu, .no-js .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
.nav .nav-dd-menu a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: #fff; white-space: normal; }
.nav .nav-dd-menu a:hover, .nav .nav-dd-menu a:focus-visible { background: rgba(63,123,255,.18); }
.nav .nav-dd-menu a::after { content: none !important; }
.nav-dd-menu img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.nav-dd-menu b { display: block; font-weight: 600; font-size: .95rem; }
.nav-dd-menu small { display: block; color: #AFC0EA; font-size: .8rem; font-weight: 500; }
.nav .nav-dd-menu a[aria-current="page"] { background: rgba(63,123,255,.22); box-shadow: inset 3px 0 0 var(--bright); }
@media (prefers-reduced-motion: reduce) { .nav-dd-menu, .nav-dd-btn::before { transition: none; } }

/* in the phone menu the drop-downs open in place, as a list under their button */
@media (max-width: 1060px) {
  .nav-dd-btn { width: 100%; justify-content: space-between; padding: 10px 14px; font-size: .95rem; }
  .nav-dd-menu { position: static; min-width: 0; display: none; padding: 4px 0 8px 10px; margin: 0; background: none; border: 0; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-dd-menu::before { content: none; }
  .nav-dd.open .nav-dd-menu { display: grid; }
  .nav-dd-btn[data-current="true"]::after { left: 14px; right: auto; width: 60px; bottom: 2px; }
  .nav .nav-dd-menu a { padding: 8px 12px; }
}
@media (min-width: 1061px) and (max-width: 1180px) { .nav-dd-btn { padding-left: 8px; padding-right: 8px; font-size: .9rem; } }

/* wide screens: the drop-down is a band the full width of the page under the header, with a card
   for each page (design B, chosen 2 November 2026) */
@media (min-width: 1061px) {
  .site-header .wrap { position: static; }
  .nav-dd { position: static; }
  .nav-dd-menu {
    left: 0; right: 0; top: 100%; min-width: 0; border-radius: 0 0 24px 24px;
    padding: 26px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 30px;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px;
    border-width: 1px 0 1px; border-top-color: rgba(255,255,255,.08);
  }
  .nav-dd-menu::before { top: -20px; height: 20px; }
  .nav .nav-dd-menu a {
    flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 18px;
    border: 1.5px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    transition: border-color .2s, transform .2s, background .2s;
  }
  .nav .nav-dd-menu a:hover, .nav .nav-dd-menu a:focus-visible { border-color: var(--bright); background: linear-gradient(135deg, rgba(63,123,255,.2), rgba(63,123,255,.06)); transform: translateY(-2px); }
  .nav .nav-dd-menu a[aria-current="page"] { border-color: var(--bright); background: linear-gradient(135deg, rgba(63,123,255,.24), rgba(63,123,255,.08)); box-shadow: none; }
  .nav-dd-menu img { width: 48px; height: 48px; border-radius: 12px; }
  .nav-dd-menu b { font-size: 1.02rem; }
  .nav-dd-menu small { margin-top: 3px; }
}
@media (min-width: 1061px) and (prefers-reduced-motion: reduce) { .nav .nav-dd-menu a { transition: none; } .nav .nav-dd-menu a:hover { transform: none; } }

/* ---------- route lines: steps drawn as stops on a bus route, with a bus riding along ---------- */
/* .steps.route turns a row of steps into a line; style="--rc:#00A6E8" sets the line's colour */
.steps.route { --rc: var(--electric); position: relative; }
.steps.route .step { position: relative; overflow: visible; }
.steps.route .step:last-of-type::after { content: none; }
.steps.route .n { position: relative; z-index: 2; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--rc); }
.steps.route .step:not(:last-of-type)::after {
  content: ""; position: absolute; z-index: 1; left: 46px; top: 42px; width: calc(100% + 20px); height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, var(--rc), color-mix(in srgb, var(--rc) 65%, #fff));
}
.steps.route .step.soon { border-style: dashed; background: transparent; }
.steps.route .step.soon .n { background: var(--surface); color: var(--rc); }
.steps.route .step.soon:not(:last-of-type)::after, .steps.route .step:has(+ .soon)::after { background: repeating-linear-gradient(90deg, var(--rc) 0 14px, transparent 14px 22px); }
.route-bus { position: absolute; z-index: 3; left: 0; top: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cyan); color: var(--navy); box-shadow: 0 6px 18px rgba(0,194,255,.45); pointer-events: none; animation: route-ride 10s ease-in-out infinite; }
.route-bus svg { width: 20px; height: 20px; }
@keyframes route-ride { 0%, 8% { transform: translate(0, 0); } 46%, 54% { transform: translate(var(--rx, 0), var(--ry, 0)); } 92%, 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .route-bus { animation: none; } }
/* below 900px wide the route runs down the page instead */
@media (max-width: 900px) {
  .steps.route, .steps.route.three { grid-template-columns: 1fr; }
  .steps.route .step { padding-left: 84px; }
  .steps.route .n { position: absolute; left: 22px; top: 22px; margin: 0; }
  .steps.route .step:not(:last-of-type)::after { left: 38px; top: 42px; width: 8px; height: calc(100% + 20px); background: linear-gradient(180deg, var(--rc), color-mix(in srgb, var(--rc) 65%, #fff)); }
  .steps.route .step.soon:not(:last-of-type)::after, .steps.route .step:has(+ .soon)::after { background: repeating-linear-gradient(180deg, var(--rc) 0 14px, transparent 14px 22px); }
}

/* the home page's "how they work together": a line above the three steps, and the bus drives to the one you pick */
.sbtns.route { position: relative; padding-top: 44px; }
.sbtns.route::before { content: ""; position: absolute; top: 13px; left: calc((100% - 24px) / 6); right: calc((100% - 24px) / 6); height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--cyan), var(--electric) 50%, var(--bright)); }
.sbtns.route .sbtn { position: relative; }
.sbtns.route .sbtn::before { content: ""; position: absolute; left: 50%; top: -40px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--navy); box-shadow: 0 0 0 2px #fff; }
.sbtns.route .route-bus { top: 0; animation: none; transition: left .6s cubic-bezier(.3,.7,.2,1); }
@media (max-width: 700px) { .sbtns.route { gap: 8px; } .sbtns.route::before { left: calc((100% - 16px) / 6); right: calc((100% - 16px) / 6); } }
@media (prefers-reduced-motion: reduce) { .sbtns.route .route-bus { transition: none; } }

/* Terms and privacy: contents list and the highlighted redistribution section */
.legal-toc { background: var(--stripe); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; margin: 1.4em 0; }
.legal-toc p { margin: 0 0 .4em; }
.legal-toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 28px; }
.legal-toc li { break-inside: avoid; margin: .15em 0; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-key { border: 1px solid var(--line); border-left: 5px solid var(--licence); border-radius: 14px; background: var(--stripe); padding: 4px 22px 10px; margin-top: 1.8em; }
.legal-key h3 { margin-top: .9em; }
.legal h3[id], .legal-key[id] { scroll-margin-top: 90px; }

/* YouTube video: a thumbnail and play button; the player (youtube-nocookie.com) only loads on a click */
.yt { position: relative; max-width: 1040px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(7, 20, 51, .22); }
.yt-play, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { display: block; color: #fff; text-decoration: none; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, filter .35s ease; }
.yt-btn { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #1F5BFF); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.35), 0 0 0 10px rgba(255,255,255,.18); transition: transform .2s ease; z-index: 1; }
.yt-btn svg { margin-left: 4px; }
.yt-play:hover img { transform: scale(1.02); filter: brightness(1.05); }
.yt-play:hover .yt-btn { transform: scale(1.08); }
.yt-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.yt-note { max-width: 1040px; margin: 14px 0 0; font-size: .85rem; color: var(--muted, #5b6785); }
@media (max-width: 700px) { .yt { border-radius: 12px; } .yt-btn { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .yt-btn svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .yt-play img, .yt-btn { transition: none; } .yt-play:hover img, .yt-play:hover .yt-btn { transform: none; } }

/* =================== case studies: ratings and reviews ===================
   The scores come from the CMS (every feedback response); the reviews are the ones ticked there. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reviews-section { padding: 0 0 24px; }
.reviews-section[hidden] { display: none; }
.rating-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rating-tile { display: grid; grid-template-columns: 52px 1fr; gap: 16px 14px; align-items: center; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.rating-ico { width: 52px; height: 52px; display: grid; place-items: center; }
.rating-ico img { width: 52px; height: 52px; border-radius: 22%; }
.rating-ico-schedulo { border-radius: 22%; background: var(--night); }
.rating-ico-schedulo img { width: 30px; height: auto; border-radius: 0; }
.rating-name strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.rating-name small { display: block; color: var(--muted); font-size: .85rem; }
.rating-score { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.rating-score b { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.rating-count { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; padding-top: 12px; border-top: 1px dashed var(--line); }
/* five stars, filled to the average: the orange layer is cut at --fill */
.rating-stars { --fill: 0%; position: relative; display: inline-flex; gap: 2px; font-size: 1.35rem; line-height: 1; color: var(--line); }
.rating-stars i { font-style: normal; }
.rating-stars::after { content: "\2605\2605\2605\2605\2605"; position: absolute; inset: 0; letter-spacing: 2px; color: var(--licence); width: var(--fill); overflow: hidden; white-space: nowrap; }
.rating-stars i + i { margin-left: 0; }
[data-theme="dark"] .rating-stars { color: rgba(143, 176, 255, .28); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.review-grid:empty { display: none; }
.review-card { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.review-top .rating-stars { font-size: 1.1rem; }
.review-apps { display: inline-flex; gap: 6px; }
.review-app { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--bg); font-size: .82rem; }
.review-app img { width: 20px; height: 20px; border-radius: 22%; }
.review-card blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); }
.review-card figcaption { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.review-card figcaption small { color: var(--muted); font-size: .85rem; }
.review-card .review-who { display: flex; flex-direction: column; gap: 2px; }
.review-card .review-who span { color: var(--muted); font-size: .88rem; }
@media (max-width: 960px) { .rating-grid, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rating-grid, .review-grid { grid-template-columns: 1fr; } }

/* ---------- products still being built (Schedulo Coach, Schedulo Roster) ---------- */
.hero .ver-pill.wip .dot { background: #FFB800 !important; border-color: #FFB800 !important; animation: none !important; box-shadow: 0 0 0 4px rgba(255,184,0,.22) !important; }
.wip-sec { padding: 40px 0 0; }
.wip-note {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: var(--radius);
  background: #FFF6E0; border: 2px dashed #E0A100; color: #4A3500;
}
.wip-note b { display: block; font-size: 1.05rem; color: #3A2900; }
.wip-note p { margin: 4px 0 0; }
.wip-note a { color: #7A4F00; }
.wip-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #FFB800; color: #071433; }
.wip-ico svg { width: 22px; height: 22px; }
[data-theme="dark"] .wip-note { background: rgba(255,184,0,.1); border-color: rgba(255,184,0,.55); color: #F3E3BE; }
[data-theme="dark"] .wip-note b { color: #FFE3A3; }
[data-theme="dark"] .wip-note a { color: #FFD16B; }
.wip-mock { margin: 0; min-width: 0; }
.wip-mock figcaption { margin-top: 10px; font-size: .85rem; color: #AFC0EA; text-align: center; }
.wip-mock { position: relative; }
.wip-mock::before {
  z-index: 2;
  content: "Design sketch"; position: absolute; right: 16px; top: -12px; padding: 5px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.35); border-radius: 999px;
  background: #FFB800; color: #071433; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.wip-mock .trip { white-space: nowrap; overflow: hidden; padding: 0 6px; }
.trip.k1 { background: #F20D77; color: #fff; }
.trip.k2 { background: #F992C2; }
.trip.k3 { background: #3F7BFF; color: #fff; }
.trip.k4 { background: #FBC3DD; }
.roster-mock { padding: 10px 12px 16px; overflow-x: auto; }
.rgrid th, .rgrid td { text-align: center; padding: 7px 6px; }
.rgrid td:first-child { white-space: nowrap; }
.rgrid td.rd { color: #6F7FAE; }
.rgrid td.hol { background: rgba(242,186,0,.22); color: #FFE08A; border-radius: 4px; }
.rgrid td.sp { background: rgba(0,194,255,.16); color: #9BE3FF; border-radius: 4px; }
.wip-card { background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px; }
.wip-card h3 { margin: 12px 0 8px; }
.wip-card p { margin: 0; color: var(--muted); }
.wip-card .badge { background: #FFF1DE; color: #8A4B00; }
[data-theme="dark"] .wip-card .badge { background: rgba(255,184,0,.16); color: #FFD16B; }
a.fam { display: block; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
a.fam:hover, a.fam:focus-visible { transform: translateY(-2px); border-color: var(--bright); }
.foot-soon { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(255,184,0,.18); color: #FFD16B; font-size: .68rem; font-weight: 600; }

/* ---------- home page: Schedulo Coach beside Schedulo Bus ---------- */
/* the hero window switches between a bus example and a coach example, and the headline's word follows it */
.hero h1 .hw { position: relative; display: inline-grid; font-style: normal; vertical-align: top; }
.hero h1 .hw i { grid-area: 1 / 1; justify-self: start; font-style: normal; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.hero h1 .hw i:not(.on) { opacity: 0; transform: translateY(.35em); }
.hero h1 .hw i { position: relative; }
.hero h1 .hw i::after { content: ""; position: absolute; left: .02em; right: .32em; bottom: -.04em; height: .09em; border-radius: .1em; background: #00A6E8; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.8,.2,1) .1s; }
.hero h1 .hw i[data-view="coach"]::after { background: #F20D78; }
.hero h1 .hw i.on::after { transform: none; }
.gl-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gl-switch { margin-left: auto; flex: none; display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.gl-switch button { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 0; border-radius: 999px; background: transparent; color: #AFC0EA; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s; }
.gl-switch img { width: 18px; height: 18px; border-radius: 5px; }
.gl-switch button:hover { color: #fff; }
.gl-switch button.p-bus[aria-selected="true"] { background: #00A6E8; color: #071433; }
.gl-switch button.p-coach[aria-selected="true"] { background: #F20D78; color: #fff; }
.gl-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* while the window changes by itself, a thin line under its bar counts down to the next change */
.gantt-live .window-bar { position: relative; }
.gantt-live.auto .window-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: left; background: #00A6E8; animation: gl-timer var(--gl-every, 8s) linear both; }
.gantt-live.auto[data-view="coach"] .window-bar::after { background: #F20D78; }
.gantt-live.held .window-bar::after { animation-play-state: paused; }
@keyframes gl-timer { from { transform: scaleX(0); } to { transform: none; } }
.gantt-live[data-view="bus"] .gl-foot[data-view="coach"], .gantt-live[data-view="coach"] .gl-foot[data-view="bus"] { display: none; }
.gl-coach .gantt-row { grid-template-columns: 54px 1fr; }
.gl-coach .trip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; justify-content: flex-start; }
.gl-coach .trip.dead { justify-content: center; }
.gl-pane.in { animation: none; }
@media (max-width: 520px) { .gantt-live .window-bar i { display: none; } .gantt-live .window-bar b { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .hw i, .hero h1 .hw i::after, .gl-switch button { transition: none; } .gantt-live.auto .window-bar::after { animation: none; content: none; } }

/* route lines: on Schedulo Coach's lines a magenta coach rides instead of the bus */
.route-bus.coach { background: #F20D78; color: #fff; box-shadow: 0 6px 18px rgba(242,13,120,.45); }
/* the home page's Schedulo Coach section */
.home-coach .steps.route { margin-bottom: 40px; }
.home-coach-features { margin-top: 8px; }
.home-coach-cta { margin-top: 32px; }

/* ---- Service status (status.html) ---- */
:root { --st-up: #14A35A; --st-slow: #E59A00; --st-down: #E5383B; --st-none: #D5DBEE; }
[data-theme="dark"] { --st-up: #2ECC71; --st-slow: #FFB020; --st-down: #FF5A5F; --st-none: #26386E; }
.st-overall { display: flex; align-items: center; gap: 16px; margin-top: 34px; max-width: 760px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.st-overall strong { display: block; font-size: 1.15rem; color: #fff; }
.st-overall small { display: block; color: #C9D2EC; font-size: .88rem; margin-top: 2px; }
.st-overall > div { flex: 1; min-width: 0; }
.st-overall-dot { flex: none; width: 18px; height: 18px; border-radius: 999px; background: #8A96B8; box-shadow: 0 0 0 6px rgba(138,150,184,.18); }
.st-overall[data-state="up"] .st-overall-dot { background: #2ECC71; box-shadow: 0 0 0 6px rgba(46,204,113,.2); animation: st-pulse 2.4s ease-out infinite; }
.st-overall[data-state="slow"] .st-overall-dot { background: #FFB020; box-shadow: 0 0 0 6px rgba(255,176,32,.2); }
.st-overall[data-state="partial"] .st-overall-dot, .st-overall[data-state="down"] .st-overall-dot { background: #FF5A5F; box-shadow: 0 0 0 6px rgba(255,90,95,.22); }
.st-refresh { flex: none; }
.st-refresh::after, .st-refresh::before { content: none; display: none; }
.st-refresh:disabled { opacity: .6; cursor: progress; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.45); } 70% { box-shadow: 0 0 0 12px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }

.st-section { padding: 72px 0; }
.st-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 28px; color: var(--muted); font-size: .85rem; font-weight: 600; }
.st-key span { display: inline-flex; align-items: center; gap: 8px; }
.st-key i { width: 12px; height: 12px; border-radius: 3px; background: var(--st-none); }
.st-key .k-up { background: var(--st-up); } .st-key .k-slow { background: var(--st-slow); } .st-key .k-down { background: var(--st-down); }
.st-group + .st-group { margin-top: 40px; }
.st-group-name { font-size: 1.15rem; margin: 0 0 14px; }
.st-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.st-svc { padding: 20px 24px; max-width: none; }
.st-svc + .st-svc { border-top: 1px solid var(--line); }
.st-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; }
.st-ico { width: 40px; height: 40px; border-radius: 22%; }
.st-name { min-width: 0; }
.st-name strong { display: block; line-height: 1.25; }
.st-name small { display: block; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.st-about { margin: 10px 0 14px; color: var(--muted); font-size: .9rem; }
.st-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.st-pill i { width: 9px; height: 9px; border-radius: 999px; background: var(--st-none); }
.st-svc[data-state="up"] .st-pill { color: #11713F; background: #E3F6EC; border-color: transparent; }
.st-svc[data-state="slow"] .st-pill { color: #8A5A00; background: #FFF3D6; border-color: transparent; }
.st-svc[data-state="down"] .st-pill { color: #B0181C; background: #FDE4E4; border-color: transparent; }
.st-svc[data-state="up"] .st-pill i { background: var(--st-up); }
.st-svc[data-state="slow"] .st-pill i { background: var(--st-slow); }
.st-svc[data-state="down"] .st-pill i { background: var(--st-down); }
[data-theme="dark"] .st-svc[data-state="up"] .st-pill { color: #7BE0A6; background: rgba(46,204,113,.14); }
[data-theme="dark"] .st-svc[data-state="slow"] .st-pill { color: #FFCB6B; background: rgba(255,176,32,.14); }
[data-theme="dark"] .st-svc[data-state="down"] .st-pill { color: #FF9A9D; background: rgba(255,90,95,.16); }
.st-bars { display: flex; gap: 2px; height: 34px; }
.st-bars i { flex: 1; min-width: 0; border-radius: 2px; background: var(--st-none); transition: transform .15s; }
.st-bars i:hover { transform: scaleY(1.12); }
.st-bars .b-up { background: var(--st-up); } .st-bars .b-slow { background: var(--st-slow); } .st-bars .b-down { background: var(--st-down); }
.st-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .78rem; color: var(--faint); }
.st-scale [data-uptime] { font-weight: 700; color: var(--text); }
[data-theme="dark"] .st-scale { color: var(--muted); }
.st-note { margin: 32px 0 0; max-width: 760px; color: var(--muted); font-size: .92rem; }
.st-incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 860px; }
.st-incidents li { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.st-incidents .st-none { color: var(--muted); }
.st-inc p { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.st-inc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.st-inc-tag { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #11713F; background: #E3F6EC; }
.st-inc.open { border-left: 4px solid var(--st-down); }
.st-inc.open .st-inc-tag { color: #B0181C; background: #FDE4E4; }
[data-theme="dark"] .st-inc-tag { color: #7BE0A6; background: rgba(46,204,113,.14); }
[data-theme="dark"] .st-inc.open .st-inc-tag { color: #FF9A9D; background: rgba(255,90,95,.16); }
@media (max-width: 700px) {
  .st-section { padding: 56px 0; }
  .st-overall { flex-wrap: wrap; }
  .st-refresh { width: 100%; }
  .st-svc { padding: 18px 16px; }
  .st-head { grid-template-columns: 36px 1fr; }
  .st-ico { width: 36px; height: 36px; }
  .st-pill { grid-column: 1 / -1; justify-self: start; }
  .st-bars[data-count="some"] { gap: 1px; }
  .st-bars[data-count="many"] { gap: 0; }
  .st-bars[data-count="many"] i { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .st-overall[data-state="up"] .st-overall-dot { animation: none; } .st-bars i { transition: none; } }
/* notices posted by Schedulo (CMS, Service status): incidents and maintenance */
:root { --st-maint: #1E4BFF; }
[data-theme="dark"] { --st-maint: #7FA4FF; }
.st-key .k-maint { background: var(--st-maint); }
.st-svc[data-state="maintenance"] .st-pill { color: #1535C2; background: #EEF2FF; border-color: transparent; }
.st-svc[data-state="maintenance"] .st-pill i { background: var(--st-maint); }
[data-theme="dark"] .st-svc[data-state="maintenance"] .st-pill { color: #BFD0FF; background: rgba(127,164,255,.16); }
.st-notices { display: grid; gap: 14px; margin-bottom: 36px; }
.st-notices[hidden] { display: none; }
.st-notice { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--st-slow); border-radius: 16px; box-shadow: var(--shadow); }
.st-notice.k-incident.active { border-left-color: var(--st-down); }
.st-notice.k-maintenance { border-left-color: var(--st-maint); }
.st-incidents .st-notice { box-shadow: none; border-left-width: 1px; padding: 16px 20px; }
.st-incidents .st-notice h3 { font-size: 1rem; }
.st-notice-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.st-notice-kind { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.st-notice h3 { margin: 8px 0 4px; font-size: 1.15rem; }
.st-notice-meta { margin: 0; color: var(--muted); font-size: .86rem; }
.st-notice-body { margin: 10px 0 0; white-space: pre-line; }
.st-notice-body b, .st-notice-more b { font-weight: 700; }
.st-notice-more { margin-top: 10px; font-size: .92rem; }
.st-notice-more summary { cursor: pointer; color: var(--accent-text); font-weight: 600; }
.st-notice-more ol { margin: 10px 0 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; white-space: pre-line; }
.st-inc-tag.s-investigating { color: #B0181C; background: #FDE4E4; }
.st-inc-tag.s-identified, .st-inc-tag.s-monitoring, .st-inc-tag.s-in_progress { color: #8A5A00; background: #FFF3D6; }
.st-inc-tag.s-scheduled { color: #1535C2; background: #EEF2FF; }
[data-theme="dark"] .st-inc-tag.s-investigating { color: #FF9A9D; background: rgba(255,90,95,.16); }
[data-theme="dark"] .st-inc-tag.s-identified, [data-theme="dark"] .st-inc-tag.s-monitoring, [data-theme="dark"] .st-inc-tag.s-in_progress { color: #FFCB6B; background: rgba(255,176,32,.14); }
[data-theme="dark"] .st-inc-tag.s-scheduled { color: #BFD0FF; background: rgba(127,164,255,.16); }
@media (max-width: 700px) { .st-notice { padding: 16px; } }
/* the time range slider (status.html), drawn as a Schedulo route line: a stop for each range,
   and the bus drives along the line to the one you pick; the line is lit up to the bus */
.st-toolbar { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.st-toolbar-label { padding-top: 40px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.st-range { --n: 7; --i: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); flex: 1; max-width: 820px; padding-top: 44px; }
.st-range::before, .st-range-line { content: ""; position: absolute; top: 13px; height: 8px; border-radius: 8px; left: calc(50% / var(--n)); }
.st-range::before { right: calc(50% / var(--n)); background: var(--light); }
.st-range-line { width: calc(var(--i) * 100% / var(--n)); background: linear-gradient(90deg, var(--cyan), var(--electric) 60%, var(--bright)); transition: width .6s cubic-bezier(.3,.7,.2,1); }
.st-range-bus.route-bus { top: 0; left: calc((var(--i) + .5) * 100% / var(--n) - 17px); animation: none; transition: left .6s cubic-bezier(.3,.7,.2,1); }
.st-range label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px 0; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; text-align: center; transition: color .2s; }
.st-range .st-stop { position: absolute; left: 50%; top: -40px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--navy); box-shadow: 0 0 0 2px var(--bg); transition: border-color .2s, transform .2s; }
.st-range label:hover { color: var(--text); }
.st-range label:hover .st-stop { transform: scale(1.15); }
.st-range input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-range label:has(input:checked) { color: var(--accent-text); font-weight: 700; }
.st-range label:has(input:checked) .st-stop { opacity: 0; }
.st-range label:has(input:focus-visible) span { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
.st-r-short { display: none; }
[data-theme="dark"] .st-range::before { background: #1A2E66; }
[data-theme="dark"] .st-range .st-stop { border-color: #3F7BFF; background: #E8EDFB; }
.st-section.st-loading .st-bars { opacity: .45; transition: opacity .2s; }
@media (max-width: 700px) {
  .st-toolbar-label { display: none; }
  .st-range label { font-size: .76rem; padding: 4px 0 0; }
  .st-range .st-stop { width: 14px; height: 14px; margin-left: -7px; top: -38px; border-width: 3px; }
  .st-range-bus.route-bus { width: 28px; height: 28px; left: calc((var(--i) + .5) * 100% / var(--n) - 14px); top: 3px; border-radius: 8px; }
  .st-range-bus.route-bus svg { width: 16px; height: 16px; }
  .st-r-long { display: none; }
  .st-r-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .st-range-line, .st-range-bus.route-bus { transition: none; } }