/* ============================================================
   UoP Bus — the site's colours, and the product page
   The icon's purple at night for the hero, a pale lilac paper for the rest
   (a deep night in Dark Mode). U1 in the icon's purple, U2 in the cyan of
   its "b". Support and Privacy link this file for the :root colours and the
   navbar's and footer's look; everything else here is the product page's,
   under body.product. The type, the feature blades, the phone and the
   download blade: /shared/components/product.css.
   ============================================================ */

:root{
  --night:#0c0716;
  --night-2:#160e24;
  --paper:#f6f4f9;
  --card:#fff;
  --card-line:#e7e2ef;
  --text-dark:#1b1622;
  --text-mid:#625b6d;
  --text-on-dark:#f4f1f8;
  --text-on-dark-mid:rgba(244,241,248,.72);

  --accent:#723f9c;            /* the icon */
  --accent-deep:#4e1a65;
  --u1:#723f9c; --u1-night:#c39af0;
  --u2:#0f7fb0; --u2-night:#45c3ee;
  --tag-u1:#723f9c; --tag-u2:#0e77a5;   /* the line tags: white text at 4.5:1 or more, in both themes */

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Helvetica Neue", "Segoe UI", Inter, Roboto, Arial, sans-serif;

  /* the shared navbar and footer (/shared/components/) in UoP Bus's look */
  --mk-nav-position:fixed;
  --mk-nav-bg:rgba(12,7,22,.66); --mk-nav-saturate:160%;
  --mk-nav-light-bg:rgba(246,244,249,.8); --mk-nav-light-fg:var(--text-dark);
  --mk-nav-mark-r:5px;
  --mk-accent:var(--accent); --mk-accent-deep:var(--accent-deep);
  --mk-footer-bg:var(--paper); --mk-footer-fg:var(--text-mid); --mk-footer-strong:var(--text-dark); --mk-footer-z:6;
  --mk-footer-muted:#6f6879;   /* the footer's small print at 4.5:1 on the paper */
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--night);
  color:var(--text-on-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Korean (ko/) breaks lines between words, never inside one, as Korean is set; the tight Latin tracking of
   the headlines is let out a little for Hangul */
:lang(ko){word-break:keep-all;overflow-wrap:break-word}
:lang(ko) :is(.h1,.h2,h1,h2,h3){letter-spacing:-.01em}
/* the reveals wait for the script (product.css hides them outright) */
html:not(.js) .reveal{opacity:1;transform:none}

/* ============================================================
   THE PRODUCT PAGE
   ============================================================ */
/* Dark Mode: the paper turns to night, for the page and its footer */
@media (prefers-color-scheme:dark){
  body.product{
    --paper:#0f0a19;
    --card:#191225;
    --card-line:#2b2238;
    --text-dark:#f4f1f8;
    --text-mid:rgba(244,241,248,.72);
    --accent:#c39af0;
    --u1:#9e6bd0; --u2:#1f9fd6;
    --mk-footer-bg:#0f0a19; --mk-footer-fg:rgba(244,241,248,.66); --mk-footer-strong:#f4f1f8;
    --mk-footer-muted:rgba(244,241,248,.5); --mk-footer-line:rgba(255,255,255,.1);
  }
}

.product .skip{
  position:absolute;left:var(--pad);top:-60px;z-index:20;padding:10px 16px;border-radius:12px;
  background:#fff;color:#1b1622;font-weight:600;
}
.product .skip:focus{top:calc(var(--nav-h) + 10px)}
.product :focus-visible{outline:3px solid var(--u1-night);outline-offset:3px;border-radius:6px}
.product .paper :focus-visible{outline-color:var(--accent)}

/* ---------- the hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 72% 62%, rgba(114,63,156,.42), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(69,195,238,.10), transparent 70%),
    var(--night);
  color:var(--text-on-dark);
  padding-top:calc(var(--nav-h) + clamp(28px,7vh,80px));
}
/* the U1 and U2 behind the phone, in a layer of their own so the phone can hang over the paper */
.map-layer{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.map{position:absolute;inset:0;width:100%;height:100%}
.map .route{fill:none;stroke-linecap:round;stroke-linejoin:round}
.map .route-glow{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.3;filter:blur(6px)}
.map .route-u1{stroke:var(--u1-night)}
.map .route-u2{stroke:var(--u2-night)}
.map.is-drawing .route,.map.is-drawing .route-glow{transition:stroke-dashoffset 2.2s var(--ease)}
.map .stop{fill:var(--night);stroke:#f4f1f8;stroke-width:1.6;opacity:0;transition:opacity .6s var(--ease)}
.map .stop-major{stroke-width:2.2}
.map .label{font-family:var(--font);font-size:12.5px;font-weight:600;fill:rgba(244,241,248,.72);paint-order:stroke;stroke:var(--night);stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity .6s var(--ease)}
.map .bus{opacity:0;transition:opacity .6s var(--ease)}
.map.is-drawn .stop,.map.is-drawn .bus{opacity:1}
.map.is-drawn .label{opacity:1}
.map .bus-halo{opacity:.35;transform-box:fill-box;transform-origin:center;animation:halo 2.2s ease-out infinite}
.map.is-paused .bus-halo{animation-play-state:paused}
.map .bus-dot{stroke:#fff;stroke-width:2}
.map .bus-u1 circle{fill:var(--u1-night)}
.map .bus-u2 circle{fill:var(--u2-night)}
@keyframes halo{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.3);opacity:0}}

.hero-inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:start;
}
.hero-copy{padding:clamp(8px,4vh,56px) 0 clamp(40px,8vh,96px)}
.product .eyebrow{
  margin:0 0 16px;font-size:15px;font-weight:650;letter-spacing:.01em;text-transform:none;color:var(--u1-night);
}
.hero .h1{font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.hero .hl{color:var(--u1-night)}
.hero .sub{margin:20px 0 0;max-width:34ch;font-size:clamp(17px,1.5vw,20px);color:var(--text-on-dark-mid)}

.get{display:flex;align-items:center;gap:22px;margin-top:30px}
.get .mk-store{flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
/* on a computer, the QR code to scan with an iPhone */
.qr{display:none;align-items:center;gap:14px}
.qr img{width:84px;height:84px;padding:7px;border-radius:12px;background:#fff;box-sizing:content-box}
.qr p{margin:0;max-width:16ch;font-size:13.5px;line-height:1.35;color:var(--text-on-dark-mid)}
@media (hover:hover) and (pointer:fine) and (min-width:900px){ .qr{display:flex} }
.facts{margin:16px 0 0;font-size:15px;font-weight:600;color:var(--text-on-dark)}

/* the app, hanging over the paper below (--hang: how far), which starts that much lower */
body.product{--hang:clamp(120px,18vh,190px)}
.hero-art{display:flex;justify-content:center;margin-bottom:calc(-1 * var(--hang))}
.hero-phone{width:min(330px,100%)}
.hero-phone::before{box-shadow:0 50px 100px rgba(0,0,0,.6), 0 0 80px rgba(114,63,156,.35)}
.device-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- the paper: everything after the hero ---------- */
.paper{
  position:relative;z-index:1;
  background:var(--paper);color:var(--text-dark);
  border-radius:40px 40px 0 0;margin-top:-40px;
  padding-top:calc(var(--hang) + clamp(36px,6vh,72px));
}
.paper .h2{color:var(--text-dark);text-wrap:balance}
.paper .hl{color:var(--accent)}
.paper .body{color:var(--text-mid);font-size:clamp(17px,1.45vw,19px)}
.paper .body a,.card a,.faq-a a{color:var(--accent);text-decoration:underline}
.product .kicker{color:var(--text-mid)}
.product .feature{padding-block:clamp(56px,9vh,110px)}
.product .feature:first-child{padding-top:clamp(20px,4vh,40px)}

/* two phones side by side, the second a step lower; never tilted */
.pair{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2vw,22px);width:100%}
.pair .device{flex:none;width:min(42vw,250px)}
.pair .device + .device{margin-top:48px}

/* ---------- the rest, as cards ---------- */
.more,.trust{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,110px) var(--pad)}
.more-head,.trust-head{text-align:center;margin-bottom:clamp(28px,4vh,44px)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.card{
  background:var(--card);border-radius:24px;padding:24px 24px 26px;
  box-shadow:0 0 0 1.5px var(--card-line) inset, 0 16px 40px rgba(40,20,70,.05);
}
.card svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.card svg .fill{fill:var(--accent);stroke:none}
.card h3{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:700;color:var(--text-dark)}
.card p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--text-mid)}

/* ---------- see it in use ---------- */
.watch{
  max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,110px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:center;
}
.qa{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:42ch}
.qa li{font-size:16.5px;line-height:1.4;color:var(--text-mid)}
.qa b{color:var(--text-dark);font-weight:650}
.watch-art{display:flex;justify-content:center}
.watch-video{
  display:block;width:min(100%,300px);height:auto;aspect-ratio:664/1440;
  border-radius:28px;background:#723d9a;box-shadow:0 34px 70px rgba(40,10,60,.28);
}

/* ---------- the lines: each a card of its stops in order ---------- */
.lines{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,110px) var(--pad);display:grid;gap:22px}
.lines-head{text-align:center;margin-bottom:clamp(10px,2vh,24px)}
.lines-head .body{margin-inline:auto;max-width:56ch}
.line-card{background:var(--card);border-radius:26px;padding:clamp(22px,3vw,34px);box-shadow:0 0 0 1.5px var(--card-line) inset, 0 16px 40px rgba(40,20,70,.05)}
.line-name{margin:0 0 18px;display:flex;align-items:center;gap:12px;font-size:clamp(17px,1.6vw,20px);font-weight:700;letter-spacing:-.015em;color:var(--text-dark)}
.line-tag{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 7px;
  border-radius:7px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#fff;
}
.line-more{margin:18px 0 0;font-size:15.5px;font-weight:600}
.line-more a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lines-head .body + .body{margin-top:12px}
.line-u1{background:var(--tag-u1)}
.line-u2{background:var(--tag-u2)}
/* each line as its diagram: the stops down a line in the route's colour, in columns */
.stops{
  --dot:var(--u1);
  list-style:none;margin:0;padding:0;columns:3 210px;column-gap:28px;
  font-size:15px;line-height:1.3;color:var(--text-dark);
}
#lineU2 .stops{--dot:var(--u2)}
.stops li{position:relative;break-inside:avoid;padding:6px 0 6px 26px}
.stops li::before{
  content:"";position:absolute;left:2px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  background:var(--card);box-shadow:0 0 0 3px var(--dot);z-index:1;
}
.stops li:not(:last-child)::after{
  content:"";position:absolute;left:6px;top:50%;width:3px;height:100%;background:var(--dot);opacity:.45;
}
.stops .stops-back{color:var(--text-mid);font-style:italic}
.stops .stops-back::before{background:var(--dot);box-shadow:none;width:7px;height:7px;margin-top:-3.5px;left:4px}

