/* ---------------------------------------------------------------------------
   uprota.co.uk — the public site.

   Hand-written CSS on purpose. This site is three static files; a build step
   would add a thing to break for no gain, and Cloudflare serves static files
   free and unmetered.

   THE TOKENS BELOW ARE COPIED FROM app/globals.css (the light theme). They are
   not new values. If a colour changes in the app, change it here too, or the
   site and the screenshots will drift apart. Light theme only: the app has a
   dark mode, the public page does not need one.
--------------------------------------------------------------------------- */

:root {
  /* ground and surfaces */
  --ground:      #F4F3EE;
  --paper:       #FFFFFF;
  --paper-sunk:  #FBFAF7;
  --rail:        #E9E6DD;
  --ink:         #17212B;
  --ink-soft:    #4A5561;
  --ink-faint:   #5B6570;
  --line:        #E4E1D8;
  --line-strong: #D9D5CA;

  /* brand */
  --accent:      #0E5E5B;
  --accent-soft: #E6F1EF;
  --chrome:      #12302F;
  --chrome-2:    #1F4A48;
  --signal:      #F2B544;

  /* the four states the grid speaks in */
  --gap:         #9A4508;
  --gap-soft:    #FEF6EA;
  --gap-edge:    #C9761C;
  --gap-solid:   #B45309;

  --stop:        #B42318;
  --stop-soft:   #FDF0EE;
  --stop-edge:   #D0442F;
  --stop-ink:    #B42318;

  --check:       #5C4A14;
  --check-soft:  #FAF6EA;
  --check-edge:  #D8C9A0;
  --check-pill:  #F0E6C6;

  --shut:        #4A5561;
  --shut-soft:   #F4F2EC;
  --shut-hatch:  #ECE9E1;

  --dusk:        #3F4C8A;
  --dusk-edge:   #D5D9EE;
  --dusk-eve:    #F3F4FB;

  --focus:       #0E5E5B;
  --shadow:      0 1px 2px rgb(23 33 43 / .06), 0 8px 24px rgb(23 33 43 / .06);
  --shadow-lift: 0 2px 4px rgb(23 33 43 / .06), 0 18px 48px rgb(23 33 43 / .10);
  --radius-cell: 8px;
  --radius-card: 12px;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  --font-text:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;

  /* One gutter, set once, so nothing can scroll sideways on a phone. */
  --gutter: 24px;
  --measure: 1120px;
}

/* ------------------------------- the faces -------------------------------- */
/* Self-hosted, latin subset, variable weight — two files, no network call to
   anybody else at page load. `swap` so text is readable before they arrive. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------- reset ---------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

/* One focus treatment everywhere, and it is always visible. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--accent);
  padding: 12px 18px;
  z-index: 10;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -------------------------------- layout ---------------------------------- */

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

section { padding-block: 76px; }
section + section { border-top: 1px solid var(--line); }

/* A section that carries a screenshot gets its own paper ground, so the
   picture sits on white rather than floating on the warm ground. */
.on-paper { background: var(--paper); }

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

.kicker {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

h2 { font-size: 32px; font-weight: 700; margin-bottom: 18px; }
h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }

/* A column of reading text. The measure is set on the CHILDREN, not on the
   block: put it on the block and, because the block is also the centred
   .wrap, the whole section slides into the middle of the page and stops
   lining up with every other section's left edge. */
.prose > * { max-width: 66ch; }
.prose h3 { margin-top: 32px; }

/* ------------------------------- app bar ---------------------------------- */
/* Deliberately the app's own bar: the same --chrome, the same lockup, so the
   page and the thing it describes are recognisably one. */

