/* =========================================================================
   MatRecord — site styles

   One stylesheet for every page. Colors are taken from the app itself so
   the site and the thing it sells look like the same product: #0d3346 is
   the splash and status bar, #12556F the theme color, #e8b757 the gold in
   the logo.

   Light and dark both defined here. The site follows the reader's system
   setting, the same way the app follows the device.
   ========================================================================= */

:root {
  --ink:        #0d3346;   /* deepest blue — headers, dark sections */
  --blue:       #12556F;   /* theme blue — links, accents */
  --blue-lift:  #1a6b8a;   /* hover */
  --gold:       #e8b757;   /* the belt gold */
  --gold-deep:  #c9973c;   /* gold that passes contrast on light */

  --bg:         #faf8f4;   /* cream page */
  --bg-alt:     #f2ede4;   /* banded sections */
  --card:       #ffffff;
  --line:       #e2dbcf;

  --text:       #1c2b33;
  --text-soft:  #52646f;
  --text-faint: #7b8b95;

  --on-dark:        #eef4f7;
  --on-dark-soft:   #a9c2cf;

  --radius: 12px;
  --wrap: 1080px;
  --shadow: 0 1px 2px rgba(13, 51, 70, .06), 0 4px 16px rgba(13, 51, 70, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0b222e;
    --bg-alt:    #0e2b39;
    --card:      #113244;
    --line:      #1e4358;

    --text:      #e7eff4;
    --text-soft: #a9c2cf;
    --text-faint:#7d99a8;

    --gold-deep: #e8b757;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 16px rgba(0, 0, 0, .2);
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

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

@media (prefers-color-scheme: dark) {
  a { color: #7ec8e3; }
  a:hover { color: #a5dcf0; }
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-top: 0; }
h3 { font-size: 1.2rem; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* A narrow section keeps the same container as a wide one, so every
   section's text starts at the same left edge, and limits its children
   instead. Constraining the container itself made the page zigzag. */
.wrap.narrow > * { max-width: 720px; }
.wrap.narrow.center > * { margin-left: auto; margin-right: auto; }

.muted { color: var(--text-soft); }
.tiny  { font-size: .875rem; }
.center { text-align: center; }

/* ---------------------------------------------------------- the wordmark */

.mark {
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.mark .mat { color: var(--ink); }
.mark .rec { color: var(--gold-deep); }

/* On dark ground the first half goes white, as it does in the app. Every
   dark context needs naming here — a missed one renders "Mat" in the same
   deep blue as the panel behind it and the word disappears. */
.on-dark  .mark .mat,
.dark     .mark .mat,
.sitehead .mark .mat,
.sitefoot .mark .mat { color: #ffffff; }

.on-dark  .mark .rec,
.dark     .mark .rec,
.sitehead .mark .rec,
.sitefoot .mark .rec { color: var(--gold); }

@media (prefers-color-scheme: dark) {
  .mark .mat { color: #ffffff; }
  .mark .rec { color: var(--gold); }
}

/* -------------------------------------------------------------- the head */

.sitehead {
  background: var(--ink);
  color: var(--on-dark);
  position: sticky;
  top: 0;
  z-index: 40;
}

.sitehead .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
}

.sitehead a { color: var(--on-dark); text-decoration: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  margin-right: auto;
  padding: 12px 0;
}

/* The app's icon, not a letterform standing in for it.

   The header used to carry a gold square with "MR" in it. It was tidy and
   it was nowhere: not on anybody's phone, not in either store listing, and
   not the thing a visitor would be scrolling for a week later. The icon is
   the only mark that does that job, so it is the one in the lockup. */
.brandicon {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex: none;
  display: block;
}

.footbrand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sitenav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 8px;
}

.sitenav a {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: .94rem;
  color: var(--on-dark-soft);
}
.sitenav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sitenav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .13); }

@media (min-width: 700px) {
  .sitenav { padding-bottom: 0; }
}

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

section { padding: 56px 0; }
section.tight { padding: 36px 0; }
.band { background: var(--bg-alt); }

.dark {
  background: var(--ink);
  color: var(--on-dark);
}
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .muted { color: var(--on-dark-soft); }
/* Buttons are excluded on purpose. `.dark a` is more specific than
   `.btn-primary`, so without the :not() it repainted the gold button's
   label gold on its own gold background: the button read as empty until
   a hover rule with higher specificity put the dark label back. */
.dark a:not(.btn) { color: var(--gold); }

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

/* ------------------------------------------------------------------ hero
   The social card, made to work.

   The top of the page takes the shape of the picture that shows up when
   somebody pastes the address anywhere: dark teal ground, the icon and the
   wordmark on the left, a device on the right, tilted, running off the
   bottom edge. What the card cannot do is change the screen in the device,
   and that is the whole point of doing it here.

   Dark rather than cream, which is a real departure from the rest of the
   page and is meant to be. A band that does not look like the bands under
   it is a band somebody reads. */
.hero {
  padding: 60px 0 0;
  color: var(--on-dark);
  /* A panel swinging in starts outside the column it lands in. Without
     this the page grows a horizontal scrollbar every time one moves,
     which on a phone is the difference between a hero and a fight. */
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 12% -20%, rgba(169, 214, 232, .16),
      transparent 60%),
    linear-gradient(160deg, #12556F, #0B3A4D);
}

/* On a phone the reading order is the source order: the name, then the
   app, then what it does and how to get it.

   The first cut put every word first and the device under all of it,
   which on a 412-wide screen meant a visitor read eight lines of prose
   before seeing a single thing the product looks like. On a phone the
   picture has to come early or it does not come at all. */
.herogrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: end;
}

.herohead { padding-bottom: 4px; }
.herobody { padding-bottom: 46px; }

/* Headroom for the swing, on one column.
   ---------------------------------------------------------------------
   A resting panel is rotated about a point above and right of itself, and
   the deck does not clip, so the top corner of a tall phone lifts a
   little way out of the deck. With the text beside the picture that
   happens over empty space. Stacked on a phone it happened over the
   tagline, and the word "season" spent its life behind somebody's
   shoulder. */
.herostage { margin-top: 40px; }

@media (min-width: 900px) {
  .herostage { margin-top: 0; }
}

/* With room for two columns the two halves of the text go back together
   on the left and the device stands beside both. */
@media (min-width: 900px) {
  .herogrid {
    grid-template-columns: minmax(0, 1fr) 460px;
    grid-template-areas:
      "head  stage"
      "body  stage";
    grid-template-rows: auto 1fr;
    gap: 0 40px;
  }
  .herohead { grid-area: head; align-self: end; padding-bottom: 0; }
  .herobody { grid-area: body; padding-bottom: 64px; }
  .herostage { grid-area: stage; }
}

/* On this ground the ordinary text colors disappear. */
.hero .tagline { color: #cfe2ec; }
.hero .lede { color: #dbe9f0; }
.hero .pricenote { color: #9fbccb; }
.hero .mark .mat { color: #fff; }
.hero .mark .rec { color: var(--gold); }

.hero .btn-ghost {
  color: #eaf3f7;
  border-color: rgba(210, 232, 242, .45);
  background: transparent;
}
.hero .btn-ghost:hover {
  border-color: rgba(210, 232, 242, .85);
  background: rgba(255, 255, 255, .07);
}

.hero .mark { font-size: clamp(2.4rem, 7vw, 4rem); display: block; margin-bottom: .1em; }

/* Large enough to be looked at rather than noticed. The wordmark sets the
   size, so the two stay in proportion however the heading scales. */
.herobrand {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 22px);
  margin-bottom: .1em;
}
.herobrand .mark { margin-bottom: 0; }
.heroicon {
  width: clamp(58px, 10vw, 88px);
  height: clamp(58px, 10vw, 88px);
  border-radius: clamp(13px, 2.2vw, 20px);
  flex: none;
  box-shadow: 0 2px 6px rgba(13, 51, 70, .18),
              0 14px 32px rgba(13, 51, 70, .2);
}

/* ------------------------------------------------- what to look for ----
   The icon drawn the way a phone draws it: a rounded tile with the name
   under it, at the size a home screen uses. Not decoration. It is the
   picture somebody has to still have in their head in a week's time,
   standing in a store listing full of other small squares. */
.lookfor {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 2.2rem;
  padding: 16px 20px 16px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
}

.lookfor-tile {
  display: grid;
  justify-items: center;
  gap: 7px;
  flex: none;
}
.lookfor-tile img {
  width: 64px; height: 64px;
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(13, 51, 70, .2),
              0 8px 18px rgba(13, 51, 70, .18);
}
.lookfor-name {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: -.01em;
}

.lookfor-say {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.lookfor-say strong { color: var(--text); }

@media (max-width: 420px) {
  .lookfor { padding: 14px; gap: 14px; }
  .lookfor-say { font-size: .9rem; }
}

.tagline {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--text-soft);
  margin: 0 0 1.4rem;
  max-width: 30ch;
}

.lede { font-size: 1.12rem; max-width: 56ch; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 650;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gold);
  color: #23180a;
  border-color: var(--gold);
}
.btn-primary:hover { background: #f0c470; color: #23180a; }

.btn-ghost {
  background: transparent;
  color: var(--blue);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

.dark .btn-ghost { color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.dark .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

@media (prefers-color-scheme: dark) {
  .btn-ghost { color: #7ec8e3; }
}

.btnrow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 1.5rem 0 .75rem;
}

.pricenote { font-size: .92rem; color: var(--text-faint); }

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

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid.two   { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px)  { .grid.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid.three { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; color: var(--blue); }
@media (prefers-color-scheme: dark) { .card h3 { color: var(--gold); } }
.card p:last-child { margin-bottom: 0; }

.dark .card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.dark .card h3 { color: var(--gold); }

/* A short label that marks a feature as needing the installed app. */
.needsapp {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
  border-radius: 20px;
  padding: 1px 9px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}
.dark .needsapp { color: var(--gold); border-color: var(--gold); }

/* --------------------------------------------------------------- prose */

.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; color: var(--blue); }
@media (prefers-color-scheme: dark) { .prose h3 { color: var(--gold); } }

.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: .95rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { background: var(--bg-alt); font-weight: 700; }

.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.prose blockquote {
  margin: 0 0 1.2em;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 5px;
}

pre {
  background: var(--ink);
  color: var(--on-dark);
  padding: 16px 18px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.55;
}
pre code { background: none; padding: 0; color: inherit; }

/* ------------------------------------------------------------------ note */

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--card);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  margin: 0 0 1.4em;
}
/* Only the note's own heading, not the first <strong> inside a paragraph.
   Without the child combinator this also matched emphasis mid-sentence —
   :first-child counts elements, not text — and turned it into a block,
   breaking the line in the middle of a sentence. */
.note > strong:first-child { display: block; margin-bottom: .3em; }
.note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- steps */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1.4em; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  margin-bottom: 1.1em;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -1px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .88rem;
  font-weight: 700;
}

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

details.faq {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
details.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 650;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-deep);
  flex: none;
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .answer { padding: 0 0 18px; }
details.faq .answer > *:last-child { margin-bottom: 0; }

/* ----------------------------------------------------- phone showcases */

/* A screen beside the copy that describes it. The frame is drawn in CSS
   rather than shipped as an image, so it costs nothing and stays sharp on
   any display. */

.showcase {
  display: grid;
  gap: 30px;
  align-items: center;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
.showcase:last-child { margin-bottom: 0; }

@media (min-width: 840px) {
  .showcase { grid-template-columns: 1fr 272px; gap: 56px; }
  /* Alternating sides stop a long page reading as one column of pictures. */
  .showcase.flip { grid-template-columns: 272px 1fr; }
  .showcase.flip .showcase-text { order: 2; }
  .showcase.flip .phone        { order: 1; }
}

.showcase-text > *:last-child { margin-bottom: 0; }
.showcase-text h3 {
  font-size: 1.35rem;
  color: var(--text);
  margin-bottom: .5em;
}
.dark .showcase-text h3 { color: #fff; }

.phone {
  width: 244px;
  margin: 0 auto;
  border-radius: 30px;
  padding: 9px;
  background: linear-gradient(160deg, #2a4356, #0b1c26);
  box-shadow: 0 2px 6px rgba(13, 51, 70, .2), 0 20px 46px rgba(13, 51, 70, .24);
}
.phone img {
  display: block;
  width: 100%;
  border-radius: 22px;
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  .phone { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 20px 46px rgba(0,0,0,.45); }
}

.showcase-note {
  font-size: .875rem;
  color: var(--text-faint);
  margin-top: 1em;
}
.dark .showcase-note { color: var(--on-dark-soft); }

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

.sitefoot {
  background: var(--ink);
  color: var(--on-dark-soft);
  padding: 44px 0 34px;
  font-size: .92rem;
}
.sitefoot a { color: var(--on-dark); text-decoration: none; }
.sitefoot a:hover { color: var(--gold); text-decoration: underline; }

.footcols {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}
@media (min-width: 700px) {
  .footcols { grid-template-columns: 2fr 1fr 1fr; }
}
.footcols h4 {
  color: #fff;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .9em;
}
.footcols ul { list-style: none; padding: 0; margin: 0; }
.footcols li { margin-bottom: .5em; }

.disclaimer {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding-top: 20px;
  font-size: .85rem;
  color: var(--on-dark-soft);
}
.disclaimer p { margin-bottom: .6em; }

/* --------------------------------------------------------------- print */

@media print {
  .sitehead, .sitefoot, .btnrow { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; }
}


/* ---------------------------------------------------------- hero stage
   Every panel is in the same place and only one is shown. The one that is
   shown carries .is-on; the one that is leaving carries .is-out for as long
   as its transition lasts; everything else is simply waiting, rotated out
   to the right where it will come in from.

   The transform origin is above the panel and off to one side, so a
   rotation reads as something hanging being swung rather than something
   spinning about its own middle. That is the whole difference between this
   and a carousel: a crossfade says "here is another picture", a thing that
   swings out while another swings in says somebody is handing them to you.
   -------------------------------------------------------------------- */

.herostage {
  position: relative;
  align-self: end;
  /* Room under the deck as well as over it.
     ------------------------------------------------------------------
     Centring the panels split their overflow between the top and the
     bottom, which is the point of it. The upright phones are taller
     than the deck, so on a phone-width screen the bottom half of that
     overflow put the caption straight through the row of dots. The
     headroom above was already there for the swing; this is the same
     thing underneath. */
  padding-bottom: 44px;
}

@media (min-width: 900px) {
  .herostage { padding-bottom: 18px; }
}

.herodeck {
  position: relative;
  /* Tall enough for an upright phone and its caption at this width. It
     was 452, which every landscape picture had room to spare in and
     every portrait one overflowed. */
  height: 500px;
  overflow: visible;
}

@media (min-width: 900px) {
  .herodeck { height: 606px; }
}

/* The device and the line under it are one object, so the line swings
   with the picture it belongs to rather than sitting still underneath a
   changing device.

   Centred in the deck rather than pinned to its bottom.

   Pinning was chosen so the captions would share a baseline whatever the
   frame above them was, which is a real thing to want and turned out to
   cost more than it was worth. The deck is as tall as an upright phone,
   and a sideways phone is less than half that: bottom-aligned, the short
   pictures sat on the floor of the deck with an empty half-screen above
   them, and the rotation that is meant to look like something being
   handed to you looked like something that had fallen. Centred, the gap
   is split top and bottom and every frame occupies the middle of the
   same space. The captions move a little between frames, which is a
   smaller price than half a panel of nothing. */
.heropanel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  justify-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  /* Above the panel and off to the right, so the rotation reads as
     something hanging being swung rather than something spinning about
     its own middle. Not far above: a rotation about a distant point is
     mostly a translation, and the first cut of this had the origin so far
     off that the resting panel sat eighty pixels right of where it
     belonged and ran off the edge of the page. */
  transform-origin: 74% -14%;
  transform: rotate(12deg) translate3d(70px, 22px, 0);
  transition:
    opacity .42s ease,
    transform .72s cubic-bezier(.22, .92, .28, 1.06);
  will-change: transform, opacity;
}

/* Resting, with the same small tilt the social card has. */
.heropanel.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(-3deg) translate3d(0, 0, 0);
}

/* Pulled the other way on the way out, so the two are never travelling
   in the same direction at the same time. */
.heropanel.is-out {
  opacity: 0;
  transform: rotate(-15deg) translate3d(-78px, -14px, 0);
}

/* Asked for no motion: the panels still change, they just do not swing. */
.herostage[data-still] .heropanel,
.herostage[data-still] .heropanel.is-on,
.herostage[data-still] .heropanel.is-out {
  transform: none;
  transition: opacity .3s ease;
}

/* ---- the devices ----------------------------------------------------
   Three frames, because a portrait phone beside a portrait phone beside a
   portrait phone is one shape repeated and the eye stops seeing it after
   the second. */

.dev {
  background: linear-gradient(160deg, #24404f, #0a1c26);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .28),
    0 26px 60px rgba(0, 0, 0, .45);
}
.dev img {
  display: block;
  width: 100%;
  height: auto;
  background: #f4f8fa;
}

/* A phone, upright, running off the bottom of the band the way the social
   card's does. */
.dev-phone {
  width: 232px;
  padding: 9px;
  border-radius: 30px;
}
.dev-phone img { border-radius: 22px; }

/* The same phone turned sideways. */
.dev-wide {
  width: 100%;
  /* The column it sits in is 460 on a wide screen, so this used to stop
     40px short of the room it had for no reason anybody could name. A
     sideways phone is the shortest thing in the deck and wants every
     pixel of width it can have. */
  max-width: 460px;
  padding: 9px;
  border-radius: 24px;
  align-self: center;
}
.dev-wide img { border-radius: 16px; }

/* No frame at all, for the two pictures that are already several
   devices.

   A fan of four phones and a laptop with a tablet and a phone cascading
   off it both carry their own bezels, drawn when the picture was
   composed. Putting one of those inside another frame draws a phone
   around four phones, which is the sort of thing that is funny once.
   The pictures have transparent backgrounds, so what shows between the
   devices is the hero's own ground. */
.dev-loose {
  width: 100%;
  max-width: 470px;
  padding: 0;
  background: none;
  box-shadow: none;
  align-self: center;
}
.dev-loose img { background: none; }

/* A tablet, sideways. Between the other two in shape and in furniture: a
   thicker bezel than the laptop, rounder corners, and nothing underneath
   it. The pictures inside these are 1180 wide, which is where the app
   stops stacking its tables into cards, so the frame has to be wide
   enough that the columns are still readable at a glance. */
.dev-tablet {
  width: 100%;
  max-width: 460px;
  padding: 13px;
  border-radius: 18px;
  align-self: center;
}
.dev-tablet img { border-radius: 7px; }

/* Something with a keyboard under it. The lip is a pseudo-element rather
   than another picture, so it costs nothing to download. */
/* Narrower than the phone frames are wide, because of the lip below it:
     that is 112% of this, and at 460 the lip reached past the edge of the
     page and got cut off by the band's own overflow. */
.dev-screen {
  width: 100%;
  max-width: 456px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  align-self: center;
  position: relative;
}
.dev-screen img { border-radius: 4px; }
.dev-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 112%;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #1d3746, #0d1f29);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .35);
}

@media (min-width: 900px) {
  .dev-phone { width: 268px; }
}

/* ---- what the app is doing in this picture --------------------------
   A screenshot says what a screen looks like. It does not say what the
   app can do, and a visitor who does not already know the product cannot
   work the second out from the first. One line under each frame, in the
   app's own gold, so the rotation reads as a list of capabilities rather
   than as a slideshow of screens. */
.devsay {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-size: .95rem;
  line-height: 1.4;
  font-weight: 600;
  color: #e6f0f5;
  text-wrap: balance;
}
.devsay::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin: 0 auto 10px;
}

@media (min-width: 900px) {
  .devsay { font-size: 1rem; }
}

/* ---- the dots ------------------------------------------------------- */

.herodots {
  display: flex;
  gap: 9px;
  justify-content: center;
  padding: 20px 0 26px;
}

.herodot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(214, 233, 242, .34);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.herodot:hover { background: rgba(214, 233, 242, .6); }
.herodot.is-on {
  background: var(--gold);
  transform: scale(1.25);
}
.herodot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* With no JavaScript there is nothing to jump to, so the dots would be six
   buttons that do nothing. They are turned on by the script. */
.herodots { visibility: hidden; }
.herostage[data-live] .herodots { visibility: visible; }

/* GENERATED: scheme colours, from the app. */
/* Written by tools/site-shots.js. Do not edit by hand: the next
   run overwrites it. Change the colours in the app. */

/* Ocean (default) */
[data-scheme="ocean"] {
  --ink: #0F4760;
  --blue: #156082;
  --blue-lift: #3f7d99;
  --gold: #B7791F;
  --gold-deep: #966319;
}
[data-scheme="ocean"][data-mode="dark"] {
  --ink: #0b3548;
  --blue: #5b90a8;
  --blue-lift: #7ea8ba;
  --gold: #c79650;
  --gold-deep: #B7791F;
}

/* Crimson */
[data-scheme="crimson"] {
  --ink: #6E1219;
  --blue: #9B1C24;
  --blue-lift: #ad454b;
  --gold: #1F6FB2;
  --gold-deep: #195b92;
}
[data-scheme="crimson"][data-mode="dark"] {
  --ink: #530e13;
  --blue: #b96066;
  --blue-lift: #c88287;
  --gold: #508fc3;
  --gold-deep: #1F6FB2;
}

/* Forest */
[data-scheme="forest"] {
  --ink: #134632;
  --blue: #1F6B4A;
  --blue-lift: #47866b;
  --gold: #B7791F;
  --gold-deep: #966319;
}
[data-scheme="forest"][data-mode="dark"] {
  --ink: #0e3526;
  --blue: #629780;
  --blue-lift: #84ae9b;
  --gold: #c79650;
  --gold-deep: #B7791F;
}

/* Midnight */
[data-scheme="midnight"] {
  --ink: #1B284A;
  --blue: #2C3E70;
  --blue-lift: #52618a;
  --gold: #D4A017;
  --gold-deep: #ae8313;
}
[data-scheme="midnight"][data-mode="dark"] {
  --ink: #141e38;
  --blue: #6b789b;
  --blue-lift: #8b95b0;
  --gold: #ddb54a;
  --gold-deep: #D4A017;
}

/* Slate */
[data-scheme="slate"] {
  --ink: #2A363D;
  --blue: #41525C;
  --blue-lift: #637179;
  --gold: #C2703A;
  --gold-deep: #9f5c30;
}
[data-scheme="slate"][data-mode="dark"] {
  --ink: #20292e;
  --blue: #7a868d;
  --blue-lift: #97a0a5;
  --gold: #cf8f65;
  --gold-deep: #C2703A;
}

/* Plum */
[data-scheme="plum"] {
  --ink: #3D1B49;
  --blue: #5B2A6B;
  --blue-lift: #795086;
  --gold: #2E8B4A;
  --gold-deep: #26723d;
}
[data-scheme="plum"][data-mode="dark"] {
  --ink: #2e1437;
  --blue: #8c6a97;
  --blue-lift: #a58aae;
  --gold: #5ca572;
  --gold-deep: #2E8B4A;
}
/* END GENERATED */

/* ---- the colour scheme switcher -------------------------------------
   The row of buttons is hidden until js/site.js marks the band live,
   because six buttons that change nothing are worse than no buttons.
   With no JavaScript the band is a heading, a sentence and one honest
   screenshot, which is a perfectly good band. */
.schemerow {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  margin: 1.4rem 0 1.6rem;
}
[data-schemes][data-live] .schemerow { display: flex; }

.schemepicks { display: flex; flex-wrap: wrap; gap: 8px; }

.schemepick,
.modepick {
  font: inherit;
  font-size: .92rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-soft);
  cursor: pointer;
  /* The colours under this change when a scheme is picked, so the button
     that was just pressed is repainted along with everything else. */
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.schemepick:hover,
.modepick:hover { border-color: var(--blue); color: var(--blue); }

.schemepick.is-on,
.modepick.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Pushed to the end of the row on a wide screen, because it is a
   different question from the six beside it. */
.modepick { margin-left: auto; }
@media (max-width: 560px) {
  .modepick { margin-left: 0; }
}

.schemeshot { display: flex; justify-content: center; }
.schemeshot .dev-phone { width: 258px; }

/* Everything on the page answers to the picked scheme, so the bands that
   paint themselves from the deep colour follow it too. */
[data-scheme] .hero,
[data-scheme] .sitehead,
[data-scheme] section.dark { background: var(--ink); }

/* ---- the numbers that count up --------------------------------------
   Authored with their real value in the markup, so with no JavaScript,
   or for somebody who has asked for no motion, this is simply a row of
   figures rather than a row of zeroes. */
.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.6rem 1.4rem;
  margin-top: 2rem;
}
.countone { display: flex; flex-direction: column; gap: 4px; }
.countnum {
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--blue);
  /* So the row does not jump sideways as the digits change while it
     counts: every digit takes the width of the widest. */
  font-variant-numeric: tabular-nums;
}
.countsay { font-size: .92rem; color: var(--text-soft); max-width: 22ch; }

/* ---- one ring, scored, in four steps --------------------------------
   The buttons appear only when js/site.js marks the band live. Without
   it this is the first picture and its caption, which is an honest band
   rather than a broken one. */
.stepstage { margin-top: 1.8rem; }
.stepstage .dev-wide { margin: 0 auto; max-width: 620px; }

.stepsay {
  text-align: center;
  margin: 1rem auto 0;
  max-width: 44ch;
  font-weight: 600;
  color: var(--text);
}

.steppicks {
  display: none;
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  /* Numbered for a screen reader even though the numbers are not drawn:
     these are steps in an order, not four alternatives. */
  counter-reset: step;
}
[data-steps][data-live] .steppicks { display: flex; }

.steppick {
  font: inherit;
  font-size: .9rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.steppick:hover { border-color: var(--blue); color: var(--blue); }
.steppick.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}