/*
  Sticker site kit, loaded by every page: base, type, buttons, the sticky header, colour
  bands, the page opener with its static stickers, cards, numbered steps, chips, ruled
  lists, FAQ, the close band, the footer and the base motion rules. Page files add only
  what their pages need: home-beats.css and home-motion.css for the homepage,
  pages.css for pricing and the trade pages, legal.css for prose and forms, tools.css
  for the two tools. Nothing here exists twice.
  Colours come only from design-tokens.css. --quiet is the muted text colour, and the
  orange band swaps it, and the focus ring, for the text colour because muted text and the
  blue ring both fail contrast on orange.
  Spacing is a px scale of 4, 8, 12, 16, 24, 32, 48 and 72, with 3 px ink outlines and
  hard shadows of 4 to 8 px with no blur.
  Type: Anton for headlines, stamps and buttons; DM Sans for body text.
*/
:root {
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --quiet: var(--muted);
  --ring: var(--focus);
  --grid: color-mix(in srgb, var(--text) 7%, transparent);
  font-family: var(--body);
  color: var(--text);
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--bg);
  overflow-x: clip;
}
button,
input,
select,
textarea {
  font: inherit;
}
/* Example text, never entered text: lighter and italic (DESIGN.md, `placeholder`). */
::placeholder {
  color: var(--placeholder);
  font-style: italic;
  font-weight: 400;
  opacity: 1;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p,
dl,
dd,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 1rem + 5.6vw, 5rem);
  line-height: 1.08;
}
h2 {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
}
h3 {
  font-size: 1.5rem;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -72px;
  z-index: 40;
  padding: 10px 16px;
  border: 3px solid var(--text);
  border-radius: 14px;
  background: var(--accent-yellow);
  font-weight: 700;
}
.skip-link:focus {
  top: 12px;
}
.wrap {
  width: calc(100% - 32px);
  max-width: 1240px;
  margin-inline: auto;
}
.num {
  font-variant-numeric: tabular-nums;
}
.kicker,
.fine {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--quiet);
}
.kicker {
  font-weight: 700;
}
.label {
  font: 700 0.75rem/1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}
.lead {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 44ch;
  font-weight: 500;
}
.text-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.text-link:hover {
  text-decoration-thickness: 5px;
}

/* pill button: hard shadow sits on the wrapper, the button moves over it. The chip text
   comes from CSS so the link text stays exactly "Try it free". .plain drops the chip. */
.action {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  margin-top: 12px;
}
.action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--text);
  transform: translate(6px, 6px);
}
.action:hover .button {
  transform: translate(-2px, -2px);
}
.action:active .button {
  transform: translate(5px, 5px);
  transition-duration: 0.04s;
}
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 6px 28px;
  overflow: hidden;
  border: 3px solid var(--text);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 400 1.375rem/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.12s ease-out;
}
.button::before {
  content: "Hear it" / "";
  order: 2;
  padding: 5px 10px 4px;
  border: 2px solid var(--text);
  border-radius: 999px;
  background: var(--accent-yellow);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
.button::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 36px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transform: translateX(-120px) skewX(-20deg);
  animation: glare 3.2s ease-in-out 1s infinite;
}
.button.plain::before,
.button.plain::after {
  display: none;
}
.button.on-dark {
  background: var(--accent-yellow);
}
.button.on-dark::before {
  background: var(--primary);
  color: var(--on-primary);
}
.button.small {
  white-space: nowrap;
  width: auto;
  min-height: 44px;
  padding: 4px 16px;
  font-size: 1.125rem;
  background: var(--accent-yellow);
}
.button.small::before,
.button.small::after {
  display: none;
}
.action.sm {
  width: auto;
  margin: 0;
}
.action.sm::before {
  transform: translate(4px, 4px);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.actions .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.actions .action {
  margin-top: 0;
}
.stamp {
  display: inline-block;
  padding: 3px 10px 2px;
  border: 2px solid var(--text);
  border-radius: 8px;
  background: var(--accent-yellow);
  font: 400 1rem/1.2 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 3px solid var(--text);
}
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  min-height: 68px;
  padding-block: 8px;
}
.brand {
  --mark: 38px;
  --word: 1.75rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-right: auto;
}
.brand-mark {
  width: var(--mark);
  height: var(--mark);
  flex: none;
}
/* Anton caps for the name; the 247 is a tilted sticker tab with the outline and hard shadow.
   --mark and --word are the lockup sizes; each width step below only changes those two. */
