/*
  BandPeer's site is a rehearsal room, not a product page. The top of it is a stage - the app's
  own default band artwork (BandPeer/Assets/default_band.png) under two spotlights - and the rest
  is the wall of that room: polaroids of the gear, index cards pinned up, a setlist taped by the
  mic, a gig poster at the end. Faint notes are scattered across the background of every page.

  That is deliberately nothing like VideoPhonePeer's site, which is a clean, centred product page
  around a network diagram. The two apps are sold on different things - one on "nobody can hear
  your call", this one on "this is where the band lives" - so the pages should feel different
  before anyone reads a word.

  The colours are still the app's own (Themes/Styles.xaml, and the seven picks are the first seven
  of Theme.Presets in order), so the mockup panels sit on the background they really have. Type is
  Bebas Neue for the poster lettering and Caveat for anything handwritten, hosted here in
  assets/fonts (SIL Open Font License, beside them), with system fallbacks.

  Plain CSS, no build step.
*/

/*
  The two faces, served from this site rather than Google Fonts: the rules are Google's own, the
  Latin and Latin Extended files only, since the site is in English. Fetching them from Google cost
  two more connections before the page could draw - PageSpeed's biggest item - and told Google about
  every visitor. Each page preloads the two Latin files, so they arrive with this stylesheet.
  Caveat is a variable font: one file serves both weights, as Google's rules also have it.
*/
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #14161b;
  --surface: #1c1f26;
  --surface-alt: #242832;
  --border: #333947;
  --accent: #e0a13b;
  --accent-2: #e0703b;
  --accent-soft: rgba(224, 161, 59, 0.16);
  --accent-ink: #1a1206; /* what the app writes on top of the accent - see Theme.ContrastOn */
  --text: #e9ecf3;
  --text-muted: #a7aec0;
  --good: #4cc38a;
  --warn: #e5484d;

  /* Theme.Presets, in the app's own order - one per practice tool. */
  --amber: #e0a13b;
  --ember: #e0703b;
  --crimson: #e0556b;
  --orchid: #b57be8;
  --ocean: #4fa3e8;
  --teal: #35bca8;
  --lime: #93ca4a;

  --paper: #f1ead9;
  --paper-edge: #ddd1b6;
  --ink: #2a2119;
  --ink-muted: #5d5040;

  --poster: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: url("../img/notes.svg");
  background-size: 420px 420px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.hand {
  font-family: var(--hand);
}

/* ---------------------------------------------------------------- top bar */

/* The name in the middle, the links either side of it - the way a band's name sits on a kick
   drum head or a tour shirt, not the way a company's sits in the corner of a toolbar. */
.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 24px 0;
}

.topbar nav {
  display: flex;
  gap: 26px;
  align-items: center;
}

.topbar nav.left {
  justify-content: flex-end;
}

.topbar nav.right {
  justify-content: flex-start;
}

.topbar nav a {
  font-family: var(--poster);
  font-size: 19px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.topbar nav a:hover,
.topbar nav a.current {
  color: var(--text);
  text-decoration: none;
}

.topbar nav a.current {
  color: var(--accent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--poster);
  font-size: 34px;
  letter-spacing: 0.08em;
  color: var(--text);
  line-height: 1;
}

.brand img {
  width: 30px;
  height: 30px;
}

/* The logo is a transparent PNG with the headphones reaching its edges, so no rounded corners -
   they would clip it. Sized to sit beside the name in each place: the menu's wordmark is the
   larger of the two, so its logo is too. */
.topbar .brand img {
  width: 54px;
  height: 54px;
}

footer.site .brand img {
  width: 48px;
  height: 48px;
}

.brand:hover {
  text-decoration: none;
}

/* ---------------------------------------------------------------- stage (home hero) */

.stage {
  position: relative;
  text-align: center;
  padding: 34px 0 30px;
  margin-top: -80px;
  padding-top: 134px;
  overflow: hidden;
}

/* Two follow-spots angled in from the rig, and a pool of light on the boards under the band. */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  top: -40px;
  width: 420px;
  height: 820px;
  background: linear-gradient(to bottom, rgba(255, 214, 140, 0.2), rgba(255, 214, 140, 0) 78%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.stage::before {
  left: calc(50% - 470px);
  transform: rotate(-17deg);
  transform-origin: top center;
}

.stage::after {
  right: calc(50% - 470px);
  transform: rotate(17deg);
  transform-origin: top center;
}

.stage > *:not(.polaroid) {
  position: relative;
  z-index: 1;
}

.marquee {
  font-family: var(--hand);
  font-size: 26px;
  color: var(--accent);
  margin: 0 0 4px;
  transform: rotate(-2deg);
}

.stage h1,
.page-head h1 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(58px, 9vw, 112px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  color: var(--text);
  text-shadow: 0 0 40px rgba(224, 161, 59, 0.25);
}

.stage h1 em {
  font-style: normal;
  color: var(--accent);
}

/* Wide enough to take the line in two on a desktop, and balanced so that wherever it does need a
   third - a narrower window, a phone - the lines come out even rather than leaving a word or two
   stranded at the end. */
.stage-sub {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 17.5px;
  text-wrap: balance;
}

.band {
  position: relative;
  width: min(660px, 92%);
  margin: 18px auto 0;
  opacity: 0.9;
}

.band img {
  width: 100%;
  filter: drop-shadow(0 0 14px rgba(255, 214, 140, 0.35));
}

/* The light the spots throw on the floor - an ellipse just under the band's feet. */
.band::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 60px;
  background: radial-gradient(closest-side, rgba(255, 200, 120, 0.28), transparent);
  z-index: -1;
}

.stage-floor {
  height: 2px;
  width: min(900px, 94%);
  margin: -6px auto 0;
  background: linear-gradient(90deg, transparent, rgba(224, 161, 59, 0.55), transparent);
}

.buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.stage .buttons {
  margin-top: 30px;
}

/* ---------------------------------------------------------------- the seven picks */

.tools-head {
  margin: 34px 0 6px;
}

.tools-head h2 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 54px);
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
}

