/* Barlow and Barlow Condensed (SIL OFL), served from this site so no visitor request goes to a font service. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400-latinext.woff2) 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: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400-latin.woff2) 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: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600-latinext.woff2) 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: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600-latin.woff2) 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: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlowcond-700-latinext.woff2) 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: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/barlowcond-700-latin.woff2) 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; }

/* MotoPlay web: the night dash on top, daylight paper below. Colours come from the app icon. */
:root {
  --ink: #0d1120;        /* icon background, blue-black */
  --ink-2: #18203a;      /* raised panel on ink */
  --line-dark: #2a3456;
  --cyan: #00c8ff;       /* the dash frame in the icon */
  --red: #ff4539;        /* warnings only */
  --paper: #f3f5f9;
  --white: #ffffff;
  --text: #121726;
  --muted: #5b647a;
  --line: #d9dee8;
  --radius-dash: 28px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
b, strong { font-weight: 600; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Top bar */
.bar { background: var(--ink); color: var(--white); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .01em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.lang { display: flex; gap: 4px; font-size: 15px; }
.lang a { text-decoration: none; padding: 6px 10px; border-radius: 8px; color: #aab3cc; }
.lang a[aria-current="true"] { color: var(--white); background: var(--ink-2); }

/* Hero: the dash itself */
.hero { background: var(--ink); color: var(--white); padding: 40px 0 88px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hero h1 {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 76px);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0 0 22px;
}
.hero p.lead { font-size: 20px; color: #c3cadc; margin: 0 0 32px; max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 17px;
  padding: 13px 22px; border-radius: 12px; border: 2px solid transparent;
}
.btn-primary { background: var(--white); color: var(--ink); }
.btn-primary:hover { background: #dff6ff; }
.btn-ghost { border-color: var(--line-dark); color: var(--white); }
.btn-ghost:hover { border-color: var(--cyan); }
.status { margin-top: 22px; font-size: 15px; color: #8d97b3; }

/* The hero dash: a working copy of the XMAX TFT (480x272 with its 38px status bar and the address strip the dash
   draws itself). The cyan frame is the icon's. Screens cross-fade; app.js drives them. */
.tft-wrap { display: grid; gap: 16px; }
.tft {
  margin: 0; position: relative; aspect-ratio: 480 / 272;
  border: 10px solid var(--cyan); border-radius: var(--radius-dash);
  background: #05070d; overflow: hidden;
  display: grid; grid-template-rows: 14% 1fr 17%;
  box-shadow: 0 30px 80px rgba(0, 200, 255, .14);
  font-family: "Barlow Condensed", "Barlow", sans-serif; color: var(--white);
  container-type: inline-size;
}
.tft-status { display: flex; align-items: center; gap: 4cqw; padding: 0 4cqw; font-size: 4.4cqw; border-bottom: 1px solid #c9d2e6; }
.tft-status .clock { font-weight: 700; }
.tft-status .ico { font-size: 2.6cqw; border: 1px solid #c9d2e6; border-radius: 4px; padding: 0 .8cqw; margin-left: auto; }
.tft-status .temp { font-weight: 700; }
.tft-pic { position: relative; min-height: 0; }
.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.scr.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* Route: map on the right, the dash's +/- in the middle, our turn card and speed on the left */
.scr[data-name="route"] .map { position: absolute; inset: 0 0 0 38%; }
.scr[data-name="route"] .map svg { width: 100%; height: 100%; display: block; }
.zoom { position: absolute; left: 27%; top: 14%; display: grid; gap: 2cqw; }
.zoom i { font-style: normal; width: 8cqw; height: 8cqw; display: grid; place-items: center; font-size: 6cqw; line-height: 1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.45); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 2cqw; }
.zoom i + i { clip-path: polygon(0 0, 100% 0, 50% 100%); padding: 0 0 2cqw; }
.turncard { position: absolute; left: 3cqw; top: 3cqw; width: 26cqw; display: grid; grid-template-columns: auto 1fr; gap: 0 1.6cqw; align-items: center; }
.turncard svg { width: 9cqw; height: 9cqw; transition: transform .4s ease; }
.turncard.left svg { transform: scaleX(-1); }
.turncard b { font-size: 6.4cqw; line-height: 1; display: block; white-space: nowrap; }
.turncard span { font-size: 3.2cqw; color: #c3cadc; display: block; line-height: 1.1; grid-column: 1 / -1; margin-top: 1cqw; }
.turncard .then { font-size: 3cqw; color: var(--cyan); display: block; grid-column: 1 / -1; margin-top: .6cqw; opacity: 0; transition: opacity .3s; }
.turncard.soon .then { opacity: 1; }
.spd { position: absolute; left: 3cqw; bottom: 3cqw; display: flex; align-items: baseline; gap: 1.2cqw; }
.spd b { font-size: 10cqw; line-height: .9; }
.spd small { font-size: 3cqw; color: #9aa5c4; }
.lim { font-style: normal; width: 9cqw; height: 9cqw; border-radius: 50%; border: 1.4cqw solid var(--red); background: var(--white); color: #000; display: grid; place-items: center; font-weight: 700; font-size: 4cqw; align-self: center; margin-left: 1cqw; transition: background .3s, color .3s; }
.lim.over { background: var(--red); color: var(--white); border-color: var(--white); }
.lim.big { width: 14cqw; height: 14cqw; font-size: 6.4cqw; border-width: 2cqw; }

/* Engine: rev arc and three cells */
.gauge { position: absolute; left: 5cqw; top: 2.4cqw; width: 46cqw; text-align: center; }
.gauge svg { width: 100%; display: block; }
.gauge .arc { transition: stroke-dashoffset .6s ease; }
.gauge b { display: block; font-size: 9cqw; line-height: .9; margin-top: -9cqw; }
.gauge small { font-size: 3cqw; color: #9aa5c4; }
.cells { position: absolute; right: 4cqw; top: 3cqw; bottom: 3cqw; width: 36cqw; display: grid; grid-template-rows: repeat(3, 1fr); gap: 1.6cqw; }
.cells div { min-height: 0; background: var(--ink-2); border-radius: 2cqw; padding: 0 3cqw; display: flex; justify-content: space-between; align-items: center; }
.cells small { font-size: 3.2cqw; color: #9aa5c4; }
.cells b { font-size: 4.8cqw; line-height: 1; }

/* Camera: the MotoPlay camera box, yellow far away, orange, then red and blinking; speed beside the limit */
.cambox { position: absolute; left: 5cqw; top: 6cqw; width: 52cqw; color: #ffd60a; display: grid; grid-template-columns: auto 1fr; gap: 2cqw 3cqw; align-items: center; transition: color .4s; }
.cambox svg { width: 16cqw; height: 16cqw; }
.cambox small { font-size: 3.6cqw; color: #c3cadc; display: block; }
.cambox b { font-size: 10cqw; line-height: .95; color: var(--white); }
.cambox .fill { grid-column: 1 / -1; height: 2.6cqw; border-radius: 2cqw; background: rgba(255,255,255,.12); overflow: hidden; }
.cambox .fill i { display: block; height: 100%; width: 20%; background: currentColor; transition: width .25s linear; }
.cambox.near { color: #ff9f0a; }
.cambox.close { color: var(--red); }
.cambox.close svg { animation: blink .5s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.camside { position: absolute; right: 7cqw; top: 6cqw; display: grid; justify-items: center; gap: 2cqw; }
.camside b { font-size: 11cqw; line-height: .9; }
.camside small { font-size: 3cqw; color: #9aa5c4; display: block; text-align: center; }

/* Music: equaliser cover and the track */
.cover { position: absolute; left: 6cqw; top: 4cqw; width: 28cqw; height: 28cqw; border-radius: 3cqw; background: linear-gradient(160deg, #1d2a52, #0c1330); display: flex; align-items: flex-end; justify-content: center; gap: 1.6cqw; padding: 5cqw; }
.cover i { width: 3cqw; height: 40%; background: var(--cyan); border-radius: 1cqw; }
.track { position: absolute; left: 40cqw; right: 6cqw; top: 6cqw; }
.track b { font-size: 8cqw; display: block; line-height: 1; }
.track span { font-size: 4.4cqw; color: #c3cadc; display: block; margin: 1cqw 0 4cqw; }
.track .prog { height: 1.4cqw; background: rgba(255,255,255,.15); border-radius: 1cqw; overflow: hidden; }
.track .prog i { display: block; height: 100%; width: 35%; background: var(--white); }
.track small { font-size: 3.2cqw; color: #9aa5c4; display: block; margin-top: 2.4cqw; }

/* Your screen: four designer boxes, a different look each time */
.boxes { position: absolute; inset: 2.4cqw 3cqw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.6cqw; }
.bx { min-height: 0; overflow: hidden; background: var(--ink-2); border-radius: 2.4cqw; padding: 0 3cqw; border-left: 1.2cqw solid var(--cyan); display: grid; align-content: center; transition: border-color .4s, transform .4s; }
.bx small { font-size: 3.2cqw; color: #9aa5c4; }
.bx b { font-size: 6.8cqw; line-height: 1; }
.bx span { font-size: 3cqw; color: #9aa5c4; }
.bx[data-k="weather"] { border-color: #ffd60a; }
.bx[data-k="eta"] { border-color: #32d74b; }
.bx[data-k="lean"] { border-color: #bf5af2; }

/* The dash's own address strip, and the grey band that slides over it */
.tft-road { position: relative; display: flex; align-items: center; gap: 2cqw; padding: 0 4cqw; background: rgba(2, 3, 5, .9); font-size: 5cqw; overflow: hidden; }
.tft-road .tri { font-size: 3.4cqw; }
.band { position: absolute; inset: 0; background: #5f6368; color: var(--white); display: flex; align-items: center; padding: 0 4cqw; font-size: 4.6cqw; transform: translateX(101%); transition: transform .5s ease; }
.band.show { transform: none; }

/* The handlebar keys and one dot per screen */
.keys { display: flex; align-items: center; justify-content: center; gap: 14px; }
.key { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line-dark); background: var(--ink-2); color: var(--white); font-size: 16px; cursor: pointer; }
.key:hover { border-color: var(--cyan); }
.key:active { transform: translateY(1px); }
.dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dot { border: 0; background: transparent; color: #8d97b3; font: 600 14px "Barlow", sans-serif; padding: 6px 10px; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; }
.dot[aria-current="true"] { color: var(--white); background: var(--ink-2); }
.dot[aria-current="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--cyan); }

/* Feature rows that open a screen on the dash */
.items .show { all: unset; display: block; cursor: pointer; width: 100%; }
.items .show:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.items .show b::after { content: " ↑"; color: var(--cyan); font-weight: 600; opacity: 0; transition: opacity .2s; }
.items .show:hover b::after, .items .show:focus-visible b::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .route-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.6s ease-out .3s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .scr.on .cover i { animation: eq 1.1s ease-in-out infinite alternate; }
  .scr.on .cover i:nth-child(2) { animation-delay: -.4s; } .scr.on .cover i:nth-child(3) { animation-delay: -.8s; }
  .scr.on .cover i:nth-child(4) { animation-delay: -.2s; } .scr.on .cover i:nth-child(5) { animation-delay: -.6s; }
  @keyframes eq { from { height: 20%; } to { height: 90%; } }
}

/* Sections on paper */
section.block { padding: 88px 0; }
section.block + section.block { border-top: 1px solid var(--line); }
h2 {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700; font-size: clamp(32px, 4vw, 46px); line-height: 1.05;
  margin: 0 0 14px;
}
.intro { color: var(--muted); max-width: 36em; margin: 0 0 48px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split h3 { font-size: 22px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.split h3 .chip { width: 30px; height: 16px; border-radius: 5px; border: 3px solid var(--cyan); }
.split h3 .chip.phone { width: 14px; height: 24px; border-color: var(--text); }
.split .sub { color: var(--muted); margin: 0 0 18px; font-size: 16px; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { padding: 16px 0; border-top: 1px solid var(--line); }
.items li b { display: block; font-size: 18px; }
.items li span { color: var(--muted); font-size: 16px; }

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.fit p { margin: 0 0 14px; max-width: 34em; }
.note { color: var(--muted); font-size: 15px; }

.beta {
  background: var(--ink); color: var(--white); border-radius: var(--radius-dash);
  padding: 44px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
}
.beta img { width: 88px; height: 88px; border-radius: 20px; }
.beta h2 { margin-bottom: 6px; }
.beta p { margin: 0; color: #c3cadc; max-width: 34em; }

.contact a.mail { font-size: clamp(24px, 3vw, 34px); font-weight: 600; text-decoration-color: var(--cyan); text-underline-offset: 6px; text-decoration-thickness: 3px; }

footer { background: var(--ink); color: #8d97b3; font-size: 14px; padding: 36px 0 44px; }
footer .wrap { display: grid; gap: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer nav a { color: var(--white); text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer p { margin: 0; max-width: 60em; }

/* Privacy page */
.doc { padding: 56px 0 88px; }
.doc .wrap { max-width: 820px; }
.doc h1 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: clamp(36px, 5vw, 54px); line-height: 1.02; margin: 0 0 10px; }
.doc .meta { color: var(--muted); margin: 0 0 40px; font-size: 16px; }
.doc h2 { font-size: 28px; margin: 44px 0 10px; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc code { font-size: .88em; background: #e6eaf2; padding: 1px 5px; border-radius: 4px; }
.table { overflow-x: auto; margin: 16px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 16px; min-width: 560px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc th { background: #e9edf4; }

@media (max-width: 900px) {
  .hero .wrap, .split, .fit { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 24px; }
  .beta { grid-template-columns: 1fr; padding: 32px 24px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  section.block { padding: 64px 0; }
  .tft { border-width: 6px; border-radius: 18px; }
  .keys { gap: 6px; }
  .dots { gap: 0; flex-wrap: nowrap; }
  .dot { padding: 6px 5px; font-size: 12px; white-space: nowrap; }
}