/* ---------- get it, and the questions ---------- */
.product .cta{background:var(--paper);padding-bottom:clamp(70px,11vh,130px)}
.cta-icon{border-radius:22.5%;filter:drop-shadow(0 12px 24px rgba(78,26,101,.28))}
.cta-name{color:var(--text-dark)}
.get-centre{justify-content:center;flex-wrap:wrap}
.cta .qr p{color:var(--text-mid)}
.cta .facts{color:var(--text-dark)}
.product .faq{background:var(--paper)}
.product .faq-q{color:var(--text-dark)}
.product .faq-a p{color:var(--text-mid)}
@media (prefers-color-scheme:dark){
  .product .faq-item,.product .faq-item:last-child{border-color:rgba(255,255,255,.12)}
  .cta-icon{filter:drop-shadow(0 12px 28px rgba(0,0,0,.6))}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:8px}
  .hero-copy{padding-bottom:28px}
  body.product{--hang:clamp(140px,26vh,240px)}
  .hero-phone{width:min(300px,64vw)}
  .watch{grid-template-columns:1fr}
  .watch-copy .qa{max-width:none}
}
@media (max-width:560px){
  .hero .h1{font-size:clamp(31px,8.6vw,40px)}
  .get{flex-wrap:wrap}
  .pair .device{width:min(43vw,220px)}
  .pair .device + .device{margin-top:32px}
  .stops{font-size:14.5px;columns:2;column-gap:14px}
  .paper{border-radius:28px 28px 0 0;margin-top:-28px}
}
@media (prefers-reduced-motion:reduce){
  .map .bus-halo{animation:none}
  .map.is-drawing .route,.map.is-drawing .route-glow{transition:none}
}