.wordmark {
  display: inline-flex;
  align-items: center;
  font: 400 var(--word) / 1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.brand-tab {
  margin-left: 0.18em;
  padding: 0.1em 0.16em 0.03em;
  border: 2px solid var(--text);
  border-radius: 0.2em;
  background: var(--accent-yellow);
  box-shadow: 2px 2px 0 var(--text);
  font-size: 0.8em;
  transform: rotate(-3deg);
}
.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--text);
  border-radius: 14px;
  background: var(--surface);
}
.menu-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.menu-toggle .cross,
.menu-toggle[aria-expanded="true"] .bars {
  display: none;
}
.menu-toggle[aria-expanded="true"] .cross {
  display: inline;
}
#main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  padding: 8px 16px 16px;
  background: var(--surface);
  border-bottom: 3px solid var(--text);
}
#main-nav.open {
  display: flex;
}
#main-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 2px solid var(--text);
  font-weight: 700;
}
#main-nav a:last-child {
  border-bottom: 0;
}
#main-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
/* Without JavaScript the menu button does nothing, so the links show as a row under the bar. */
@media (scripting: none) {
  #main-nav {
    display: flex;
    position: static;
    order: 5;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
    padding: 0;
    background: none;
    border: 0;
  }
  #main-nav a {
    border: 0;
  }
  .menu-toggle {
    display: none;
  }
}

/* The header stays on one row down to 320 px. Each step sets the lockup sizes (--mark,
   --word) and the width of the compact "Try it free" button for the widths where the row
   would wrap without it, and the menu button stays 44 px. */
@media (max-width: 699px) {
  .button.small {
    padding-inline: 12px;
    font-size: 1.0625rem;
  }
}
@media (max-width: 419px) {
  .bar {
    column-gap: 8px;
  }
  .brand {
    --mark: 34px;
    --word: 1.5rem;
  }
  .button.small {
    padding-inline: 10px;
    font-size: 1rem;
  }
}
@media (max-width: 379px) {
  .button.small {
    padding-inline: 8px;
    font-size: 0.875rem;
  }
}
@media (max-width: 359px) {
  .wrap {
    width: calc(100% - 24px);
  }
  .brand {
    --mark: 30px;
    --word: 1.3125rem;
  }
}
@media (max-width: 329px) {
  .brand {
    --mark: 28px;
    --word: 1.1875rem;
  }
  .brand-tab {
    box-shadow: 1px 1px 0 var(--text);
  }
  .button {
    gap: 8px;
    padding-inline: 16px;
  }
}
@media (min-width: 700px) {
  .wrap {
    width: calc(100% - 48px);
  }
  .bar {
    flex-wrap: nowrap;
    column-gap: 24px;
    min-height: 72px;
  }
  .brand {
    --mark: 44px;
    --word: 2rem;
    margin-right: 0;
  }
  .brand-tab {
    border-width: 3px;
    box-shadow: 3px 3px 0 var(--text);
  }
  .button.small {
    padding-inline: 16px;
    font-size: 1.125rem;
  }
  .menu-toggle {
    display: none;
  }
  #main-nav {
    display: flex;
    position: static;
    flex-direction: row;
    gap: 24px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
  }
  #main-nav a {
    min-height: 44px;
    border: 0;
  }
  #main-nav .nav-extra {
    display: none;
  }
  .action {
    width: fit-content;
  }
  .button {
    width: auto;
  }
}

/* bands: flat colour; paper and white carry faint grid lines. The orange and violet
   bands swap the muted text and the blue ring, which fail contrast on them. */
