/**
 * The public face of the platform: the home page, pricing, and the two forms
 * a stranger fills in to start or come back.
 *
 * Laid out the way Issam drew the home page: bands that run the width of the
 * window, a 1200px column inside them, headlines in the theme's sign face set
 * in capitals, and white cards on paper. Written in tokens rather than in his
 * colours, so the site wears whatever theme the console picks - Buzz is the
 * one it was drawn in, and the one it ships in.
 *
 * Separate from theme.css, which every shop's own screens use. These pages
 * are the only ones a stranger sees, and their job is to read well rather
 * than to be worked in all day.
 */

body { padding: 0; line-height: 1.55; }

/* The header and footer bring their own styles; these give them the page's
   gutter, which the two pages without this file get from their own padding. */
:root .site-nav { padding: 30px 32px 0; margin-bottom: 0; }
:root .site-foot { padding: 32px; border-top: 0; }

.inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

p { margin: 0; color: var(--ink-dim); }
h1, h2, h3 { margin: 0; color: var(--ink); }

/* The headline face. Every theme's sign face, in capitals, because that is
   how a barbershop letters its window. */
.display {
  font-family: var(--font-sign); font-weight: 800; text-transform: uppercase;
  line-height: .96; letter-spacing: .005em; color: var(--ink);
}
.display .red { color: var(--accent); }
h1.display { font-size: clamp(56px, 7.5vw, 112px); line-height: .9; }
h2.display { font-size: clamp(40px, 5vw, 68px); }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow.pill {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bg));
}
.lede { font-size: 19px; line-height: 1.55; max-width: 56ch; }

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

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; border-radius: 999px;
  transition: transform .15s, filter .15s, background .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.go { background: var(--accent); color: var(--on-accent); padding: 18px 28px; border: 0; }
.btn.go:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn.line { color: var(--ink); padding: 16px 26px; border: 2px solid var(--ink); background: none; }
.btn.line:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
/* The phone on the demo button rings, now and then, so it reads as a call. */
.btn .ringer { animation: site-ringer 3.6s ease-in-out infinite; transform-origin: 50% 50%; }

.ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-dim); }
.ticks span { display: inline-flex; align-items: center; gap: 6px; }
.ticks svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* The big faint tools behind a section, which is how the page says where it
   is without a word. */
.decor { position: absolute; pointer-events: none; z-index: 0; color: var(--ink); opacity: .06; }
.decor svg { display: block; width: 100%; height: auto; stroke-width: 2.5; }

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

.hero {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 64px 32px 72px;
  display: flex; flex-wrap: wrap; gap: 64px; align-items: center;
}
.hero .clipper-decor { left: -90px; top: 10px; width: 230px; transform: rotate(-22deg); }
.hero .comb-decor { right: 30%; bottom: 0; width: 200px; transform: rotate(14deg); }

.hero-copy {
  position: relative; z-index: 1; flex: 999 1 520px; min-width: 0;
  display: flex; flex-direction: column; gap: 28px;
}
.hero-sub { font-size: 24px; line-height: 1.35; font-weight: 600; max-width: 520px; color: var(--ink); }
.hero-copy .lede { max-width: 500px; }

.hero-card {
  position: relative; z-index: 1; flex: 1 1 420px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 28px;
  padding: 24px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 24px 60px -36px var(--shadow);
}
.card-line { font-size: 30px; line-height: 1.02; }

/* The shop, drawn: a barber at work, a customer in the chair, the phone on
   the shelf ringing and a pole turning by the door. */
.scene { position: relative; background: var(--bg); border-radius: 20px; overflow: hidden; }
.scene svg { display: block; width: 100%; height: auto; color: var(--ink); }
.scene .p { fill: var(--surface); }
.scene .c { fill: var(--surface-2); }
.scene .r { fill: var(--accent); }
.scene .k { fill: var(--ink); }
.scene .sr { stroke: var(--accent); }
.scene .sn { stroke: var(--accent-2); }
.scene .sl { stroke: var(--line-strong); }
.scene .leg { stroke: var(--accent-2); }
.scene .fall { animation: scene-fall 1.5s ease-in infinite; }
.scene .stripes { animation: scene-pole 1.6s linear infinite; }
/* The clippers buzz the whole time; that is the other half of the name. */
.scene .w1 { animation: mo-wave 1.2s ease-in-out infinite; }

