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

@font-face {
  font-family: "Oranienbaum";
  src: url("fonts/Oranienbaum-Regular.ttf") format("truetype");
  font-display: swap;
}
@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;
}

:root {
  /* The tufting's tile, and how far down the page the content starts (the page's top
     padding, the 44px header and the gap under it), so patterns on different elements
     share one grid. */
  /* The tufting images hold 3 × 2 diamond tiles (56 × 73 each), so the buttons vary. */
  --tuft-w: 168px;
  --tuft-h: 146px;
  --content-top: calc(24px + 44px + 32px);
  --green: #1e7a57;
  --green-tuft: #2a8864;
  --cream: #f7f3e8;
  --background: #f2f2f7;
  --seam: #e6e6ec;
  --card: #ffffff;
  --text: #1c1c1e;
  --subtle: #636366;
  --link: #1e7a57;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.05);
  /* Always light, whatever the device is set to. */
  color-scheme: light;
}


* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* No bouncing past the top or bottom: the live background stays put in the window, so
     the page mustn't move out from over it. */
  overscroll-behavior: none;
}
body { overscroll-behavior: none; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  /* The app's diamond tufting, faintly, with a £, p or ring button where the seams cross. */
  background-image: url("tufting.svg");
  background-size: var(--tuft-w) var(--tuft-h);
  /* Centred, as the page is, so the panels' patterns can join its grid (.hero-panel). */
  background-position: center top;
  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%;
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  /* Room at the bottom for the fade into the footer. */
  padding: 24px 16px 120px;
}

header.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Fixed, as --content-top assumes. */
  height: 44px;
  margin-bottom: 32px;
}

.logo { display: block; }
.logo svg { display: block; height: 44px; width: auto; }

nav a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}

h1, h2.display {
  font-family: "Oranienbaum", Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: clamp(40px, 9vw, 56px); }

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

.button {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--green);
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
}

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

.card {
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow);
  margin: 0 0 24px;
  padding: 4px 20px;
}

.card > section,
.card > li {
  padding: 14px 0;
}

.card > section + section,
.card > li + li {
  border-top: 1px solid var(--seam);
}

ul.card { list-style: none; }

.card h2,
.card h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 4px;
}

.card p {
  color: var(--subtle);
  margin: 0;
}

/* The footer: a solid band across the page, which the tufting fades into. */
.site-footer {
  --footer-background: var(--card);
  position: relative;
  margin-top: auto;
  background: var(--footer-background);
  color: var(--subtle);
  font-size: 14px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--footer-background));
  pointer-events: none;
}
.footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 32px 40px;
}
.site-footer p { margin: 4px 0; }

/* Support on the left, the privacy policy on the right; on a narrow screen the email
   address wraps rather than the link moving. */
.footer-links {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.footer-links p:first-child { min-width: 0; }
.footer-links p:last-child { flex-shrink: 0; }
.footer-links a { overflow-wrap: anywhere; }

/* The home page. */

.page.wide { max-width: 1040px; }

.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 12px;
  opacity: 0.85;
}

h2.display { font-size: clamp(30px, 6vw, 40px); margin-bottom: 12px; }
/* h2 too, to outweigh h2.display's margins. */
h2.centred { text-align: center; margin: 112px 0 28px; }

/* The logo's tufted green, as a big panel. */
.hero-panel {
  display: grid;
  gap: 36px;
  align-items: center;
  padding: 40px 28px 0;
  border-radius: 32px;
  overflow: hidden;
  color: var(--cream);
  background-color: var(--green);
  background-image: url("tufting-green.svg");
  background-size: var(--tuft-w) var(--tuft-h);
  /* On the page's grid: the panel is centred like the page, and starts --content-top down. */
  background-position: center calc(-1 * var(--content-top));
}
.hero-panel h1 { font-size: clamp(44px, 8vw, 68px); }
.hero-panel .lead { color: var(--cream); opacity: 0.9; }
.hero-copy { padding-bottom: 8px; }

.button.cream { background: var(--cream); color: var(--green); }
/* Not a link yet: the app isn't out. */
.button.soon { margin: 0; cursor: default; }
.cta .small { color: var(--subtle); }

.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: #f2f2f7;
}
.phone img { display: block; width: 100%; height: auto; }
/* Rising out of the bottom of the panel. */
.hero-phone { align-self: end; border-bottom: 0; border-radius: 40px 40px 0 0; max-height: 500px; }

/* The home page is three page-width blocks: the header and hero, a full-width white band
   (the two showcases and the statement between them), and the rest. */
