@import url("fonts.css");

/* Motorfile — motorfileapp.com
   The "Workshop" design language, the same one the app uses: British racing
   green for structure and anything valid, ochre for due soon, rust for overdue,
   slate for fuel and money. Day is the default face. Paper, not white; night is
   a green-cast charcoal, never black.

   Every text colour here was checked against the ground it actually sits on,
   not against white. Ochre in particular is #8F5D12 and not the lighter value
   it started as, because the lighter one scored 4.22 on its own wash. */

:root {
  --green:  #0D4A3A;
  --green-d:#093428;
  --ochre:  #8F5D12;
  --rust:   #A32E24;
  --slate:  #1C5A80;

  --paper:  #F1F2EE;
  --card:   #FFFFFF;
  --ink:    #16201B;
  --ink-2:  #46534C;   /* 5.9:1 on paper */
  --rule:   #D8DBD3;

  --wrap:   68rem;
  --display:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans:   "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }

a { color: inherit; }
.link { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { color: var(--green-d); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--green); color: #fff; padding: .75rem 1rem; z-index: 20;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--slate); outline-offset: 2px; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; flex-wrap: wrap; }

.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.wordmark .tally { width: 30px; height: 30px; border-radius: 7px; }
.wordmark .name {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -.015em; color: var(--ink);
}

.pages { margin-left: auto; display: flex; gap: 1.4rem; font-size: .95rem; }
.pages a { text-decoration: none; color: var(--ink-2); }
.pages a:hover { color: var(--green); }
.pages a[aria-current="page"] { color: var(--green); font-weight: 600; }

/* ---------- the one solid field ---------- */

.field {
  background: var(--green);
  color: #EAF2EE;
  padding-block: 4.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.field .engraved {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: #9EC3B5; margin: 0 0 1.25rem;
}
.field h1 {
  font-family: var(--display); font-weight: 700;
  /* One word, so it stays on one line: breaking "Motorfile" across two reads
     as a typesetting mistake rather than a lockup. */
  font-size: clamp(2.75rem, 9vw, 5rem); line-height: 1;
  letter-spacing: -.035em; margin: 0 0 1.25rem; color: #fff;
  white-space: nowrap;
}
.field .wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 60rem) {
  .field .wrap {
    grid-template-columns: minmax(0,1fr) 21rem;
    align-items: center; column-gap: 4.5rem;
  }
}
.field-copy { display: flex; flex-direction: column; align-items: flex-start; }

.field-sub {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.35;
  max-width: 30ch; margin: 0 0 2.5rem; color: #D4E6DE;
}

/* The number plate. The one instrument on the page — everything else is print.
   Real UK rear-plate yellow with the black legend, because a plate that is not
   plate-coloured reads as a graphic instead of as the thing you own. */
.plate {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #F5D426; color: #101010;
  border: 2px solid #0d0d0d; border-radius: 8px;
  padding: .55rem 1.1rem .5rem;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2.25rem); letter-spacing: .07em;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
  /* A registration that wraps is not a registration. */
  white-space: nowrap;
}
.plate .gb {
  background: #0b3d91; color: #F5D426; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  margin: -.55rem .5rem -.5rem -1.1rem; padding: 0 .5rem;
  border-radius: 5px 0 0 5px; font-size: .5em; letter-spacing: .05em; line-height: 1.1;
}

/* The one instrument on the site. Everything else is print. */
.instrument {
  margin: 0 0 2.25rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 1.75rem;
}
.instrument .readout {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.instrument .count {
  font-family: var(--mono); font-weight: 500; font-size: clamp(2.5rem,8vw,3.75rem);
  line-height: 1; color: #fff;
}
.instrument .count-label {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .13em;
  text-transform: uppercase; color: #9EC3B5;
}
.instrument .caption {
  display: block; margin-top: .85rem; max-width: 44ch;
  font-size: .95rem; color: #B9D3C9;
}

.cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.store {
  display: inline-flex; flex-direction: column; justify-content: center;
  border: 1.5px solid #7FAE9C; border-radius: 10px;
  padding: .5rem 1.1rem; color: #EAF2EE; text-decoration: none;
}
.store .small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #9EC3B5; }
.store .big { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.cta-note { font-size: .95rem; color: #C9DED6; }
.cta-note b { color: #fff; }

/* ---------- sections ---------- */

.section { padding-block: 4rem; border-top: 1px solid var(--rule); }
.section .wrap { display: grid; grid-template-columns: 12rem 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 48rem) { .section .wrap { grid-template-columns: 1fr; gap: 1.25rem; } }

.rubric .engraved, .engraved.rubric-line {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2); margin: .4rem 0 0;
}
.section h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 1.25rem;
}
.section h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  margin: 0 0 .4rem; letter-spacing: -.01em;
}
.prose p { margin: 0 0 1rem; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }

.promise {
  border-left: 4px solid var(--green); padding: .25rem 0 .25rem 1.1rem;
  margin: 0 0 1.5rem;
}
.promise p {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.25; margin: 0;
}

.points { margin: 1rem 0 0; padding-left: 1.1rem; }
.points li { margin-bottom: .7rem; max-width: 62ch; }

/* ---------- the ledger ---------- */

.ledger { list-style: none; margin: 0; padding: 0; counter-reset: l; }
.ledger > li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  padding: 1.5rem 0; border-top: 1px solid var(--rule);
}
.ledger > li:first-child { border-top: 0; padding-top: 0; }
.ledger .no {
  font-family: var(--mono); font-size: .85rem; color: var(--ink-2);
  padding-top: .2rem;
}

/* ---------- the statement (dotted-leader table) ---------- */

.statement { margin: 1.5rem 0 0; }
.statement > div { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; }
.statement dt {
  font-size: .95rem; color: var(--ink-2);
  display: flex; align-items: baseline; flex: 1 1 auto; gap: .5rem; min-width: 0;
}
.statement .leader {
  flex: 1 1 auto; border-bottom: 1px dotted var(--rule); transform: translateY(-.25em);
}
.statement dd {
  margin: 0; font-family: var(--mono); font-size: .92rem; font-weight: 500;
  color: var(--green); white-space: nowrap;
}
.statement dd.is-cost { color: var(--slate); }

/* ---------- pricing ---------- */

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tier {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.25rem;
}
.tier--lead { border-color: var(--green); border-width: 2px; }
.tier h3 { margin-bottom: .15rem; }
.tier .cost {
  font-family: var(--mono); font-weight: 500; font-size: 1.35rem;
  color: var(--green); margin: 0 0 .75rem;
}
.tier .cost small { font-size: .72rem; color: var(--ink-2); font-weight: 400; letter-spacing: .04em; }
.tier ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.tier li { padding: .3rem 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.tier li:first-child { border-top: 0; }
.tier li b { color: var(--ink); font-weight: 600; }

.note {
  font-size: .9rem; color: var(--ink-2); margin-top: 1.25rem; max-width: 62ch;
}

/* The thing we must never blur. Rust, because getting this wrong is the
   expensive kind of wrong. */
.caveat {
  border: 1px solid var(--rust); border-left-width: 4px; border-radius: 10px;
  background: #FDF6F5; padding: 1rem 1.15rem; margin-top: 1.5rem;
}
.caveat h3 { color: var(--rust); }
.caveat p { margin: 0; font-size: .95rem; max-width: 62ch; }

/* ---------- support / FAQ ---------- */

.faq { margin-top: 1rem; }
.faq > div { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.faq > div:first-child { border-top: 0; }
.faq h3 { margin-bottom: .35rem; }
.faq p { margin: 0; max-width: 62ch; color: var(--ink-2); }

.contact {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.25rem; margin-top: 1.5rem;
}
.contact .addr {
  font-family: var(--mono); font-size: 1.05rem; color: var(--green);
  text-decoration: none; word-break: break-all;
}

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; }
.colophon .wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.colophon .pages { margin-left: 0; }
.colophon .social {
  margin-left: auto; display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; color: var(--ink-2); font-size: .9rem;
}
.colophon .social:hover { color: var(--green); }
.colophon .ig { width: 19px; height: 19px; }
.colophon .fineprint { width: 100%; margin: .5rem 0 0; font-size: .85rem; color: var(--ink-2); }

/* ---------- night ----------
   A choice, not the default: only when the visitor's system asks for it.
   Green-cast charcoal, never black. */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101512;
    --card:  #171E1A;
    --ink:   #E8EDE9;
    --ink-2: #A2B0A9;   /* 7.3:1 on #101512 */
    --rule:  #2A332E;
    --green: #4FA98C;   /* lifted off the dark ground; the deep green fails on it */
    --green-d:#6FBFA4;
    --slate: #6FAFD4;
    --rust:  #E8796C;
  }
  .field { background: #0B3A2D; }
  .caveat { background: #241614; }
  .tier--lead { border-color: var(--green); }
}

/* ---------- phones ----------
   Real captures of the running app against live DVSA data, never mock-ups.
   402px wide (1x), so they are shown small enough to stay sharp on retina. */

.phone {
  border-radius: 26px;
  border: 7px solid #10160F;
  background: #10160F;
  box-shadow: 0 16px 34px rgba(13,74,58,.20), 0 2px 8px rgba(0,0,0,.12);
  overflow: hidden;
  display: block;
  flex: 0 0 auto;
}
.phone img { border-radius: 19px; display: block; width: 100%; }
@media (prefers-color-scheme: dark) {
  .phone { border-color: #05100C; box-shadow: 0 16px 34px rgba(0,0,0,.5); }
}

/* ---------- the showcase: 3, then 2, then 1, then 2, then 1 ----------
   The rhythm is the point. A row of three opens it, a single phone is a full
   stop, and the alternation stops the page reading as a list. */

.group { padding-block: 3.5rem; border-top: 1px solid var(--rule); text-align: center; }
.group:first-of-type { border-top: 0; }

.group-copy { max-width: 34rem; margin: 0 auto 2rem; }
.group-copy .rubric-tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 .5rem;
}
.group-copy h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.12;
  letter-spacing: -.02em; margin: 0;
}
.group-copy h3 b { color: var(--green); font-weight: 700; }
.group-copy p { margin: .65rem 0 0; color: var(--ink-2); font-size: 1rem; }

.rail { display: flex; justify-content: center; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; }
.rail .phone { width: 210px; }

/* Three across: the outer two sit back a little so the middle one leads. */
.rail--three .phone { width: 190px; }
.rail--three .phone:nth-child(1),
.rail--three .phone:nth-child(3) { transform: translateY(18px) scale(.94); }

.rail--two .phone { width: 205px; }
.rail--one .phone { width: 240px; }

@media (max-width: 40rem) {
  .rail { gap: .75rem; }
  .rail--three .phone { width: 30%; min-width: 96px; }
  .rail--three .phone:nth-child(1),
  .rail--three .phone:nth-child(3) { transform: none; }
  .rail--two .phone { width: 45%; }
  .rail--one .phone { width: 62%; }
}

/* ---------- the bottom of the page is centred ---------- */

.tail { text-align: center; }
.tail .wrap { display: block; }
.tail h2 { margin-inline: auto; }
.tail .prose p, .tail .note { margin-inline: auto; }
.tail .statement { max-width: 30rem; margin-inline: auto; }
.tail .caveat { max-width: 34rem; margin-inline: auto; text-align: left; }
.tail .tiers { max-width: 52rem; margin-inline: auto; }
.tail .rubric .engraved { text-align: center; }

.colophon .wrap { justify-content: center; text-align: center; }
.colophon .pages { margin-inline: auto; }
.colophon .fineprint { text-align: center; }

/* ---------- the hero lookup ----------
   A plate, an arrow, and what comes back. It is the whole product in one
   object, which is a better hero than a phone with a screenshot in it. */

.lookup {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  /* Wide enough that the plate never has to wrap inside it. */
  min-width: min(21rem, 100%);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.4rem;
}
.lookup-arrow { color: #7FAE9C; display: block; }
.lookup-arrow svg { width: 20px; height: 28px; display: block; }

.lookup-out { margin: 0; width: 100%; max-width: 19rem; }
.lookup-out > div {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .38rem 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.lookup-out > div:first-child { border-top: 0; }
.lookup-out dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: #9EC3B5; flex: 1 1 auto;
}
.lookup-out dd {
  margin: 0; font-family: var(--mono); font-size: .9rem; color: #fff;
  white-space: nowrap;
}
.lookup-note {
  margin: .1rem 0 0; font-size: .78rem; color: #9EC3B5; text-align: center;
}

@media (max-width: 60rem) {
  .lookup { margin-top: .5rem; }
}

/* ---------- the mark on the hero card ----------
   Full strength and slightly tilted, stuck to the corner of the lookup card
   like a sticker. The earlier attempt was a huge faded version behind the
   headline, which read as a smudge and sat under the type; this one is a real
   object, and being anchored to the card it can never land on a word. */

.field-mark {
  position: absolute;
  left: -1.9rem;
  top: -1.9rem;
  width: 5.25rem;
  height: auto;
  border-radius: 1.1rem;
  transform: rotate(-12deg);
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 60rem) {
  .field-mark { left: -1rem; top: -1.4rem; width: 4.25rem; }
}

/* ---------- the hero lookup ----------
   A plate, an arrow, and what comes back. It is the whole product in one
   object, which is a better hero than a phone with a screenshot in it. */

.lookup {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  /* Wide enough that the plate never has to wrap inside it. */
  min-width: min(21rem, 100%);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.4rem;
}
.lookup-arrow { color: #7FAE9C; display: block; }
.lookup-arrow svg { width: 20px; height: 28px; display: block; }

.lookup-out { margin: 0; width: 100%; max-width: 19rem; }
.lookup-out > div {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .38rem 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.lookup-out > div:first-child { border-top: 0; }
.lookup-out dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: #9EC3B5; flex: 1 1 auto;
}
.lookup-out dd {
  margin: 0; font-family: var(--mono); font-size: .9rem; color: #fff;
  white-space: nowrap;
}
.lookup-note {
  margin: .1rem 0 0; font-size: .78rem; color: #9EC3B5; text-align: center;
}

@media (max-width: 60rem) {
  .lookup { margin-top: .5rem; }
}