:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(.22,1,.36,1);
}
:focus-visible { outline:2px solid var(--brass-hi); outline-offset:6px; }
.skip-link { position:fixed; z-index:110; top:12px; left:20px; padding:12px 20px; background:var(--brass-hi); color:var(--bg); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.nav { position:fixed; inset:0 0 auto; z-index:100; height:74px; display:flex; align-items:center; background:#0a0b0de8; border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.nav__in { display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; }
.brand__logo { width:86px; height:48px; background:var(--brass); -webkit-mask:url('img/fulllogo.svg?v=960bca2708b6') center/contain no-repeat; mask:url('img/fulllogo.svg?v=960bca2708b6') center/contain no-repeat; }
.nav__links { display:flex; gap:20px; margin-left:auto; font:600 .78rem 'Corvent',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.nav__links a { padding:6px 0; }
.nav__links a:hover,.nav__links a.on { color:var(--brass-hi); }
.nav__cta { display:flex; gap:10px; }
.page-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.page-actions.t-stagger-line { display:flex; }
.inline-link { color:var(--brass-hi); text-decoration:underline; text-underline-offset:5px; }
.state-note { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #ffffff26; background:#0a0b0dc9; color:#d4d6df; font:.72rem 'JetBrains Mono',monospace; }
.state-note::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--brass-hi); }
.placeholder-note { padding:16px 18px; border-left:2px solid var(--brass); background:#c8973f0b; color:var(--dim); font-size:.9rem; }
.placeholder-note strong { color:var(--brass-hi); }
.btn[aria-disabled=true] { opacity:.5; cursor:default; pointer-events:none; }
.community-invite { position:relative; overflow:hidden; padding:80px clamp(24px,5vw,72px); border:1px solid #c8973f50; background:linear-gradient(115deg,#c8973f12,#0d0e12 70%); }
.community-invite::after { content:''; position:absolute; right:-60px; bottom:-110px; width:360px; aspect-ratio:1; border:1px solid #c8973f22; border-radius:50%; box-shadow:0 0 0 50px #c8973f05,0 0 0 100px #c8973f03; pointer-events:none; }
.community-invite h2 { max-width:850px; margin:0; font:700 clamp(2.6rem,5.8vw,5.4rem)/.97 'Corvent',sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.community-invite h2 span { color:var(--brass-hi); }
.community-invite > p { max-width:65ch; margin:28px 0; color:var(--dim); }
.community-invite .page-actions { position:relative; z-index:1; }

/* Connection guide */
.guide-hero { padding:160px 0 64px; overflow:hidden; }
.guide-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:64px; align-items:center; }
.guide-hero h1 { margin:0; max-width:760px; font:700 clamp(3.4rem,6.1vw,6rem)/.96 'Corvent',sans-serif; letter-spacing:-.04em; text-transform:uppercase; }
.guide-hero h1 span { display:block; color:var(--brass-hi); }
.guide-hero .lead { margin:28px 0 32px; }
.guide-hero__visual { position:relative; min-width:0; }
.guide-hero__visual img { width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border:1px solid var(--line-hi); }
.guide-ticket { position:absolute; left:-24px; bottom:30px; right:24px; padding:20px 24px; border:1px solid #c8973f70; background:#0c0e13ed; backdrop-filter:blur(12px); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.guide-ticket strong { display:block; color:var(--brass-hi); font:700 1.25rem 'Corvent',sans-serif; }
.guide-ticket span { font-size:.85rem; color:var(--dim); }
.guide-ticket svg { width:34px; height:34px; flex:none; stroke:var(--brass-hi); }
.guide-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; align-items:start; padding:30px 0 100px; }
.guide-index { min-width:0; position:sticky; top:112px; padding:24px 0; }
.guide-layout > div { min-width:0; }
.guide-index ol { list-style:none; padding:0; margin:0; }
.guide-index a { display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); color:var(--dim); font:600 .94rem 'Corvent',sans-serif; }
.guide-index a span { color:var(--brass); font:.65rem 'JetBrains Mono',monospace; }
.guide-index a[aria-current=step],.guide-index a:hover { color:var(--brass-hi); }
.guide-index p { color:var(--dim); font-size:.82rem; margin:28px 0 0; }
.guide-step { position:relative; padding:44px 0 54px; border-bottom:1px solid var(--line-hi); scroll-margin-top:110px; }
.guide-step:first-child { padding-top:24px; }
.guide-step__heading { display:flex; align-items:baseline; gap:24px; }
.guide-step__number { color:#c8973f78; font:700 clamp(2.5rem,4vw,4rem)/1 'Corvent',sans-serif; }
.guide-step h2 { margin:0; font:700 clamp(1.9rem,3.4vw,3rem)/1.1 'Corvent',sans-serif; letter-spacing:-.02em; }
.guide-step p { max-width:73ch; color:var(--dim); margin:22px 0; }
.guide-step ol,.guide-step ul { padding-left:22px; color:var(--dim); }
.guide-step li { margin:10px 0; padding-left:4px; }
.guide-step strong { color:var(--text); }
.guide-step .inline-link { font-size:.85rem; }
.guide-step__check { display:flex; align-items:center; gap:14px; padding:17px 20px; margin:28px 0; border:1px solid var(--line-hi); background:var(--panel); }
.guide-step__check svg { width:23px; height:23px; flex:none; stroke:var(--brass-hi); }
.guide-step__check span { color:#c5c8d2; font-size:.88rem; }
.connect-command { display:flex; align-items:center; gap:18px; padding:18px 22px; background:#14161c; border:1px solid #c8973f40; }
.connect-command kbd { padding:7px; border:1px solid #c8973f50; color:var(--brass-hi); font:.8rem 'JetBrains Mono',monospace; }
.connect-command code { overflow-wrap:anywhere; color:#d4d6df; font:.83rem 'JetBrains Mono',monospace; }
.connect-command button { margin-left:auto; padding:8px 12px; background:none; border:1px solid var(--line-hi); color:var(--text); cursor:pointer; }
.guide-faq { padding:44px 0 0; scroll-margin-top:110px; }
.guide-faq h2 { margin:0 0 28px; font:700 clamp(2rem,3.8vw,3.2rem)/1 'Corvent',sans-serif; }
.guide-faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.guide-faq summary { font:600 1.12rem/1.5 'Corvent',sans-serif; cursor:pointer; }
.guide-faq details p { max-width:74ch; color:var(--dim); margin:16px 0 0; }
.guide-bottom { padding:0 0 100px; }

/* The connection guide separates prerequisites, actions and checks. */
.guide-preflight { padding:32px 0 48px; scroll-margin-top:100px; }
.guide-preflight h2 { margin:0 0 26px; font:700 clamp(1.7rem,2.7vw,2.5rem)/1.1 'Corvent',sans-serif; }
.guide-requirements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line-hi); background:#101218; }
.guide-requirements article { padding:30px; }
.guide-requirements article + article { border-left:1px solid var(--line-hi); }
.guide-requirements svg { width:30px; height:30px; fill:none; stroke:var(--brass-hi); stroke-width:1.3; margin-bottom:20px; }
.guide-requirements h3 { margin:0 0 12px; font:700 1.15rem/1.25 'Corvent',sans-serif; }
.guide-requirements p { color:var(--dim); margin:0; font-size:.9rem; line-height:1.65; }
.guide-edition { display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; align-items:center; padding:22px 30px; border:1px solid #c8973f40; border-top:0; background:#c8973f0a; }
.guide-edition > span { color:var(--dim); font-size:.84rem; }
.guide-edition > strong { grid-column:1; color:var(--brass-hi); font:700 1.3rem 'Corvent',sans-serif; }
.guide-edition > p { grid-column:2; grid-row:1 / span 2; margin:0; color:#b7bbc6; font-size:.88rem; }
.connection-guide .guide-source { color:var(--dim); font-size:.82rem; line-height:1.7; margin:20px 0 0; }
.guide-index p a { display:inline; padding:0; border:0; font:inherit; color:var(--brass-hi); text-decoration:underline; text-underline-offset:4px; }
.guide-content { min-width:0; }
.connection-guide .guide-step { padding:44px 0 56px; }
.connection-guide .guide-step__number { color:var(--brass); }
.connection-guide .guide-step h2 { font-size:clamp(1.8rem,3vw,2.65rem); }
.connection-guide .guide-step__heading { align-items:center; padding-bottom:6px; }
.guide-step .setup-actions { list-style:none; counter-reset:setup; padding:0; margin:30px 0; }
.guide-step .setup-actions > li { position:relative; padding:0 0 26px 48px; margin:0; counter-increment:setup; }
.guide-step .setup-actions > li:last-child { padding-bottom:0; }
.setup-actions > li::before { content:counter(setup); position:absolute; left:0; top:0; display:grid; place-items:center; width:28px; height:28px; border:1px solid #c8973f50; color:var(--brass-hi); font:.68rem 'JetBrains Mono',monospace; }
.setup-actions > li > strong { font:600 1.04rem/1.5 'Corvent',sans-serif; }
.guide-step .setup-actions p { margin:8px 0 0; max-width:66ch; font-size:.95rem; line-height:1.75; }
.setup-actions .btn,.setup-actions .placeholder-note { margin-top:18px; }
[data-role-placeholder] { white-space:pre-line; }
.guide-step .guide-step__check { margin:26px 0 0; background:#c8973f08; border-color:#c8973f30; }
.guide-step .guide-step__check strong { color:#d9bf86; }
.citizen-card { display:flex; align-items:center; gap:22px; padding:25px 28px; margin-top:28px; border:1px solid #c8973f40; background:linear-gradient(110deg,#c8973f0f,#111318); }
.citizen-card__mark { width:54px; height:54px; display:grid; place-items:center; border:1px solid #c8973f55; flex:none; }
.citizen-card__mark svg { width:30px; height:30px; fill:none; stroke:var(--brass-hi); stroke-width:1.2; }
.citizen-card > div > span { display:block; color:var(--dim); font-size:.8rem; }
.citizen-card > div > strong { font:700 1.75rem 'Corvent',sans-serif; color:var(--brass-hi); }
.connect-panel { padding:26px 30px; border:1px solid #c8973f40; background:#101218; }
.connect-panel h3 { margin:0; font:700 1.2rem 'Corvent',sans-serif; }
.connect-panel .setup-actions { margin-bottom:0; }
.guide-step p.guide-placeholder { color:#b5a583; font-size:.82rem; }
.guide-alternative { margin-top:16px; border:1px solid var(--line-hi); background:#0d0f13; }
.guide-alternative summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; padding:19px 24px; cursor:pointer; font:600 .97rem/1.45 'Corvent',sans-serif; }
.guide-alternative summary::-webkit-details-marker { display:none; }
.guide-alternative summary > span { font:400 1.4rem 'Helvena',sans-serif; color:var(--brass-hi); transition:transform 150ms var(--stagger-ease); }
.guide-alternative[open] summary > span { transform:rotate(45deg); }
.guide-alternative > div { padding:0 24px 24px; }
.guide-alternative p { font-size:.9rem; }
.guide-alternative kbd { padding:2px 6px; border:1px solid #4a4333; color:#dbc292; font:.8rem 'JetBrains Mono',monospace; }
.guide-alternative .connect-command { padding:16px; }
.connect-command button:disabled { color:var(--dim); opacity:.55; cursor:default; }
.connect-command button:not(:disabled):hover { background:var(--brass); color:var(--bg); border-color:var(--brass); }
.guide-definition { margin:26px 0; border-left:2px solid var(--brass); background:#c8973f0a; padding:18px 22px; }
.guide-definition > strong { color:var(--brass-hi); font:700 1.05rem 'Corvent',sans-serif; }
.guide-step .guide-definition p { margin:8px 0 0; font-size:.94rem; }
.guide-finish { display:flex; align-items:center; gap:40px; justify-content:space-between; padding:42px; border:1px solid #c8973f40; background:#101218; }
.guide-finish h2 { margin:0 0 20px; font:700 clamp(1.9rem,3.4vw,3.2rem)/1.05 'Corvent',sans-serif; }
.guide-finish h2 span { color:var(--brass-hi); }
.guide-finish p { max-width:57ch; color:var(--dim); margin:0; font-size:.95rem; }
.guide-finish .page-actions { flex-direction:column; align-items:stretch; flex-shrink:0; }
@media (max-width:900px) {
  .guide-requirements article { padding:24px; }
  .guide-requirements h3 { font-size:1.05rem; }
  .guide-finish { flex-direction:column; align-items:flex-start; }
  .guide-finish .page-actions { flex-direction:row; }
  .guide-preflight { padding-bottom:30px; }
}
@media (max-width:620px) {
  .guide-requirements { grid-template-columns:1fr; }
  .guide-requirements article { display:grid; grid-template-columns:32px 1fr; gap:0 18px; padding:22px; }
  .guide-requirements article + article { border-left:0; border-top:1px solid var(--line-hi); }
  .guide-requirements svg { grid-column:1; grid-row:1 / span 2; width:26px; height:26px; margin-top:2px; }
  .guide-requirements p { grid-column:2; font-size:.87rem; }
  .guide-requirements h3 { grid-column:2; margin-bottom:8px; }
  .guide-edition { display:block; padding:22px; }
  .guide-edition > strong { display:block; margin:5px 0 14px; }
  .connection-guide .guide-step h2 { font-size:1.65rem; }
  .connection-guide .guide-step__heading { align-items:flex-start; }
  .guide-step .setup-actions > li { padding-left:38px; padding-bottom:24px; }
  .guide-step .setup-actions > li:last-child { padding-bottom:0; }
  .setup-actions > li::before { width:24px; height:24px; font-size:.6rem; }
  .setup-actions > li > strong { font-size:1rem; }
  .guide-step .setup-actions p { font-size:.9rem; }
  .setup-actions .btn { font-size:.7rem; padding:14px 15px; }
  .citizen-card { padding:20px; gap:18px; }
  .connect-panel { padding:23px 19px; }
  .guide-alternative summary { padding:18px; font-size:.9rem; gap:12px; }
  .guide-alternative > div { padding:0 18px 20px; }
  .guide-alternative .connect-command { gap:12px; }
  .guide-alternative .connect-command code { flex-basis:100%; }
  .guide-definition { padding:18px; }
  .guide-finish { padding:30px 24px; gap:28px; }
  .guide-ticket { padding:18px; gap:12px; }
  .guide-ticket strong { font-size:1.03rem; }
  .guide-ticket span { font-size:.71rem; }
  .guide-ticket svg { width:27px; height:27px; }
}

/* Home links to the guide and roadmap */
.home-expansion { padding:84px 0; }
.home-expansion__grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.home-expansion__card { position:relative; min-height:370px; padding:36px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border:1px solid var(--line-hi); isolation:isolate; background:var(--panel); }
.home-expansion__card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.home-expansion__card::after { content:''; position:absolute; inset:0; z-index:-2; background:linear-gradient(0deg,#0a0b0df2, #0a0b0d30); }
.home-expansion__card h2 { max-width:12ch; margin:0 0 20px; font:700 clamp(2.3rem,3.8vw,3.7rem)/.96 'Corvent',sans-serif; text-transform:uppercase; }
.home-expansion__card p { color:#bfc3cd; margin:0 0 24px; max-width:45ch; font-size:.92rem; }
.home-expansion__card .btn { align-self:flex-start; }
@media (max-width:1100px) {
  .guide-hero__grid { gap:36px; }
  .guide-layout { grid-template-columns:200px minmax(0,1fr); gap:32px; }
}
@media (max-width:900px) {
  .guide-hero__grid { grid-template-columns:1fr; }
  .guide-hero__visual { max-width:640px; }
  .guide-hero__visual img { aspect-ratio:16 / 10; object-position:center 40%; }
  .guide-ticket { left:18px; right:18px; bottom:18px; }
  .guide-layout { grid-template-columns:minmax(0,1fr); }
  .guide-index { position:sticky; top:74px; z-index:50; background:#0a0b0df5; padding:12px 0; margin-inline:-24px; padding-inline:24px; border-bottom:1px solid var(--line-hi); }
  .guide-index ol { display:flex; overflow-x:auto; gap:20px; scrollbar-width:thin; scrollbar-color:var(--brass) var(--bg); }
  .guide-index a { white-space:nowrap; padding:12px 0; border:0; font-size:.84rem; }
  .guide-index p { display:none; }
  .guide-step,.guide-faq { scroll-margin-top:146px; }
}
@media (max-width:620px) {
  .guide-hero { padding-top:125px; }
  .guide-hero h1 { font-size:clamp(2.7rem,10.8vw,4rem); }
  .guide-hero__grid { gap:32px; }
  .guide-layout { padding-bottom:60px; gap:12px; }
  .guide-step__heading { gap:16px; }
  .guide-step__number { font-size:2rem; }
  .guide-step h2 { font-size:1.75rem; }
  .connect-command { padding:16px 12px; gap:10px; flex-wrap:wrap; }
  .connect-command code { font-size:.7rem; flex:1; }
  .connect-command button { margin-left:0; }
  .home-expansion__grid { grid-template-columns:1fr; }
  .community-invite { padding:48px 24px; }
  .community-invite h2 { font-size:clamp(2.2rem,9vw,3.5rem); }
  .home-expansion__card { min-height:340px; padding:28px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

.t-stagger:not(.motion-ready) .t-stagger-line { opacity:1; transform:none; filter:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }