/* thepikap.com: the one stylesheet. Design notes: docs/DESIGN.md. Light theme only.
   No inline styles anywhere (the CSP forbids them): every look is a class here. */

/* ---------------------------------------------------------------- fonts (self-hosted, SIL OFL 1.1) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/nunito-latin.woff2?v=ba344451ea) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/nunito-latin-ext.woff2?v=2c8d792869) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2?v=691cd1d9b4) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2?v=09472f217a) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --ink: #12283A;
  --ink-2: #3E5468;
  --ink-3: #526679;
  --paper: #FFFFFF;
  --cream: #F5F0E6;
  --sky-50: #F1F8FE;
  --sky-100: #E2F2FD;
  --sky-200: #C4E5FA;
  --blue: #0E9BE8;
  --blue-hover: #3AB0F0;
  --blue-deep: #006CA5;
  --pin-top: #03B8FD;
  --pin-bottom: #016EFC;
  --gold: #C9A227;
  --error: #B42318;
  --field: #5B7083;
  --on-ink-2: #B8C8D6;
  --on-ink-link: #7FD0FF;

  --pin-grad: linear-gradient(180deg, var(--pin-top), var(--pin-bottom));
  --font-text: 'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Rubik', 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --shadow-card: 0 1px 2px rgba(18, 40, 58, .06), 0 6px 18px rgba(18, 40, 58, .08);
  --shadow-form: 0 24px 48px -12px rgba(18, 40, 58, .22), 0 2px 6px rgba(18, 40, 58, .06);
  --gutter: 16px;
  --wrap: 72rem;
  --head-h: 72px;
  --section-pad: clamp(4rem, 2.6rem + 5vw, 7rem);
}
@media (min-width: 480px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --head-h: 80px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 16px);
  background: var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word; /* a last resort: a single long word never runs into the gutter */
}
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; }
figure { margin: 0; }
img, svg, picture { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--blue-deep); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--pin-bottom); outline-offset: 3px; }
main:focus, [tabindex="-1"]:focus { outline: none; }
::selection { background: var(--sky-200); color: var(--ink); }
button, input { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 200;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.skip:focus-visible, .skip:focus { top: 12px; color: #fff; outline-color: var(--on-ink-link); }
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 800 1.0625rem/1.1 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn-primary {
  background: var(--blue);
  color: var(--ink);
  box-shadow: 0 10px 22px -10px rgba(14, 155, 232, .8), inset 0 -2px 0 rgba(18, 40, 58, .14);
}
.btn-primary:hover { background: var(--blue-hover); color: var(--ink); }
.btn-primary:active { transform: translateY(1px) scale(.98); }
.btn-primary[aria-disabled="true"] { cursor: progress; background: var(--blue-hover); }
.btn-outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--sky-200);
  min-height: 48px;
  padding: 0 20px;
}
.btn-outline svg { color: var(--blue-deep); }
.btn-outline:hover { background: var(--sky-50); border-color: var(--blue); color: var(--ink); }
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 2px solid var(--sky-200);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue-deep);
  box-shadow: var(--shadow-card);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { background: var(--sky-50); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.on-ink .btn-primary { box-shadow: 0 10px 26px -10px rgba(14, 155, 232, .9); }
.on-ink :focus-visible { outline-color: var(--on-ink-link); }

/* ---------------------------------------------------------------- language switcher */
.lang ul {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--sky-200);
  border-radius: 999px;
  background: var(--sky-50);
}
.lang a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--ink-2);
  font: 800 .9375rem/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang a:hover { color: var(--ink); background: var(--paper); }
.lang a[aria-current="true"] { background: var(--paper); color: var(--blue-deep); box-shadow: 0 1px 3px rgba(18, 40, 58, .16); }
.lang a:lang(zh-Hans) { font-family: var(--font-text), var(--font-cjk); }
.lang-dot { display: none; }

