/* Drive Everywhere: the app's web page, privacy policy and support page. Fonts are served
   from here, not a font service, so visiting sends nothing anywhere else. */

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* The honeycomb's tile (Tools/make_site_pattern.py). */
  --comb-w: 312px;
  --comb-h: 225px;
  /* The fixed header's height, which content starts below. */
  --header-h: 76px;
  /* The logo's colours. */
  --red: #e30613;
  --blue: #1f5fd6;
  --blue-deep: #184db0;
  --background: #f2f2f7;
  --seam: #e6e6ec;
  --card: #ffffff;
  --text: #1c1c1e;
  --subtle: #636366;
  /* The app's interactive blue. */
  --link: #2f6fe4;
  --orange: #e8590c;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.05);
  /* Always light, as the app's screenshots are. */
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--text);
  font: 400 17px/1.5 "Roboto", -apple-system, system-ui, sans-serif;
}

a { color: var(--link); text-underline-offset: 2px; }

.page {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  /* Below the fixed header. */
  padding: calc(var(--header-h) + 24px) 16px 96px;
}
.page.wide { max-width: 1040px; }
/* On the home page, the hero is already below the header, and the band's edges give
   the space around it. */
.blue + .page { padding-top: 0; }

/* The header, fixed over the top of the page. Clear at the top, its frosted white fades in
   as the page scrolls (header.js sets --header-fade; without it, it's always there). */
/* Links to a heading on the page stop below the fixed header. */
html { scroll-padding-top: 96px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
  opacity: var(--header-fade, 1);
}
/* The logo and link sit on white pills over the page, which fade as the frosted header
   fades in, so they end up on the glass alone. */
.bar .logo,
.bar nav a {
  --pill: calc(1 - var(--header-fade, 1));
  background: rgb(255 255 255 / var(--pill));
  box-shadow: 0 1px 2px rgb(0 0 0 / calc(0.04 * var(--pill))), 0 8px 24px rgb(0 0 0 / calc(0.05 * var(--pill)));
}
/* On the glass, the link's pill comes back under the pointer. */
.bar nav a { transition: background-color 0.15s, box-shadow 0.15s; }
.bar nav a:hover { --pill: 1; }
.bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1040px;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 16px;
}

/* The logo in a white pill, as at the top of the app's dashboard. */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
.logo img { display: block; height: 24px; width: auto; }

nav a {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}

h1, h2.display, h3.display {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

h1 { font-size: clamp(36px, 8vw, 52px); }
h2.display { font-size: clamp(28px, 5.5vw, 38px); margin-bottom: 12px; }
h3.display { font-size: clamp(26px, 5vw, 34px); margin-bottom: 12px; }

.lead {
  color: var(--subtle);
  font-size: 19px;
  margin: 12px 0 28px;
}

.label {
  color: var(--subtle);
  margin: 0 16px 8px;
}

.small { font-size: 14px; margin: 14px 0 0; opacity: 0.85; }

.eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  opacity: 0.85;
}

.button {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.button.light { background: #fff; color: var(--blue); }
/* Not a link yet: the app isn't out. */
.button.soon { margin: 0; cursor: default; }

/* Cards, as in the app: white, rounded, with rows between hairlines. */
.card {
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow);
  margin: 0 0 24px;
  padding: 4px 20px;
}
.card > section { padding: 14px 0; }
.card > section + section { border-top: 1px solid var(--seam); }
.card h2 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 4px;
}
.card p { color: var(--subtle); margin: 0; }
.card p + p { margin-top: 8px; }
.card ul { color: var(--subtle); margin: 8px 0 0; padding-left: 20px; }
.card li + li { margin-top: 4px; }
.card li > ul { margin-top: 4px; }
.card ul + p { margin-top: 8px; }
.card strong { color: var(--text); font-weight: 500; }
/* A heading over a group of cards, on a long page. */
h2.group { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 36px 0 12px; }

/* The footer: a white band across the page, which the honeycomb fades into. */
.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--card);
  color: var(--subtle);
  font-size: 14px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}
.footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 32px 40px;
}
.site-footer p { margin: 4px 0; }
.footer-links {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.footer-links > div { min-width: 0; }
.footer-nav {
  flex-shrink: 0;
  list-style: none;
  margin: 4px 0;
  padding: 0;
  text-align: right;
}
.footer-nav li + li { margin-top: 4px; }
.footer-links a { overflow-wrap: anywhere; }

/* The home page. */

/* Full width, from the very top of the page under the header: the logo's blue with the
   honeycomb of driving icons in it, the words centred, and the app below them. */
.hero {
  display: grid;
  justify-items: center;
  gap: 48px;
  padding: calc(var(--header-h) + 48px) 16px 64px;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
/* The logo's blue with the honeycomb of driving icons in it, behind the hero and the band,
   in one piece so the honeycomb runs on unbroken. */
.blue {
  position: relative;
  background-color: var(--blue);
  background-image: url("honeycomb-blue.svg");
  background-size: var(--comb-w) var(--comb-h);
  background-position: center top;
}
/* As in the app (HexagonPattern.swift): the same icons, brighter, seen only through a soft
   diagonal band that sweeps across every seven seconds, unless motion is reduced. Only in
   the hero, fading out above the hexagons (which start 160px up it), as it looks wrong
   passing under them. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("honeycomb-blue-highlight.svg");
  background-size: var(--comb-w) var(--comb-h);
  background-position: center top;
  /* The band is three fifths of the hero wide, on a mask three times as wide, so it starts
     and ends off the edges; the second mask fades it out at the bottom. */
  --sweep-band: linear-gradient(110deg, transparent 40%, #000 50%, transparent 60%);
  --sweep-fade: linear-gradient(to bottom, #000 calc(100% - 260px), transparent calc(100% - 170px));
  -webkit-mask-image: var(--sweep-band), var(--sweep-fade);
  mask-image: var(--sweep-band), var(--sweep-fade);
  -webkit-mask-size: 300% 100%, 100% 100%;
  mask-size: 300% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0, 0 0;
  mask-position: 100% 0, 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: hero-sweep 7s infinite;
  pointer-events: none;
}
/* 2.4 seconds to cross, then a wait. */
@keyframes hero-sweep {
  0% { -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; animation-timing-function: ease-in-out; }
  34%, 100% { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { display: none; }
}
/* Over the highlight and the hexagons. */
.blue > *,
.hero > * { position: relative; }
.hero h1 { font-size: clamp(40px, 7.5vw, 64px); }
.hero .lead { color: #fff; opacity: 0.9; }
.hero-copy { max-width: 720px; }
.hero .lead { max-width: 600px; margin-left: auto; margin-right: auto; }

.phone {
  justify-self: center;
  width: min(280px, 72vw);
  border-radius: 40px;
  border: 7px solid #1c1c1e;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 24px 48px rgb(0 0 0 / 0.12);
  overflow: hidden;
  background: var(--background);
}
.phone img { display: block; width: 100%; height: auto; }

/* Two whole phones side by side, overlapping, the front one a little lower. */
.devices {
  display: grid;
  width: min(540px, 100%);
}
.devices .phone {
  grid-area: 1 / 1;
  width: 52%;
  border-width: 6px;
  border-radius: 34px;
}
.devices .back { justify-self: end; margin-right: 2%; }
.devices .front {
  justify-self: start;
  margin-left: 2%;
  margin-top: 14%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 24px 48px rgb(0 0 0 / 0.3);
}

/* The tour of the app, on the blue under hexagons of the page's grey (hexagons.js), one on
   each of the honeycomb's icons. They start up in the hero, behind its phones, and close
   up to grey at the bottom, so there's room for that below the tour. Without the
   script, the band is plain grey. */
.band { background: var(--background); }
.blue.hexed .band { background: none; }
.band > .page { padding-top: 120px; padding-bottom: 200px; }
.blue > canvas.hexagons {
  position: absolute;
  left: 0;
  width: 100%;
}

/* The app a screen at a time. On a phone, each screen's words and then the screen. */
.tour {
  display: grid;
  gap: 32px;
  justify-items: center;
}
.tour .phone { width: min(260px, 72vw); margin-bottom: 40px; }
/* The section's title, over the phones. */
.tour-title { text-align: center; margin: 0 auto 56px; max-width: 640px; }
.tour-title p { color: var(--subtle); font-size: 19px; margin: 0; }
.tour-text { max-width: 560px; }
.tour-text p { color: var(--subtle); font-size: 19px; margin: 0; }
.tour > .phone { order: var(--order); }
.tour > .tour-text { order: calc(var(--order) - 1); }
.tour > :nth-child(-n + 2) { --i: 0; --order: 1; }
.tour > :nth-child(n + 3):nth-child(-n + 4) { --i: 1; --order: 3; }
.tour > :nth-child(n + 5):nth-child(-n + 6) { --i: 2; --order: 5; }
.tour > :nth-child(n + 7):nth-child(-n + 8) { --i: 3; --order: 7; }
.tour > :nth-child(n + 9):nth-child(-n + 10) { --i: 4; --order: 9; }
.tour > :nth-child(n + 11):nth-child(-n + 12) { --i: 5; --order: 11; }
/* On a phone the words come first. */

@media (min-width: 760px) {
  .hero { padding-top: calc(var(--header-h) + 80px); }
  /* Down alternate sides, each phone overlapping the next by a fifth of its height, and
     its words in the middle three fifths beside it. The rows are fifths of a phone. */
  .tour {
    --phone-w: 280px;
    --fifth: calc(((var(--phone-w) - 14px) * 1311 / 603 + 14px) / 5);
    grid-template-columns: var(--phone-w) 1fr var(--phone-w);
    grid-template-rows: repeat(25, var(--fifth));
    column-gap: 64px;
    row-gap: 0;
    justify-items: stretch;
    padding: 0 40px;
  }
  .tour .phone { width: var(--phone-w); margin: 0; }
  .tour > * { order: 0; }
  .tour > .phone { grid-row: calc(var(--i) * 4 + 1) / span 5; }
  .tour > .tour-text { grid-row: calc(var(--i) * 4 + 2) / span 3; align-self: center; }
  .tour > .phone:nth-child(4n + 1) { grid-column: 1; }
  .tour > .tour-text:nth-child(4n + 2) { grid-column: 2 / 4; }
  .tour > .phone:nth-child(4n + 3) { grid-column: 3; }
  .tour > .tour-text:nth-child(4n) { grid-column: 1 / 3; }
}

/* More of the app, a slide at a time (carousel.js). On a phone: the slide's words (as
   tall as the longest, so the phone doesn't jump), the phone, then the list of slides as
   pills. */
.more h2.display { text-align: center; margin: 120px 0 40px; }
.carousel {
  display: grid;
  justify-items: center;
  gap: 28px;
}
/* A phone for each slide, on top of each other: the current one in place, the others
   off to the side, smaller and faded out, so each slides in from the right as the last
   slides out to the left (the other way when going back). */
.phones { display: grid; width: min(280px, 72vw); }
/* So a phone out to the side never makes the page scroll sideways. */
main { overflow-x: clip; }
.phones .phone { grid-area: 1 / 1; width: 100%; }
.phones .phone:not(:first-child) { visibility: hidden; }
.js-carousel .phones .phone {
  visibility: visible;
  opacity: 0;
  transform: translateX(60%) scale(0.8);
  pointer-events: none;
}
.js-carousel .phones .phone.left { transform: translateX(-60%) scale(0.8); }
.js-carousel .phones .phone.current { opacity: 1; transform: none; pointer-events: auto; }
/* Animated only once it's set up, so nothing moves as the page loads. */
.carousel.ready .phones .phone { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s; }
.carousel.ready .phones .phone.instant { transition: none; }

.slide-texts { display: grid; max-width: 420px; }
.slide-text h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 10px; }
.slide-text p { color: var(--subtle); font-size: 18px; margin: 0; }
.slide-text + .slide-text { margin-top: 24px; }
/* With the script, one slide's words at a time, fading between them in the same place. */
.js-carousel .slide-text { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; }
.js-carousel .slide-text.current { opacity: 1; visibility: visible; }
.carousel.ready .slide-text { transition: opacity 0.35s, visibility 0s 0.35s; }
.carousel.ready .slide-text.current { transition: opacity 0.35s 0.15s; }

.slide-nav {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.js-carousel .slide-nav { display: flex; }
.slide-nav button {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.slide-nav button[aria-current="true"] { background: var(--blue); color: #fff; }

/* Beside a wide enough window: the words to the left of the phone, the list to its right. */
@media (min-width: 900px) {
  .carousel {
    grid-template-columns: 1fr 300px 1fr;
    align-items: center;
    gap: 56px;
  }
  .phones { width: 300px; grid-column: 2; grid-row: 1; }
  .slide-texts { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
  .slide-nav { grid-column: 3; grid-row: 1; justify-self: start; flex-direction: column; align-items: flex-start; }
  .slide-nav button { box-shadow: none; background: none; padding: 8px 16px; color: var(--subtle); }
  .slide-nav button:hover { color: var(--text); }
  .slide-nav button[aria-current="true"] { background: var(--card); box-shadow: var(--shadow); color: var(--text); font-weight: 500; }
}

/* The arrears pill and the "No lessons booked" note, as the app shows them. */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgb(232 89 12 / 0.14);
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.private { margin-top: 112px; text-align: center; }
.private p { color: var(--subtle); max-width: 560px; margin: 0 auto 12px; font-size: 19px; }

/* At the top of the footer, on its white. */
.cta { text-align: center; padding: 16px 16px 72px; color: var(--text); font-size: 17px; }
.cta h2 { margin-bottom: 24px; }
.cta .small { color: var(--subtle); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .carousel.ready .phones .phone { transition: opacity 0.3s; }
  .js-carousel .phones .phone,
  .js-carousel .phones .phone.left { transform: none; }
}