/* Real Tech brand layer on top of the NioLand template (style.css).
   Keep this small: only what the template doesn't already provide. */

:root {
  --rt-green: #1f8505;
  --rt-green-dark: #176303;
  --rt-green-50: #f1f9ee;
  --rt-green-100: #e0f1d9;
  --rt-ink: #0f172a;
  --rt-muted: #475569;
  --bs-primary: #1f8505;
  --bs-primary-rgb: 31, 133, 5;
  --bs-link-color: #1f8505;
  --bs-link-color-rgb: 31, 133, 5;
  --bs-link-hover-color: #176303;
  --bs-link-hover-color-rgb: 23, 99, 3;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rt-green);
  --bs-btn-border-color: var(--rt-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rt-green-dark);
  --bs-btn-hover-border-color: var(--rt-green-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rt-green-dark);
  --bs-btn-active-border-color: var(--rt-green-dark);
  --bs-btn-disabled-bg: var(--rt-green);
  --bs-btn-disabled-border-color: var(--rt-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--rt-green);
  --bs-btn-border-color: var(--rt-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rt-green);
  --bs-btn-hover-border-color: var(--rt-green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rt-green-dark);
}
.btn-white { --bs-btn-color: var(--rt-green-dark); }
.text-primary { color: var(--rt-green) !important; }
.bg-brand-soft { background: var(--rt-green-50); }

/* accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: 8px 16px; }
.skip-link:focus { left: 16px; top: 16px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rt-green); outline-offset: 2px;
}

/* header */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { width: 48px; height: 48px; }
.brand-name { font-weight: 700; font-size: 1.25rem; color: var(--rt-ink); letter-spacing: -0.01em; }
.nk-nav-link.active .nk-nav-text, .nk-nav-link:hover .nk-nav-text { color: var(--rt-green); }
.header-login { color: var(--rt-ink); font-weight: 600; }
.nav-mobile-actions { display: grid; gap: 10px; padding: 16px 20px; }

/* sections */
.page-hero { padding-top: 140px; padding-bottom: 64px; }
@media (min-width: 992px) { .page-hero { padding-top: 180px; padding-bottom: 88px; } }
.nk-section-subtitle { color: var(--rt-green) !important; }
.lead-text { font-size: 1.125rem; color: var(--rt-muted); }
.section-pad { padding: 72px 0; }
@media (min-width: 992px) { .section-pad { padding: 104px 0; } }
.anchor-offset { scroll-margin-top: 100px; }

/* feature cards and icons */
.feature-icon {
  width: 56px; height: 56px; border-radius: 14px; flex: 0 0 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rt-green-100); color: var(--rt-green); font-size: 28px;
}
.feature-card { height: 100%; border: 1px solid #e5ece2; border-radius: 16px; padding: 28px; background: #fff; }
.feature-card h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.feature-card p { margin: 0; color: var(--rt-muted); }
.feature-card .more { display: inline-block; margin-top: 14px; font-weight: 600; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 32px; color: var(--rt-muted); }
.check-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rt-green-100); color: var(--rt-green); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.check-list strong { color: var(--rt-ink); }

/* feature illustrations (html/images/illustrations/*.svg) */
.illus { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 60px -32px rgba(15, 23, 42, .45); }