/* ---------------------------------------------------------------- header (features, privacy, 404) */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-head.is-stuck { border-bottom-color: rgba(18, 40, 58, .08); box-shadow: 0 8px 24px -16px rgba(18, 40, 58, .35); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--head-h); }
.head-actions { display: flex; align-items: center; gap: 8px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: 10px; }
.brand img { width: 112px; height: auto; }
.btn-notify .btn-label { white-space: nowrap; }
@media (max-width: 639px) {
  .btn-notify { width: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
  .btn-notify .btn-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
@media (max-width: 379px) {
  .brand img { width: 80px; }
  .head-actions { gap: 6px; }
  .lang a { padding: 0 8px; }
}
/* 320-359 px: logo, switcher and bell share 288 px; a little less of everything keeps 中文 on one line */
@media (max-width: 359px) {
  .brand img { width: 76px; }
  .head-row { gap: 8px; }
  .head-actions { gap: 4px; }
  .lang ul { gap: 0; }
  .lang a { padding: 0 6px; }
}
.head-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ---------------------------------------------------------------- shared type */
.eyebrow, .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sky-100);
  color: var(--blue-deep);
  font: 800 .875rem/1.3 var(--font-text);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow::before, .badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pin-grad);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.display {
  font-size: clamp(2.375rem, 1.55rem + 3.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.h2 {
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.lead {
  font-size: clamp(1.125rem, 1.04rem + .4vw, 1.3125rem);
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-2);
}
.section { padding-block: var(--section-pad); position: relative; }
.bg-cream { background: var(--cream); }
.bg-sky { background: var(--sky-50); }
.section-head { max-width: 44rem; }
.section-head .lead { margin-top: 16px; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(3, 184, 253, .16), transparent 70%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(201, 162, 39, .08), transparent 70%),
    var(--sky-50);
}
.hero-grid { display: grid; gap: 32px; padding-top: clamp(28px, 5vw, 72px); }
.hero-text { max-width: 38rem; }
.hero h1 { margin-top: 20px; }
.hero .lead { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
@media (max-width: 359px) {
  /* the arrow stays beside "Maklumkan saya", the longest label */
  .hero-actions { gap: 10px; }
  .hero-actions .btn-primary { padding: 0 18px; gap: 8px; }
}
.hero-media { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 280px; }
.hero-media picture { position: relative; z-index: 1; }
.hero-route { position: absolute; z-index: 0; left: 50%; bottom: 0; width: min(600px, 130%); height: auto; transform: translateX(-50%); pointer-events: none; opacity: .8; }
@media (max-width: 639px) { .hero-route { opacity: .55; } }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; column-gap: 48px; }
  .hero-text { padding-bottom: clamp(56px, 7vw, 120px); align-self: center; padding-top: 24px; }
}

/* ---------------------------------------------------------------- stages (where the pictures sit) */
.stage {
  position: relative;
  display: flex;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(28rem 18rem at 85% 0%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(22rem 16rem at 0% 100%, rgba(3, 184, 253, .14), transparent 70%),
    linear-gradient(160deg, var(--sky-50), var(--sky-100));
  min-height: 300px;
}
.bg-cream .stage, .bg-sky .stage {
  background:
    radial-gradient(28rem 18rem at 85% 0%, rgba(226, 242, 253, .9), transparent 70%),
    radial-gradient(22rem 16rem at 0% 100%, rgba(3, 184, 253, .12), transparent 70%),
    var(--paper);
}
.stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -15% -40% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 40px solid rgba(3, 184, 253, .08);
}
.stage--rise { align-items: flex-end; padding: 36px 16px 0; }
.stage--hang { align-items: flex-start; padding: 0 16px 36px; }
.stage--float { align-items: center; padding: 36px 16px; }
.stage picture, .stage img { position: relative; }
.stage figcaption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}
/* two pictures in one stage: one behind, one in front, laid out on one grid cell */
.stage-pair { position: relative; display: grid; width: 100%; max-width: 540px; }
.stage-pair > picture { grid-area: 1 / 1; min-width: 0; }
.stage-pair img { width: 100%; }
/* Delivery: the parcel phone left of centre; the Bungkus card over its upper right, the dimmed part of the screen */
.pair-delivery .pair-back { justify-self: start; width: 70%; max-width: 394px; }
.pair-delivery .pair-front { justify-self: end; align-self: start; width: 66%; max-width: 389px; margin-top: 15%; }
/* Drivers: the vehicle-check phone rises on the right; the rides/deliveries card sits over its lower left */
.pair-drivers .pair-back { justify-self: end; align-self: end; width: 78%; max-width: 419px; }
.pair-drivers .pair-front { justify-self: start; align-self: end; width: 64%; max-width: 410px; margin-bottom: 7%; }

