/* Rewind marketing: the Industry Applications look. An ink hero and page heads
   with an animated background, the accent on the hero card and closing band, white and concrete
   between. Heavy ink type, hover states, CSS only. See DESIGN.md. */

/* The overscroll above the nav is ink, like the hero. */
html {
  background-color: #141414;
  color-scheme: light;
}

body {
  margin: 0;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.site {
  --accent: #c4b5f7;
  --ink: #141414;
  --white: #ffffff;
  --concrete: #ededea;
  --graphite: #5c5c58;
  --ink-soft: #c4c4be;
  --rule: #e6e6e2;
  --ink-rule: #2c2c2a;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* space-4 on phones to space-14 on desktop */
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  /* side padding that caps every band's content at 1200px */
  --side: max(var(--gutter), (100% - 1200px) / 2);
  --nav-h: 5.3rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative; /* the nav sits over the top */

  min-height: 100vh;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

:where(.site) a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.site :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.onInk :focus-visible {
  outline-color: var(--accent);
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Type: one family, louder means heavier and tighter */

.display {
  margin: 0;
  font-size: clamp(2.75rem, 5.6vw, 4.25rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.headline {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.lede {
  max-width: 28em;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.45;
}

.meta {
  margin: 0;
  color: var(--graphite);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.textLink {
  font-weight: 800;
  text-decoration: underline;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease);
}

a.button:hover {
  transform: translateY(-2px);
}

.buttonSmall {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9375rem;
}

.buttonOutline {
  background: transparent;
  color: var(--ink);
}

/* Nav and footer */

/* the nav sits over the ink hero (or page head), above a hairline */
.nav {
  position: absolute;
  top: 0;
  right: var(--side);
  left: var(--side);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ink-rule);
  color: var(--white);
}

.nav :focus-visible {
  outline-color: var(--accent);
}

.nav .brand svg {
  fill: var(--accent);
}

.nav .button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.brand svg {
  /* the mark is drawn on a 12-unit grid: 36 and 24 px keep its edges on whole pixels */
  display: block;
  width: 36px;
  height: 24px;
  fill: currentColor;
}

.navLinks {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.navLinks a:not(.button),
.footerLinks a {
  text-decoration: none;
}

/* nav and footer links: an underline that draws in from the left */
.navLinks a:not(.button),
.footerLinks a {
  position: relative;
}

.navLinks a:not(.button)::after,
.footerLinks a::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.25rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.navLinks a:not(.button):hover::after,
.footerLinks a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 2rem var(--side);
  background: var(--ink);
  color: var(--white);
  font-size: 0.9375rem;
}

.footer .brand {
  font-size: 1.25rem;
}

.footer .brand svg {
  width: 24px;
  height: 16px;
  fill: var(--accent);
}

.footerLinks {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-weight: 700;
}

/* Bands: ink opens the page, the accent closes it, concrete and white between */

.band {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem var(--side);
}

.concrete {
  background: var(--concrete);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 2rem 3rem;
  align-items: start;
}

/* Hero: the headline beside one sample item */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
  align-content: center;
  /* the whole first screen, so the background shows in full on load */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 3rem) var(--side) 6rem;
  background: var(--ink);
  color: var(--white);
}

.hero :focus-visible {
  outline-color: var(--accent);
}

.hero .button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

/* the app's half of the hero line */
.accent {
  color: var(--accent);
}

.heroCopy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  animation: rise 0.8s var(--ease) backwards;
}

.hero .display {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  letter-spacing: -0.05em;
}

.ticket {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  border-radius: 14px;
  background: var(--accent);
  color: var(--ink);
  animation: rise 0.8s var(--ease) 0.12s backwards;
}

.ticket p {
  margin: 0;
}

.ticketRef {
  color: var(--ink);
  font-size: 0.8125rem;
}

.ticketTitle {
  font-size: clamp(1.75rem, 2.8vw, 2.125rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.ticketWords {
  font-size: 1.375rem;
}

/* Chapters: the same repair, from the counter to the buyer */

.chapters {
  max-width: 73rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.chapter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
  padding: 5.5rem 0;
}

.chapter + .chapter {
  border-top: 1px solid var(--rule);
}

.chapterText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.chapterText p {
  max-width: 28em;
  margin: 0;
  font-size: 1.125rem;
}

.chapterNumber {
  font-size: 0.9375rem;
  font-weight: 800;
}

.row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
}

.row p {
  margin: 0;
}

.row > div {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.2rem;
}

.rowTitle {
  font-weight: 800;
}

.rowStack {
  flex-direction: column;
  align-items: stretch;
  padding: 1.5rem;
}

.rowInk {
  gap: 0.375rem;
  background: var(--ink);
  color: var(--white);
}

.track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  list-style: none;
}

.track li {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.trackBox {
  display: block;
  height: 0.875rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.track3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trackDone .trackBox {
  background: var(--ink);
}

.trackNow {
  font-weight: 900;
}

.trackNow .trackBox {
  background: var(--accent);
}

/* Closing: the price, the privacy line, and the way in */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 6rem var(--side);
  background: var(--accent);
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.actions .textLink {
  font-size: 1.125rem;
}

/* The plan: there is one */

.plan {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--white);
}

.planPrice {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.planPrice span {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
}

.planFor {
  margin: 0;
  font-weight: 600;
}

.planList {
  margin: 0.5rem 0 0;
  padding: 0;
  border-top: 3px solid var(--ink);
  list-style: none;
}

.planList li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.planList li:last-child {
  border-bottom: 0;
}

/* Questions */

.faqList {
  border-top: 3px solid var(--ink);
}

.faqList details {
  border-bottom: 1px solid var(--rule);
}

.faqList summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faqList summary::-webkit-details-marker {
  display: none;
}

.faqList details p {
  max-width: 40em;
  margin: 0 0 1.25rem;
}

.faqMark {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

/* the plus turns into a minus */
.faqMarkBar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}

details[open] .faqMarkBar {
  transform: rotate(90deg);
}

/* Pricing and privacy pages: an ink head under the nav, with the hero's background */

.pageHead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: calc(var(--nav-h) + 3rem) var(--side) 3.5rem;
  background: var(--ink);
  color: var(--white);
}

.pageHead > :not(.bg) {
  animation: rise 0.8s var(--ease) backwards;
}

.document {
  padding: 3rem var(--side);
}

.document > * {
  max-width: 68ch;
}

.document h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.document p,
.document ul {
  margin: 0 0 1rem;
}

.document ul {
  padding-left: 1.25rem;
}

.document li + li {
  margin-top: 0.5rem;
}

.updated {
  margin: 0;
  font-weight: 700;
}

@media (max-width: 860px) {
  .hero,
  .chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .hero {
    padding-block: calc(var(--nav-h) + 3rem) 4rem;
  }

  .chapter {
    padding-block: 3.5rem;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .navLinks a:not(.button) {
    display: none;
  }

  .row {
    flex-wrap: wrap;
  }

  .footerLinks {
    margin-left: 0;
  }
}

/* Motion: the hero rises in on load, chapters as they scroll in (where the
   browser supports scroll-driven animation), and reduced motion stops it all. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

@supports (animation-timeline: view()) {
  .chapter > * {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

/* Background behind the hero and page heads, under everything in them */

.bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.brand svg {
  transition: transform 0.35s var(--ease);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Rewind's background: a blueprint grid behind three meshing gears. The big
   one turns backwards, like the name; speeds follow the tooth counts. */

.bg {
  background-image:
    linear-gradient(#1f1f1e 1px, transparent 1px),
    linear-gradient(90deg, #1f1f1e 1px, transparent 1px);
  background-size: 32px 32px;
}

.gears {
  position: absolute;
  top: 50%;
  right: -60px;
  width: 540px;
  margin-top: -250px;
}

.gear {
  fill: none;
  fill-rule: evenodd;
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.gA {
  stroke: var(--accent);
  animation: spin 32s linear infinite reverse;
}

.gB {
  stroke: var(--ink-soft);
  animation: spin 20s linear infinite;
}

.gC {
  fill: var(--accent);
  stroke: none;
  animation: spin 16s linear infinite;
}

.brand:hover svg {
  transform: translateX(-4px);
}

/* page heads are shorter: a smaller one, low in the corner, clear of the words */
.pageHead .gears {
  top: auto;
  right: -80px;
  bottom: -110px;
  width: 300px;
  margin-top: 0;
}

@media (max-width: 860px) {
  .gears {
    top: auto;
    right: -90px;
    bottom: -70px;
    width: 320px;
    margin-top: 0;
  }

  .pageHead .gears {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}