/* One Wrench Pro site. One stylesheet, system fonts, no third-party anything.
   Mobile-first: the base rules are the phone layout; the media queries widen it.
   The header, hero (a road, road.js) and How it works (the same road carrying on) and the footer are
   always dark, for the logo and the phones; the sections between follow the light or dark setting. */

:root {
  --black: #000000;
  --on-black: #ffffff;
  --on-black-2: #c9ccd1;
  --on-black-3: #9a9ea6;
  --edge: #3a3d42;
  --red: #d90f18;
  --red-bright: #ff3b3f;
  --paper: #f6f6f4;
  --card: #ffffff;
  --ink: #15171b;
  --ink-2: #484c54;
  --ink-3: #686d76;
  --line: #e1e2de;
  --accent: #c20f1b;
  --accent-soft: #fbeaeb;
  --replace: #c20f1b;
  --radius: 18px;
  --gutter: 20px;
  --max: 1120px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1013;
    --card: #181b20;
    --ink: #f0f1f3;
    --ink-2: #b9bdc5;
    --ink-3: #8f949d;
    --line: #2b2f36;
    --accent: #ff5a5e;
    --accent-soft: #2c1518;
    --replace: #ff8f86;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.preview-bar { margin: 0; padding: 6px var(--gutter); background: #ffd60a; color: #000; font-size: 14px; font-weight: 700; text-align: center; }

/* Header */
.site-head { background: var(--black); color: var(--on-black); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.site-head-home .wrap { justify-content: flex-end; min-height: 52px; }
.brand { display: block; flex: none; }
.brand img { width: auto; height: 40px; }
.nav { display: flex; gap: 18px; font-size: 15px; }
.nav a { color: var(--on-black-2); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-black); text-decoration: underline; }
.site-head :focus-visible, .hero :focus-visible, .site-foot :focus-visible { outline-color: var(--on-black); }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--black); color: var(--on-black); padding: 8px 0 44px; }
.road {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px);
}
/* Keeps the words readable where the road runs behind them. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .62) 20%, rgba(0, 0, 0, .62) 42%, rgba(0, 0, 0, 0) 58%);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 36px; }
.hero-text { text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.hero-text .btn, .hero-text .soon { text-shadow: none; }
.soon { background: rgba(0, 0, 0, .55); }
.hero-logo { width: 100%; max-width: 440px; margin: 0 0 28px; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-black-3); margin: 0 0 10px; }
h1 { font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 span { color: var(--red-bright); }
.lede { font-size: 19px; color: var(--on-black-2); margin: 0 0 26px; max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cta-note { font-size: 15px; color: var(--on-black-3); margin: 16px 0 0; }

.soon {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  min-height: 48px; padding: 10px 18px; border: 1px solid #5c6068; border-radius: 999px;
  color: var(--on-black); font-weight: 600; font-size: 16px;
}
.soon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red-bright); flex: none; }

.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid #a6a6a6; border-radius: 10px;
  padding: 8px 18px 9px 14px; line-height: 1.1;
}
.store-badge svg { width: 24px; height: 24px; fill: #fff; flex: none; }
.store-badge small { display: block; font-size: 11px; }
.store-badge strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 17px; font-weight: 600; color: #fff; background: var(--red); text-decoration: none;
  border: 0; border-radius: 999px; padding: 12px 28px; min-height: 48px; cursor: pointer; justify-self: start;
}
.btn:hover { background: #ec1620; }
.btn:disabled { opacity: .6; cursor: default; }

/* Phone screens */
.shot { position: relative; margin: 0 auto; max-width: 300px; width: 100%; }
.phone {
  position: relative; overflow: hidden; width: 100%; background: #f2f2f7;
  border: 7px solid #17191c; border-radius: 42px;
  box-shadow: 0 0 0 1px #4a4d53, 0 18px 44px rgba(10, 12, 16, .28);
}
.phone img { width: 100%; }