/*
 * The call, on one ten-second clock.
 *
 * The phone buzzes in three bursts, goes green as it is answered, and only
 * then does the bubble come up - typing first, then the answer, held long
 * enough to read twice. It used to pop in on its own five-second loop with
 * the phone still ringing underneath it, so the answer arrived before the
 * question and was gone again before anybody had finished reading it.
 */
.scene .ring { transform-box: fill-box; transform-origin: 50% 100%; animation: scene-ring 10s ease-in-out infinite; }
.scene .screen { fill: var(--accent); animation: scene-answer 10s linear infinite; }
.scene .pw { animation: scene-buzz 10s linear infinite; }
.scene .pw.far { animation-delay: .12s; }

/* Grey rather than black: the same ink as the quieter text on the page, so
   the bubble reads as something said rather than as a sign over the scene. */
.bubble {
  position: absolute; left: 4%; top: 3%; max-width: 58%;
  background: var(--ink-dim); color: var(--bg); border-radius: 16px 16px 16px 4px;
  padding: 10px 14px 11px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 12px 26px -16px var(--shadow);
  animation: scene-bubble 10s ease-in-out infinite;
}
.bubble b {
  display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 25%, var(--bg));
}
/* The answer holds its place while the dots are showing, so the bubble comes
   up at its final size rather than growing under the reader's eye. */
.bubble .speech { display: block; animation: scene-said 10s ease-in-out infinite; }
.bubble .dots { position: absolute; left: 14px; top: 33px; display: flex; gap: 5px; animation: scene-dots 10s linear infinite; }
.bubble .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bg); animation: scene-dot .9s ease-in-out infinite; }
.bubble .dots i:nth-child(2) { animation-delay: .15s; }
.bubble .dots i:nth-child(3) { animation-delay: .3s; }
.on-air {
  position: absolute; right: 4%; bottom: 6%; display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px;
}
.on-air i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: site-beacon 1.8s ease-out infinite; }

.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mini { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--bg); border-radius: 14px; }
.mini svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini b { font-size: 15px; font-weight: 600; color: var(--ink); }
.mini span { font-size: 13px; line-height: 1.45; color: var(--ink-dim); }

.belt-row { padding-bottom: 64px; }

/* --------------------------------------------------------- the numbers */

.band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .inner { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 48px; }
.band h2 { max-width: 860px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
/* The rule over each number is drawn across as the band arrives. */
.stat { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }
.stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ink); transform-origin: left;
}
.js .reveal .stat::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in .stat::before { transform: none; }
.js .reveal.in .stat:nth-child(2)::before { transition-delay: .15s; }
.js .reveal.in .stat:nth-child(3)::before { transition-delay: .3s; }
.stat b { font-family: var(--font-sign); font-weight: 800; font-size: 56px; line-height: 1; color: var(--ink); }
.stat p { font-size: 16px; line-height: 1.5; }
.small-print { font-size: 13px; color: var(--ink-faint); }

/* ------------------------------------------------------- how it works */

.how { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px; }
.how .head { display: flex; flex-direction: column; gap: 12px; }

/*
 * Ring. Booked. Done.
 *
 * One seven-second loop with every part keyed to the same clock: the phone
 * shakes, a dot carries the call along the wire, the question appears, the
 * receptionist types and answers, a second dot carries the booking to the
 * diary and the empty slot fills. Each part has its own keyframes but they
 * are all fractions of the same seven seconds, so nothing drifts.
 */
.story {
  margin: 0; background: var(--ink); color: var(--bg); border-radius: 28px; padding: 48px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px;
}
.story .beat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.story .caption { font-size: 14px; font-weight: 600; color: var(--bg); }