.bar {
  background: var(--chrome);
  color: #fff;
  padding-block: 14px;
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lockup img { width: 28px; height: 28px; }
.lockup .up { color: var(--signal); }

.bar nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bar nav a {
  color: #D9E4E2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
}
.bar nav a:hover { background: var(--chrome-2); color: #fff; }
.bar nav a[aria-current="page"] { background: var(--chrome-2); color: #fff; }

/* --------------------------------- hero ----------------------------------- */

.hero { padding-block: 84px 72px; }
.hero h1 {
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 800;
  margin-bottom: 22px;
  max-width: 24ch;
}
.hero .replaces {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 32px;
}

.eyebrow {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

/* --------------------------- the hero picture ----------------------------- */
/*
 * The desktop screen with a phone overlapping its bottom-right corner. The
 * phone is positioned rather than floated so it can hang OVER the edge, which
 * is the whole point of the arrangement: it says "the same rota, both places"
 * in one glance.
 *
 * Below 760px the overlap is dropped and the two sit side by side, because a
 * phone hanging off the corner of a picture that is itself only 340px wide is
 * a smudge rather than a second screen.
 */
.hero-visual {
  position: relative;
  margin-top: 48px;
  padding-bottom: 46px;   /* room for the phone to hang into */
  padding-right: 0;
}
.hero-desk {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-sunk);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-width: 940px;
}
.hero-desk img { width: 100%; display: block; }

.hero-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 186px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.hero-phone img { width: 100%; display: block; }

@media (max-width: 900px) {
  .hero-visual { padding-bottom: 0; }
  .hero-desk { max-width: none; }
  .hero-phone {
    position: static;
    width: 150px;
    margin: 18px auto 0;
  }
}

/* -------------------------------- features -------------------------------- */

.features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 44px;
}
.feature { margin: 0; }
.feature h3 { font-size: 19px; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-size: 16px; max-width: 46ch; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 14px;
}
.feature-icon svg { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; gap: 30px; }
}

/* An arrow link, for "Send a suggestion →". */
.arrow-link { font-weight: 600; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.arrow-link span { display: inline-block; margin-left: 4px; }

/* ------------------------------- buttons ---------------------------------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #0b4c4a; }
.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
  font-weight: 600;
}
.btn-secondary:hover { border-color: var(--ink-faint); }

/* ------------------------------- figures ---------------------------------- */

figure { margin: 0; }

.shot {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper-sunk);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.shot img { width: 100%; }

figcaption {
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 12px;
}

/* Three phones side by side, stacking on a narrow screen. */
.phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.phones figure { text-align: center; }
.phones .shot { margin-top: 0; border-radius: 18px; }
.phones figcaption { text-align: left; }

/* Two phones rather than three: narrower, so they do not blow up to half the
   page each on a wide screen. */
.phones-two {
  grid-template-columns: repeat(2, minmax(0, 260px));
  justify-content: start;
  gap: 32px;
}
.phones-two figcaption {
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
}

/* -------------------------- the four states ------------------------------- */
/* Small real cards in the real colours, so the page shows the language rather
   than only describing it. Each one carries its words as well as its colour —
   that is the whole point of the design and it has to hold here too. */

.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 34px;
  list-style: none;
  padding: 0;
}
.states > li { margin: 0; }

.cell {
  border-radius: var(--radius-cell);
  padding: 12px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  /* All four the same height, so the names underneath sit on one line. The
     tallest is the red one, whose message runs to two lines. */
  min-height: 110px;
}
.cell .surgeon {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cell .surgeon span { font-weight: 400; color: var(--ink-faint); }
.cell .person { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cell .person .grade { font-size: 11px; font-weight: 400; color: var(--ink-faint); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.cell.is-gap { background: var(--gap-soft); border: 1.5px dashed var(--gap-edge); }
.cell.is-gap .need {
  display: flex; align-items: center; gap: 8px;
  color: var(--gap); font-size: 12px; font-weight: 700;
}
.cell.is-gap .plus {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gap-solid); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1; flex: none;
}

.cell.is-unsafe { background: var(--stop-soft); border: 1.5px solid var(--stop-edge); }
.cell.is-unsafe .pill {
  display: inline-block; margin-top: 7px;
  background: var(--stop); color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
}

.cell.is-check { background: var(--check-soft); border: 1px solid var(--check-edge); }
.cell.is-check .pill {
  display: inline-block; margin-top: 7px;
  background: var(--check-pill); color: var(--check);
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
}

.states .name { font-weight: 700; font-size: 15px; margin: 14px 0 2px; }
.states .what { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }

/* --------------------------- plain lists ---------------------------------- */

.checks { list-style: none; padding: 0; margin: 24px 0 0; max-width: 70ch; }
.checks > li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 16px;
  font-size: 17px;
}
.checks > li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--accent);
}
.checks .head { font-weight: 700; }
.checks .body { color: var(--ink-soft); }

/* The honest list. Sand, not red: these are absences, not faults. */
.not-yet { list-style: none; padding: 0; margin: 26px 0 0; }
.not-yet > li {
  background: var(--check-soft);
  border: 1px solid var(--check-edge);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 14px;
  max-width: 74ch;
}
.not-yet h3 { font-size: 17px; margin-bottom: 6px; }
.not-yet p { color: var(--ink-soft); font-size: 16px; }

/* ------------------------------- cards ------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 16px; }

/* numbered steps, for /trial */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 30px 0 0; max-width: 70ch; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 26px;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--ink-soft); font-size: 16px; }

/* ------------------------------ get in touch ------------------------------ */

.ask {
  background: var(--chrome);
  color: #fff;
}
.ask h2 { color: #fff; }
.ask p { color: #C6D6D4; max-width: 60ch; }
.ask .email {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 22px;
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--signal);
  color: var(--chrome);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.ask .email:hover { background: #f5c469; }
.ask .small { font-size: 15px; margin-top: 20px; color: #A9C2BF; }

/* -------------------------------- notice ---------------------------------- */
/* Said on every page that shows a screenshot, because it has to be unmissable:
   every name in every picture is invented. */

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--accent-soft);
  border: 1px solid #C5DBD8;
  border-radius: var(--radius-card);
  padding: 16px 18px;
  font-size: 15px;
  color: #124C4A;
  max-width: 74ch;
  margin-top: 26px;
}
.notice strong { color: #0B3F3D; }

/* -------------------------------- footer ---------------------------------- */

footer {
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
  padding-block: 40px;
  font-size: 15px;
  color: var(--ink-soft);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline; }
footer .independent { color: var(--ink-faint); }
footer nav { display: flex; gap: 22px; margin-left: auto; }

/* ------------------------------- narrow ----------------------------------- */

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  section { padding-block: 56px; }
  .hero { padding-block: 56px 48px; }
  h2 { font-size: 27px; }
  .lede, .hero .replaces { font-size: 18px; }
  .phones { grid-template-columns: 1fr; max-width: 360px; }
  .bar nav { margin-left: 0; width: 100%; }
  .bar nav a { padding: 8px 12px; }
  footer nav { margin-left: 0; width: 100%; }
  .btn { width: 100%; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
}