@font-face {
  font-family:Montserrat;
  src:url('assets/fonts/montserrat-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Montserrat;
  src:url('assets/fonts/montserrat-latin-600-normal.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}

@font-face {
  font-family:Montserrat;
  src:url('assets/fonts/montserrat-latin-900-normal.woff2') format('woff2');
  font-weight:900;
  font-display:swap
}

:root {
  font-family:Montserrat,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:12px;
  --page-width:1320px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  overflow-x:clip
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button,input {
  font:inherit
}

a {
  color:inherit;
  text-underline-offset:5px
}

button {
  color:inherit;
  cursor:pointer
}

button:disabled {
  opacity:.45;
  cursor:default
}

a,button {
  touch-action:manipulation
}

button,a {
  transition:background-color .15s,color .15s,border-color .15s
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}

::selection {
  background:var(--accent);
  color:var(--bg)
}

body {
  scrollbar-color:var(--accent) var(--bg)
}

img {
  max-width:100%;
  display:block
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  line-height:1.1;
  text-wrap:balance
}

h1 {
  font-size:clamp(48px,6.4vw,96px);
  letter-spacing:-.035em;
  font-weight:700
}

h2 {
  font-size:clamp(34px,4vw,60px);
  letter-spacing:-.03em
}

h3 {
  font-size:25px;
  letter-spacing:-.02em
}

p {
  max-width:70ch
}

ul,ol {
  padding:0
}

strong {
  font-weight:700
}

.icon {
  width:24px;
  height:24px;
  flex-shrink:0;
  vertical-align:middle
}

.accent {
  color:var(--accent)
}

.skip {
  position:fixed;
  top:-80px;
  left:16px;
  z-index:50;
  background:var(--ink);
  color:var(--bg);
  padding:12px
}

.skip:focus {
  top:12px
}

.theme-neon {
  --bg:#05090f;
  --ink:#f4f7fa;
  --muted:#b8c6d6;
  --accent:#48ecf2;
  --secondary:#ff7bc6;
  --line:#2b3a4d;
  --surface:#0e1724;
  font-family:Montserrat,sans-serif
}

.theme-neon h1,.theme-neon h2,.theme-neon h3 {
  font-weight:900
}

.motion-toggle {
  background:transparent;
  border:1px solid #6d717b;
  border-radius:5px;
  padding:7px 10px;
  font-size:12px;
  color:#fff;
  white-space:nowrap
}

.motion-toggle[aria-pressed=true] {
  background:#f1f3f7;
  color:#15171c
}

.site-header {
  max-width:1500px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 4%;
  gap:28px;
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  text-decoration:none;
  font-family:Montserrat,sans-serif;
  font-weight:900;
  font-size:18px;
  letter-spacing:-.03em
}

.brand img {
  border-radius:8px;
  flex-shrink:0
}

.site-header nav {
  display:flex;
  gap:28px;
  font-size:14px
}

.site-header nav a {
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent
}

.site-header nav a[aria-current=page] {
  border-bottom-color:var(--accent)
}

.site-header nav a:hover {
  color:var(--accent)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:17px 25px;
  border-radius:var(--radius);
  text-decoration:none;
  line-height:1.3;
  background:var(--accent);
  color:var(--bg);
  font-weight:700;
  font-size:16px;
  min-height:52px
}

.button:hover {
  filter:brightness(.94)
}

.button:active {
  transform:translateY(1px)
}

.header-join {
  padding:12px 18px;
  font-size:13px;
  min-height:44px;
  gap:14px
}

.header-join .icon {
  width:18px;
  height:18px
}

.theme-neon .button {
  background:#58eced;
  color:#021216
}

.hero {
  position:relative;
  isolation:isolate
}

.hero-description {
  font-size:18px;
  color:var(--muted);
  line-height:1.6
}

.hero-footnote {
  font-size:13px;
  margin-top:18px;
  color:var(--muted)
}

.replay {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  font-size:12px;
  line-height:1.3;
  min-height:40px
}

.replay .icon {
  width:16px;
  height:16px
}

.hero-neon {
  min-height:660px;
  padding:48px 20px 52px;
  text-align:center;
  overflow:hidden
}

.neon-mobile-art {
  display:none
}

.hero-neon>.hero-art {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:cover;
  z-index:-1
}

.hero-neon .hero-copy {
  max-width:680px;
  margin:auto
}

.hero-neon h1 {
  font-size:clamp(48px,6.1vw,88px);
  line-height:1.02
}

.hero-neon h1 span {
  display:block
}

.hero-neon .hero-description {
  max-width:440px;
  margin:26px auto 0;
  font-size:16px;
  color:#d7e0ec
}

.hero-neon .button {
  min-width:300px
}

.interest-pair {
  display:flex;
  justify-content:center;
  gap:70px;
  margin:24px 0
}

.interest-pair span {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:600
}

.interest-pair .icon {
  color:var(--accent)
}

.interest-pair span:last-child .icon {
  color:var(--secondary)
}

.hero-neon>.replay {
  position:absolute;
  right:4%;
  bottom:18px
}

.hero-neon .hero-footnote {
  color:#d7e0ec
}

.hero-print {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:640px;
  background:#103cb7;
  color:white
}

.hero-studio {
  max-width:1440px;
  margin:auto;
  padding:58px 5% 0
}

.section {
  max-width:var(--page-width);
  margin:0 auto;
  padding:90px 4.5%;
  border-bottom:1px solid var(--line)
}

.section-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
  margin-bottom:42px
}

.section-heading>p {
  max-width:390px;
  color:var(--muted);
  margin-top:6px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  padding:8px 0;
  border-bottom:1px solid currentColor;
  line-height:1.5
}

.home-feeds>.text-link {
  margin-top:28px
}

.feed-explorer {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:5%
}

.category-controls {
  display:flex;
  flex-direction:column;
  gap:10px
}

.category-controls button {
  display:flex;
  align-items:center;
  gap:16px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:left;
  padding:20px;
  font-size:18px;
  font-weight:600;
  min-height:68px
}

.category-controls button[aria-pressed=true] {
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink)
}

.category-controls button:hover {
  border-color:var(--accent)
}

.feed-detail {
  padding:26px 32px;
  background:var(--surface);
  border-radius:var(--radius);
  min-height:280px
}

.feed-detail-title {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px
}

.detail-symbol {
  color:var(--accent)
}

.feed-detail p {
  color:var(--muted);
  font-size:16px
}

.feed-names {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 16px
}

.feed-names li {
  padding:3px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:12px
}

.small-note {
  font-size:13px!important;
  color:var(--muted);
  line-height:1.6
}

.steps {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin:0 0 24px
}

.steps li {
  padding-top:22px;
  border-top:1px solid var(--line)
}

.step-number {
  font-size:52px;
  line-height:1;
  font-weight:400;
  color:var(--accent);
  display:block;
  margin-bottom:24px;
  font-variant-numeric:tabular-nums
}

.steps h3 {
  font-size:24px;
  margin-bottom:15px
}

.steps p {
  font-size:15px;
  color:var(--muted)
}

.expectations {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%
}

.large-icon .icon {
  height:40px;
  width:40px;
  color:var(--accent);
  margin-bottom:25px
}

.expectations h2 {
  font-size:clamp(34px,3.4vw,50px)
}

.expectations>div:last-child {
  padding-top:14px
}

.expectations p {
  margin-bottom:22px;
  color:var(--muted)
}

.faq-list {
  width:100%
}

details {
  border-bottom:1px solid var(--line)
}

summary {
  list-style:none;
  cursor:pointer;
  padding:25px 4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:20px;
  font-weight:500;
  line-height:1.4
}

summary::-webkit-details-marker {
  display:none
}

.faq-plus {
  font-size:28px;
  color:var(--accent);
  flex-shrink:0;
  transition:transform .2s var(--ease)
}

details[open] .faq-plus {
  transform:rotate(45deg)
}

details>p {
  padding:0 4px 26px;
  color:var(--muted);
  max-width:72ch;
  font-size:16px
}

.closing {
  max-width:var(--page-width);
  margin:50px auto;
  padding:55px 4.5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px
}

.closing p {
  margin-top:24px;
  max-width:460px;
  color:var(--muted)
}

.closing .button {
  flex-shrink:0
}

footer {
  border-top:1px solid var(--line);
  padding:45px max(4.5%,calc((100% - 1200px)/2));
  display:grid;
  grid-template-columns:1.3fr 1fr 1.3fr;
  gap:60px;
  font-size:13px;
  color:var(--muted)
}

footer .brand {
  color:var(--ink);
  font-size:16px
}

footer p {
  margin-top:18px
}

footer nav {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding-top:10px
}

footer a {
  text-decoration:none
}

footer a:hover {
  text-decoration:underline
}

.footer-note {
  font-size:12px;
  line-height:1.8
}

.noscript {
  padding:24px
}

.page-intro {
  max-width:var(--page-width);
  margin:auto;
  padding:80px 4.5% 60px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:end;
  gap:50px
}

.page-intro h1 {
  font-size:clamp(48px,5.8vw,84px)
}

.page-intro>p {
  font-size:18px;
  color:var(--muted);
  padding-bottom:10px
}

.feed-directory {
  padding-top:30px
}

.directory-list {
  margin:65px 0
}

.directory-list article {
  display:grid;
  grid-template-columns:100px 1fr;
  gap:25px;
  border-top:1px solid var(--line);
  padding:44px 0
}

.directory-list h2 {
  font-size:42px;
  margin-bottom:18px
}

.directory-list p,.directory-list li {
  color:var(--muted);
  font-size:16px
}

.directory-list ul {
  padding-left:20px
}

.directory-icon .icon {
  width:40px;
  height:40px;
  color:var(--accent)
}

.info-band {
  background:var(--surface);
  padding:35px;
  border-radius:var(--radius)
}

.info-band h2,.info-band h3 {
  margin-bottom:18px
}

.info-band p {
  color:var(--muted);
  margin-bottom:20px
}

.chapter-controls {
  display:flex;
  gap:0;
  border-bottom:1px solid var(--line)
}

.chapter-controls button {
  flex:1;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:16px
}

.chapter-controls span {
  font-variant-numeric:tabular-nums
}

.chapter-controls button[aria-pressed=true] {
  border-color:var(--accent);
  background:var(--surface)
}

.chapter-stage {
  padding:48px 0;
  min-height:350px
}

.chapter {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:50px
}

.chapter[hidden] {
  display:none
}

.chapter-number {
  font-size:132px;
  line-height:1;
  color:var(--accent);
  font-weight:500
}

.chapter h2 {
  font-size:42px;
  margin-bottom:22px
}

.chapter p {
  color:var(--muted);
  margin-bottom:20px
}

.step-navigation {
  display:flex;
  justify-content:space-between;
  gap:20px
}

.step-navigation button {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:6px;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px
}

.notification-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  margin-bottom:28px
}

.notification-columns h3 {
  margin-bottom:20px
}

.notification-columns p {
  color:var(--muted);
  font-size:16px
}

.questions-page {
  max-width:1100px;
  padding-top:12px
}

.questions-page .info-band {
  margin-top:55px
}

.questions-page .info-band h2 {
  font-size:36px
}

@media(min-width:1600px) {
  .hero-neon>.hero-art {
  object-fit:fill
}

.hero-print {
  min-height:720px
}
}

@media(max-width:1050px) {
  .site-header {
  gap:20px;
  
  flex-wrap:wrap
}

.site-header nav {
  gap:20px;
  
  order:3;
  
  width:100%;
  
  justify-content:center;
  
  border-top:1px solid var(--line);
  
  padding-top:10px
}

.site-header {
  padding-bottom:10px
}

.hero-neon {
  min-height:640px
}

.hero-neon>.hero-art {
  object-fit:cover;
  
  opacity:.65
}

.hero-print {
  min-height:580px
}

.section {
  padding-top:65px;
  
  padding-bottom:65px
}

.steps {
  gap:24px
}

.closing {
  padding:45px 4.5%
}

.page-intro {
  gap:35px
}

.chapter {
  grid-template-columns:120px 1fr;
  
  gap:35px
}

.chapter-number {
  font-size:110px
}

footer {
  gap:30px
}
}

@media(max-width:700px) {
  body {
  font-size:16px
}

.motion-toggle {
  font-size:11px;
  
  padding:7px 8px
}

.site-header {
  padding:15px 20px 8px;
  
  gap:15px
}

.brand {
  font-size:15px;
  
  gap:6px
}

.brand img {
  width:32px;
  
  height:32px
}

.header-join {
  font-size:11px;
  
  min-height:38px;
  
  padding:10px 12px;
  
  gap:7px
}

.header-join .icon {
  width:14px;
  
  height:14px
}

.site-header nav {
  gap:20px;
  
  font-size:12px;
  
  justify-content:space-between;
  
  padding-top:4px
}

.site-header nav a {
  padding:7px 0
}

.button {
  font-size:15px;
  
  gap:20px;
  
  padding:15px 22px
}

.hero-neon {
  padding:45px 24px 64px;
  
  min-height:620px
}

.hero-neon h1 {
  font-size:56px;
  
  line-height:1.03
}

.hero-neon>.hero-art {
  display:none
}

.neon-mobile-art {
  display:block;
  
  width:calc(100% + 48px);
  
  max-width:none;
  
  height:auto;
  
  margin:16px 0 0 -24px
}

.hero-neon .hero-copy {
  position:relative
}

.hero-neon .hero-description {
  font-size:15px;
  
  margin-top:24px;
  
  max-width:320px
}

.hero-neon .button {
  min-width:265px
}

.hero-neon .hero-footnote {
  font-size:11px
}

.interest-pair {
  gap:40px;
  
  margin:25px 0
}

.interest-pair span {
  font-size:15px
}

.hero-neon>.replay {
  bottom:14px;
  
  right:20px
}

.hero-print {
  grid-template-columns:1fr
}

.hero-studio {
  padding:40px 22px 0
}

.section {
  padding:55px 24px
}

.section-heading {
  display:block;
  
  margin-bottom:28px
}

.section-heading h2 {
  font-size:40px
}

.section-heading>p {
  margin-top:20px;
  
  font-size:16px
}

.section-heading>.text-link {
  margin-top:20px
}

.feed-explorer {
  grid-template-columns:1fr;
  
  gap:22px
}

.category-controls {
  gap:7px
}

.category-controls button {
  min-height:56px;
  
  padding:14px 18px;
  
  font-size:16px
}

.feed-detail {
  padding:25px 22px;
  
  min-height:310px
}

.feed-detail h3 {
  font-size:25px
}

.feed-detail p {
  font-size:15px
}

.feed-names {
  margin-top:20px
}

.steps {
  display:block
}

.steps li {
  display:flex;
  
  gap:20px;
  
  padding:25px 0
}

.step-number {
  font-size:42px;
  
  width:32px;
  
  flex-shrink:0;
  
  margin:0
}

.steps h3 {
  font-size:24px
}

.steps p {
  font-size:15px
}

.expectations {
  grid-template-columns:1fr;
  
  gap:20px
}

.expectations h2 {
  font-size:40px
}

.expectations p {
  font-size:16px
}

.large-icon .icon {
  margin-bottom:20px
}

.closing {
  display:block;
  
  padding:15px 24px 40px;
  
  margin:35px 0
}

.closing h2 {
  font-size:42px
}

.closing p {
  font-size:15px;
  
  margin:20px 0 25px
}

summary {
  font-size:18px;
  
  padding:22px 0
}

details>p {
  font-size:15px;
  
  padding-left:0
}

footer {
  padding:35px 24px;
  
  grid-template-columns:1fr 1fr;
  
  gap:25px
}

footer .footer-note {
  grid-column:1 / -1;
  
  margin-top:0
}

.page-intro {
  display:block;
  
  padding:45px 24px
}

.page-intro h1 {
  font-size:54px
}

.page-intro>p {
  margin-top:25px;
  
  font-size:16px;
  
  padding:0
}

.directory-list {
  margin:40px 0
}

.directory-list article {
  grid-template-columns:35px 1fr;
  
  gap:18px;
  
  padding:32px 0
}

.directory-icon .icon {
  width:30px;
  
  height:30px
}

.directory-list h2 {
  font-size:34px
}

.directory-list p,.directory-list li {
  font-size:15px
}

.info-band {
  padding:25px
}

.chapter-controls {
  display:block
}

.chapter-controls button {
  justify-content:flex-start;
  
  width:100%;
  
  padding:15px;
  
  font-size:16px;
  
  border-bottom-width:2px
}

.chapter-controls span {
  width:28px
}

.chapter-stage {
  padding:32px 0;
  
  min-height:480px
}

.chapter {
  display:block
}

.chapter-number {
  font-size:64px;
  
  display:block;
  
  margin-bottom:22px
}

.chapter h2 {
  font-size:34px
}

.chapter p {
  font-size:15px
}

.step-navigation button {
  font-size:12px;
  
  padding:12px
}

.notification-columns {
  grid-template-columns:1fr;
  
  gap:35px
}

.questions-page {
  padding-top:0
}

.questions-page .info-band h2 {
  font-size:32px
}
}

@media(max-width:380px) {
  .motion-toggle {
  margin:auto
}

.hero-neon h1 {
  font-size:49px
}

.site-header nav {
  gap:12px
}

.brand {
  font-size:13px
}

.header-join {
  padding:9px
}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*::before,*::after {
  animation-duration:.01ms!important;
  
  transition-duration:.01ms!important
}
}

html.motion-reduced {
  scroll-behavior:auto
}

.motion-reduced * {
  transition-duration:.01ms!important
}

/* Selected Neon foil interaction system. Content is visible at rest. */
.footer-tools .footer-note { margin-top: 18px; }
.footer-tools .motion-toggle { min-height:44px; padding:10px 14px; color:var(--ink); border-color:var(--line); }
.footer-tools .motion-toggle[aria-pressed=true] { background:var(--ink); color:var(--bg); }
.category-controls, .chapter-controls { position:relative; isolation:isolate; }
.category-controls button, .chapter-controls button { position:relative; z-index:1; }
.selection-marker, .chapter-marker { position:absolute; z-index:0; pointer-events:none; transform-origin:top left; border-radius:var(--radius); }
.selection-marker { background:var(--ink); }
.has-marker.category-controls button[aria-pressed=true] { background:transparent; border-color:transparent; }
.has-marker.category-controls button:not([aria-pressed=true]):hover { background:#172738; }
.chapter-marker { background:var(--surface); border-bottom:3px solid var(--accent); border-radius:0; }
.has-marker.chapter-controls button[aria-pressed=true] { background:transparent; border-color:transparent; }
.feed-detail { position:relative; overflow:hidden; isolation:isolate; }
.feed-detail[data-feed=retail] .detail-symbol { color:var(--secondary); }
.foil-sweep { position:absolute; inset:-35% auto -35% -15%; width:60%; pointer-events:none; opacity:0; z-index:2; background:linear-gradient(110deg,transparent 15%,#48ecf215 35%,#f4f7fa38 50%,#ff7bc621 65%,transparent 85%); transform:translateX(-130%) skewX(-18deg); }
.button .icon, .text-link .icon { transition:transform 180ms var(--ease); }
.button:hover .icon, .button:focus-visible .icon, .text-link:hover .icon, .text-link:focus-visible .icon { transform:translate(3px,-3px); }
summary { min-height:64px; }
details[data-expanded=false] .faq-plus { transform:rotate(0); }
details[data-expanded=true] .faq-plus { transform:rotate(45deg); }
/* A page changes while its navigation stays in place. Unsupported browsers use normal links. */
@view-transition { navigation:auto; }
:root { view-transition-name:none; }
.site-header { view-transition-name:site-header; }
main { view-transition-name:page-content; }
::view-transition-group(site-header) { animation-duration:220ms; }
::view-transition-old(page-content) { animation:page-out 150ms ease-out both; }
::view-transition-new(page-content) { animation:page-in 260ms var(--ease) both; }
@keyframes page-out { to { opacity:0; } }
@keyframes page-in { from { opacity:.7; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media(max-width:700px) {
 .footer-tools { grid-column:1 / -1; }
 .site-header nav a { min-height:44px; display:flex; align-items:center; }
 .hero-neon h1 { font-size:clamp(46px,13vw,56px); }
 .category-controls button { min-height:60px; }
}
@media(prefers-reduced-motion:reduce) {
 @view-transition { navigation:none; }
 ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none!important; }
 .button .icon, .text-link .icon { transform:none!important; }
}
.motion-reduced::view-transition-group(*), .motion-reduced::view-transition-old(*), .motion-reduced::view-transition-new(*) { animation:none!important; }
.motion-reduced .button .icon, .motion-reduced .text-link .icon { transform:none!important; }

.feed-detail h2 { font-size:28px; letter-spacing:-.02em; }
@media(max-width:700px) { .feed-detail h2 { font-size:25px; } }

.hero-neon .hero-footnote { display:table; margin:18px auto 0; padding:4px 8px; background:#05090f; border-radius:4px; }