.tools-head p {
  font-family: var(--hand);
  font-size: 23px;
  color: var(--accent);
  margin: 4px 0 0;
}

/* The picks sit on a stave and step up and down it, so the row reads as a little tune rather
   than seven icons in a line. */
.stave {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 36px 0 6px;
  max-width: 1000px;
  margin: 0 auto;
}

.stave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 73px;
  background: repeating-linear-gradient(to bottom, rgba(233, 236, 243, 0.1) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.pick-item {
  position: relative;
  width: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text);
  transform: translateY(var(--y, 0));
}

.pick-item:hover {
  text-decoration: none;
}

.pick-item:nth-child(1) { --pick: var(--amber); --y: 6px; }
.pick-item:nth-child(2) { --pick: var(--ember); --y: -10px; }
.pick-item:nth-child(3) { --pick: var(--crimson); --y: 2px; }
.pick-item:nth-child(4) { --pick: var(--orchid); --y: -16px; }
.pick-item:nth-child(5) { --pick: var(--ocean); --y: -4px; }
.pick-item:nth-child(6) { --pick: var(--teal); --y: 8px; }
.pick-item:nth-child(7) { --pick: var(--lime); --y: -8px; }

/* The shadow lives on a wrapper because the pick itself is clipped to its shape, and a clipped
   element's own box-shadow is clipped along with it. */
.pick-wrap {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  transition: transform 0.18s ease;
}

.pick-item:hover .pick-wrap {
  transform: translateY(-6px) rotate(-10deg);
}

.pick {
  position: relative;
  width: 66px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
  background: var(--pick);
  background: linear-gradient(160deg, color-mix(in srgb, var(--pick), white 28%), var(--pick) 50%, color-mix(in srgb, var(--pick), black 22%));
  clip-path: path("M33 0C56 0 66 11 66 27C66 48 46 66 33 74C20 66 0 48 0 27C0 11 10 0 33 0Z");
}

.pick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 30% 18%, rgba(255, 255, 255, 0.45), transparent 70%);
}

.pick svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent-ink);
  position: relative;
  z-index: 1;
}

.pick-name {
  font-family: var(--poster);
  font-size: 23px;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 12px;
}

.pick-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------------------------------------------------------------- polaroids */

.polaroid {
  position: absolute;
  z-index: 2;
  width: 190px;
  margin: 0;
  padding: 10px 10px 42px;
  background: var(--paper);
  box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: rotate(var(--r, -4deg));
  transition: transform 0.25s ease;
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.04);
  z-index: 3;
}

.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  filter: sepia(0.22) saturate(0.9) contrast(1.05);
}

.polaroid figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  font-family: var(--hand);
  font-size: 21px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
}

/* A strip of masking tape holding it to the wall. */
.polaroid::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 78px;
  height: 24px;
  margin-left: -39px;
  background: rgba(240, 228, 196, 0.62);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: rotate(calc(var(--r, -4deg) * -1.5));
}

