:root { --ink: #111; --paper: #fff; --mute: #777; --frame: 3px; }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.5 Roboto, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
  header { border-bottom: var(--frame) solid var(--ink); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
  header img { height: 22px; display: block; }
  header nav a { text-decoration: none; margin-left: 24px; font-weight: 500; font-size: 16px; }
  header nav a.cta { border: 2px solid var(--ink); padding: 8px 14px; }
  h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1; margin: 56px 0 14px; font-weight: 700; letter-spacing: -0.02em; max-width: 16ch; }
  .sub { font-size: clamp(18px, 2.2vw, 26px); margin: 0 0 28px; color: #333; max-width: 40ch; }
  .reel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .clip { position: relative; border: var(--frame) solid var(--ink); background: #eee; overflow: hidden; }
  .shot { position: relative; margin: 0; }
  .shot img { border: var(--frame) solid var(--ink); aspect-ratio: 4/3; object-fit: cover; object-position: top; background: #eee; }
  .shot.wide img { aspect-ratio: 16/10; }
  .shot .tag { bottom: auto; top: 0; left: auto; right: 0; }
  .shot figcaption { margin: 10px 0 4px; font-size: 16px; color: #333; }
  .shot figcaption::before { content: "“"; } .shot figcaption::after { content: "”"; }
  .shot figcaption.plain::before, .shot figcaption.plain::after { content: ""; }
  .clip { aspect-ratio: 16/9; cursor: pointer; }
  .wide { grid-column: 1 / -1; }
  .clip.wide { aspect-ratio: 21/9; }
  .clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .shot img { width: 100%; height: auto; display: block; object-fit: cover; object-position: top; }
  .tag { position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff; padding: 8px 14px; font-weight: 500; font-size: 17px; }
  .snd { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.92); border: 2px solid var(--ink); font: inherit; font-size: 14px; padding: 4px 10px; cursor: pointer; }
  .say::after { content: attr(data-say); position: absolute; left: 14px; top: 12px; background: rgba(255,255,255,.92); border: 2px solid var(--ink); padding: 6px 12px; font-size: 15px; max-width: 70%; }
  .line { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.15; margin: 64px 0 12px; max-width: 24ch; letter-spacing: -0.015em; font-weight: 700; }
  .sub2 { margin: 0 0 20px; max-width: 60ch; color: #333; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--frame) solid var(--ink); margin: 20px 0 0; }
  .steps div { padding: 22px; border-right: 1px solid #ddd; }
  .steps div:last-child { border-right: 0; }
  .steps b { display: block; font-size: 22px; margin-bottom: 6px; }
  .steps span { color: #333; font-size: 16px; }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .card { border: var(--frame) solid var(--ink); padding: 0 0 20px; }
  .card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top; display: block; border-bottom: var(--frame) solid var(--ink); margin-bottom: 16px; }
  .card img.photo { object-position: center; }
  .card b { display: block; font-size: 20px; margin: 18px 22px 8px; }
  .card img + b { margin-top: 0; }
  .card span { display: block; color: #333; font-size: 16px; line-height: 1.45; margin: 0 22px; }
  /* two rows of ideas drifting past, opposite ways, forever */
  .river { overflow: hidden; margin: 0 -20px; padding: 6px 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
  .track { display: flex; gap: 14px; width: max-content; padding: 0 7px 14px; }
  .track div { border: var(--frame) solid var(--ink); padding: 16px 20px; width: 340px; flex: none; background: #fff; }
  .track b { display: block; font-size: 18px; margin-bottom: 6px; }
  .track span { color: #333; font-size: 15px; line-height: 1.4; }
  .t1 { animation: drift 140s linear infinite; }
  .t2 { animation: drift 160s linear infinite reverse; }
  .river:hover .track { animation-play-state: paused; }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .track { animation: none; flex-wrap: wrap; width: auto; } .river { mask-image: none; -webkit-mask-image: none; } }
  .logos { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
  .logos span { border: 2px solid var(--ink); padding: 8px 14px; font-weight: 500; font-size: 16px; }
  .shot.say::after { max-width: 60%; font-size: 14px; }
  .join { margin: 72px 0 80px; border: var(--frame) solid var(--ink); padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .join h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 8px; line-height: 1.1; }
  .join p { margin: 0; color: #333; }
  form { display: flex; gap: 10px; flex-wrap: wrap; }
  input { font: inherit; padding: 13px 16px; border: var(--frame) solid var(--ink); flex: 1; min-width: 220px; }
  button.solid { font: inherit; font-weight: 500; background: var(--ink); color: #fff; border: var(--frame) solid var(--ink); padding: 13px 22px; cursor: pointer; }
  .ok { display: none; font-weight: 500; }
  .fine { color: var(--mute); font-size: 14px; margin: 10px 0 0; }
  footer { color: var(--mute); font-size: 14px; padding: 0 0 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 820px) { .reel, .steps, .join, .cards { grid-template-columns: 1fr; } .clip.wide { aspect-ratio: 16/9; } .steps div { border-right: 0; border-bottom: 1px solid #ddd; } header nav a:not(.cta) { display: none; } }

  /* shared header with the use-cases dropdown */
  header.bar { border-bottom: var(--frame) solid var(--ink); }
  header.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
  header.bar img { height: 22px; display: block; }
  header.bar nav { display: flex; align-items: center; gap: 24px; }
  header.bar nav a, header.bar nav button { text-decoration: none; font: inherit; font-weight: 500; font-size: 16px; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
  header.bar nav a.cta { border: 2px solid var(--ink); padding: 8px 14px; }
  .dd { position: relative; }
  .dd ul { display: none; position: absolute; top: 100%; left: -16px; margin: 0; padding: 10px 0 8px; list-style: none; background: #fff; border: var(--frame) solid var(--ink); min-width: 230px; z-index: 10; }
  .dd:hover ul, .dd:focus-within ul, .dd.open ul { display: block; }
  .dd { padding-bottom: 10px; margin-bottom: -10px; }
  .dd li a { display: block; padding: 9px 18px; font-weight: 400; }
  .dd li a:hover { background: var(--ink); color: #fff; }
  .dd li.sep { border-top: 1px solid #ddd; margin-top: 6px; padding-top: 6px; }
  section { margin-top: 8px; }
  .cards.three { margin-top: 14px; }
  .note { color: var(--mute); font-size: 15px; margin: 14px 0 0; max-width: 70ch; }
  @media (max-width: 820px) { header.bar nav a:not(.cta) { display: none; } .dd ul { left: auto; right: 0; } }

  .faq { border-top: var(--frame) solid var(--ink); }
  .faq details { border-bottom: 1px solid #ddd; padding: 4px 0; }
  .faq summary { cursor: pointer; font-weight: 500; font-size: 19px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; }
  .faq summary::after { content: "+"; font-weight: 400; color: var(--mute); }
  .faq details[open] summary::after { content: "–"; }
  .faq p { margin: 0 0 16px; color: #333; max-width: 70ch; }
  main.wrap > .reel + .cards, main.wrap > .steps + .cards { margin-top: 14px; }