.story .phone {
  width: 118px; height: 210px; border: 3px solid var(--bg); border-radius: 26px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transform-origin: 50% 60%; animation: st-ring 7s ease-in-out infinite;
}
.story .notch { width: 34px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--bg) 30%, var(--ink)); margin-bottom: auto; }
.story .call {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; animation: site-beacon-red 2s ease-out infinite;
}
.story .call svg { width: 24px; height: 24px; fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story .calling { font-size: 12px; color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.story .phone .foot { margin-top: auto; }

.story .conn {
  flex: 1 1 60px; max-width: 140px; min-width: 50px; height: 12px; margin-top: -30px;
  position: relative; border-top: 2px dashed color-mix(in srgb, var(--bg) 30%, var(--ink));
}
.story .dot { position: absolute; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); }
.story .dot.one { animation: st-dot1 7s linear infinite; }
.story .dot.two { animation: st-dot2 7s linear infinite; }

.story .talk { flex: 0 1 280px; min-width: 240px; align-items: stretch; gap: 12px; }
.story .say { padding: 12px 16px; font-size: 15px; max-width: 230px; }
.story .say.them {
  align-self: flex-start; background: var(--bg); color: var(--ink);
  border-radius: 18px 18px 18px 4px; animation: st-b1 7s ease-out infinite;
}
.story .typing {
  align-self: flex-end; display: flex; gap: 5px; padding: 14px 16px;
  background: var(--accent); border-radius: 18px 18px 4px 18px; animation: st-type 7s linear infinite;
}
.story .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-accent); }
.story .typing i:nth-child(2) { opacity: .6; }
.story .typing i:nth-child(3) { opacity: .3; }
.story .say.us {
  align-self: flex-end; margin-top: -44px; background: var(--accent); color: var(--on-accent);
  border-radius: 18px 18px 4px 18px; animation: st-b2 7s ease-out infinite;
}
.story .talk .caption { text-align: center; margin-top: 6px; }

.story .diary {
  width: 230px; background: var(--bg); color: var(--ink); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.story .diary b { font-family: var(--font-sign); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.story .row, .story .free, .story .fill {
  display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 8px;
}
.story .row span, .story .free span, .story .fill span { width: 36px; flex: none; }
.story .row { background: var(--surface-strong); }
.story .row span, .story .free { color: var(--ink-dim); }
.story .slot { position: relative; height: 34px; }
.story .free, .story .fill { position: absolute; inset: 0; padding-top: 0; padding-bottom: 0; }
.story .free { border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, var(--bg)); animation: st-free 7s linear infinite; }
.story .fill {
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  animation: st-slot 7s ease-out infinite;
}
.story .fill em { flex: 1; font-style: normal; }
.story .fill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.step {
  background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.step .n {
  width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font-family: var(--font-sign); font-weight: 800; font-size: 24px;
}
.step h3 { font-family: var(--font-body); font-size: 22px; font-weight: 600; }
.step p { font-size: 16px; line-height: 1.55; }
.js .reveal .step { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; }
.js .reveal.in .step { opacity: 1; transform: none; }
.js .reveal.in .step:nth-child(2) { transition-delay: .12s; }
.js .reveal.in .step:nth-child(3) { transition-delay: .24s; }

/* ---------------------------------------------------- the red promise */

.promise-row { padding-bottom: 96px; }
.promise {
  background: var(--accent); color: var(--on-accent); border-radius: 28px; padding: 56px 48px;
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
}
.promise h2 { flex: 1 1 380px; color: inherit; font-size: clamp(40px, 4.5vw, 60px); line-height: .98; }
.promise-side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 22px; }
.promise p { font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--on-accent) 88%, var(--accent)); }

/*
 * The price list being read off, rather than remembered.
 *
 * A highlight settles on one line of the shop's prices and the answer appears
 * beside it with exactly that figure in it; then the next line. Eight seconds,
 * two questions, and the point of the band made in a way a sentence cannot.
 */
.quote { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.prices {
  position: relative; background: var(--bg); color: var(--ink); border-radius: 16px; padding: 12px 14px 14px;
  font-size: 14px;
}
.prices small {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 6px 6px;
}
.prices .line { position: relative; z-index: 1; display: flex; gap: 8px; align-items: baseline; padding: 5px 6px; }
.prices .line i { flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 30%, transparent); }
.prices .line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.prices .lit {
  position: absolute; left: 8px; right: 8px; top: 30px; height: 29px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg)); animation: quote-lit 8s ease-in-out infinite;
}
.answers { position: relative; width: 150px; height: 70px; }
.answers span {
  position: absolute; inset: auto 0 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.35;
  background: var(--ink); color: var(--bg); border-radius: 14px 14px 14px 4px;
}
.answers span:first-child { animation: quote-one 8s ease-out infinite; }
.answers span:last-child { animation: quote-two 8s ease-out infinite; }