/* A pile for narrow screens, where there is no margin to strew anything into. */
.pile {
  display: none;
  justify-content: center;
  padding: 30px 0 10px;
}

.pile .polaroid {
  position: relative;
  width: 150px;
  padding: 8px 8px 34px;
}

.pile .polaroid figcaption {
  font-size: 18px;
}

.pile .polaroid + .polaroid {
  margin-left: -34px;
}

/* ---------------------------------------------------------------- section titles */

.section {
  padding: 70px 0 10px;
  position: relative;
}

.section-title {
  text-align: center;
  margin-bottom: 34px;
}

.section-title h2 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 60px);
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
}

.section-title p {
  font-family: var(--hand);
  font-size: 24px;
  color: var(--accent);
  margin: 6px 0 0;
  transform: rotate(-1.5deg);
}

/* ---------------------------------------------------------------- admit-one ticket (stats) */

.ticket {
  display: flex;
  max-width: 820px;
  margin: 50px auto 0;
  background: var(--surface);
  border: 1px solid rgba(224, 161, 59, 0.55);
  border-radius: 10px;
}

/* The two punched notches, drawn rather than masked. A mask cut in two half-height layers loses
   the bottom border line at some zoom levels; a drawn notch carries its own ring of the border,
   so the edge reads as continuous at any scale. */
.ticket-stub {
  position: relative;
  flex: none;
  width: 104px;
  border-right: 2px dashed rgba(224, 161, 59, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
}

.ticket-stub::before,
.ticket-stub::after {
  content: "";
  position: absolute;
  right: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(224, 161, 59, 0.55);
}

.ticket-stub::before {
  top: -12px;
  clip-path: inset(50% 0 0 0);
}

.ticket-stub::after {
  bottom: -12px;
  clip-path: inset(0 0 50% 0);
}

/* Vertical writing rather than a rotation, so the words take up height in the layout and can
   never run past the ends of the stub. */
.ticket-stub span {
  font-family: var(--poster);
  font-size: 19px;
  letter-spacing: 0.12em;
  color: var(--accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.ticket-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 26px 10px;
}

.ticket-body div {
  text-align: center;
  padding: 0 8px;
}

.ticket-body div + div {
  border-left: 1px solid var(--border);
}

.ticket-body b {
  display: block;
  font-family: var(--poster);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.03em;
}

.ticket-body span {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------------------------------------------------------------- pinned index cards */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
  max-width: 980px;
  margin: 0 auto;
}

.card {
  position: relative;
  padding: 30px 22px 22px;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, transparent 70px, rgba(217, 84, 79, 0.55) 70px, rgba(217, 84, 79, 0.55) 71.5px, transparent 71.5px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(80, 120, 170, 0.2) 23px 24px);
  background-position: 0 0, 0 72px;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.2s ease;
}

.card:hover {
  transform: rotate(0deg) translateY(-4px);
}

.board .card:nth-child(1) { --r: -1.8deg; --pin: var(--crimson); }
.board .card:nth-child(2) { --r: 1.2deg; --pin: var(--ocean); }
.board .card:nth-child(3) { --r: -0.8deg; --pin: var(--lime); }
.board .card:nth-child(4) { --r: 1.6deg; --pin: var(--amber); }
.board .card:nth-child(5) { --r: -1.3deg; --pin: var(--orchid); }
.board .card:nth-child(6) { --r: 0.9deg; --pin: var(--teal); }

/* A drawing pin, in one of the band colours. */
.card::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), var(--pin, var(--crimson)) 45%, color-mix(in srgb, var(--pin, var(--crimson)), black 35%));
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.45);
}

.card h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 29px;
  line-height: 1;
  margin: 0 0 26px;
  color: var(--ink);
}

.card p {
  font-size: 14px;
  line-height: 24px;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------------------------------------------------------------- liner notes (pull quote) */

.liner {
  max-width: 760px;
  margin: 80px auto 0;
  text-align: center;
  position: relative;
}

.liner::before {
  content: "\201C";
  display: block;
  font-family: var(--poster);
  font-size: 120px;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 8px;
}

.liner blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 23px;
  line-height: 1.5;
  color: var(--text);
}

.liner cite {
  display: block;
  font-family: var(--hand);
  font-style: normal;
  font-size: 22px;
  color: var(--accent);
  margin-top: 14px;
}

/* ---------------------------------------------------------------- walkthrough */

.walk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto 70px;
}

.walk.reverse .walk-art {
  order: -1;
}