/* The phones that play through a job (flows.js). Without the script, the first screen just stays. */
.frame { position: absolute; left: 0; top: 0; opacity: 0; }
.frame:first-child { position: relative; opacity: 1; }
.is-playing .frame { opacity: 0; }
.is-playing .frame.is-on { opacity: 1; }
.tap {
  position: absolute; z-index: 5; width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%; border-radius: 50%; opacity: 0;
  background: rgba(20, 22, 26, .3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 10px rgba(0, 0, 0, .35); pointer-events: none;
}
.shot figcaption { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 12px; letter-spacing: .02em; }
.shot-hero { max-width: 280px; }
.shot-hero .phone, .shot-hero figcaption { position: relative; }
.shot-hero .phone { border-color: #101114; box-shadow: 0 0 0 1px #6a6e75, 0 24px 60px rgba(0, 0, 0, .6); }
.shot-hero figcaption { color: var(--on-black-3); }

/* The day it gives back: the hero's road carries on down the page. Red and silver shoulders at the edges,
   and on wider screens the center line between the words and the phone. */
.day {
  --ink: #ffffff; --ink-2: #c9ccd1; --ink-3: #9a9ea6; --line: #2b2e33;
  position: relative; overflow: hidden; color: var(--ink); padding: 40px 0 28px;
  background: #17191d url(img/asphalt.webp);
}
.day::before, .day::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.day::before { left: 0; width: 13px; border-left: 6px solid #d90f18; border-right: 2px solid rgba(205, 208, 214, .55); }
.day::after { right: 0; width: 8px; border-left: 2px solid rgba(205, 208, 214, .55); border-right: 3px solid rgba(205, 208, 214, .3); }
.center-line { display: none; }
.day .wrap { position: relative; }
.day::after, .day .wrap { z-index: 1; }
.section-title { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
.section-lede { color: var(--ink-2); margin: 0 0 28px; max-width: 38em; }

.moment { display: grid; gap: 24px; padding: 36px 0; align-items: center; }
.moment h3 { font-size: 24px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em; }
.moment p { margin: 0 0 12px; color: var(--ink-2); }
.moment .gives { font-weight: 600; color: var(--ink); }
.moment .step { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: var(--red); border-radius: 999px; padding: 3px 12px; margin-bottom: 12px; }
.day .phone { box-shadow: 0 0 0 1px #5c6068, 0 24px 60px rgba(0, 0, 0, .55); }
.day .shot figcaption { color: var(--on-black-3); }

/* And the rest of the job: a row that swipes sideways on a phone */
.more { padding: 36px 0 8px; }
.more .section-title { margin-bottom: 20px; }
.more-row {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 20px; scroll-padding: 0 var(--gutter);
}
.more-card { flex: 0 0 min(76%, 260px); margin: 0; scroll-snap-align: start; }
.more-card .shot { max-width: none; }
.more-card figcaption { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.more-card strong { color: var(--ink); }
.more-note { font-size: 12px; color: var(--ink-3); margin: 0 0 8px; }

/* Records */
.records { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; margin: 24px 0 8px; }
.records h2 { margin-top: 0; }
.records .section-lede { margin-bottom: 0; }
.records ul { margin: 16px 0 0; padding-left: 20px; color: var(--ink-2); }
.records li { margin-bottom: 8px; }

/* Pricing */
.pricing { padding: 48px 0 16px; }
.pricing .section-lede { margin-bottom: 0; }
.plans { display: grid; gap: 16px; margin-top: 24px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.plan-featured { border: 2px solid var(--red); }
.plan h3 { margin: 0 0 4px; font-size: 22px; }
.price { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; line-height: 1.2; }
.price small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.plan .alt { margin: 0 0 14px; color: var(--ink-3); font-size: 15px; }
.fee { background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { padding: 8px 0 8px 26px; border-top: 1px solid var(--line); position: relative; font-size: 15px; }
.plan li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.fine { font-size: 14px; color: var(--ink-3); margin-top: 16px; max-width: 52em; }
.price-soon { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.price-soon p { margin: 0; color: var(--ink-2); }
.price-soon .price-soon-title { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }

/* Android waitlist */
[hidden] { display: none !important; }
.android { padding: 40px 0 8px; }
.waitlist { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.waitlist .section-lede { margin-bottom: 20px; }
.waitlist-form { display: grid; gap: 14px; max-width: 40em; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 15px; }
.optional { font-weight: 400; color: var(--ink-3); }
.field input {
  font: inherit; font-size: 17px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 48px; width: 100%;
}
.field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); border-radius: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; font-size: 15px; }
.form-note:empty { margin-top: -14px; }
.form-note.is-error { color: var(--replace); font-weight: 600; }
.waitlist-thanks { font-size: 19px; font-weight: 600; margin: 0; }
.waitlist-thanks:focus { outline: none; }
.waitlist .fine { margin: 16px 0 0; }

/* FAQ */
.faq { padding: 40px 0 24px; }
.faq .section-title { margin-bottom: 16px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; align-items: center; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s; }
details[open] summary::before { transform: rotate(45deg); }
details[open] summary { border-bottom: 1px solid var(--line); }
details p, details ul, details ol { color: var(--ink-2); }
details > :last-child { margin-bottom: 16px; }

/* Long-form pages: support, privacy, terms */
.doc { padding: 40px 0 24px; max-width: 760px; }
.doc h1 { font-size: 34px; }
.doc h2 { font-size: 22px; margin: 36px 0 8px; }
.doc h3 { font-size: 18px; margin: 24px 0 6px; }
.doc p, .doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); }
.draft { background: #fff4d6; color: #5a4200; border: 1px solid #ecd28b; border-radius: 12px; padding: 12px 16px; font-weight: 600; margin: 0 0 24px; }
@media (prefers-color-scheme: dark) { .draft { background: #3a2f10; color: #f4dc9a; border-color: #6b5520; } }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--ink); background: var(--card); }
td { color: var(--ink-2); }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0 8px; }
.contact-card p { margin: 0; }

/* Footer */
.site-foot { background: var(--black); color: var(--on-black-3); margin-top: 48px; padding: 32px 0 40px; font-size: 15px; }
.site-foot .wrap { display: grid; gap: 14px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-foot a { color: var(--on-black-2); }
.foot-mark { width: auto; height: 44px; }
.credit { margin: 0; }

/* Wider screens */
@media (min-width: 760px) {
  :root { --gutter: 32px; }
  h1 { font-size: 50px; }
  .hero { padding: 8px 0 64px; }
  .lede { font-size: 20px; }
  .section-title { font-size: 34px; }
  .day .section-lede { max-width: 30em; }
  .moment { grid-template-columns: 1fr 1fr; gap: 96px; padding: 56px 0; }
  .moment:nth-of-type(even) .moment-text { order: 2; }
  /* The center line, moving. Taller than the section so it can slide one dash and repeat. */
  .center-line {
    display: block; position: absolute; left: 50%; top: -128px; bottom: -128px; width: 6px; margin-left: -3px; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(236, 237, 240, .6) 0 60px, rgba(236, 237, 240, 0) 60px 128px);
    animation: road-dash 1.15s linear infinite;
  }
  @keyframes road-dash { to { transform: translateY(128px); } }
  @media (prefers-reduced-motion: reduce) { .center-line { animation: none; } }
  .more-row { overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 4px 0 20px; }
  .more-card { max-width: 300px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .records { padding: 36px 40px; }
  .waitlist { padding: 36px 40px; }
  .price-soon { padding: 36px 40px; }
  .waitlist-form { grid-template-columns: 1fr 1fr; align-items: end; }
  .waitlist-form .btn, .waitlist-form .form-note { grid-column: 1 / -1; }
  .site-foot .wrap { grid-template-columns: auto 1fr; align-items: center; column-gap: 32px; }
  .site-foot .credit { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 340px; gap: 56px; align-items: center; }
  .hero::after { background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .66) 38%, rgba(0, 0, 0, 0) 62%); }
  .hero-logo { max-width: 360px; margin-bottom: 22px; }
  .shot-hero { max-width: 320px; }
}

@media (min-width: 1080px) {
  h1 { font-size: 56px; }
  .plans { grid-template-columns: repeat(4, 1fr); align-items: start; }
}