/* /dublin-ebike 骑手落地页。单独成文件：站点 CSP 是 style-src 'self'，不许内联样式。
   高对比浅色：骑手多在户外强光下单手看手机；黄色取自骑手的反光背心。 */
:root {
  --hivis: #ffd400;
  --ink: #111214;
  --ink-2: #3d4046;
  --paper: #ffffff;
  --road: #f2f2ee;
  --line: #d9d9d2;
  --wa: #1fa855;
  --wa-dark: #178a45;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--road);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.top {
  background: var(--hivis);
  padding: calc(28px + env(safe-area-inset-top)) 20px 30px;
  border-bottom: 6px solid var(--ink);
}
.tag { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: 0 0 12px; font-size: clamp(30px, 9vw, 44px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.lede { margin: 0; font-size: 18px; max-width: 34ch; }

main { padding: 0 16px; max-width: 640px; margin: 0 auto; }
h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
p { margin: 0; }

.services { display: grid; gap: 12px; margin: 22px 0; }
.services article {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 16px 18px;
}
.services p { color: var(--ink-2); font-size: 16px; }
@media (min-width: 560px) { .services { grid-template-columns: 1fr 1fr; } }

.how { margin: 28px 0 8px; }
.how h2 { font-size: 22px; margin-bottom: 12px; }
.how ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.how li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.how li::before {
  content: counter(step);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--hivis); font-weight: 800;
}

.why ul { margin: 22px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.why li { padding-left: 28px; position: relative; }
.why li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 12px; height: 12px; background: var(--hivis); border: 2px solid var(--ink); border-radius: 3px; }

.legal { max-width: 640px; margin: 8px auto 0; padding: 20px 16px 8px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; }
.legal .controller { margin-top: 10px; color: var(--ink); }
.legal a { color: var(--ink); }
.legal h2 { font-size: 14px; color: var(--ink); }

.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--road) 70%, rgba(242, 242, 238, 0));
}
.cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 640px; margin: 0 auto; min-height: 60px;
  background: var(--wa); color: #fff; text-decoration: none;
  font-size: 19px; font-weight: 800;
  border-radius: 14px; border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.cta:hover { background: var(--wa-dark); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.cta:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cta:active { transform: none; } }