/* A real screenshot rather than a drawn panel: the words above, the picture across the whole
   width, because a capture of the app is too detailed to read at half a column. */
.walk.wide {
  grid-template-columns: 1fr;
  gap: 48px;
  text-align: center;
}

.walk.wide p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* width as well as max-width: .walk-art centres with flexbox, which shrinks a child to its content,
   and an image sized as a percentage of a shrunk link comes out two pixels wide. */
.shot {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.75);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.walk-tag {
  display: inline-block;
  font-family: var(--poster);
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 3px 12px 1px;
  transform: rotate(-2deg);
  margin-bottom: 12px;
}

.walk h3 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 12px;
}

.walk p {
  color: var(--text-muted);
}

.walk-art {
  position: relative;
  display: flex;
  justify-content: center;
}

/* A line under a screenshot. The home page's walkthrough was drawn .mock panels until real captures
   of the app replaced them; those styles went with them. */
.shot-caption {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 8px;
}

/* ---------------------------------------------------------------- gig poster (CTA) */

.poster {
  position: relative;
  max-width: 900px;
  margin: 90px auto 0;
  padding: 54px 40px 50px;
  text-align: center;
  color: var(--accent-ink);
  background:
    radial-gradient(rgba(26, 18, 6, 0.16) 1.3px, transparent 1.7px) 0 0 / 11px 11px,
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8);
  transform: rotate(-0.8deg);
}

.poster .eyebrow {
  font-family: var(--poster);
  font-size: 22px;
  letter-spacing: 0.3em;
  margin: 0 0 6px;
}

.poster h2 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

.poster .lineup {
  font-family: var(--poster);
  font-size: 23px;
  letter-spacing: 0.1em;
  margin: 0 0 26px;
}

.poster .lineup span {
  opacity: 0.55;
  margin: 0 10px;
}

/* Pinned to the wall beside the poster, not over it - the headline runs nearly edge to edge. */
.poster .polaroid {
  top: 24px;
  right: -210px;
  width: 170px;
  --r: 8deg;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--poster);
  font-size: 21px;
  letter-spacing: 0.08em;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;

  /* A pill broken over two lines stops reading as a button. Every label here is short enough to
     fit the narrowest card it sits in; one that does not should be shortened, not wrapped. */
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px) rotate(-1deg);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 10px 24px -10px rgba(224, 112, 59, 0.8);
}

.btn-accent:hover {
  filter: brightness(1.07);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(233, 236, 243, 0.35);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
}

.btn-ink {
  background: var(--accent-ink);
  color: var(--accent);
}

.btn-ink-ghost {
  background: transparent;
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* Microsoft's own "Download from the Microsoft Store" badge, used as they supply it - their artwork and
   proportions, never recoloured - and sized to stand level with a .btn beside it. */
.store-badge {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
}

.store-badge img {
  display: block;
  height: 50px;
  width: auto;
}

/* On the home page it sits at the top of the stage, just under the menu. The stage's top padding
   is there to bring the spotlights up behind the menu, so the badge is pulled back up through it. */
.stage .store-note {
  position: relative;
  z-index: 2;
  margin-top: -44px;
  margin-bottom: 22px;
}

@media (max-width: 860px) {
  .stage .store-note {
    margin-top: -14px;
  }
}

/* ---------------------------------------------------------------- inner pages */

/* min-height is for the polaroids. They are placed at fixed heights and tilted, but the head is only
   as tall as its words - and overflow: hidden (which keeps the spotlight in) cut the bottom off the
   right-hand one on the page with the fewest words, Pricing. 400px holds both, tilt included, with
   room to spare; every page with a longer head is taller than that already. */
.page-head {
  position: relative;
  text-align: center;
  margin-top: -80px;
  padding: 170px 0 50px;
  min-height: 400px;
  overflow: hidden;
}

.page-head::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  width: 520px;
  height: 520px;
  margin-left: -260px;
  background: linear-gradient(to bottom, rgba(255, 214, 140, 0.16), transparent 75%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  pointer-events: none;
}

/* The band, faintly, behind every page title - so each page is still on the same stage. */
.page-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 560px;
  height: 376px;
  margin-left: -280px;
  background: url("../img/band.png") center bottom / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* Not the polaroids: this rule comes after .polaroid and has the same specificity, so without the
   :not() it would pull them out of absolute positioning and into the flow of the heading. */
.page-head > *:not(.polaroid) {
  position: relative;
  z-index: 1;
}

.page-head h1 {
  font-size: clamp(52px, 8vw, 80px);
}

.page-head .marquee {
  margin-bottom: 8px;
}

/* Balanced for the same reason as the home page's opening line: an even two or three lines
   rather than a word left on its own at the end. */
.page-head p.sub {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 17.5px;
  text-wrap: balance;
}

.page-head .polaroid.left {
  left: calc(50% - 560px);
  top: 110px;
}

.page-head .polaroid.right {
  right: calc(50% - 560px);
  top: 140px;
}

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 24px 20px;
}