/* ------------------------------------------------------------- extras */

.extras { padding-bottom: 96px; display: flex; flex-direction: column; gap: 24px; }
.extras h2 { font-family: var(--font-body); font-size: 22px; font-weight: 600; }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
/* Packed to the top: the cards in a row are stretched to the tallest, and a
   grid left to stretch its rows pushed a two-line description away from its
   own title. */
.extra {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start; align-content: start;
  padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 55%, var(--bg)); transition: transform .2s, box-shadow .2s;
}
.extra:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -20px var(--shadow); }
.extra b { font-size: 16px; font-weight: 600; color: var(--ink); }
.extra span { grid-column: 1; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.extra svg {
  grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px;
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Each extra doing its own small job, on a loop. */
.ex-remind .blip { fill: var(--accent); stroke: none; transform-box: fill-box; transform-origin: center; animation: ex-blip 3.2s ease-out infinite; }
.ex-wait .x { animation: ex-x 5s ease-in-out infinite; }
.ex-wait .ok { stroke-dasharray: 1; animation: ex-ok 5s ease-in-out infinite; }
.ex-numbers .bar { transform-box: fill-box; transform-origin: bottom; animation: ex-bar 3.6s ease-in-out infinite; }
.ex-numbers .bar:nth-of-type(2) { animation-delay: .25s; }
.ex-numbers .bar:nth-of-type(3) { animation-delay: .5s; }
.ex-log .ln { stroke-dasharray: 1; animation: ex-write 4.2s ease-in-out infinite; }
.ex-log .ln:nth-of-type(2) { animation-delay: .35s; }
.ex-log .ln:nth-of-type(3) { animation-delay: .7s; }
.ex-tone .knob { fill: var(--accent); stroke: none; animation: ex-knob 4s ease-in-out infinite; }
.ex-page .press { transform-box: fill-box; transform-origin: center; animation: ex-press 3s ease-in-out infinite; }
.ex-page .ripple { transform-box: fill-box; transform-origin: center; animation: ex-ripple 3s ease-out infinite; }

/* ------------------------------------------------------------ the dare */

.dare { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); }
.dare .decor { color: var(--bg); opacity: .07; }
.dare .decor svg { stroke-width: 2; }
.dare .scissors-decor { left: -40px; bottom: -30px; width: 320px; transform: rotate(-28deg); }
.dare .razor-decor { right: -60px; top: 60px; width: 400px; transform: rotate(24deg); }
.dare .inner {
  position: relative; z-index: 1; padding-top: 104px; padding-bottom: 104px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px;
}
.dare h2 { color: inherit; font-size: clamp(52px, 7vw, 96px); line-height: .92; }
.dare p { font-size: 19px; line-height: 1.6; max-width: 560px; color: color-mix(in srgb, var(--bg) 80%, var(--ink)); }
.dare .cta { justify-content: center; margin-top: 8px; }
.dare .btn.line { color: var(--bg); border-color: var(--bg); }
.dare .btn.line:hover { background: var(--bg); color: var(--ink); }
.dare .note { font-size: 14px; color: color-mix(in srgb, var(--bg) 66%, var(--ink)); }

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

.page-head { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 22px; }

/*
 * The free month, as a line with a dot travelling along it.
 *
 * Asked about more than anything else on this page: what happens to the card.
 * Today the card goes down and nothing is taken; day thirty is the last day
 * to walk away for nothing; day thirty-one is the first charge. Drawn evenly
 * spaced rather than to scale, because to scale the last two marks would sit
 * on top of each other.
 */
.month { margin: 0 0 48px; position: relative; padding: 28px 28px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; }
.month-line { position: absolute; left: calc(28px + 8px); right: calc(28px + 8px); top: 36px; height: 2px; background: var(--line-strong); }
.month-line .runner {
  position: absolute; top: -6px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: month-run 7s ease-in-out infinite;
}
.month ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.month li { display: flex; flex-direction: column; gap: 6px; }
.month li:nth-child(2) { align-items: center; text-align: center; }
.month li:nth-child(3) { align-items: flex-end; text-align: right; }
.month li i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 3px solid var(--ink); margin-bottom: 8px; }
.month li:nth-child(1) i { animation: month-mark-1 7s ease-in-out infinite; }
.month li:nth-child(2) i { animation: month-mark-2 7s ease-in-out infinite; }
.month li:nth-child(3) i { animation: month-mark-3 7s ease-in-out infinite; }
.month li b { font-family: var(--font-sign); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.month li span { font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); max-width: 30ch; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tier:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px var(--shadow); }
.tier.pick { border: 2px solid var(--accent); box-shadow: 0 22px 50px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.js .reveal .tier { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s, box-shadow .2s, border-color .2s; }
.js .reveal.in .tier { opacity: 1; transform: none; }
.js .reveal.in .tier:nth-child(2) { transition-delay: .1s, .1s, 0s, 0s; }
.js .reveal.in .tier:nth-child(3) { transition-delay: .2s, .2s, 0s, 0s; }
.js .reveal.in .tier:hover { transform: translateY(-4px); transition-delay: 0s; }
/*
 * The "most shops" pill.
 *
 * Called `most` rather than `flag`: `.flag` belongs to the drawn country
 * flags in theme.css, which size themselves to 1.25em, and that rule landing
 * on this pill once stacked it into an unreadable blob.
 */
.tier .most {
  position: absolute; top: -13px; left: 26px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); white-space: nowrap;
}
.tier h3 { font-family: var(--font-sign); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; }
.tier .who { font-size: 14px; color: var(--ink-faint); margin: 4px 0 18px; }
.tier .price { display: flex; align-items: baseline; gap: 6px; }
.tier .price b { font-family: var(--font-sign); font-weight: 800; font-size: 64px; line-height: .95; color: var(--ink); }
.tier .price span { font-size: 15px; color: var(--ink-faint); }
.tier .trial { font-size: 14px; font-weight: 600; color: var(--accent); margin: 8px 0 20px; }
.tier ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.tier li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; color: var(--ink-dim); }
.tier li svg { width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tier li b { color: var(--ink); font-weight: 600; }
.tier .choose { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tier .choose .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 15.5px; }
.tier .ask { font-size: 13px; color: var(--ink-faint); text-decoration: none; }
.tier .ask:hover { color: var(--accent); text-decoration: underline; }
.contact-head a { color: var(--accent); font-weight: 600; }

.terms { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--ink-faint); max-width: 80ch; }
.pricing-belt { padding-top: 72px; padding-bottom: 72px; }