/* ---------------------------------------------------------------- feature sections */
.feature-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  .feature--flip .feature-media { order: -1; }
}
.feature-head { display: flex; align-items: center; gap: 18px; }
.feature-head > div { min-width: 0; }
/* the longest one-word headings ("Penghantaran") fit beside the tile on the narrowest phones */
@media (max-width: 359px) { .feature-head .h2 { font-size: 1.625rem; } }
.tag { margin-top: 6px; color: var(--blue-deep); font-weight: 800; font-size: 1.0625rem; line-height: 1.4; }
.points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.points li { position: relative; padding-left: 30px; color: var(--ink-2); max-width: 62ch; }
.points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pin-grad);
  box-shadow: 0 0 0 4px var(--sky-100);
}
.on-ink .points li { color: var(--on-ink-2); }
.on-ink .points li::before { box-shadow: 0 0 0 4px rgba(127, 208, 255, .18); }
.subs { display: grid; gap: 28px; margin-top: 32px; }
.sub { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.sub h3 { font-size: clamp(1.25rem, 1.12rem + .55vw, 1.5rem); line-height: 1.25; font-weight: 600; }
.sub-label { margin-left: 6px; color: var(--ink-3); font: 700 .9375rem/1.3 var(--font-text); }
.sub p { margin-top: 6px; color: var(--ink-2); max-width: 62ch; }
.sub p + p { margin-top: 10px; }
.mini {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--sky-100);
  color: var(--blue-deep);
}
.mini svg { width: 26px; height: 26px; }
.mini .ai-mini { width: 30px; height: 30px; }
.media-note { margin-top: 12px; font-size: .875rem; color: var(--ink-3); font-weight: 600; text-align: center; }

/* ---------------------------------------------------------------- icon tiles and animated icons */
.tile {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--pin-grad);
  box-shadow: 0 12px 24px -12px rgba(1, 110, 252, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.tile::before, .tile::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.tile::before { width: 40px; height: 40px; right: -12px; top: -12px; }
.tile::after { width: 22px; height: 22px; left: -6px; bottom: -6px; }
.tile-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(18, 40, 58, .2);
}
.ai { width: 42px; height: 42px; overflow: hidden; }
.k-draw, .k-draw-s, .cs-route, .done-draw { stroke-dasharray: 1 2; }
.tile--sm { width: 56px; height: 56px; border-radius: 18px; }
.tile--sm .tile-badge { width: 44px; height: 44px; }
.tile--sm .ai { width: 32px; height: 32px; }
.ring { opacity: 0; }
.k-flash { opacity: 0; }

/* ---------------------------------------------------------------- live buses illustration */
.bus-art { width: 100%; max-width: 520px; height: auto; }

/* ---------------------------------------------------------------- riders */
.cards { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  padding: 28px;
  border: 1px solid rgba(18, 40, 58, .06);
  border-radius: var(--r-l);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-top: 18px; font-size: clamp(1.25rem, 1.12rem + .55vw, 1.5rem); line-height: 1.25; font-weight: 600; }
.card p { margin-top: 8px; color: var(--ink-2); }
.section-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------------------------------------------------------------- drivers */
.drivers .feature-head { margin-bottom: 4px; }
.drivers .lead { margin-top: 20px; }