.prose h2 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 60px 0 6px;
}

.prose h2 + .hand-note {
  margin-top: 0;
}

/* A heading and its note set in the middle of a text column, over content that is itself
   centred or spans the column. */
.prose .centered {
  text-align: center;
}

/* Named with .prose as well, because `.prose p` greys every paragraph in a text column and is the
   more specific rule - so the notes on the Guide and Pricing pages came out muted grey while the
   same note everywhere else was in the accent. */
.hand-note,
.prose .hand-note {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 20px;
}

.prose h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 6px;
}

.prose p {
  color: var(--text-muted);
}

.prose strong {
  color: var(--text);
}

.lede {
  font-size: 18px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- steps: a handwritten setlist */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 2px 0 26px 64px;
}

.steps > li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  top: -10px;
  width: 50px;
  text-align: right;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
}

.steps > li::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 40px;
  bottom: 6px;
  border-left: 2px dotted rgba(224, 161, 59, 0.35);
}

.steps > li:last-child::after {
  display: none;
}

.steps p {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- sticky notes */

.note {
  position: relative;
  max-width: 620px;
  margin: 30px auto;
  padding: 22px 24px 20px;
  background: #f3dc8a;
  color: var(--ink);
  font-size: 14.5px;
  box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(-1deg);
}

.note::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 90px;
  height: 22px;
  margin-left: -45px;
  background: rgba(240, 228, 196, 0.6);
  transform: rotate(2deg);
}

.note .note-label {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.05;
  margin-bottom: 6px;
}

.note a {
  color: #8a3b10;
  font-weight: 600;
}

.note strong {
  color: var(--ink);
}

.note.warn {
  background: #f2b7a8;
  transform: rotate(0.8deg);
}

.note.good {
  background: #cfe7b3;
  transform: rotate(0.6deg);
}

/* ---------------------------------------------------------------- tool list (guide) */

.tool-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 26px;
  margin: 16px 0 18px;
}

.tool-list div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
}

.tool-list b {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.05em;
  min-width: 96px;
  color: var(--dot, var(--accent));
}

.tool-list span {
  font-size: 14px;
  color: var(--text-muted);
}

.tool-list div:nth-child(1) { --dot: var(--amber); }
.tool-list div:nth-child(2) { --dot: var(--ember); }
.tool-list div:nth-child(3) { --dot: var(--crimson); }
.tool-list div:nth-child(4) { --dot: var(--orchid); }
.tool-list div:nth-child(5) { --dot: var(--ocean); }
.tool-list div:nth-child(6) { --dot: var(--teal); }
.tool-list div:nth-child(7) { --dot: var(--lime); }

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

/* minmax(0, 1fr) rather than 1fr: a plain 1fr column is never narrower than its content, and the
   two buttons that cannot wrap made Personal and Classroom claim more width - leaving Band, which
   has the most to say, in the narrowest column and wrapping into the longest card. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  max-width: 1040px;
  margin: 10px auto 0;
  padding: 0 24px;
  align-items: start;
}

/* Personal is a gig ticket: the dark stock of the app itself, amber print, a torn edge. Solo is
   the index card and Band is the poster, so the three read as three different things pinned up
   rather than three sizes of one box. */
.plan.personal {
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(224, 161, 59, 0.6);
  border-top: 6px solid var(--accent);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(0.6deg);
}

.plan.personal h3,
.plan.personal .price {
  color: var(--accent);
}

.plan.personal li::before {
  color: var(--good);
}

.plan .or {
  font-size: 14px;
  margin: -10px 0 14px;
  opacity: 0.85;
}

.plan .or em {
  font-style: normal;
  font-weight: 700;
}

.plan-flag {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: var(--poster);
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-ink);
  padding: 4px 12px 2px;
  transform: rotate(3deg);
}

.plan {
  position: relative;
  padding: 34px 28px 28px;
}

.plan.solo {
  color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(80, 120, 170, 0.18) 23px 24px);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(-1.4deg);
}

.plan.solo::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), var(--good) 45%, #1f6b47);
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.45);
}

