/* Steps, FAQ and the community band. */
.start-section { padding-block:var(--section-y); background:radial-gradient(ellipse 60% 50% at 50% 0%,var(--glow),transparent 70%),var(--ink-2); border-block:1px solid var(--line); }
.steps { --node:clamp(52px,1.4vw + 34px,84px); position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin:clamp(36px,3.4vw,84px) 0 0; padding:0; list-style:none; counter-reset:step; }
/* The path that joins the three waypoints draws itself once. */
.steps::before { content:''; position:absolute; left:calc(var(--node) / 2); right:calc(var(--node) / 2); top:calc(var(--node) / 2); height:1px; background:linear-gradient(90deg,var(--gold),var(--gold-6),var(--gold)); transform-origin:left; }
.js-motion .steps.visible::before { animation:draw-path .9s var(--ease-in-out) backwards; }
@keyframes draw-path { from { scale:0 1; } }
.step { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.step-node { display:grid; place-items:center; width:var(--node); aspect-ratio:1; margin-bottom:8px; background:var(--ink-2); border:1px solid var(--line-gold-strong); rotate:45deg; color:var(--gold); }
.step-node>span { rotate:-45deg; }
.step-node .ui-icon { width:calc(var(--node) * .42); height:auto; }
.js-motion .steps.visible .step-node { animation:node-light .5s var(--ease-spring) backwards; }
.js-motion .steps.visible .step:nth-child(2) .step-node { animation-delay:.3s; }
.js-motion .steps.visible .step:nth-child(3) .step-node { animation-delay:.6s; }
@keyframes node-light { from { scale:.4; opacity:0; } }
.step-number { display:flex; align-items:center; gap:.6em; font:600 var(--fs-micro)/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.step p { color:var(--muted); max-width:24em; flex:1; }
.step .button,.step .text-link { margin-top:6px; }
@media (max-width:899.98px) {
  .steps { grid-template-columns:1fr; gap:clamp(28px,6vw,44px); padding-left:calc(var(--node) + 20px); }
  .steps::before { left:calc(var(--node) / 2); right:auto; top:calc(var(--node) / 2); bottom:calc(var(--node) / 2); width:1px; height:auto; background:linear-gradient(180deg,var(--gold),var(--gold-6),var(--gold)); transform-origin:top; }
  @keyframes draw-path { from { scale:1 0; } }
  .step-node { position:absolute; left:calc((var(--node) + 20px) * -1); top:0; margin:0; }
}

.faq-section { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,140px); padding-block:var(--section-y); }
.faq-heading { display:grid; align-content:start; gap:clamp(14px,1.3vw,28px); }
.faq-heading>p:last-child { color:var(--muted); font-size:var(--fs-lead); max-width:22em; }
.faq-list { border-top:1px solid var(--line-gold); }
.faq-list details { border-bottom:1px solid var(--line-gold); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:clamp(16px,1.2vw,30px) clamp(4px,.8vw,20px); cursor:pointer; list-style:none; font:500 clamp(19px,.6vw + 14px,32px)/1.25 var(--serif); color:var(--text); transition:color var(--t-fast),background-color var(--t-fast); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:hover { color:var(--gold-bright); background:#e2bb7b0a; }
.faq-list details[open] summary { color:var(--gold-bright); }
/* Plus turns into minus. */
.faq-mark { position:relative; flex:none; width:18px; height:18px; }
.faq-mark::before,.faq-mark::after { content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:var(--gold); transition:rotate var(--t-mid) var(--ease); }
.faq-mark::after { rotate:90deg; }
details[open] .faq-mark::after { rotate:0deg; }
.faq-list details>p { padding:0 clamp(4px,.8vw,20px) clamp(18px,1.4vw,32px); color:var(--text-soft); max-width:40em; }
/* Smooth open where the browser can animate to auto height; instant elsewhere. */
@supports (interpolate-size:allow-keywords) {
  .faq-list { interpolate-size:allow-keywords; }
  .faq-list details::details-content { height:0; overflow:clip; transition:height var(--t-mid) var(--ease),content-visibility var(--t-mid) allow-discrete; }
  .faq-list details[open]::details-content { height:auto; }
}
@media (max-width:899.98px) { .faq-section { grid-template-columns:1fr; } }

.community-section { position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(90px,10vw,240px); border-top:1px solid var(--line); }
.community-art { position:absolute; inset:0; z-index:-1; }
.community-art img { width:100%; height:115%; object-fit:cover; object-position:50% 40%; }
.community-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--bg) 0%,#0d0e14d9 40%,#0d0e1466 100%),linear-gradient(0deg,var(--bg),transparent 30%,transparent 70%,var(--bg)); }
@supports (animation-timeline:view()) {
  .js-motion .community-art img { animation:community-drift linear both; animation-timeline:view(); }
  @keyframes community-drift { from { transform:translateY(-8%); } to { transform:translateY(0); } }
}
.community-inner { display:grid; justify-items:start; gap:clamp(16px,1.4vw,30px); }
.community-symbol { width:clamp(64px,3vw + 30px,130px); height:auto; filter:drop-shadow(0 0 30px #d8ae5f55); }
.community-section h2 { max-width:12em; }
.community-section .button { margin-top:8px; }
@media (max-width:560px) { .community-section .button { width:100%; } }