.b-paper,
.b-white,
.footer-band {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.b-white {
  background-color: var(--surface);
}
.b-pink {
  background: var(--accent-pink);
}
.b-yellow {
  background: var(--accent-yellow);
}
.b-tang {
  background: var(--accent-orange);
  --quiet: var(--text);
  --ring: var(--text);
}
.b-mint {
  background: var(--accent-mint);
}
.b-violet,
.close {
  background: var(--primary);
  color: var(--on-primary);
  --quiet: var(--on-primary);
  --ring: var(--surface);
}
.c-yellow {
  --c: var(--accent-yellow);
}
.c-pink {
  --c: var(--accent-pink);
}
.c-tang {
  --c: var(--accent-orange);
}
.c-green {
  --c: var(--accent-green);
}
.c-violet {
  --c: var(--primary);
}
.c-mint {
  --c: var(--accent-mint);
}
.c-white {
  --c: var(--surface);
}

/* page opener: a coloured band with the title and a few static stickers. The stickers sit in
   their own column on wide screens and in a row under the text on narrow ones, so they
   never cross the words. */
.page-hero {
  border-bottom: 3px solid var(--text);
}
.hero-in {
  display: grid;
  gap: 24px;
  padding-block: 40px 48px;
}
.hero-text {
  display: grid;
  gap: 16px;
  align-content: center;
  min-width: 0;
}
.page-hero .kicker,
.page-hero .eyebrow {
  justify-self: start;
  padding: 3px 10px 2px;
  border: 2px solid var(--text);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 400 1rem/1.2 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 1.2rem + 5vw, 4.5rem);
}
.page-hero .lead {
  max-width: 52ch;
}
.stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 8px 8px 0;
}
.sticker {
  display: grid;
  place-items: center;
  width: var(--w, 64px);
  height: var(--h, var(--w, 64px));
  border: 3px solid var(--text);
  background: var(--c, var(--accent-yellow));
  box-shadow: 5px 5px 0 var(--text);
  color: var(--text);
  font: 400 1.25rem/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: rotate(var(--r, 0deg));
}
.sticker.c-violet {
  color: var(--on-primary);
}
.sticker.round {
  border-radius: 50%;
}
.sticker.pill {
  --h: 52px;
  --w: 150px;
  border-radius: 999px;
}
.sticker.tile {
  border-radius: 16px;
}
.sticker.arch {
  border-radius: 999px 999px 8px 8px;
}
/* The words come from CSS, so they never read as page copy. */
.sticker.say-247::after {
  content: "24/7" / "";
}
.sticker.say-hear::after {
  content: "Hear it" / "";
}
/* Two short lines inside a square tile: the tile is at least 88 px so the words never touch its
   edge, and the text is centred like the other word stickers. */
.sticker.say-fine {
  min-width: 88px;
  min-height: 88px;
}
.sticker.say-fine::after {
  content: "Fine print" / "";
  padding-inline: 8px;
  font-size: 1.125rem;
  line-height: 1.1;
  text-align: center;
}
.sticker.say-404::after {
  content: "404" / "";
  font-size: 1.75rem;
}
.sticker.say-step::after {
  content: "Step by step" / "";
  padding-inline: 12px;
  font-size: 1.125rem;
  text-align: center;
  line-height: 1.1;
}
.r1 {
  --r: -6deg;
}
.r2 {
  --r: 7deg;
}
.r3 {
  --r: -3deg;
}
.r4 {
  --r: 9deg;
}
@media (min-width: 900px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: center;
    padding-block: 64px 72px;
  }
  .stickers {
    position: relative;
    display: block;
    height: 240px;
    padding: 0;
  }
  .stickers .sticker {
    position: absolute;
    --w: 96px;
  }
  .stickers .sticker.pill {
    --w: 160px;
    --h: 64px;
  }
  .stickers .sticker:nth-child(1) {
    left: 8px;
    top: 24px;
  }
  .stickers .sticker:nth-child(2) {
    right: 16px;
    top: 0;
  }
  .stickers .sticker:nth-child(3) {
    left: 84px;
    bottom: 4px;
  }
  .stickers .sticker:nth-child(4) {
    right: 4px;
    bottom: 28px;
  }
}

/* cards and ruled lists */
.card,
.art,
.ledger {
  border: 3px solid var(--text);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--text);
}
.card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 24px;
}
.ruled {
  margin-top: 12px;
}
.ruled li {
  position: relative;
  max-width: 66ch;
  padding: 12px 0 12px 32px;
  font-weight: 500;
}
.ruled li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--text);
  border-radius: 50%;
  background: var(--accent-pink);
}