/* The poster's halftone is kept faint: at full strength the dots sat behind every letter of
   the small print and made the one card with the most to read the hardest to read. */
.plan.band {
  color: var(--accent-ink);
  background:
    radial-gradient(rgba(26, 18, 6, 0.06) 1.3px, transparent 1.7px) 0 0 / 11px 11px,
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.8);
  transform: rotate(1.2deg);

  /* The home page's stage artwork is also `.band`, and its width and margins matched here too -
     the card was 92% of its column, the narrowest of the three and so the longest. */
  width: auto;
  margin: 0;
}

.plan.band::after {
  content: none;
}

/* Dark ink on orange already carries the contrast; fading it further, as the other cards' small
   print is, only costs legibility here. */
.plan.band .or,
.plan.band p,
.plan.band .price span {
  opacity: 1;
}

.plan h3 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.06em;
  margin: 0;
}

.plan .price {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  margin: 2px 0 14px;
}

.plan .price span {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  opacity: 0.7;
}

.plan ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14.5px;
}

.plan li {
  padding: 5px 0 5px 24px;
  position: relative;
}

.plan li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 4px;
  font-weight: 700;
}

.plan p {
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
}

.why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  margin: 18px 0 0;
}

/* The classroom licence as a blackboard in a wooden frame - the one card here for teachers, and
   it should look like the room they teach in. Chalk-white text, the accent only on the price. */
.plan.classroom {
  color: #eef1ea;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%),
    #22352c;
  border: 9px solid #7a5230;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 22px 36px -16px rgba(0, 0, 0, 0.8);
  transform: rotate(-0.8deg);
}

.plan.classroom h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0;
}

.plan.classroom .price {
  color: var(--accent);
}

.plan.classroom li::before {
  color: #eef1ea;
}

.plan.classroom .plan-flag {
  top: -20px;
}

/* The trial, as a strip across the top rather than a fourth card: it is a way into any of the
   plans below, not a plan beside them. */
.trial-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto 44px;
  padding: 26px 30px 24px;
  color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(80, 120, 170, 0.16) 23px 24px);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.7);
  transform: rotate(-0.5deg);
}

.trial-strip::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), var(--good) 45%, #1f6b47);
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.45);
}

.trial-strip h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  margin: 0 0 8px;
}

.trial-strip p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-muted);
}

.trial-strip .btn {
  flex: none;
}

/* Three plans do not fit side by side on a tablet; the classroom card spans the second row so it
   is not left stranded at half width. */
@media (max-width: 1080px) and (min-width: 861px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan.classroom {
    grid-column: 1 / -1;
    max-width: 480px;
    justify-self: center;
    width: 100%;
  }
}

@media (max-width: 860px) {
  .trial-strip {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 20px 36px;
  }
}

.why div {
  border-top: 2px solid var(--accent);
  padding-top: 12px;
}

.why h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.05;
  color: var(--text);
}

.why p {
  font-size: 14px;
}

/* A card that answers for every licence rather than one - "Nothing taken away", closing the
   questions - spans both columns, centred, rather than sitting in one of them. */
.why .why-lead {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 560px;
  text-align: center;
}

/* ---------------------------------------------------------------- specs table */

table.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 14px;
}

table.specs th,
table.specs td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  vertical-align: top;
}

table.specs th {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--accent);
  width: 210px;
}

table.specs td {
  color: var(--text-muted);
}

/* A SHA-256 is 64 characters with nowhere to break, so it would push the page sideways on a phone
   without break-all. user-select: all, because a fingerprint is only ever copied whole. */
table.hashes code {
  word-break: break-all;
  user-select: all;
  color: var(--text);
}

/* ---------------------------------------------------------------- how-to disclosure */

details.how {
  margin: 18px 0 28px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-muted);
}

details.how summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

details.how ol {
  padding-left: 22px;
  margin: 14px 0 0;
}

details.how li {
  margin: 0 0 10px;
}

details.how pre {
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  color: var(--text);
}

/* ---------------------------------------------------------------- contact: a letter */

/* A letter still - the salutation and the faint ruled lines say so - but on the dark stock the
   rest of the site is printed on. Pale paper was the one light block on any page and read as a
   different site's form dropped in. */
.letter {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 38px 34px 32px;
  color: var(--text);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(255, 255, 255, 0.035) 27px 28px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.8);
}

.letter .salutation {
  font-family: var(--hand);
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 18px;
}

form .field {
  margin-bottom: 18px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 14.5px;
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(224, 112, 59, 0.2);
}