.page.wide:has(> header.bar) { padding-bottom: 0; }
.page.hero-page { padding-top: 0; padding-bottom: 0; }
.page.after-band { padding-top: 0; }

.band {
  background: var(--card);
}
.band > section {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Each phone breaks out of its block, whole, into the space beside it: the first up into
   the grey above the band, the second down into the section below. */
.showcase {
  display: grid;
  gap: 32px;
  align-items: center;
  --overhang: 110px;
}
.showcase .phone {
  position: relative;
  z-index: 2;
}

.showcase.off-top { padding-top: 0; padding-bottom: 72px; }
.showcase.off-top .phone { align-self: start; margin-top: calc(-1 * var(--overhang)); }

.showcase.off-bottom { padding-top: 72px; padding-bottom: 0; }
.showcase.off-bottom .phone { align-self: end; margin-bottom: calc(-1 * var(--overhang)); }
/* On a phone the words come first here, so the phone hangs below them. */
.showcase.off-bottom > div:not(.phone) { order: -1; }

/* Room for the overhangs: above the band, and above the next section's title. */
.band { margin-top: calc(110px + 64px); }
.band + .features-section h2.centred { margin-top: calc(110px + 72px); }

/* Between the two showcases, joining them into one white stretch. */
.statement {
  padding-top: 56px;
  padding-bottom: 56px;
  text-align: center;
}
.statement p {
  color: var(--subtle);
  font-size: 19px;
  max-width: 600px;
  margin: 0 auto;
}

.showcase p:not(.lead) { color: var(--subtle); }

@media (min-width: 760px) {
  .hero-panel { grid-template-columns: 1fr 300px; padding: 64px 56px 0; }
  .hero-copy { padding-bottom: 64px; }
  .hero-phone { max-height: 560px; }
  .band > .showcase { grid-template-columns: 300px 1fr; gap: 64px; padding-left: 56px; padding-right: 56px; }
  .band > .showcase.off-top { padding-bottom: 80px; }
  .band > .showcase.off-bottom { padding-top: 80px; }
  .band > .showcase.flipped { grid-template-columns: 1fr 300px; }
  .showcase > div:not(.phone) { order: 0; }
  .showcase.flipped .phone { order: 2; }
}

/* "Built for how you're really paid": cards sliding by across the full width of the
   window. The list holds the cards twice, so moving it left by half its width (one set of
   cards) and starting again looks like one endless row. */
.features-section h2.centred { margin-bottom: 20px; }

.carousel {
  overflow: hidden;
  /* Room for the cards' shadows inside the clip. */
  padding: 20px 0 36px;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: max-content;
  animation: carousel 70s linear infinite;
}

@keyframes carousel {
  to { transform: translateX(-50%); }
}

.features li {
  flex: none;
  width: 290px;
  min-height: 210px;
  /* A margin rather than a gap, so both halves of the list are exactly the same width. */
  margin-right: 16px;
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 28px 26px;
}
.features h3 {
  font-family: "Oranienbaum", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
  margin: 18px 0 8px;
}
.features p { color: var(--subtle); margin: 0; font-size: 15px; }

/* Without motion: the cards stay still and scroll by hand, once each. */
@media (prefers-reduced-motion: reduce) {
  .features { animation: none; padding: 0 16px; }
  .carousel { overflow-x: auto; }
  .features li[aria-hidden="true"] { display: none; }
}

/* Each card's symbol: as tall as the card, faint, behind the words, and cut off by the
   card's right edge. */
.features li {
  position: relative;
  overflow: hidden;
}
.badge {
  position: absolute;
  top: 50%;
  right: -0.22em;
  /* Oranienbaum sits its capitals a little high in the line. */
  transform: translateY(-46%);
  font-family: "Oranienbaum", Georgia, serif;
  font-size: 310px;
  line-height: 1;
  color: var(--green);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
/* A lower-case p hangs below the line, with its bowl on the right: lift it and bring it
   in so the bowl shows, not just the stem. */
.badge.descender { right: -0.04em; transform: translateY(-61%); }
.features h3,
.features p { position: relative; }
.features h3 { margin-top: 0; }

.private { margin-top: 48px; padding: 32px 28px; text-align: center; }
.private p { max-width: 560px; margin: 0 auto 12px; }

.cta { text-align: center; margin: 72px 0 24px; }
.cta h2 { margin-bottom: 24px; }

/* The live tufting (tufting.js): a canvas behind everything, drawing the page's pattern
   and the hero panel's, so their own still backgrounds give way to it. */
canvas.tufting {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
.live-tufting body { background-image: none; }
.live-tufting .hero-panel { background: transparent; }
.live-tufting .band { background: transparent; }