.contact-row { padding-bottom: 96px; }
.contact-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; }
.contact-head p { max-width: 54ch; font-size: 17px; }
.contact {
  max-width: 640px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 24px; padding: 28px;
}
.contact label, .form-card label {
  display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px;
}
.contact input, .contact textarea, .contact select,
.form-card input, .form-card select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--field);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.contact :is(input, textarea, select):focus,
.form-card :is(input, select):focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.contact textarea { resize: vertical; min-height: 96px; }
.contact .field { margin-bottom: 14px; }
.contact .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact button, .form-card button[type="submit"] {
  width: 100%; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; border: 0;
  border-radius: 999px; padding: 15px; background: var(--accent); color: var(--on-accent);
  transition: filter .15s, transform .15s;
}
.contact button:hover:not(:disabled), .form-card button[type="submit"]:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.contact button:disabled, .form-card button[type="submit"]:disabled { opacity: .55; cursor: default; }
.said { margin-top: 14px; padding: 11px 14px; border-radius: 12px; font-size: 14px; display: none; }
.said.on { display: block; }
.said.good { background: color-mix(in srgb, var(--good) 13%, transparent); color: color-mix(in srgb, var(--good) 65%, var(--ink)); }
.said.bad { background: color-mix(in srgb, var(--bad) 13%, transparent); color: color-mix(in srgb, var(--bad) 60%, var(--ink)); }