/* ---------------------------------------------------------------- partners (ink band) */
.band-ink {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(50rem 26rem at 100% 0%, rgba(3, 184, 253, .22), transparent 70%),
    radial-gradient(36rem 22rem at 0% 100%, rgba(1, 110, 252, .22), transparent 70%),
    var(--ink);
}
.band-ink h2, .band-ink h3 { color: #fff; }
.band-ink .lead, .band-ink p { color: var(--on-ink-2); }
.band-ink a:not(.btn) { color: var(--on-ink-link); }
.partner-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 64px; } }
.partner-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 24px; }
.partner-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.partner-list h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.partner-list p { margin-top: 6px; }
.partner-media { display: flex; justify-content: center; }

/* ---------------------------------------------------------------- the form */
.notify-wrap { max-width: 44rem; margin-inline: auto; }
.form-card {
  position: relative;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid rgba(18, 40, 58, .07);
  border-radius: var(--r-l);
  background: var(--paper);
  box-shadow: var(--shadow-form);
  container: notify-card / inline-size; /* the fields sit side by side only when the card itself has room */
}
.form-head { display: flex; align-items: center; gap: 16px; }
.form-card h2 { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.015em; }
.form-intro { margin-top: 14px; color: var(--ink-2); font-weight: 600; }
.notify-form { display: grid; gap: 24px; margin-top: 24px; }
.notify-form[hidden] { display: none; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; color: var(--ink); font-weight: 800; font-size: 1rem; line-height: 1.4; }
/* "One of the two is enough." on the legend's own line when there is room */
.legend-hint { margin-left: 4px; color: var(--ink-3); font-size: .9375rem; font-weight: 600; }
.hint { margin-top: 2px; color: var(--ink-3); font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.fields { display: grid; gap: 14px; margin-top: 12px; }
/* side by side from a card 30rem wide inside (each field about 15rem, so an address stays readable) */
@container notify-card (min-width: 30rem) { .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field label { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 700; font-size: .9375rem; }
.field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--field);
  border-radius: var(--r-s);
  background: #fff;
  color: var(--ink);
  font: 600 1.0625rem/1.3 var(--font-text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover { border-color: var(--ink-2); }
.field input:focus-visible { border-color: var(--blue-deep); outline: 3px solid var(--pin-bottom); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field .hint { margin-top: 6px; }
.field-err, .group-err {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  color: var(--error);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.4;
}
.field-err svg, .group-err svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.field-err[hidden], .group-err[hidden] { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px 10px 14px;
  border: 2px solid var(--sky-200);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.choice label::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--field);
  border-radius: 50%;
  background: #fff;
}
.choice input:hover + label { border-color: var(--blue); }
.choice input:checked + label { border-color: var(--blue-deep); background: var(--sky-100); }
.choice input:checked + label::before { border-color: var(--blue-deep); background: radial-gradient(circle, var(--blue-deep) 0 4px, #fff 4.5px); }
.choice input:focus-visible + label { outline: 3px solid var(--pin-bottom); outline-offset: 3px; }
.phone-hint { margin-top: 8px; }
@media (max-width: 479px) {
  .choices { gap: 8px; }
  .choice label { gap: 6px; padding: 8px 12px 8px 10px; font-size: 1rem; }
  .choice label::before { width: 18px; height: 18px; }
}
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
/* the box looks 28 px, but the transparent border makes the tap target 44 px */
.consent input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px;
  border: 8px solid transparent;
  border-radius: 16px;
  background: #fff;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--field);
  cursor: pointer;
}
.consent input::after {
  content: '';
  width: 8px;
  height: 14px;
  border: solid transparent;
  border-width: 0 3px 3px 0;
  transform: translateY(-2px) rotate(45deg);
}
.consent input:checked { background: var(--blue-deep); background-clip: padding-box; box-shadow: inset 0 0 0 2px var(--blue-deep); }
.consent input:checked::after { border-color: #fff; }
.consent input:focus-visible { outline: 3px solid var(--pin-bottom); outline-offset: -4px; }
.consent input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
.consent label { color: var(--ink-2); font-weight: 600; cursor: pointer; padding-top: 1px; }
.consent-link { display: inline-block; margin-top: 4px; font-weight: 700; }
.consent-wrap .group-err { margin-left: 40px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.form-actions .btn { min-width: 12rem; }
.form-status { min-height: 0; font-weight: 700; color: var(--ink-2); }
.form-status.is-error { color: var(--error); }
.form-status a { color: inherit; font-weight: 800; }
.form-status:empty { display: none; }
.form-note { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(18, 40, 58, .08); color: var(--ink-3); font-size: .9375rem; font-weight: 600; }
.form-note a { font-weight: 700; }
.form-done { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 20px; border-radius: var(--r-m); background: var(--sky-50); }
.form-done[hidden] { display: none; }
.form-done p { font-weight: 700; font-size: 1.125rem; color: var(--ink); }
.done-mark { flex: none; width: 56px; height: 56px; }
.noscript-note { margin-top: 16px; font-weight: 700; }

/* ---------------------------------------------------------------- footer */
.site-foot { padding-block: 56px 40px; background: var(--ink); color: var(--on-ink-2); }
.site-foot a { color: var(--on-ink-link); }
.site-foot a:hover { color: #fff; }
.site-foot :focus-visible { outline-color: var(--on-ink-link); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 48px; }
.foot-brand img { width: 128px; }
.foot-company { margin-top: 14px; color: #fff; font-weight: 800; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.foot-links a, .foot-links span { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.foot-links .foot-label { color: var(--on-ink-2); font-weight: 600; margin-right: 8px; }
.foot-meta { overflow: hidden; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9375rem; font-weight: 600; }
/* each item carries its "·" in front; the inner row is pulled left by one dot's width and the row clips it, so
   the dot of whichever item starts a line is hidden: never a dot dangling at a line's end or start */
.foot-meta-in { display: flex; flex-wrap: wrap; row-gap: 6px; margin-left: -2.25em; }
.fm { display: inline-flex; }
.fm-sep { display: inline-block; width: 2.25em; text-align: center; }

/* ---------------------------------------------------------------- Coming Soon */
.page-cs {
  background:
    radial-gradient(56rem 34rem at 100% 0%, rgba(3, 184, 253, .14), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(201, 162, 39, .07), transparent 70%),
    var(--sky-50);
}
.cs { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.cs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 80px; }
.cs-top .brand img { width: 112px; }
.cs-main {
  flex: 1;
  display: grid;
  grid-template-areas: 'stage' 'text' 'form';
  gap: 28px;
  align-content: start;
  padding-block: 4px 48px;
}
.cs-text { grid-area: text; max-width: 36rem; }
.cs-text h1 { margin-top: 18px; }
.cs-text .lead { margin-top: 16px; }
.cs-stage {
  grid-area: stage;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, #fff 0%, var(--sky-100) 100%);
  box-shadow: inset 0 0 0 1px rgba(18, 40, 58, .05);
}
.cs-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-form { grid-area: form; }
.cs-foot { padding-block: 8px 32px; color: var(--ink-3); font-size: .9375rem; font-weight: 600; }
.cs-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.cs-foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.cs-foot .foot-label { margin-right: 6px; }
@media (min-width: 768px) {
  .cs-main { grid-template-areas: 'text' 'stage' 'form'; }
  .cs-form { max-width: 44rem; }
  .cs-stage { max-width: 36rem; }
}
@media (min-width: 1024px) {
  .cs-top { min-height: 64px; }
  .cs-main {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-areas: 'text form' 'stage form';
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    row-gap: 28px;
    padding-block: 4px 48px;
  }
  .cs-stage { align-self: start; max-width: none; }
  /* A roomy but compact card: its Get notified button is on the first screen of a laptop (checked at 1280 x 680,
     1366 x 625 and 1536 x 730 in all three languages; Malay is the longest) */
  .cs-form { max-width: none; align-self: start; padding: 24px 32px 28px; }
  .cs-form .form-head { gap: 14px; }
  .cs-form .tile--sm { width: 48px; height: 48px; border-radius: 16px; }
  .cs-form .tile--sm .tile-badge { width: 38px; height: 38px; }
  .cs-form .tile--sm .ai { width: 28px; height: 28px; }
  .cs-form .form-intro { margin-top: 8px; }
  .cs-form .notify-form { gap: 14px; margin-top: 14px; }
  .cs-form .fields { margin-top: 8px; }
  .cs-form .phone-hint { margin-top: 6px; }
  .cs-form .choices { margin-top: 8px; }
  .cs-form .consent label { display: inline; }
  .cs-form .consent-link { display: inline; margin: 0 0 0 4px; }
  .cs-form .form-note { margin-top: 16px; padding-top: 14px; }
}

/* ---------------------------------------------------------------- privacy and 404 */
.doc { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 112px); }
.doc-wrap { max-width: calc(44rem + 2 * var(--gutter)); }
.doc h1 { font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; }
.doc .lead { margin-top: 16px; }
.doc h2 { margin-top: 40px; font-size: clamp(1.25rem, 1.12rem + .55vw, 1.5rem); line-height: 1.3; font-weight: 600; }
.doc p { margin-top: 10px; color: var(--ink-2); max-width: 62ch; }
.doc .updated { margin-top: 40px; color: var(--ink-3); font-size: .9375rem; font-weight: 600; }
.doc .back { margin-top: 28px; }
.nf { display: grid; justify-items: start; gap: 18px; padding-block: clamp(48px, 10vw, 140px); }
.nf img { width: 96px; }
.nf h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; }
.nf p { color: var(--ink-2); }
.nf .btn { margin-top: 8px; }

/* ---------------------------------------------------------------- Chinese */
html:lang(zh-Hans) body { font-family: var(--font-text), var(--font-cjk); line-height: 1.8; }
html:lang(zh-Hans) h1, html:lang(zh-Hans) h2, html:lang(zh-Hans) h3, html:lang(zh-Hans) .btn, html:lang(zh-Hans) legend {
  font-family: var(--font-head), var(--font-cjk);
  letter-spacing: 0;
}
html:lang(zh-Hans) .display { line-height: 1.18; word-break: keep-all; } /* lines break at spaces and punctuation, never inside 即将 */
html:lang(zh-Hans) .h2 { line-height: 1.25; }
html:lang(zh-Hans) .eyebrow, html:lang(zh-Hans) .badge { text-transform: none; letter-spacing: .02em; }
/* the system CJK fonts have no 500/600 weights, so those would render bold: keep running text regular */
html:lang(zh-Hans) body,
html:lang(zh-Hans) .lead,
html:lang(zh-Hans) .form-intro,
html:lang(zh-Hans) .hint,
html:lang(zh-Hans) .legend-hint,
html:lang(zh-Hans) .consent label,
html:lang(zh-Hans) .form-note,
html:lang(zh-Hans) .foot-meta,
html:lang(zh-Hans) .cs-foot { font-weight: 400; }

/* ---------------------------------------------------------------- motion (only when the reader allows it) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* The animated icons. site.js puts .anims on <html> when it will play them. Then every part's animation is set
     from the start but waits, paused, at its first frame, so no icon shows its last frame before it has played.
     .play (when the icon scrolls into view, and again on hover or focus) runs it; .anim-reset takes the
     animations off for one style flush, so a replay starts every part afresh. Without JavaScript, or under
     reduced motion, none of this applies and every icon shows its last frame. */
  .anims [data-anim] * { animation-play-state: paused !important; }
  .anims [data-anim].play * { animation-play-state: running !important; }
  .anims [data-anim].anim-reset * { animation: none !important; }

  .anims [data-anim] .k-draw { animation: k-draw 1s var(--ease) both; }
  .anims [data-anim] .k-draw-s { animation: k-draw .55s var(--ease) both; }
  .anims [data-anim] .k-pop { animation: k-pop .55s var(--ease-back) both; }
  .anims [data-anim] .k-fade { animation: k-fade .4s var(--ease) both; }
  .anims [data-anim] .k-drop { animation: k-drop .9s var(--ease) both; }
  .anims [data-anim] .k-bounce { animation: k-bounce 1s var(--ease) both; }
  .anims [data-anim] .k-ring { animation: k-ring 1s var(--ease) both; }
  .anims [data-anim] .k-ring2 { animation: k-ring .6s var(--ease) 2 both; }
  .anims [data-anim] .k-van { animation: k-van 1.3s cubic-bezier(.45, 0, .25, 1) both; }
  .anims [data-anim] .k-light { animation: k-fade .35s var(--ease) both; }
  .anims [data-anim] .k-slide { animation: k-slide .8s var(--ease) both; }
  .anims [data-anim] .k-swing { animation: k-swing 1.6s var(--ease) both; }
  .anims [data-anim] .k-tap { animation: k-tap 1s var(--ease) both; }
  .anims [data-anim] .k-run { animation: k-run .6s var(--ease) both; }
  .anims [data-anim] .k-turn { animation: k-turn 1.4s var(--ease) both; }
  .anims [data-anim] .k-wave { animation: k-wave 1.5s var(--ease) both; }
  .anims [data-anim] .k-lift { animation: k-lift 1.4s var(--ease) both; }
  .anims [data-anim] .k-awning { animation: k-awning .6s var(--ease-back) both; }
  .anims [data-anim] .k-shackle { animation: k-shackle .8s var(--ease) both; }
  .anims [data-anim] .k-glow { animation: k-fade .8s var(--ease) both; }
  .anims [data-anim] .k-flash { animation: k-flash .8s var(--ease) both; }
  .anims [data-anim] .k-rise { animation: k-rise 1s var(--ease) both; }
  .anims [data-anim] .k-busrun { animation: k-busrun 2.2s cubic-bezier(.45, 0, .3, 1) both; }

  .k-pop, .k-drop, .k-bounce, .k-ring, .k-ring2, .k-swing, .k-tap, .k-turn, .k-wave, .k-lift, .k-awning, .k-shackle, .k-rise, .k-slide {
    transform-box: fill-box;
    transform-origin: center;
  }
  .o-top { transform-origin: 50% 0 !important; }
  .o-bottom { transform-origin: 50% 100% !important; }
  .o-left { transform-origin: 0 50% !important; }
  .o-bl { transform-origin: 0 100% !important; }

  /* delays (after the animations, with the same weight, so they win) */
  .anims [data-anim] .w1 { animation-delay: .1s; }
  .anims [data-anim] .w2 { animation-delay: .2s; }
  .anims [data-anim] .w3 { animation-delay: .3s; }
  .anims [data-anim] .w4 { animation-delay: .4s; }
  .anims [data-anim] .w5 { animation-delay: .5s; }
  .anims [data-anim] .w6 { animation-delay: .6s; }
  .anims [data-anim] .w7 { animation-delay: .7s; }
  .anims [data-anim] .w8 { animation-delay: .8s; }
  .anims [data-anim] .w9 { animation-delay: .9s; }
  .anims [data-anim] .w10 { animation-delay: 1s; }
  .anims [data-anim] .w11 { animation-delay: 1.1s; }
  .anims [data-anim] .w12 { animation-delay: 1.2s; }
  .anims [data-anim] .w14 { animation-delay: 1.4s; }
  /* the route map: the bus sets off as the route draws, reaches its stop at 2.6 s, and the ring pulses twice
     (about 3.5 s in all, DESIGN.md 7.3) */
  .anims [data-anim] .bus-go { animation-delay: .4s; }
  .anims [data-anim] .bus-ring { animation-duration: .5s; animation-delay: 2.6s; }

  /* the hero's route draws itself once on load */
  .hero-route .k-draw { animation: k-draw 1.8s var(--ease) .3s both; }
  .hero-route .k-pop { animation: k-pop .5s var(--ease-back) 1.9s both; }

  /* Coming Soon: the route draws, the owner's pin drops onto its end, one ripple */
  .cs-route { animation: k-draw 1.4s var(--ease) .25s both; }
  .cs-stop { animation: k-pop .45s var(--ease-back) both; transform-box: fill-box; transform-origin: center; }
  .cs-stop.s1 { animation-delay: .2s; }
  .cs-stop.s2 { animation-delay: .75s; }
  .cs-stop.s3 { animation-delay: 1.15s; }
  .cs-pin { animation: cs-drop 1.15s var(--ease) 1.35s both; transform-box: fill-box; transform-origin: 65.4% 100%; }
  .cs-ripple { animation: k-ring 1.3s var(--ease) 2.05s both; transform-box: fill-box; transform-origin: center; }
  .cs-chip { animation: k-pop .5s var(--ease-back) both; transform-box: fill-box; transform-origin: center; }
  .cs-chip.c1 { animation-delay: 2.2s; }
  .cs-chip.c2 { animation-delay: 2.35s; }
  .cs-chip.c3 { animation-delay: 2.5s; }
  .cs-chip.c4 { animation-delay: 2.65s; }

  /* success tick */
  .form-done:not([hidden]) .done-draw { animation: k-draw .7s var(--ease) .15s both; }
  .form-done:not([hidden]) .done-ring { animation: k-pop .5s var(--ease-back) both; transform-box: fill-box; transform-origin: center; }

  .btn-primary:hover { transform: translateY(-1px); }
  .icon-btn:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* On paper every icon is finished. */
@media print {
  .anims [data-anim] * { animation: none !important; }
}

@keyframes k-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes k-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
/* a highlight that comes and goes (its shape stays hidden when nothing plays) */
@keyframes k-flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes k-drop {
  0% { transform: translateY(-16px); opacity: 0; }
  50% { transform: translateY(0); opacity: 1; }
  64% { transform: translateY(0) scale(1.1, .88); }
  80% { transform: translateY(-3px) scale(.97, 1.04); }
  100% { transform: none; opacity: 1; }
}
@keyframes k-bounce {
  0% { transform: translateY(-22px); opacity: 0; }
  38% { transform: translateY(0); opacity: 1; }
  54% { transform: translateY(-8px); }
  70% { transform: translateY(0); }
  84% { transform: translateY(-3px); }
  100% { transform: none; opacity: 1; }
}
@keyframes k-ring { 0% { transform: scale(.45); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes k-van { from { transform: translateX(-30px); } to { transform: none; } }
@keyframes k-slide { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-swing {
  0% { transform: rotate(-18deg); }
  22% { transform: rotate(13deg); }
  44% { transform: rotate(-8deg); }
  64% { transform: rotate(5deg); }
  82% { transform: rotate(-2deg); }
  100% { transform: none; }
}
@keyframes k-tap {
  0% { transform: none; }
  42% { transform: translate(8px, -8px) rotate(-8deg); }
  56% { transform: translate(6px, -6px) rotate(-8deg); }
  100% { transform: none; }
}
@keyframes k-run { from { transform: translateX(-18px); } to { transform: none; } }
@keyframes k-turn { 0% { transform: none; } 40% { transform: rotate(-75deg); } 74% { transform: rotate(14deg); } 100% { transform: none; } }
@keyframes k-wave {
  0% { transform: none; }
  25% { transform: skewY(-9deg) scaleX(.9); }
  50% { transform: skewY(7deg); }
  75% { transform: skewY(-3deg); }
  100% { transform: none; }
}
@keyframes k-lift { 0% { transform: none; } 35% { transform: translateY(-9px) rotate(-10deg); } 70% { transform: translateY(-9px) rotate(-10deg); } 100% { transform: none; } }
@keyframes k-awning { from { transform: scaleY(0); } to { transform: none; } }
@keyframes k-shackle { 0% { transform: translateY(-8px); } 60% { transform: translateY(1.5px); } 100% { transform: none; } }
@keyframes k-rise { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
/* the bus marker of the drawn route map: from the first stop (64,269) round two corners to its stop (240,147) */
@keyframes k-busrun {
  0% { transform: translate(-176px, 122px); }
  32% { transform: translate(-80px, 122px); }
  73% { transform: translate(-80px, 0); }
  100% { transform: none; }
}
@keyframes cs-drop {
  0% { transform: translateY(-190px); opacity: 0; }
  12% { opacity: 1; }
  58% { transform: translateY(0); }
  68% { transform: translateY(0) scale(1.1, .86); }
  84% { transform: translateY(-10px) scale(.97, 1.04); }
  100% { transform: none; opacity: 1; }
}