/* FAQ uses native <details> */
.faq details { border: 1px solid #e5ece2; border-radius: 14px; background: #fff; padding: 0 22px; margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font-weight: 600; color: var(--rt-ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 1.4rem; line-height: 1.2; color: var(--rt-green); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
/* smooth open/close where the browser supports animating <details> */
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq-grid { display: grid; gap: 0 24px; align-items: start; }
@media (min-width: 992px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
.faq details p { color: var(--rt-muted); padding-bottom: 18px; margin: 0; }

/* people */
.avatar-photo { display: block; width: 160px; height: 160px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--rt-green-100), 0 16px 32px -16px rgba(15, 23, 42, .4); }
.info-table th { width: 40%; color: var(--rt-muted); font-weight: 500; }
.info-table td, .info-table th { padding: 10px 0; border-bottom: 1px solid #e5ece2; vertical-align: top; }

/* CTA band */
.cta-band { background: var(--rt-green); color: #fff; border-radius: 24px; padding: 48px 28px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #e8f5e3; }

/* contact form */
.enquiry-form .form-label { font-weight: 600; color: var(--rt-ink); }
.enquiry-form .form-control, .enquiry-form .form-select { min-height: 48px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; border-radius: 12px; padding: 14px 18px; margin-top: 16px; }
.form-status.is-success { display: block; background: var(--rt-green-50); color: var(--rt-green-dark); border: 1px solid #c9e6bf; }
.form-status.is-error { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.map-frame { width: 100%; height: 320px; border: 0; border-radius: 16px; }

/* legal pages */
.legal h2 { font-size: 1.3rem; margin-top: 36px; }
.legal p, .legal li { color: var(--rt-muted); }
.legal ul { padding-left: 1.2rem; }

/* footer */
.nk-footer-top { padding: 64px 0 40px; }
.footer-about { color: var(--rt-muted); margin: 14px 0 18px; max-width: 360px; }
.footer-title { font-size: 1rem; margin-bottom: 14px; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a, .footer-contact a { color: var(--rt-muted); }
.footer-links a:hover, .footer-contact a:hover { color: var(--rt-green); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--rt-muted); }
.footer-contact .icon { color: var(--rt-green); margin-top: 4px; }
.footer-legal { font-size: .85rem; color: var(--rt-muted); margin: 0; padding: 18px 0; text-align: center; }
.scroll-top { background: var(--rt-green); }

/* The template hard-codes its blue with !important and Title-Cases buttons
   and headings; undo both. */
.btn-primary { background-color: var(--rt-green) !important; border-color: var(--rt-green) !important; }
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active { background-color: var(--rt-green-dark) !important; border-color: var(--rt-green-dark) !important; }
.btn-outline-primary { color: var(--rt-green) !important; border-color: var(--rt-green) !important; background-color: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { color: #fff !important; background-color: var(--rt-green) !important; }
.btn, .nk-section-title, .nk-block-title { text-transform: none; }

/* contrast: small green labels need the darker green on pale backgrounds */
.nk-section-subtitle { color: var(--rt-green-dark) !important; }
p a:not(.btn), .legal a, td a { text-decoration: underline; text-underline-offset: 2px; }
.btn-outline-primary { color: var(--rt-green-dark) !important; border-color: var(--rt-green-dark) !important; }
.cta-band p { color: #fff; }
.feature-card h2 { font-size: 1.2rem; margin: 18px 0 8px; }

/* ------------------------------------------------------------------
   "One shift, start to finish" (2026-10-29): the shift clock, the
   scroll-drawn route spine (.stop sections, driven by site.js), the
   comparison table and the frosted header.
   ------------------------------------------------------------------ */
:root { --rt-ink-2: #1e293b; --rt-night: #8fd877; --rt-sos: #dc2626; --rt-track: #e5ece2; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero-title { font-size: clamp(2.4rem, 1.3rem + 3.3vw, 3.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--rt-ink); }
.btn-primary, .btn-white { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.btn-primary:hover, .btn-white:hover { transform: translateY(-1px); }

/* the template adds .has-fixed once the page scrolls */
.nk-header-main.has-fixed {
  background-color: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 #e5ece2 !important;
}

/* shift clock: stops on a line that fills once on page load */
.clock-band { background: #fff; border-bottom: 1px solid var(--rt-track); padding: 36px 0; }
.shift-clock { --n: 5; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.shift-clock::before, .shift-clock::after {
  content: ""; position: absolute; top: 11px; height: 4px; border-radius: 4px;
  left: calc(50% / var(--n)); right: calc(50% / var(--n)); background: var(--rt-track);
}
.shift-clock::after { background: var(--rt-green); transform-origin: left center; animation: clock-fill 1.6s .3s cubic-bezier(.4, 0, .2, 1) both; }
.shift-clock li { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 4px; }
.shift-clock .dot {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--rt-track); margin-bottom: 8px;
  animation: clock-dot .45s both; animation-delay: calc(.3s + var(--i, 0) * .38s);
}
.shift-clock .is-sos .dot { animation-name: clock-dot-sos; }
.shift-clock .time { font-weight: 700; font-size: .9rem; color: var(--rt-green-dark); font-variant-numeric: tabular-nums; }
.shift-clock .is-sos .time { color: #b91c1c; }
.shift-clock .caption { font-weight: 600; color: var(--rt-ink); line-height: 1.3; }
@keyframes clock-fill { from { transform: scaleX(0); } }
@keyframes clock-dot { to { border-color: var(--rt-green); background: var(--rt-green); box-shadow: 0 0 0 5px var(--rt-green-100); } }
@keyframes clock-dot-sos { to { border-color: var(--rt-sos); background: var(--rt-sos); box-shadow: 0 0 0 5px #fee2e2; } }
@media (max-width: 767.98px) {
  .shift-clock { grid-template-columns: 1fr; gap: 18px; }
  .shift-clock::before, .shift-clock::after { top: 13px; bottom: 13px; left: 11px; right: auto; width: 4px; height: auto; }
  .shift-clock::after { transform-origin: center top; animation-name: clock-fill-down; }
  .shift-clock li { grid-template-columns: 26px 1fr; justify-items: start; align-items: center; text-align: left; gap: 0 14px; }
  .shift-clock .dot { grid-row: 1 / 3; margin: 0; }
}
@keyframes clock-fill-down { from { transform: scaleY(0); } }

/* route spine: each .stop draws its own piece of one continuous line */
.stop { --pad: 88px; --line: var(--rt-track); --fill: var(--rt-green); --dot-bg: #fff; position: relative; padding: var(--pad) 0; background: #fff; }
.stop.bg-brand-soft { --dot-bg: var(--rt-green-50); background: var(--rt-green-50); }
.stop-night { --line: #22304a; --fill: var(--rt-night); --dot-bg: var(--rt-ink); background: var(--rt-ink); color: #cbd5e1; }
.stop-night.stop-deep { --line: #334155; --dot-bg: var(--rt-ink-2); background: var(--rt-ink-2); }
.stop-wrap { position: relative; }
.stop-line { position: absolute; top: calc(-1 * var(--pad)); bottom: calc(-1 * var(--pad)); left: 50%; width: 6px; margin-left: -3px; background: var(--line); }
.stop-fill { display: block; width: 100%; height: 100%; background: var(--fill); }
.js-journey .stop-fill { height: 0; }
.stop-grid { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; }
.stop-text { grid-column: 1; grid-row: 1; justify-self: end; max-width: 520px; }
.stop-marker { grid-column: 2; grid-row: 1; justify-self: center; }
.stop-media { grid-column: 3; grid-row: 1; justify-self: start; width: 100%; max-width: 420px; }
.stop-flip .stop-text { grid-column: 3; justify-self: start; }
.stop-flip .stop-media { grid-column: 1; justify-self: end; }
.stop-dot { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; border: 6px solid var(--fill); background: var(--fill); }
.js-journey .stop:not(.is-reached) .stop-dot { background: var(--dot-bg); }
.js-journey .stop.is-reached .stop-dot { animation: dot-pop .5s ease-out; }
.stop-sos .stop-dot { border-color: var(--rt-sos); background: var(--rt-sos); }
.stop-sos.is-reached .stop-dot::after, html:not(.js-journey) .stop-sos .stop-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rt-sos); animation: sos-ring 2.4s ease-out infinite;
}
@keyframes dot-pop { 40% { transform: scale(1.3); } }
@keyframes sos-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }

.stop-time { display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--rt-green-100); color: var(--rt-green-dark); }
.stop-night .stop-time { background: rgba(143, 216, 119, .12); color: var(--rt-night); }
.stop-sos .stop-time { background: rgba(220, 38, 38, .16); color: #fca5a5; }
.stop-text :is(h2, h3) { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--rt-ink); margin-bottom: 14px; }
.stop-text > p { font-size: 1.075rem; color: var(--rt-muted); margin-bottom: 0; }
.stop-night .stop-text :is(h2, h3) { color: #fff; }
.stop-night .stop-text > p { color: #cbd5e1; }
.stop-text .more { display: inline-block; margin-top: 18px; font-weight: 600; }
.bg-brand-soft .more { color: var(--rt-green-dark); }
.stop-night .more { color: var(--rt-night); }

/* the cab that rides the line (created by site.js) */
.journey-cab { position: fixed; top: 0; left: 0; z-index: 20; width: 22px; height: 38px; pointer-events: none; opacity: 0; transition: opacity .25s ease; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .3)); }
.journey-cab.is-on { opacity: 1; }

@media (max-width: 991.98px) {
  .stop { --pad: 64px; }
  .stop-line { left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 19px); margin-left: 0; }
  .stop-grid { grid-template-columns: 44px 1fr; align-items: start; column-gap: 16px; }
  .stop-marker, .stop-flip .stop-marker { grid-column: 1; grid-row: 1; padding-top: 2px; }
  .stop-text, .stop-flip .stop-text { grid-column: 2; grid-row: 1; justify-self: start; max-width: none; }
  .stop-media, .stop-flip .stop-media { grid-column: 2; grid-row: 2; margin-top: 28px; justify-self: start; }
}

/* who does what */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { padding: 16px 12px; border-bottom: 1px solid var(--rt-track); vertical-align: middle; }
.compare-table tbody th { font-weight: 600; color: var(--rt-ink); text-align: left; width: 40%; }
.compare-table td { text-align: center; }
.compare-table td:nth-child(3) { background: #f6fbf4; }
.compare-2 tbody th { width: 46%; }
.cell-text { font-weight: 600; font-size: .9rem; color: var(--rt-ink); }
.compare-table tbody tr:hover th, .compare-table tbody tr:hover td { background: var(--rt-green-50); }
.compare-table thead th { border-bottom: 0; padding: 0 6px 12px; vertical-align: bottom; }
.plan { display: block; border: 1px solid transparent; border-radius: 16px; padding: 18px 12px; text-align: center; }
.plan-name { display: block; font-weight: 700; font-size: 1.1rem; }
.plan-sub { display: block; font-size: .85rem; font-weight: 500; margin-top: 4px; }
.plan-1 { background: var(--rt-green-50); color: var(--rt-ink); border-color: #d6e8cf; }
.plan-1 .plan-sub { color: var(--rt-muted); }
.plan-2 { background: var(--rt-green); color: #fff; }
.plan-3 { background: var(--rt-ink); color: #fff; }
.plan-2 .plan-sub, .plan-3 .plan-sub { color: rgba(255, 255, 255, .82); }
.tick, .dash { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; }
.tick { background: var(--rt-green-100); }
.tick::before { content: ""; width: 11px; height: 6px; border: solid var(--rt-green-dark); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.dash::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: #cbd5e1; }
.compare-note { margin-top: 24px; padding: 18px 22px; border-radius: 16px; background: var(--rt-green-50); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.compare-note p { margin: 0; font-weight: 600; color: var(--rt-ink); }
@media (max-width: 575.98px) {
  .compare-table th, .compare-table td { padding: 12px 4px; }
  .compare-table tbody th { font-size: .9rem; }
  .plan { padding: 12px 4px; border-radius: 12px; min-height: 64px; display: flex; align-items: center; justify-content: center; }
  .plan-name { font-size: .8rem; }
  .plan-sub { display: none; }
}

/* ------------------------------------------------------------------
   One signature layout per page (2026-10-30), so pages don't repeat:
   Home = route spine with live event cards, Platform = feature explorer,
   Safety = night checkpoints and a report sheet. Each illustration is
   used on one page only.
   ------------------------------------------------------------------ */

/* Home: a made-up example of what Real Tech shows at each stop */
.event-card { background: #fff; color: var(--rt-ink); border-radius: 20px; padding: 18px 20px; box-shadow: 0 24px 60px -30px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .05); }
.stop-night .event-card { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.ev-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rt-track); }
.ev-head strong { font-size: 1.05rem; }
.ev-icon { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--rt-green-100); color: var(--rt-green); font-size: 20px; }
.ev-live::after { content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--rt-green); border: 2px solid #fff; animation: live-ping 1.8s ease-out infinite; }
.ev-time { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--rt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-rows { list-style: none; margin: 0; padding: 4px 0; }
.ev-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: .92rem; }
.ev-rows li + li { border-top: 1px dashed var(--rt-track); }
.ev-rows span { color: var(--rt-muted); font-weight: 500; white-space: nowrap; }
.ev-rows i { flex: 1; height: 6px; border-radius: 6px; background: var(--rt-track) linear-gradient(var(--rt-green), var(--rt-green)) no-repeat; background-size: calc(var(--f, 0) * 100%) 100%; }
.ev-rows b { margin-left: auto; font-weight: 700; white-space: nowrap; }
.ev-rows i + b { margin-left: 0; }
.ev-ok, .ev-wait { padding: 2px 10px; border-radius: 999px; font-size: .8rem; }
.ev-ok { background: var(--rt-green-100); color: var(--rt-green-dark); }
.ev-wait { background: #fef3c7; color: #92400e; }
.ev-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 11px 14px; border-radius: 12px; background: var(--rt-green-50); color: var(--rt-green-dark); font-weight: 600; font-size: .9rem; }
.ev-sos .ev-icon { background: #fee2e2; color: var(--rt-sos); }
.ev-sos .ev-icon::after { content: ""; position: absolute; inset: -4px; border-radius: 14px; border: 2px solid var(--rt-sos); animation: sos-ring 2.4s ease-out infinite; }
.ev-sos .ev-foot { background: #fef2f2; color: #b91c1c; }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(31, 133, 5, .5); } 100% { box-shadow: 0 0 0 10px rgba(31, 133, 5, 0); } }
/* the card appears when the cab reaches its stop */
.event-card, .ev-rows li { transition: opacity .5s ease, transform .5s ease; }
.ev-rows i { transition: background-size .9s ease .35s; }
.ev-rows li:nth-child(2) { transition-delay: .12s; }
.ev-rows li:nth-child(3) { transition-delay: .24s; }
.ev-rows li:nth-child(4) { transition-delay: .36s; }
.js-journey .stop:not(.is-reached) .event-card { opacity: 0; transform: translateY(24px) scale(.98); }
.js-journey .stop:not(.is-reached) .ev-rows li { opacity: 0; transform: translateX(-10px); }
.js-journey .stop:not(.is-reached) .ev-rows i { background-size: 0 100%; }

/* Home: the four apps as one connected panel */
.app-strip { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rt-track); border: 1px solid var(--rt-track); border-radius: 24px; overflow: hidden; }
.app-strip li { background: #fff; padding: 32px 28px; }
.app-strip h3 { font-size: 1.15rem; margin: 18px 0 6px; }
.app-strip p { margin: 0; color: var(--rt-muted); font-size: .95rem; }
/* the tiles stay white while their contents rise in, so the grey dividers never show through */
.js-reveal .app-strip:not(.is-in) > li { opacity: 1; transform: none; }
.app-strip > li > * { transition: opacity .6s ease, transform .6s ease; transition-delay: inherit; }
.js-reveal .app-strip:not(.is-in) > li > * { opacity: 0; transform: translateY(14px); }
@media (max-width: 991.98px) { .app-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .app-strip { grid-template-columns: 1fr; } }

/* Home: the two ways to work with us. The client's team runs Real Tech in both;
   "Software + Fleet" adds our vehicles and drivers. */
.offer-pair { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.offer-pair > li { display: flex; flex-direction: column; border-radius: 24px; padding: 32px; }
.offer-1 { background: var(--rt-green-50); border: 1px solid #d6e8cf; }
.offer-2 { background: var(--rt-ink); color: #cbd5e1; }
.offer-name { align-self: flex-start; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem; background: var(--rt-green); color: #fff; }
.offer-2 .offer-name { background: var(--rt-night); color: var(--rt-ink); }
.offer-pair h3 { font-size: 1.35rem; line-height: 1.3; margin: 20px 0 10px; }
.offer-2 h3 { color: #fff; }
.offer-pair p { color: var(--rt-muted); margin: 0 0 24px; }
.offer-2 p { color: #cbd5e1; }
.offer-parts { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; }
.offer-parts li { position: relative; padding: 8px 14px; border-radius: 12px; font-weight: 600; font-size: .9rem; background: #fff; color: var(--rt-ink); border: 1px solid #d6e8cf; }
.offer-2 .offer-parts li { background: rgba(255, 255, 255, .06); color: #fff; border-color: #334155; }
.offer-parts li + li::before { content: "+"; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; font-weight: 700; color: var(--rt-night); }
@media (max-width: 767.98px) { .offer-pair { grid-template-columns: 1fr; } .offer-pair > li { padding: 26px 22px; } }

/* Platform: text scrolls on the left, the matching picture stays beside it */
.explorer-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 700; font-size: .9rem; color: var(--rt-green-dark); }
.explorer-kicker span { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; background: var(--rt-green-100); color: var(--rt-green-dark); font-size: .85rem; transition: background-color .3s ease, color .3s ease; }
.explorer-step.is-active .explorer-kicker span { background: var(--rt-green); color: #fff; }
.explorer-step h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; }
.explorer-step > p { font-size: 1.075rem; color: var(--rt-muted); }
.explorer-step .check-list { margin-top: 20px; }
.explorer-step .more { display: inline-block; margin-top: 18px; font-weight: 600; }
.explorer-step + .explorer-step { margin-top: 80px; }
.explorer-img { margin-top: 32px; }
.explorer-media { display: none; }
@media (min-width: 992px) {
  .js-explorer { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
  .js-explorer .explorer-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; margin: 0; }
  .js-explorer .explorer-step .explorer-img { display: none; }
  .js-explorer .explorer-media { display: grid; position: sticky; top: max(110px, calc(50vh - 250px)); }
  .explorer-media img { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s ease, transform .6s ease; }
  .explorer-media img.is-active { opacity: 1; transform: none; }
}

/* Platform: setup as four connected steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.steps::before { content: ""; position: absolute; top: 22px; left: 23px; right: calc(25% - 47px); height: 2px; background: repeating-linear-gradient(90deg, var(--rt-green) 0 8px, transparent 8px 16px); transition: clip-path 1.2s ease .2s; clip-path: inset(0 0 0 0); }
.steps li { counter-increment: step; position: relative; }
.steps li::before { content: counter(step); position: relative; display: flex; width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--rt-green); color: #fff; font-weight: 700; box-shadow: 0 0 0 6px #fff; }
.steps h3 { font-size: 1.1rem; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--rt-muted); font-size: .95rem; }
.js-reveal .steps:not(.is-in)::before { clip-path: inset(0 100% 0 0); }
@media (max-width: 991.98px) { .steps { grid-template-columns: 1fr 1fr; } .steps::before { display: none; } }
@media (max-width: 575.98px) { .steps { grid-template-columns: 1fr; } }

/* Safety: the night hero runs into three checkpoints */
.hero-night { background: var(--rt-ink) radial-gradient(ellipse at 50% -20%, rgba(143, 216, 119, .16), transparent 60%); }
.hero-night .hero-title { color: #fff; }
.hero-night .lead-text { color: #cbd5e1; }
.hero-night .nk-section-subtitle { color: var(--rt-night) !important; }
.checkpoints-section { background: var(--rt-ink); padding: 16px 0 104px; color: #cbd5e1; }
.checkpoints { --gap: 32px; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px var(--gap); position: relative; }
.checkpoints::before, .checkpoints::after { content: ""; position: absolute; top: 21px; left: 23px; right: calc((100% - 2 * var(--gap)) / 3 - 23px); height: 4px; border-radius: 4px; background: #22304a; }
.checkpoints::after { background: linear-gradient(90deg, var(--rt-night) 70%, var(--rt-sos)); transform-origin: left; transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .2s; }
.js-reveal .checkpoints:not(.is-in)::after { transform: scaleX(0); }
.checkpoints li { position: relative; z-index: 1; }
.cp-badge { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; vertical-align: middle; background: var(--rt-night); color: var(--rt-ink); font-weight: 800; box-shadow: 0 0 0 6px var(--rt-ink); position: relative; }
.cp-sos .cp-badge { background: var(--rt-sos); color: #fff; }
.cp-sos .cp-badge::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rt-sos); animation: sos-ring 2.4s ease-out infinite; }
.cp-when { margin-left: 10px; padding: 5px 14px; border: 1px solid #334155; border-radius: 999px; background: var(--rt-ink); vertical-align: middle; font-weight: 700; color: var(--rt-night); }
.cp-sos .cp-when { color: #fca5a5; }
.checkpoints .illus { margin: 28px 0; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); }
.checkpoints h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; color: #fff; margin-bottom: 12px; }
.checkpoints p { color: #cbd5e1; }
.checkpoints .check-list li { color: #cbd5e1; }
.checkpoints .check-list strong { color: #fff; }
.checkpoints .check-list li::before { background: rgba(143, 216, 119, .15); color: var(--rt-night); }
@media (max-width: 991.98px) { .checkpoints { grid-template-columns: 1fr; } .checkpoints::before, .checkpoints::after { display: none; } }

/* Safety: the after-trip records as one report */
.report-sheet { max-width: 960px; margin: 48px auto 0; background: #fff; border: 1px solid var(--rt-track); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -32px rgba(15, 23, 42, .35); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .report-sheet:not(.is-in) { opacity: 0; transform: translateY(24px); }
.report-sheet-head { display: flex; align-items: center; gap: 8px; padding: 14px 22px; background: var(--rt-ink); color: #fff; }
.report-sheet-head span { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.report-sheet-head strong { margin-left: 10px; font-size: .95rem; }
.report-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rt-track); }
.report-sheet li { display: flex; gap: 16px; align-items: flex-start; padding: 26px 24px; background: #fff; }
.report-sheet h3 { font-size: 1.1rem; margin: 4px 0 6px; }
.report-sheet p { margin: 0; color: var(--rt-muted); }
@media (max-width: 767.98px) { .report-sheet ul { grid-template-columns: 1fr; } }

/* lists marked .reveal rise in, one item after another, when scrolled into view (site.js) */
.reveal > li { transition: opacity .6s ease, transform .6s ease; }
.reveal > li:nth-child(2) { transition-delay: .12s; }
.reveal > li:nth-child(3) { transition-delay: .24s; }
.reveal > li:nth-child(4) { transition-delay: .36s; }
.js-reveal .reveal:not(.is-in) > li { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .shift-clock::after, .shift-clock .dot { animation: none; }
  .shift-clock .dot { border-color: var(--rt-green); background: var(--rt-green); }
  .shift-clock .is-sos .dot { border-color: var(--rt-sos); background: var(--rt-sos); }
  .stop-dot, .stop-dot::after, .ev-live::after, .ev-sos .ev-icon::after, .cp-sos .cp-badge::after { animation: none !important; }
  .explorer-media img { transition: none; }
  .faq details::details-content, .faq summary::after, .btn-primary, .btn-white { transition: none; }
  .btn-primary:hover, .btn-white:hover { transform: none; }
}