/* --------------------------------------------------------- the forms */

.form-page { padding-top: 48px; padding-bottom: 80px; }
.form-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 32px;
  box-shadow: 0 24px 60px -40px var(--shadow);
}
.form-card h1 { font-size: clamp(40px, 5vw, 54px); }
.form-card .field { margin-bottom: 15px; }
.form-card .hint { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 0; }
.alert {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--warn) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: color-mix(in srgb, var(--warn) 70%, var(--ink));
}
.alert[hidden] { display: none; }
.aside { margin: 20px 0 0; font-size: 14px; color: var(--ink-faint); text-align: center; }
.aside a { color: var(--ink); font-weight: 600; }
.aside a:hover { color: var(--accent); }

/* ------------------------------------------------------------- reveal */

/* Only hidden once the script that reveals it is known to be running, so a
   page without JavaScript is a plain page rather than an empty one. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- keyframes */

@keyframes site-ringer { 0%, 70%, 100% { transform: none; } 74%, 82%, 90% { transform: rotate(-14deg); } 78%, 86%, 94% { transform: rotate(14deg); } }
@keyframes site-beacon {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes site-beacon-red {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes scene-ring {
  0%, 6%, 9%, 15%, 18%, 24%, 100% { transform: none; }
  1.5%, 10.5%, 19.5% { transform: rotate(-12deg); }
  3%, 12%, 21% { transform: rotate(12deg); }
  4.5%, 13.5%, 22.5% { transform: rotate(-12deg); }
}
@keyframes scene-buzz {
  0%, 9%, 18% { opacity: .15; }
  3%, 12%, 21% { opacity: 1; }
  6%, 15%, 24% { opacity: .45; }
  28%, 100% { opacity: 0; }
}
@keyframes scene-answer { 0%, 25% { fill: var(--accent); } 27%, 93% { fill: var(--good); } 97%, 100% { fill: var(--accent); } }
@keyframes scene-bubble {
  0%, 27% { opacity: 0; transform: translateY(10px) scale(.97); }
  33%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes scene-said { 0%, 42% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes scene-dots { 0%, 41% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes scene-dot { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes scene-fall { from { transform: none; opacity: 1; } to { transform: translateY(22px); opacity: 0; } }
@keyframes scene-pole { from { transform: translateY(-28px); } to { transform: none; } }

@keyframes st-ring { 0%, 2% { transform: none; } 4% { transform: rotate(-9deg); } 6% { transform: rotate(9deg); } 8% { transform: rotate(-9deg); } 10% { transform: rotate(9deg); } 12% { transform: rotate(-9deg); } 14%, 100% { transform: none; } }
@keyframes st-dot1 { 0%, 16% { left: 0; opacity: 0; } 18% { left: 0; opacity: 1; } 32% { left: calc(100% - 12px); opacity: 1; } 34%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes st-b1 { 0%, 20% { opacity: 0; transform: translateY(10px); } 25%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes st-type { 0%, 27% { opacity: 0; } 29%, 39% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes st-b2 { 0%, 41% { opacity: 0; transform: translateY(10px); } 46%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes st-dot2 { 0%, 48% { left: 0; opacity: 0; } 50% { left: 0; opacity: 1; } 62% { left: calc(100% - 12px); opacity: 1; } 64%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes st-slot { 0%, 64% { opacity: 0; transform: scale(.85); } 69% { opacity: 1; transform: scale(1.04); } 72%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes st-free { 0%, 64% { opacity: 1; } 67%, 94% { opacity: 0; } 100% { opacity: 1; } }

@keyframes quote-lit { 0%, 8% { transform: none; opacity: 0; } 12%, 46% { transform: none; opacity: 1; } 54%, 92% { transform: translateY(29px); opacity: 1; } 100% { transform: translateY(29px); opacity: 0; } }
@keyframes quote-one { 0%, 14% { opacity: 0; transform: translateY(8px); } 20%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: none; } }
@keyframes quote-two { 0%, 56% { opacity: 0; transform: translateY(8px); } 62%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

@keyframes ex-blip { 0%, 40% { transform: scale(0); } 50% { transform: scale(1.25); } 58%, 86% { transform: none; } 96%, 100% { transform: scale(0); } }
@keyframes ex-x { 0%, 30% { opacity: 1; } 40%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ex-ok { 0%, 42% { stroke-dashoffset: 1; opacity: 1; } 56%, 86% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ex-bar { 0%, 100% { transform: scaleY(.35); } 45%, 60% { transform: none; } }
@keyframes ex-write { 0% { stroke-dashoffset: 1; } 35%, 80% { stroke-dashoffset: 0; opacity: 1; } 92% { opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ex-knob { 0%, 100% { transform: none; } 45%, 55% { transform: translateX(8px); } }
@keyframes ex-press { 0%, 60%, 100% { transform: none; } 66% { transform: scale(.78); } 72% { transform: none; } }
@keyframes ex-ripple { 0%, 64% { transform: scale(.6); opacity: 0; } 68% { opacity: .9; } 90%, 100% { transform: scale(2.4); opacity: 0; } }

@keyframes month-run {
  0%, 10% { left: 0; opacity: 1; }
  42%, 58% { left: 50%; }
  88% { left: 100%; opacity: 1; }
  97%, 100% { left: 100%; opacity: 0; }
}
@keyframes month-mark-1 { 0%, 9% { border-color: var(--accent); transform: scale(1.2); } 16%, 100% { border-color: var(--ink); transform: none; } }
@keyframes month-mark-2 { 0%, 40% { border-color: var(--ink); transform: none; } 44%, 56% { border-color: var(--accent); transform: scale(1.2); } 62%, 100% { border-color: var(--ink); transform: none; } }
@keyframes month-mark-3 { 0%, 86% { border-color: var(--ink); transform: none; } 90%, 98% { border-color: var(--accent); transform: scale(1.2); } 100% { border-color: var(--ink); transform: none; } }

/*
 * Without motion, each story shows the moment worth seeing rather than its
 * last frame. theme.css cuts every animation to its final keyframe, and the
 * final keyframe of a loop is usually the part where everything has faded
 * out to begin again - a booking that is never booked.
 */
@media (prefers-reduced-motion: reduce) {
  .story :is(.say, .fill), .bubble, .bubble .speech, .answers span:first-child, .prices .lit { animation: none !important; opacity: 1; transform: none; }
  .story :is(.typing, .free, .dot), .bubble .dots, .scene .pw, .answers span:last-child, .month-line .runner { animation: none !important; opacity: 0; }
  .scene .screen { animation: none !important; fill: var(--good); }
  .ex-wait .x { animation: none !important; opacity: 0; }
  .ex-wait .ok, .ex-log .ln { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}

/* ---------------------------------------------------------- narrower */

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .month ol { grid-template-columns: 1fr; }
  .month li:nth-child(n) { align-items: flex-start; text-align: left; }
  .month-line { display: none; }
  .month li i { margin-bottom: 2px; }
}
@media (max-width: 760px) {
  .story .conn { display: none; }
  .story { padding: 36px 22px; }
  .quote { grid-template-columns: 1fr; }
  .answers { width: auto; }
}
@media (max-width: 620px) {
  .inner, .hero { padding-left: 20px; padding-right: 20px; }
  :root .site-nav { padding: 24px 20px 0; }
  :root .site-foot { padding: 28px 20px; }
  .hero { padding-top: 40px; padding-bottom: 48px; gap: 40px; }
  .hero-sub { font-size: 20px; }
  .lede { font-size: 17px; }
  .hero-card { padding: 16px; border-radius: 22px; }
  /* Smaller and a little wider, so the label stays on one line and the
     bubble stays in the space above the heads. */
  .bubble { max-width: 62%; font-size: 12px; padding: 8px 12px 9px; }
  .bubble b { font-size: 10px; letter-spacing: .06em; }
  .bubble .dots { top: 27px; left: 12px; }
  .band .inner { padding-top: 64px; padding-bottom: 64px; }
  .how { padding-top: 72px; padding-bottom: 72px; }
  .promise { padding: 40px 26px; }
  .step { padding: 26px; }
  .contact .pair { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .belt-row { padding-bottom: 48px; }
}