/* Five Star Port (fivestarport.site). Navy, white and the icon's gold; the blue and the sunset live in the art. */
@import url('/fonts/fonts.css?v=2');

:root {
  --night: #030b26;
  --navy: #061335;
  --deep: #020818;
  --ink: #ffffff;
  --text: rgba(232, 238, 255, 0.84);
  --muted: rgba(220, 228, 255, 0.6);
  --faint: rgba(220, 228, 255, 0.42);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hi: rgba(255, 255, 255, 0.06);
  --gold: #ffc43a;
  --sun: #ff9b26;
  --radius: 16px;
  --wrap: 1180px;
  --display: 'Satoshi', system-ui, -apple-system, sans-serif;
  --sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
::selection { background: var(--gold); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
strong { color: #fff; font-weight: 700; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--gold); color: var(--night); padding: 8px 14px; border-radius: 8px; }

/* Type */
.display { font-family: var(--display); font-weight: 900; line-height: 1; letter-spacing: -0.035em; color: #fff; margin: 0; text-wrap: balance; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--sans); letter-spacing: 0.01em; color: var(--gold); margin: 0 0 18px; }
.eyebrow svg { width: 14px; height: 14px; fill: currentColor; }
.lead { font: 500 clamp(17px, 1.6vw, 19px)/1.55 var(--sans); color: var(--text); max-width: 36em; margin: 18px 0 0; text-wrap: pretty; }

/* Stars: the five from the icon. They light up one after another, like a rising wanted level. */
.stars { display: inline-flex; gap: clamp(6px, 0.9vw, 10px); }
.stars svg { width: clamp(20px, 2.2vw, 28px); height: auto; fill: #fff; }
.stars-sm svg { width: 16px; }
.stars-sm { gap: 6px; margin-bottom: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .stars-animate svg { opacity: 0.18; transform: scale(0.6); animation: star-on 0.42s cubic-bezier(.2, 1.6, .4, 1) forwards; }
  .stars-animate svg:nth-child(1) { animation-delay: 0.15s; }
  .stars-animate svg:nth-child(2) { animation-delay: 0.3s; }
  .stars-animate svg:nth-child(3) { animation-delay: 0.45s; }
  .stars-animate svg:nth-child(4) { animation-delay: 0.6s; }
  .stars-animate svg:nth-child(5) { animation-delay: 0.75s; }
}
@keyframes star-on { to { opacity: 1; transform: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 12px; border: 1.5px solid transparent; font: 700 16.5px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--gold); color: var(--night); }
.btn-primary:hover { color: var(--night); transform: translateY(-1px); filter: brightness(1.06); }
.btn-outline { border-color: rgba(255, 255, 255, 0.4); color: #fff; background: rgba(3, 11, 38, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-outline:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(3, 11, 38, 0.82); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--line); }
.page-home .nav { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.25s, box-shadow 0.25s; }
.page-home .nav.scrolled { background: rgba(3, 11, 38, 0.86); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand img { border-radius: 8px; }
.brand-name { font: 900 21px/1 var(--display); letter-spacing: -0.02em; }
.brand-name b { color: var(--gold); font-weight: 900; }
.brand:hover { color: #fff; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { color: rgba(225, 232, 255, 0.72); text-decoration: none; font-weight: 500; font-size: 15.5px; padding: 8px 12px; transition: color 0.15s; }
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current] { color: #fff; font-weight: 700; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-inner { gap: 12px; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; cursor: pointer; }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; padding: 8px 18px 20px; background: rgba(3, 11, 38, 0.98); box-shadow: 0 1px 0 var(--line); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 19px; }
}
@media (max-width: 400px) { .brand-name { font-size: 19px; } .nav-cta { padding: 0 12px; } }

/* Page header (every page but home) */
.page-head { position: relative; overflow: hidden; padding: 72px 0 60px; background: var(--navy); }
.page-head-art { position: absolute; top: 0; right: 0; bottom: 0; width: 70%; background: url('/media/art/band-2400.webp') 60% 35% / cover no-repeat; mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 55%); -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 55%); }
.page-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--night)); pointer-events: none; }
.page-head .wrap { position: relative; z-index: 1; }
.page-head .display { font-size: clamp(42px, 6.4vw, 76px); max-width: 12em; }
.page-head .lead { color: var(--text); }

/* Docs */
.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-top: 40px; padding-bottom: 104px; }
.doc-grid.no-toc { grid-template-columns: minmax(0, 1fr); }
.doc-grid.no-toc .prose { margin: 0 auto; }
.toc { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - 110px); overflow: auto; padding-right: 8px; }
.toc-title { font: 700 13px/1 var(--sans); color: var(--faint); margin: 8px 0 12px 12px; }
.toc a { color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1.35; padding: 7px 12px; border-radius: 8px; }
.toc a:hover { color: #fff; }
.toc a.active { color: #fff; font-weight: 700; }
.toc .toc-3 { padding-left: 24px; font-size: 14px; }
@media (max-width: 900px) { .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; } .toc { display: none; } }

.prose { max-width: 760px; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font: 900 clamp(28px, 3.4vw, 38px)/1.08 var(--display); letter-spacing: -0.03em; color: #fff; margin: 64px 0 16px; }
.prose h3 { font: 700 21px/1.3 var(--display); letter-spacing: -0.015em; margin: 40px 0 10px; color: #fff; }
.prose h4 { font-size: 17px; margin: 28px 0 8px; color: #fff; }
.prose h2, .prose h3 { position: relative; }
.prose .anchor { position: absolute; left: -1.1em; color: var(--faint); text-decoration: none; opacity: 0; font-weight: 400; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--gold); }
.prose code { font: 500 0.86em var(--mono); background: var(--surface-hi); border-radius: 6px; padding: 0.12em 0.42em; color: #fff; }
.prose pre { background: var(--deep); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; font-size: 14px; }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15.5px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: #fff; font-weight: 700; }
.prose blockquote { margin: 22px 0; padding: 2px 20px; border-left: 2px solid var(--gold); color: var(--muted); }
.prose img { border-radius: 12px; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 48px 0; }
.callout { margin: 22px 0; padding: 16px 20px; border-radius: 14px; background: var(--surface-hi); }
.callout-important, .callout-warning, .callout-caution { box-shadow: inset 2px 0 0 var(--gold); }
.callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; }
.video { margin: 24px 0; }
.video video { width: min(360px, 100%); aspect-ratio: 9 / 16; background: #000; border-radius: 26px; border: 6px solid #0b0f1c; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8); }
.video figcaption { color: var(--faint); font-size: 14px; margin-top: 10px; }

/* FAQ */
.faq-search { position: sticky; top: 80px; z-index: 5; margin: 0 0 28px; }
.faq-search input { width: 100%; height: 54px; padding: 0 18px 0 48px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(6, 19, 53, 0.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b2d4' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px center / 20px no-repeat; color: #fff; font: 500 16px var(--sans); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.faq-search input:focus { outline: none; border-color: var(--gold); }
.faq-search input::placeholder { color: var(--faint); }
.faq-empty { color: var(--muted); }
@media (min-width: 901px) { .faq-intro ul { display: none; } }
.faq-group h2 { margin-top: 52px; }
.qa { border-radius: 14px; margin: 6px 0; background: var(--surface); transition: background 0.15s; }
.qa:hover { background: var(--surface-hi); }
.qa[open] { background: var(--surface-hi); }
.qa summary { list-style: none; cursor: pointer; padding: 17px 54px 17px 20px; font-weight: 700; color: #fff; position: relative; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s, border-color 0.2s; }
.qa[open] summary::after { transform: translateY(-30%) rotate(225deg); border-color: var(--gold); }
.qa-body { padding: 0 20px 10px; }
.qa-body > :first-child { margin-top: 0; }

/* Changelog */
.release { padding: 8px 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.release h2 { margin-top: 16px; }
.release h3 { font: 700 15px/1 var(--sans); color: var(--gold); margin: 28px 0 8px; }
.release-latest h2::after { content: 'Latest'; margin-left: 14px; vertical-align: middle; font: 700 13px/1 var(--sans); color: var(--night); background: var(--gold); padding: 5px 9px; border-radius: 7px; position: relative; top: -5px; letter-spacing: 0; }

/* Sections */
.section { padding: clamp(80px, 10vw, 136px) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head .display { font-size: clamp(40px, 5.6vw, 68px); }

/* Footer */
.footer { background: var(--deep); box-shadow: 0 -1px 0 var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; padding-top: 60px; padding-bottom: 36px; }
.footer-brand p { color: var(--muted); font-size: 15px; max-width: 30em; }
.footer-title { font: 700 14px/1 var(--sans); color: #fff; margin: 8px 0 14px; }
.footer-grid a:not(.brand) { display: block; color: var(--muted); text-decoration: none; font-size: 15px; padding: 5px 0; }
.footer-grid a:not(.brand):hover { color: #fff; }
.footer-legal { box-shadow: 0 -1px 0 var(--line); padding-top: 20px; padding-bottom: 36px; }
.footer-legal p { color: var(--faint); font-size: 13.5px; margin: 0; }
.footer-legal a { color: var(--muted); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* Lightbox for screenshots */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1400px, 96vw); width: 100%; }
.lightbox::backdrop { background: rgba(2, 8, 24, 0.94); }
.lightbox img { width: 100%; height: auto; border-radius: 14px; }
.lightbox p { color: var(--muted); text-align: center; margin: 12px 0 0; font-size: 15px; }
.lightbox button { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(3, 11, 38, 0.8); color: #fff; font-size: 22px; cursor: pointer; }

/* ---------- Home ---------- */
.hero { position: relative; min-height: clamp(600px, 44vw, 920px); display: flex; align-items: center; overflow: hidden; background: #011a55; padding: 120px 0 110px; }
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: right max(-10vw, -180px) top 40%; }
/* Ultrawide: the hero grows toward the art's own shape (up to the window height), so the whole scene shows as
   drawn, and the content column widens so the copy sits on the art's calm left side. */
@media (min-width: 2401px) and (min-aspect-ratio: 4/5) {
  .hero { min-height: min(100svh, 42vw); }
  .hero .wrap { max-width: 1640px; }
  .hero-art img { object-position: 100% 40%; }
  .hero-copy > * { max-width: 760px; }
  .hero-title { font-size: clamp(76px, 3.4vw, 112px); }
  .hero .lead { font-size: 21px; }
}
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2, 12, 46, 0.9) 0%, rgba(2, 14, 54, 0.6) 34%, transparent 58%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1; background: linear-gradient(180deg, transparent, var(--night)); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy > * { max-width: 620px; }
.hero-title { font-size: clamp(44px, 4.7vw, 76px); max-width: 9em; margin-top: 22px; }
.hero-title span { color: var(--gold); }
.hero .lead { max-width: 30em; color: rgba(236, 241, 255, 0.86); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 15px; font-weight: 500; }
.hero-meta a { color: rgba(236, 241, 255, 0.8); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.hero-meta a:hover { color: #fff; }
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.tag { font: 700 13px/1 var(--sans); color: var(--night); background: #fff; padding: 5px 8px; border-radius: 6px; }
@media (max-aspect-ratio: 4/5) {
  /* Phones: the copy sits on the sky, the rider below it (the portrait art is drawn for this). */
  .hero { display: block; min-height: 0; padding: 100px 0 calc(100vw * 1.777 * 0.6); }
  .hero-art img { top: auto; bottom: 0; left: 0; width: 100%; height: calc(100vw * 1.777); object-fit: cover; object-position: 50% 100%; mask-image: linear-gradient(180deg, transparent 0%, #000 34%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
  .hero::before { background: linear-gradient(180deg, rgba(2, 12, 46, 0.85) 0%, rgba(2, 14, 54, 0.5) 45%, transparent 60%); }
  .hero-title { font-size: clamp(40px, 11vw, 64px); }
}

/* What it is: the README's own description */
.about-strip { padding: 56px 0 8px; }
.about-strip p { font: 500 clamp(20px, 2.3vw, 27px)/1.45 var(--display); letter-spacing: -0.015em; color: var(--muted); max-width: 34em; margin: 0; }
.about-strip strong { color: #fff; }

/* Screenshots rail */
.showcase { padding-top: 72px; }
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)) 28px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 auto; width: min(560px, 82vw); scroll-snap-align: center; position: relative; padding: 0; border: 0; background: #000; border-radius: 26px; cursor: zoom-in; box-shadow: 0 0 0 7px #0b0f1c, 0 30px 50px -24px rgba(0, 0, 0, 0.8); margin: 8px; transition: transform 0.2s; }
.shot:hover { transform: translateY(-3px); }
.shot img { width: 100%; height: auto; border-radius: 20px; aspect-ratio: 2.17; object-fit: cover; }
.shot-device { position: absolute; left: 14px; bottom: 12px; font: 700 13px/1 var(--sans); background: rgba(3, 11, 38, 0.8); color: #fff; padding: 6px 9px; border-radius: 7px; backdrop-filter: blur(6px); }

/* Steps: big gold numbers on a line, no boxes */
.steps-section { overflow: hidden; }
.steps-art { position: absolute; top: 0; right: -4%; width: 60%; height: 74%; mask-image: radial-gradient(ellipse 52% 48% at 66% 46%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 52% 48% at 66% 46%, #000 30%, transparent 78%); opacity: 0.6; }
.steps-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.steps-section .wrap { position: relative; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.step::before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--gold); }
.step-n { display: block; font: 900 64px/0.9 var(--display); letter-spacing: -0.05em; color: var(--gold); margin-bottom: 18px; }
.step h3 { font: 700 20px/1.25 var(--display); letter-spacing: -0.015em; color: #fff; margin: 0 0 8px; }
.step p { color: var(--muted); font-size: 16px; margin: 0; }
.step p strong { color: var(--text); }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } .steps-art { width: 100%; opacity: 0.3; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; gap: 28px; } .step-n { font-size: 52px; } }

/* What you need: an icon list, no boxes */
.needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.need { padding: 4px 28px 4px 0; }
.need + .need { padding-left: 28px; box-shadow: inset 1px 0 0 var(--line); }
.need-icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 18px; }
.need h3 { font: 700 19px/1.3 var(--display); letter-spacing: -0.015em; color: #fff; margin: 0 0 8px; }
.need p { margin: 0; color: var(--muted); font-size: 16px; }
.need code { font: 500 0.86em var(--mono); color: var(--text); }
@media (max-width: 1000px) { .needs-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; } .need:nth-child(3) { padding-left: 0; box-shadow: none; } }
@media (max-width: 600px) { .needs-grid { grid-template-columns: 1fr; } .need, .need + .need { padding: 0; box-shadow: none; } }

/* Latest release */
.release-section { background: var(--navy); }
.release-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.release-grid .display { font-size: clamp(64px, 9vw, 128px); color: var(--gold); letter-spacing: -0.05em; }
.release-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.release-group h3 { font: 700 15px/1 var(--sans); color: #fff; margin: 0 0 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--line); }
.release-group ul { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 16px; }
.release-group li { margin: 6px 0; }
@media (max-width: 900px) { .release-grid { grid-template-columns: 1fr; gap: 16px; } .release-groups { grid-template-columns: 1fr; } }

/* Mac band and community: the art fades in from the right, the copy sits on plain navy */
.mac-band, .community { position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; padding: 100px 0; background: var(--night); }
.mac-art, .community-art { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; mask-image: linear-gradient(90deg, transparent 0%, #000 42%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.mac-art picture, .community-art picture, .steps-art picture { display: contents; }
.mac-art img, .community-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; }
.mac-band::after, .community::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night), transparent 24%, transparent 78%, var(--night)); pointer-events: none; }
.mac-copy, .community-copy { position: relative; z-index: 2; }
.mac-copy > *, .community-copy > * { max-width: 520px; }
.mac-copy .btn-row, .community-copy .btn-row { max-width: none; }
.mac-copy .display, .community-copy .display { font-size: clamp(48px, 6vw, 84px); }
.community-copy .stars { margin-bottom: 22px; }
@media (max-width: 760px) {
  .mac-band, .community { display: block; min-height: 0; padding: 0 0 64px; }
  .mac-art, .community-art { position: relative; width: 100%; height: 72vw; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 60%, transparent); }
  .mac-band::after, .community::after { display: none; }
  .mac-copy, .community-copy { margin-top: -40px; }
}

/* Help cards */
.faq-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.faq-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border-radius: 16px; background: var(--surface); text-decoration: none; color: #fff; transition: background 0.15s, transform 0.15s; }
.faq-card:hover { background: var(--surface-hi); color: #fff; transform: translateY(-2px); }
.faq-card span { font: 700 14px/1 var(--sans); color: var(--gold); }
.faq-card strong { font-weight: 700; line-height: 1.4; font-size: 17px; }
@media (max-width: 900px) { .faq-cards { grid-template-columns: 1fr; } }

/* Ultrawide: the section art (its 3:1 version) fills the full width like the hero; a gradient keeps the copy readable. */
@media (min-width: 2401px) {
  .mac-art, .community-art { left: 0; width: 100%; mask-image: none; -webkit-mask-image: none; }
  .mac-art img, .community-art img { object-position: 100% 45%; }
  .mac-band::before, .community::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2, 12, 46, 0.85) 0%, rgba(2, 14, 54, 0.55) 36%, transparent 60%); }
  .mac-band, .community { min-height: min(100svh, 36vw); }
  .steps-art { top: 0; right: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent); }
  .steps-art img { object-position: 100% 30%; }
  .steps-section::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(3, 11, 38, 0.6) 40%, transparent 70%); pointer-events: none; }
  .steps-section .wrap { z-index: 1; }
}

.shot-figure { margin: 28px 0; }
.shot-figure img { width: 100%; height: auto; border-radius: 14px; }
.shot-figure figcaption { color: var(--faint); font-size: 14px; margin-top: 10px; }