/* numbered step cards; .rows holds the number at the left edge, so the text can carry
   inline tags, and keeps the cards level */
.steps {
  display: grid;
  gap: 24px;
  margin: 12px 8px 12px 0;
  counter-reset: step;
}
.steps li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  border: 3px solid var(--text);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--text);
  counter-increment: step;
  transition: transform 0.12s ease-out;
}
.steps li:nth-child(odd) {
  transform: rotate(-0.8deg);
}
.steps li:nth-child(even) {
  transform: rotate(0.8deg);
}
.steps li:hover {
  transform: translate(-2px, -2px);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--text);
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font: 400 2rem/1 var(--display);
}
.steps li:nth-child(3n + 2)::before {
  background: var(--accent-yellow);
  color: var(--text);
}
.steps li:nth-child(3n)::before {
  background: var(--accent-pink);
  color: var(--text);
}
.steps.rows li {
  position: relative;
  display: block;
  min-height: 96px;
  padding: 20px 24px 20px 92px;
  transform: none;
}
.steps.rows li::before {
  position: absolute;
  left: 20px;
  top: 50%;
  translate: 0 -50%;
}
.steps.rows li:hover {
  transform: translate(-2px, -2px);
}

/* chips: pill links */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 18px;
  border: 3px solid var(--text);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--text);
  font-weight: 700;
  transition: transform 0.12s;
}
.chips li:nth-child(even) a {
  background: var(--accent-yellow);
}
.chips a:hover {
  transform: translate(-2px, -2px) rotate(-1.5deg);
}

.faq {
  display: grid;
  gap: 16px;
  max-width: 80ch;
  margin: 8px 6px 0 0;
}
.faq details {
  border: 3px solid var(--text);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--text);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px 20px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
/* The plus is two drawn bars, not a font glyph: a glyph sits off centre in the circle and
   rotates around the wrong point, so the open state would not be a true cross. */
.faq summary::after,
.transcript summary::after,
.compare summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border: 3px solid var(--text);
  border-radius: 50%;
  background:
    linear-gradient(var(--text), var(--text)) center / 14px 3px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 3px 14px no-repeat,
    var(--accent-yellow);
  transition: transform 0.2s;
}
.faq details[open] summary::after,
.transcript[open] summary::after,
.compare[open] summary::after {
  transform: rotate(45deg);
}
.faq details > p {
  max-width: 62ch;
  padding: 0 20px 20px;
}

/* close band and footer */
.close {
  position: relative;
  overflow-x: clip;
  border-top: 3px solid var(--text);
}
.close-in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-block: 72px;
}
.close .fine {
  color: var(--on-primary);
}
.close .text-link {
  text-decoration-color: var(--accent-yellow);
}
.close h2 {
  font-size: clamp(2.5rem, 1rem + 5.5vw, 5rem);
  max-width: 14ch;
}
.footer-band {
  border-top: 3px solid var(--text);
}
.footer {
  display: grid;
  gap: 32px;
  padding-block: 48px;
}
.footer-brand {
  display: grid;
  gap: 8px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
}
.footer-links h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}
.footer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}
.footer-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.footer-bottom {
  font-size: 0.9375rem;
  color: var(--quiet);
}
@media (min-width: 900px) {
  .footer {
    grid-template-columns: 1fr 2fr;
    align-items: start;
  }
  .footer-bottom {
    grid-column: 1 / -1;
  }
}

/* motion: a short rise on load, and as cards scroll in below a page opener where the
   browser supports it. Every animation and transition stops under prefers-reduced-motion. */
@keyframes glare {
  0%,
  55% {
    transform: translateX(-120px) skewX(-20deg);
  }
  100% {
    transform: translateX(420px) skewX(-20deg);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.hero-text > * {
  animation: rise 0.45s ease-out both;
}
.hero-text > :nth-child(2) {
  animation-delay: 0.06s;
}
.hero-text > :nth-child(3) {
  animation-delay: 0.12s;
}
@supports (animation-timeline: view()) {
  .page-hero ~ * :is(.steps li, .faq details, .card) {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}