textarea {
  resize: vertical;
  min-height: 140px;
}

/* The open list is drawn by the browser, which otherwise paints it light whatever the box is. */
select option {
  background: var(--surface);
  color: var(--text);
}

.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.status {
  max-width: 600px;
  margin: 0 auto 26px;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
}

.status.ok {
  background: rgba(76, 195, 138, 0.12);
  border: 1px solid var(--good);
  color: var(--good);
}

.status.error {
  background: rgba(229, 72, 77, 0.12);
  border: 1px solid var(--warn);
  color: var(--warn);
}

/* ---------------------------------------------------------------- account pages */

/* The same dark letter the contact form is written on, one per subscription, stacked. */
.account {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.account .status {
  max-width: 600px;
  margin: 0 auto;
}

.account .letter p {
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Links in the running text, not buttons: a .btn-accent is an accent background, and this colour
   on it made "Buy a licence" orange on orange. */
.account .letter a:not(.btn) {
  color: var(--accent);
}

.subscription .salutation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.subscription .state {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
}

.subscription .state.good {
  color: var(--good);
}

.subscription .state.lapsed {
  color: var(--warn);
}

.account .hint {
  font-size: 13px;
}

/* A licence's code, shown in its card: set large enough to read across a room and copy by hand. */
.code-inline {
  margin: 16px 0 6px;
  padding: 14px 18px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.code-inline .code-label {
  margin: 0 0 2px;
  font-weight: 600;
  color: var(--text);
}

.code-inline p {
  margin-bottom: 6px;
}

.account .more {
  text-align: center;
  margin: 0;
}

code.pairing {
  font-family: var(--poster);
  font-size: 44px;
  letter-spacing: 0.12em;
  color: var(--text);
  user-select: all;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* The buy page: each plan's monthly and yearly side by side, a PayPal button under each. */
.offer .periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.offer .period {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.offer .period em {
  font-style: normal;
  color: var(--good);
}

@media (max-width: 560px) {
  .offer .periods {
    grid-template-columns: 1fr;
  }
}

.signed-in {
  max-width: 600px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

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

footer.site {
  margin-top: 90px;
  padding: 40px 24px 46px;
  text-align: center;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
}

footer.site .brand {
  justify-content: center;
  font-size: 28px;
  margin-bottom: 6px;
}

footer.site .hand {
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 14px;
}

footer.site nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

footer.site nav a {
  font-family: var(--poster);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}


/* Made in the USA: the flag beside the words, under the hero, by the download and in the footer. */
.usa {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  font-family: var(--poster);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--text);
}

.stage .usa, .page-head .usa { justify-content: center; }
.page-head .usa { margin-bottom: 14px; }
.usa .flag { width: 38px; height: 20px; border-radius: 2px; }
.flag { width: 21px; height: 11px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); flex: none; }

footer.site .made-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------- feature pages */

/* One page per feature: the usual page head, then the app itself across the width - a real
   screenshot of a made-up band, see the README - then what it does, as short facts rather than
   prose, since these pages are browsed more than read. */

.feature-shot {
  max-width: 1120px;
  margin: 0 auto 64px;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.feature-shot .shot-caption {
  text-align: center;
  font-family: var(--hand);
  font-size: 21px;
  color: var(--accent);
  margin-top: 14px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 56px;
  max-width: 940px;
  margin: 0 auto 70px;
  padding: 0 24px;
}

.fact h3 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 27px;
  letter-spacing: 0.03em;
  line-height: 1.05;
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 3px solid var(--pick, var(--accent));
}

.fact p {
  color: var(--text-muted);
  margin: 0;
}

.fact p + p {
  margin-top: 10px;
}

.fact:nth-child(7n + 1) { --pick: var(--amber); }
.fact:nth-child(7n + 2) { --pick: var(--ember); }
.fact:nth-child(7n + 3) { --pick: var(--crimson); }
.fact:nth-child(7n + 4) { --pick: var(--orchid); }
.fact:nth-child(7n + 5) { --pick: var(--ocean); }
.fact:nth-child(7n + 6) { --pick: var(--teal); }
.fact:nth-child(7n + 7) { --pick: var(--lime); }

/* The way on: the previous and next feature, and all of them. */
.feature-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 940px;
  margin: 0 auto 70px;
  padding: 22px 24px 0;
  border-top: 1px dashed var(--border);
}

.feature-nav a {
  font-family: var(--poster);
  font-size: 22px;
  letter-spacing: 0.04em;
}

.feature-nav .all {
  font-family: var(--hand);
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* The features index: a contact sheet of the app, one print per feature. */
.feature-group {
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.feature-group > h2 {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0.02em;
  margin: 0;
}

.feature-group > .hand-note {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 22px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.feature-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.feature-tile:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--pick, var(--accent));
}

.feature-tile img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--border);
}

.feature-tile b {
  font-family: var(--poster);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.03em;
  padding: 14px 16px 0;
  color: var(--pick, var(--accent));
}

.feature-tile span {
  color: var(--text-muted);
  font-size: 14.5px;
  padding: 2px 16px 16px;
}

.feature-grid .feature-tile:nth-child(7n + 1) { --pick: var(--amber); }
.feature-grid .feature-tile:nth-child(7n + 2) { --pick: var(--ember); }
.feature-grid .feature-tile:nth-child(7n + 3) { --pick: var(--crimson); }
.feature-grid .feature-tile:nth-child(7n + 4) { --pick: var(--orchid); }
.feature-grid .feature-tile:nth-child(7n + 5) { --pick: var(--ocean); }
.feature-grid .feature-tile:nth-child(7n + 6) { --pick: var(--teal); }
.feature-grid .feature-tile:nth-child(7n + 7) { --pick: var(--lime); }

/* A card on the home page that goes somewhere. Only the heading is the link - a whole card inside
   one made its text a paragraph long, which search engines read as the link's name - and the link
   stretches over the card, so the whole card still answers a click. The same for the tool picks
   and the features page's tiles. */
.card-link,
a.pick-name,
.tile-link {
  color: inherit;
}

.card-link::after,
a.pick-name::after,
.tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-link:hover,
a.pick-name:hover,
.tile-link:hover {
  text-decoration: none;
}

.feature-tile {
  position: relative;
}

.card h3:has(.card-link)::after {
  content: " \2192";
  color: var(--accent);
}

.walk .more {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--hand);
  font-size: 21px;
}

@media (max-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .facts,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------- responsive */

@media (prefers-reduced-motion: reduce) {
  .polaroid,
  .card,
  .pick-wrap,
  .btn,
  .store-badge {
    transition: none;
  }
}

/* Below this the margins are too narrow to strew polaroids into without covering the words, so
   they collect into a pile in the flow instead. */
@media (max-width: 1400px) {
  .strewn {
    display: none;
  }

  .pile {
    display: flex;
  }
}

@media (max-width: 860px) {
  .topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
  }

  .topbar .brand {
    order: -1;
    flex-basis: 100%;
    justify-content: center;
  }

  .topbar nav.left,
  .topbar nav.right {
    justify-content: center;
    gap: 20px;
  }

  .stage::before,
  .stage::after {
    width: 260px;
  }

  .stage::before {
    left: -40px;
  }

  .stage::after {
    right: -40px;
  }

  .stage,
  .page-head {
    margin-top: 0;
    padding-top: 30px;
  }

  .stave::before {
    display: none;
  }

  .pick-item {
    transform: none;
    width: 104px;
  }

  .ticket-body {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }

  .ticket-body div:nth-child(3) {
    border-left: none;
  }

  .board,
  .plans,
  .why,
  .tool-list {
    grid-template-columns: 1fr;
  }

  .board {
    max-width: 440px;
  }

  .walk {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .walk.reverse .walk-art {
    order: 0;
  }

  .poster {
    padding: 44px 22px 40px;
  }

  .poster .polaroid {
    display: none;
  }

  table.specs th {
    width: auto;
    display: block;
    padding-bottom: 0;
    border-bottom: none;
  }

  table.specs td {
    display: block;
    padding-top: 2px;
  }

  .letter {
    padding: 30px 20px 24px;
  }
}

@media (max-width: 480px) {
  .ticket-stub {
    width: 70px;
  }

  .pile .polaroid {
    width: 120px;
  }
}

/* ---------------------------------------------------------------- the policy pages */

/* Terms, privacy and refunds are read, not browsed: the poster headings are toned down so a page
   of them does not shout, and lists get the same muted colour as the paragraphs around them. */
.legal h2 {
  font-size: 30px;
  margin-top: 44px;
}

.legal ul,
.prose ul {
  color: var(--text-muted);
  padding-left: 22px;
}

.legal li,
.prose ul > li {
  margin: 0 0 8px;
}

.legal .updated {
  font-size: 13px;
}

/* A blank only the owner can fill in - who they are, where, which host. Loud on purpose, so a page
   with one left in it cannot be mistaken for finished. */
.fill {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 650;
}