@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  --ink: #16131C; --panel: #1E1A25; --raised: #2A2433; --line: #3A3342;
  --t1: #F5F3F7; --t2: #B3ABBC; --t3: #7E7689;
  --red: #F01010; --amber: #F2A23A;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
}
* { box-sizing: border-box; }
html, body { background: var(--ink); color: var(--t1); }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.55; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.preview-banner { background: #2a2006; color: #f6d88a; font-size: 13px; padding: 10px 16px; text-align: center; border-bottom: 1px solid #4a3a10; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
nav.top { position: sticky; top: 0; z-index: 5; background: rgba(22,19,28,.94); border-bottom: 1px solid var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap; }
.brand { font-family: var(--display); font-size: 20px; letter-spacing: .06em; text-decoration: none; }
.brand span { color: var(--red); }
nav.top .links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
nav.top .links a { text-decoration: none; color: var(--t2); padding-block: 8px; }
nav.top .links a:hover, nav.top .links a[aria-current="page"] { color: var(--t1); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none; letter-spacing: .02em; border: 1px solid transparent; }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: #ff2a2a; }
.btn.ghost { border-color: var(--line); color: var(--t1); }
.btn.ghost:hover { border-color: var(--t3); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .98; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(48px, 8.4vw, 104px); }
h2 { font-size: clamp(34px, 5vw, 58px); }
h3 { font-size: 22px; }
p { margin: 0; max-width: var(--measure); color: var(--t2); }
p.lead { font-size: clamp(19px, 2vw, 22px); color: var(--t1); }
.stack-lg { display: flex; flex-direction: column; gap: 18px; }
.hero { padding-block: 64px 72px; }
.hero .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.working { display: inline-flex; gap: 10px; align-items: baseline; margin-bottom: 22px; }
.working b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .04em; }
.working span { font-size: 13px; color: var(--t3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.hero h1 em { font-style: normal; color: var(--red); }
.strap { font-size: clamp(20px, 2.3vw, 26px); color: var(--t1); margin-top: 22px; font-weight: 600; }
.strap .one { font-family: var(--display); font-weight: 400; font-size: 1.5em; display: block; margin-top: 4px; text-transform: uppercase; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.fine { font-size: 13px; color: var(--t3); margin-top: 14px; }
.device { background: #0b0a0e; border: 1px solid #3b3544; border-radius: 30px; padding: 14px; box-shadow: 0 40px 80px -30px #000; }
.device img { width: 100%; height: auto; border-radius: 16px; }
/* A phone is a different shape: narrower, and a tighter corner than a tablet's. Centred in its
   column so it does not sit oddly wide of the text beside it. */
.device.phone { max-width: 300px; margin: 0 auto; border-radius: 40px; padding: 10px; }
.device.phone img { border-radius: 30px; }
.device-wrap { margin: 0; }
/* The hero's pair: the iPad as it always was, with the phone standing in front of its lower
   right corner, the way the two actually sit on a desk. The phone is positioned rather than
   laid out, so the iPad keeps the column's full width and the caption still sits under both.
   Percentages throughout, so the pair scales as one thing at every width. */
/* The devices sit in their own box so the phone can hang below the iPad without standing on
   the caption, which is a sibling underneath the pair rather than part of it. */
.device-wrap.duo .pair { position: relative; padding-bottom: 7%; }
.device-wrap.duo .device.tablet { width: 88%; }
.device-wrap.duo .device.phone.inset {
  position: absolute; right: 0; bottom: 0; width: 27%; max-width: none; margin: 0;
  border-radius: 8%/3.7%; padding: 2%;
  box-shadow: 0 30px 60px -20px #000, 0 0 0 1px #3b3544;
}
.device-wrap.duo .device.phone.inset img { border-radius: 6%/2.8%; }
.device-wrap.duo figcaption { margin-top: 14px; }
.device-wrap figcaption, .gig figcaption { font-size: 12px; color: var(--t3); margin-top: 10px; text-align: center; }
.gig { margin: 12px 0 0; }
.gig img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.shot-slot { aspect-ratio: 1194 / 834; border-radius: 16px; border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; color: var(--t3); font-size: 14px; padding: 20px; background: var(--panel); }
section.band { padding-block: 84px; border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ticks { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 12px; color: var(--t1); }
.ticks li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; flex: none; background: var(--red); border-radius: 2px; }
.rig { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; margin-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--t2); }
.chip.hw { border-style: dashed; color: var(--t3); }
.chip.one { background: var(--raised); border-color: var(--red); color: var(--t1); font-weight: 700; }
.vs { font-family: var(--display); font-size: 28px; color: var(--t3); text-transform: uppercase; }
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; font-weight: 700; }
.clock { margin-top: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; overflow-x: auto; }
.clock svg { min-width: 640px; width: 100%; height: auto; display: block; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.card .who { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.final { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; }
.final .card { padding: 32px; }
.page-head { padding-block: 64px 40px; display: flex; flex-direction: column; gap: 20px; }
.prose { padding-bottom: 80px; display: flex; flex-direction: column; gap: 16px; }
.prose h2 { font-size: 30px; margin-top: 24px; }
.expect { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.expect div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: 15px; color: var(--t2); }
.expect b { display: block; color: var(--t1); margin-bottom: 4px; }
.notice { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 12px; padding: 20px 22px; color: var(--t1); }
form.report { display: flex; flex-direction: column; gap: 26px; max-width: 720px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .choice > legend { font-size: 17px; font-weight: 600; color: var(--t1); padding: 0; }
.field .hint { font-size: 14px; color: var(--t3); max-width: var(--measure); }
.field .opt { font-weight: 400; color: var(--t3); }
input[type="text"], input[type="email"], textarea { font: inherit; color: var(--t1); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; width: 100%; min-height: 52px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--t3); }
input:focus-visible, textarea:focus-visible, .choice label:focus-within { outline: 2px solid var(--t1); outline-offset: 3px; }
.choice { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.choice .options { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--t1); cursor: pointer; }
.choice label:hover { border-color: var(--t3); }
.choice input[type="radio"] { accent-color: var(--red); width: 22px; height: 22px; margin: 0; flex: none; }
.choice input[type="radio"]:checked + span { font-weight: 700; }
.choice label:has(input:checked) { border-color: var(--red); background: var(--raised); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.report .btn { align-self: flex-start; }
form.report .btn[aria-disabled="true"] { opacity: .6; }
footer { border-top: 1px solid var(--line); padding-block: 36px 60px; color: var(--t3); font-size: 14px; }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--t2); text-decoration: none; }
@media (max-width: 900px) {
  .hero .grid, .split, .split.flip, .final { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split.flip .shot { order: 2; }
  .rig { grid-template-columns: minmax(0, 1fr); }
  .vs { text-align: center; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .expect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  /* Overlapping two devices inside a 328pt column leaves neither readable, so the phone comes
     out from in front of the iPad and sits beside it. */
  .device-wrap.duo .pair { padding-bottom: 0; display: flex; align-items: flex-end; gap: 10px; }
  .device-wrap.duo .device.tablet { width: auto; flex: 1 1 0; min-width: 0; }
  .device-wrap.duo .device.phone.inset { position: static; width: 26%; flex: none; }
  .choice .options { flex-direction: column; align-items: stretch; }
  form.report .btn { align-self: stretch; }
  .wrap { padding-inline: 16px; }
  nav.top .links { gap: 14px; font-size: 14px; }
  .expect { grid-template-columns: minmax(0, 1fr); }
  section.band { padding-block: 60px; }
}