/* =========================================================================
   FiveApply — marketing site, auth, and the public community pages
   (/c/{slug}, apply form, applicant portal). Tokens come from app.css.
   ========================================================================= */

/* ---------- Site header / footer ---------- */
.site-header { position: sticky; top: 0; z-index: 40; transition: background .3s var(--ease), box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(170%) blur(16px); border-bottom-color: var(--border); }
.site-header .container { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.site-nav { display: flex; gap: 2px; margin-left: 10px; }
.site-nav a { position: relative; color: var(--text-muted); padding: 8px 13px; border-radius: 10px; font-size: .9rem; font-weight: 560; text-decoration: none !important; transition: color .15s, background .15s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--text); background: var(--surface); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 820px) { .site-nav { display: none; } }
.site-footer { position: relative; margin-top: 110px; padding: 56px 0 40px; color: var(--text-muted); font-size: .88rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-deep) 70%, transparent); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--sunset-grad); opacity: .7; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-bottom: 12px; font-weight: 700; }
.footer-grid nav { display: grid; gap: 8px; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-faint); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Shared marketing bits ---------- */
.section { padding: 100px 0; position: relative; }
.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--hue, var(--primary)); font-weight: 750; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; padding: 5px 12px; border-radius: 99px; background: color-mix(in srgb, var(--hue, var(--primary)) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--primary)) 30%, transparent); }
:root[data-theme="light"] .kicker { color: color-mix(in srgb, var(--hue, var(--primary)) 70%, #000); }
.section-head h2, .mk-h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 3rem); letter-spacing: -.045em; line-height: 1.04; font-weight: 700; }
.section-head p { color: var(--text-muted); font-size: 1.08rem; }
.pill-link { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border-strong); font-size: .85rem; color: var(--text-muted); margin-bottom: 26px; text-decoration: none !important; transition: border-color .2s, color .2s, transform .25s var(--ease); }
.pill-link:hover { border-color: var(--pink); color: var(--text); transform: translateY(-1px); }
.pill-link b { background: var(--pink); color: #fff; padding: 2px 10px; border-radius: 99px; font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }

/* Scroll reveal: only hides things once app.js has marked the page as able to reveal them. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js-reveal [data-reveal="left"] { transform: translateX(-30px); }
.js-reveal [data-reveal="right"] { transform: translateX(30px); }
.js-reveal [data-reveal="zoom"] { transform: scale(.95); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes angle { to { --angle: 360deg; } }

/* ---------- Home: hero ---------- */
.mk-hero { position: relative; padding: 56px 0 30px; overflow: hidden; isolation: isolate; }
.mk-hero::before { content: ""; position: absolute; inset: -10% -10% auto; height: 760px; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 380px at 78% 30%, color-mix(in srgb, var(--pink) 26%, transparent), transparent 70%), radial-gradient(520px 360px at 92% 70%, color-mix(in srgb, var(--violet) 28%, transparent), transparent 70%), radial-gradient(480px 320px at 15% 10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%); filter: blur(10px); }
.mk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: 600px; }
.mk-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: .98; letter-spacing: -.055em; font-weight: 800; margin-bottom: 24px; }
.mk-hl { position: relative; white-space: nowrap; background: var(--sunset-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .1em; border-radius: 99px; background: var(--sunset-grad); transform-origin: left; animation: grow-x 1s var(--ease) .5s backwards; }
:root[data-theme="light"] .mk-hl { background-image: linear-gradient(100deg, #c98a00, #e8590c 40%, #d6336c 75%, #7048e8); }
.mk-lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text-muted); max-width: 560px; margin-bottom: 32px; }
.mk-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 980px) { .mk-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; } .mk-hero { padding-top: 32px; } }

/* Hero visual: an application pass being stamped, with Discord + role toasts around it. */
.mk-stage { position: relative; min-height: 520px; display: grid; place-items: center; perspective: 1600px; }
.mk-pass { position: relative; width: min(100%, 410px); margin: 50px 90px 120px 0; transform: rotate(-3deg); animation: pass-in 1.1s var(--ease) .1s backwards; }
@keyframes pass-in { from { opacity: 0; transform: rotate(4deg) translateY(50px) scale(.92); } }
.mk-pass .pass-stamp { position: absolute; right: -22px; top: 112px; z-index: 3; }
@media (max-width: 760px) { .mk-pass { margin: 0 0 20px; } }
.mk-float { position: absolute; z-index: 4; display: flex; gap: 11px; align-items: center; padding: 11px 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: .82rem; animation: pop .8s var(--spring) backwards, bob 6s ease-in-out infinite; }
.mk-float strong { display: block; font-size: .84rem; }
.mk-float small { color: var(--text-muted); }
.mk-float .chip-icon { width: 34px; height: 34px; border-radius: 11px; }
.mk-float.fl-role { left: -4%; bottom: 14%; animation-delay: 1.3s, 2s; }
.mk-float.fl-flag { left: -2%; top: 0; animation-delay: 1.6s, 0s; }
@media (max-width: 1100px) { .mk-float.fl-role { left: 0; } }
@media (max-width: 560px) { .mk-float { display: none; } .mk-stage { min-height: 0; } }

/* Discord message mock (used in hero + Discord section). */
.dc-msg { position: relative; width: min(100%, 400px); padding: 14px 16px 16px; border-radius: 14px; background: #313338; color: #dbdee1; font-size: .84rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .06); text-align: left; }
.dc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dc-head img, .dc-head .dc-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.dc-av { display: grid; place-items: center; background: #12112a; }
.dc-av .brand-mark { width: 22px; height: 22px; }
.dc-name { font-weight: 650; color: #fff; }
.dc-app { font-size: .62rem; font-weight: 700; background: var(--discord); color: #fff; padding: 1px 5px; border-radius: 4px; }
.dc-time { color: #949ba4; font-size: .72rem; }
.dc-embed { margin-left: 42px; padding: 10px 12px; border-radius: 6px; background: #2b2d31; border-left: 4px solid var(--primary); }
.dc-embed strong { color: #fff; display: block; margin-bottom: 4px; }
.dc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; font-size: .78rem; }
.dc-fields b { display: block; color: #fff; font-size: .72rem; }
.dc-buttons { margin: 10px 0 0 42px; display: flex; gap: 8px; flex-wrap: wrap; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 5px; font-weight: 600; font-size: .8rem; color: #fff; }
.dc-btn.ok { background: #248046; } .dc-btn.no { background: #da373c; } .dc-btn.grey { background: #4e5058; }
.mk-stage .dc-msg { position: absolute; right: -4%; bottom: 0; z-index: 5; width: 320px; transform: rotate(2deg); animation: pop .8s var(--spring) .9s backwards; }
@media (max-width: 1100px) { .mk-stage .dc-msg { right: 0; } }
@media (max-width: 760px) { .mk-stage .dc-msg { position: relative; right: auto; bottom: auto; margin-top: -30px; transform: none; } .mk-stage { display: flex; flex-direction: column; align-items: center; } }

/* ---------- The pass (application ticket) ----------
   A card with a perforated tear line and round notches either side. The notches are two
   page-coloured half-discs painted over the card edge (no masks or filters: those are slow
   to paint across a grid of tiles). */
.pass { --hue: var(--accent, var(--primary)); --notch: 13px; --tear: 96px; position: relative; color: var(--text); }
.pass-in, .cp-tile-in { position: relative; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-strong); }
.pass-in { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
:root[data-theme="light"] .pass-in { box-shadow: 0 24px 50px -24px rgba(30, 20, 80, .3); }
.pass-in::before, .pass-in::after, .cp-tile-in::before, .cp-tile-in::after { content: ""; position: absolute; z-index: 3; top: calc(100% - var(--tear) - var(--notch)); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); pointer-events: none; }
.pass-in::before, .cp-tile-in::before { left: calc(-1 * var(--notch) - 1px); clip-path: inset(-2px -2px -2px 50%); }
.pass-in::after, .cp-tile-in::after { right: calc(-1 * var(--notch) - 1px); clip-path: inset(-2px 50% -2px -2px); }
.pass-top { position: relative; height: 92px; border-radius: 21px 21px 0 0; overflow: hidden; background: linear-gradient(125deg, var(--hue), color-mix(in srgb, var(--hue) 35%, var(--violet)) 60%, var(--pink)); }
.pass-top::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 13px); }
.pass-top::after { content: attr(data-label); position: absolute; right: 16px; top: 14px; font-family: var(--font-display); font-weight: 800; font-size: .62rem; letter-spacing: .24em; color: rgba(255, 255, 255, .85); }
.pass-body { padding: 0 22px 18px; }
.pass-id { display: flex; align-items: flex-end; gap: 14px; margin-top: -30px; position: relative; }
.pass-id .avatar, .pass-id .monogram { width: 64px; height: 64px; border-radius: 18px; border: 4px solid var(--surface); }
.pass-id .avatar { border-radius: 50%; }
.pass-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.pass-sub { font-size: .8rem; color: var(--text-muted); }
.pass-lines { display: grid; gap: 10px; margin: 18px 0 4px; }
.pass-line { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: .8rem; }
.pass-line > span:first-child { color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; font-weight: 700; }
.pass-bar { height: 8px; border-radius: 99px; background: var(--surface-3); position: relative; overflow: hidden; }
.pass-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--surface-3); }
.pass-tear { position: relative; height: 0; margin: 0 calc(var(--notch) + 4px); border-top: 2px dashed var(--border-strong); }
.pass-foot { height: var(--tear); padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-code { font-family: var(--font-mono); font-size: .76rem; color: var(--text-faint); letter-spacing: .08em; }
.barcode { height: 34px; width: 120px; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 8px, var(--text) 8px 11px, transparent 11px 12px); opacity: .55; border-radius: 2px; }

/* ---------- Home: works-with strip ---------- */
.works-with { display: flex; align-items: center; gap: 18px 40px; flex-wrap: wrap; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--border); }
.works-with-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.works-with ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 36px; }
.works-with li { display: flex; align-items: center; gap: 12px; color: var(--text-muted); }
.works-with li > .icon { width: 22px; height: 22px; flex: none; opacity: .8; }
.works-with strong { display: block; font-family: var(--font-display); font-size: .98rem; letter-spacing: -.03em; color: var(--text); line-height: 1.2; }
.works-with li span { font-size: .8rem; color: var(--text-faint); }

/* ---------- Home: before / after ---------- */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.vs-card { padding: 28px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); }
.vs-card h3 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.04em; margin-bottom: 6px; }
.vs-card ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.vs-card li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.vs-card li .chip-icon { width: 28px; height: 28px; border-radius: 9px; }
.vs-old { background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--red) 4%, transparent) 14px 28px), var(--surface); }
.vs-old li { color: var(--text-muted); }
.vs-new { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: radial-gradient(500px 240px at 100% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%), var(--surface); box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--primary) 40%, transparent), var(--shadow); }
.vs-arrow { display: grid; place-items: center; }
.vs-arrow span { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 0 #9c7400; transform: rotate(-6deg); }
@media (max-width: 860px) { .vs { grid-template-columns: minmax(0, 1fr); } .vs-arrow span { transform: rotate(84deg); } }

/* ---------- Home: how it works ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; counter-reset: flow; }
.flow-step { position: relative; padding: 24px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; transition: transform .3s var(--ease), border-color .2s, box-shadow .3s; }
.flow-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 55%, var(--border)); box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--hue) 45%, transparent); }
.flow-step .n { display: block; font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--hue); margin-bottom: 14px; -webkit-text-stroke: 0; }
.flow-step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.flow-step p { color: var(--text-muted); font-size: .9rem; margin-bottom: 16px; }
.flow-demo { padding: 12px; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--border); display: grid; gap: 8px; font-size: .78rem; }
.flow-demo .row { gap: 8px; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Home: bento features ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bento .is-wide { grid-column: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento .is-wide { grid-column: auto; } }
.feature { padding: 26px; overflow: hidden; transition: transform .3s var(--ease), border-color .25s, box-shadow .3s; }
.feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 50%, var(--border-strong)); box-shadow: var(--shadow), 0 8px 0 -2px color-mix(in srgb, var(--hue) 40%, transparent); }
.feature .f-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--hue); background: color-mix(in srgb, var(--hue) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent); margin-bottom: 18px; transition: transform .5s var(--spring); }
.feature:hover .f-icon { transform: rotate(-10deg) scale(1.1); }
.feature h3 { margin-bottom: 6px; font-size: 1.12rem; }
.feature p { color: var(--text-muted); font-size: .93rem; margin: 0; }
.f-visual { margin-top: 20px; padding: 14px; border-radius: var(--radius); background: var(--bg-deep); border: 1px solid var(--border); display: grid; gap: 12px; }
.f-vote { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .82rem; }
.f-vote .vote-bar span { transform-origin: left; animation: grow-x 1.2s var(--ease) backwards; }
.f-flag { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.f-flag .pct { margin-left: auto; font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: 1.3rem; letter-spacing: -.05em; }

/* ---------- Home: Discord + in-game showcase ---------- */
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .showcase { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.showcase-visual { position: relative; isolation: isolate; display: grid; place-items: center; padding: 30px 0; }
.showcase-visual::before { content: ""; position: absolute; inset: 10% 5%; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 30%, transparent), transparent); filter: blur(20px); }
.ticks { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon-sm { color: var(--hue, var(--green)); margin-top: 4px; }
.terminal { padding: 0; overflow: hidden; width: 100%; background: var(--bg-deep); }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.shot-bar i { width: 11px; height: 11px; border-radius: 50%; }
.shot-bar i:nth-child(1) { background: #ff5f57; } .shot-bar i:nth-child(2) { background: #febc2e; } .shot-bar i:nth-child(3) { background: #28c840; }
.shot-url { margin: 0 auto; padding: 3px 14px; border-radius: 99px; background: var(--bg-deep); border: 1px solid var(--border); font-size: .72rem; color: var(--text-faint); font-family: var(--font-mono); }
.terminal pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 18px 20px; }
.terminal .caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom; background: var(--primary); animation: blink 1s steps(1) infinite; }
.terminal .alert { margin: 0 16px 16px; }
.tok-k { color: var(--pink); } .tok-s { color: var(--green); } .tok-c { color: var(--text-faint); }

/* ---------- Dashboard snippet (static mock of the Applications inbox) ---------- */
.dash-section { padding-top: 40px; }
.dash-wrap { --hue: var(--pink); position: relative; isolation: isolate; max-width: 1080px; margin: 0 auto; }
.dash-wrap::before { content: ""; position: absolute; inset: 8% 4% -4%; z-index: -1; border-radius: 60px; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 26%, transparent), transparent); filter: blur(30px); }
.dash-shot { overflow: hidden; background: var(--bg); box-shadow: var(--shadow-lg); pointer-events: none; user-select: none; }
.ds-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.ds-side { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border-right: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 7%, transparent), transparent 260px), var(--bg-deep); }
.ds-side .community-switch { margin-bottom: 10px; padding: 8px; }
.ds-side .community-logo { width: 34px; height: 34px; border-radius: 10px; }
.ds-side .nav-link { font-size: .84rem; }
.ds-main { min-width: 0; }
.ds-top { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.ds-top .crumbs { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-muted); min-width: 0; }
.ds-top .crumbs strong { color: var(--text); }
.ds-top .crumbs .icon-sm { color: var(--text-faint); }
.ds-top .cmdk-trigger { min-width: 200px; height: 34px; }
.ds-content { padding: 22px 24px 26px; }
.ds-content .page-head { margin-bottom: 18px; }
.ds-content .page-head h1 { font-size: 1.5rem; }
.ds-content .tabs { margin-bottom: 16px; }
.ds-content .table { font-size: .86rem; }
.ds-content .table td { padding: 11px 14px; }
.dash-wrap.is-in .ds-new { animation: ds-row-in 1s var(--ease) .9s backwards; }
.dash-wrap.is-in .ds-new td:first-child { animation: ds-row-glow 2.6s ease-out 1.6s backwards; }
@keyframes ds-row-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes ds-row-glow { from { box-shadow: inset 3px 0 0 var(--pink); } }
.dash-float { animation: bob 6s ease-in-out infinite; }
.dash-float.df-vote { right: -3%; top: 22%; animation-delay: .8s; }
.dash-float.df-age { right: -2%; bottom: 10%; animation-delay: 2.2s; }
.dash-float.df-flag { left: -4%; bottom: 24%; animation-delay: 1.4s; }
.dash-cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 1180px) { .dash-float.df-vote, .dash-float.df-age { right: 0; } .dash-float.df-flag { left: 0; } }
@media (max-width: 900px) { .ds-shell { grid-template-columns: minmax(0, 1fr); } .ds-side { display: none; } .dash-float { display: none; } }
@media (max-width: 640px) { .ds-top .cmdk-trigger { display: none; } .ds-top, .ds-content { padding-left: 14px; padding-right: 14px; } .ds-content .page-head p { display: none; } }
@media (prefers-reduced-motion: reduce) { .dash-wrap.is-in .ds-new, .dash-wrap.is-in .ds-new td:first-child, .dash-float { animation: none; } }

/* ---------- Numbers strip ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.numbers > div { --hue: var(--primary); padding: 26px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.numbers strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--hue); font-variant-numeric: tabular-nums; }
.numbers > div > span { display: block; margin-top: 10px; color: var(--text-muted); font-size: .88rem; }
@media (max-width: 760px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pricing ---------- */
.price-card { container-type: inline-size; padding: 28px; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.price-card:hover { transform: translateY(-4px); }
.price-card h3 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.04em; }
.price-card.is-featured { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--angle), var(--primary), var(--pink), var(--violet), var(--cyan), var(--primary)) border-box; animation: angle 7s linear infinite; box-shadow: var(--shadow-lg); }
.price-card.is-featured::after { display: none; }
.price-card .tag { position: absolute; top: -13px; left: 24px; z-index: 2; background: var(--pink); color: #fff; box-shadow: 0 3px 0 #a3164f; }
/* Sized by the card (container units), so "£129.90 / yr" fits a narrow one. */
.price { font-family: var(--font-display); font-size: clamp(1.5rem, 14cqi, 2.9rem); font-weight: 800; letter-spacing: -.06em; margin: 12px 0 2px; white-space: nowrap; }
.price small { font-family: var(--font-sans); font-size: .95rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
.billing-toggle { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 4px; gap: 4px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.billing-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 99px; font-size: .9rem; font-weight: 650; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.billing-opt:hover { color: var(--text); }
.billing-opt.is-active { background: var(--primary); color: var(--primary-ink); }
.billing-opt.is-active .badge { --b: currentColor; }
.billing-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* /start: which community a paid plan is for. */
.start-choice { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.start-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.start-list li { gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 720px) { .start-choice { grid-template-columns: 1fr; } }
.currency-switch a, .currency-switch strong { margin: 0 5px; white-space: nowrap; }
.currency-switch strong { color: var(--text); }
.price-card ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; font-size: .9rem; flex: 1; }
.price-card li { display: flex; gap: 9px; align-items: flex-start; }
.price-card li .icon { color: var(--green); margin-top: 2px; }
.price-card li.is-off { color: var(--text-faint); }
.price-card li.is-off .icon { color: var(--text-faint); }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; padding: 0 20px; transition: border-color .2s; }
.faq details[open] { border-color: var(--border-strong); }
.faq summary { cursor: pointer; font-weight: 650; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); font-size: 1.2rem; line-height: 1; transition: transform .4s var(--spring), background .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--primary); color: var(--primary-ink); }
.faq details p { color: var(--text-muted); margin: 0 0 18px; animation: rise .4s var(--ease); }

/* ---------- CTA band ---------- */
/* A quiet panel: surface card, faint dot grid fading out to the right, one gold action. */
.cta-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: center; padding: 52px 56px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border-strong); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.3px); background-size: 18px 18px; mask-image: linear-gradient(270deg, #000, transparent 60%); -webkit-mask-image: linear-gradient(270deg, #000, transparent 60%); }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.05em; font-weight: 800; margin-bottom: 10px; }
.cta-band p { color: var(--text-muted); font-size: 1.02rem; max-width: 52ch; margin-bottom: 0; }
.cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
@media (max-width: 760px) { .cta-band { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; } }

/* ---------- Docs / legal ---------- */
.doc { max-width: 800px; }
.doc h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.doc h2 { margin-top: 44px; font-size: 1.35rem; }
.doc li { margin-bottom: 6px; }
.doc img { border-radius: var(--radius); border: 1px solid var(--border); }
.legal-banner { border: 1.5px dashed var(--amber); background: var(--amber-soft); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 24px; font-size: .9rem; }

/* ---------- Auth ---------- */
.auth-wrap { position: relative; isolation: isolate; min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 40px 16px 80px; }
.auth-card { width: 100%; max-width: 440px; padding: 40px 34px 30px; text-align: center; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--sunset-grad); z-index: 2; }
.auth-card .brand-mark { width: 64px; height: 64px; margin: 0 auto 22px; animation: bob 5s ease-in-out infinite; }
.auth-card h1 { font-size: 1.5rem; }
.auth-perks { display: grid; gap: 8px; text-align: left; margin: 22px 0 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: .86rem; color: var(--text-muted); }
.auth-perks span { display: flex; gap: 9px; align-items: center; }
.auth-perks .icon-sm { color: var(--green); }

/* ---------- Error page ---------- */
.error-page { text-align: center; padding: 100px 20px; }
.error-page .code { position: relative; display: inline-block; font-family: var(--font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 800; letter-spacing: -.08em; line-height: 1; background: var(--sunset-grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitch 4s steps(1) infinite; }
.error-page .stamp { position: absolute; right: -24px; bottom: 14%; }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-3px, 1px) skewX(-6deg); } 95% { transform: translate(3px, -1px) skewX(4deg); } 97% { transform: translate(-1px, 0); } }

/* =========================================================================
   Public community pages
   ========================================================================= */
.accent-scope { --hue: var(--accent, var(--primary)); }
.accent-scope .btn-primary { --btn-bg: var(--accent, var(--primary)); --btn-edge: color-mix(in srgb, var(--accent, var(--primary)) 55%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--primary)) 65%, #fff) -60%, var(--accent, var(--primary)) 55%); }
.accent-scope .btn-primary:hover { box-shadow: 0 4px 0 var(--btn-edge), 0 14px 30px -12px color-mix(in srgb, var(--accent, var(--primary)) 70%, transparent); }
.accent-scope .input:focus, .accent-scope .textarea:focus, .accent-scope .select:focus { border-color: var(--accent, var(--primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--primary)) 18%, transparent); }
.accent-scope .check:has(input:checked) { border-color: var(--accent, var(--primary)); background: color-mix(in srgb, var(--accent, var(--primary)) 13%, transparent); }
.accent-scope .check input { accent-color: var(--accent, var(--primary)); }

/* Hero: banner with logo + name overlapping it. */
.public-hero { --hue: var(--accent, var(--primary)); position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface); margin: 24px 0; box-shadow: var(--shadow-lg); }
.public-hero .banner { position: relative; height: 220px; overflow: hidden; background: linear-gradient(125deg, var(--hue) 0%, color-mix(in srgb, var(--hue) 40%, var(--violet)) 55%, color-mix(in srgb, var(--pink) 70%, var(--bg-deep)) 100%); }
.public-hero .banner.has-image { background-image: var(--banner); background-size: var(--banner-size, cover); background-position: var(--banner-pos, center); background-repeat: no-repeat; background-color: var(--surface-2); }
.public-hero .banner:not(.has-image)::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 260px at 20% 0%, rgba(255, 255, 255, .28), transparent 60%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 16px); }
.public-hero .banner:not(.has-image)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background-image: radial-gradient(rgba(255, 255, 255, .25) 1.2px, transparent 1.4px); background-size: 16px 16px; mask-image: linear-gradient(0deg, #000, transparent); -webkit-mask-image: linear-gradient(0deg, #000, transparent); }
.public-hero .hero-body { position: relative; padding: 0 30px 26px; display: flex; gap: 20px; align-items: flex-end; margin-top: -48px; flex-wrap: wrap; }
.public-hero .community-logo { width: 96px; height: 96px; border-radius: 26px; border: 5px solid var(--surface) !important; background: var(--surface-2) !important; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); transition: transform .5s var(--spring); }
.public-hero:hover .community-logo { transform: rotate(-4deg) scale(1.04); }
.public-hero h1 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.05em; }
.public-hero .hero-body > .grow { padding-top: 56px; } /* keeps the name below the banner */
.public-hero-centered .hero-body { align-items: flex-end; }
.public-hero-compact .banner { height: 80px; }
.public-hero-compact .hero-body { margin-top: -22px; padding-bottom: 16px; gap: 12px; }
.public-hero-compact .community-logo { width: 48px; height: 48px; border-width: 3px !important; border-radius: 14px; }
.public-hero-compact .hero-body > .grow { padding-top: 26px; }
.public-hero-compact h1 { font-size: 1.15rem; }
.public-hero-plain { overflow: visible; border: 0; background: none; box-shadow: none; margin: 8px 0 18px; }
.public-hero-plain .hero-body { margin-top: 0; padding: 0; align-items: center; gap: 12px; }
.public-hero-plain .hero-body > .grow { padding-top: 0; }
.public-hero-plain .community-logo { width: 44px; height: 44px; border-radius: 13px; border-width: 0 !important; box-shadow: none; }
.public-hero-plain h1 { font-family: var(--font-sans); font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--text-muted); }
@media (max-width: 620px) { .public-hero .banner { height: 150px; } .public-hero .hero-body { padding: 0 18px 20px; margin-top: -40px; } .public-hero .community-logo { width: 78px; height: 78px; border-radius: 22px; } }

.back-row { display: flex; justify-content: flex-start; margin: 26px 0 12px; }
.back-box { height: 34px; padding: 0 13px; gap: 7px; font-size: .84rem; border-radius: 11px; }
.powered { text-align: center; font-size: .8rem; color: var(--text-faint); margin: 40px 0; }
.powered a { color: var(--text-muted); font-weight: 650; }

/* Community page (/c/{slug}) */
/* The page reads like a terminal: a full-bleed hero with a departures board, the "how to apply" route,
   then gates (sections) of ticket tiles. The board is always dark, as real ones are, in both themes. */
.cp-page { --hue: var(--accent, var(--primary)); --board: #100f1c; --board-2: #1c1a30; --board-ink: #ffcf4a; --board-text: #c9c5e4; --board-faint: #7f7ba3; }
.cp-page [hidden] { display: none !important; }
.cp-page .container { max-width: 1120px; }

.cp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 60px; border-bottom: 1px solid var(--border); }
.cp-hero-art { position: absolute; inset: 0; z-index: -1; background-color: var(--bg);
  background-image: radial-gradient(900px 420px at 88% -10%, color-mix(in srgb, var(--hue) 34%, transparent), transparent 70%), radial-gradient(700px 360px at 0% 110%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%); }
.cp-hero-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hue) 10%, transparent) 0 2px, transparent 2px 18px); mask-image: linear-gradient(200deg, #000 0%, transparent 55%); -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%); }
.has-banner .cp-hero-art { background-image: var(--banner); background-size: var(--banner-size, cover); background-position: var(--banner-pos, center); background-repeat: no-repeat; background-color: var(--surface-2); }
.has-banner .cp-hero-art::before { mask-image: none; -webkit-mask-image: none; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 38%, color-mix(in srgb, var(--bg) 25%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
.cp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.cp-hero-logo.community-logo { width: 88px; height: 88px; border-radius: 24px; border: 4px solid var(--surface) !important; background: var(--surface-2) !important; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6); margin-bottom: 22px; }
.cp-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.cp-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--slate); }
.cp-eyebrow.is-go::before { background: var(--green); animation: cp-ping 2s var(--ease) infinite; }
@keyframes cp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.cp-hero-name { font-family: var(--font-display); font-size: clamp(2.2rem, 5.6vw, 4rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.02; margin: 12px 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.cp-tagline { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--text-muted); max-width: 54ch; margin: 14px 0 0; }
.cp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cp-hero-actions:empty { display: none; }
.cp-hero-search { display: flex; gap: 10px; margin-top: 28px; max-width: 560px; }
.cp-hero-search[hidden] { display: none; }
.cp-hero-search + .cp-hero-actions { margin-top: 12px; }
.cp-search { position: relative; display: block; flex: 1; min-width: 0; }
.cp-search .input { width: 100%; height: 52px; min-height: 52px; padding-left: 42px; padding-right: 44px; font-size: 1rem; border-radius: 14px; background: color-mix(in srgb, var(--bg-deep) 70%, transparent); backdrop-filter: blur(8px); border-color: var(--border-strong); }
.cp-search .input:focus { border-color: var(--hue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 25%, transparent); }
/* z-index: above the input's backdrop-filter layer */
.cp-search > .icon-sm { position: absolute; z-index: 1; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.cp-search-key { position: absolute; z-index: 1; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text-faint); font-family: var(--font-mono); font-size: .72rem; pointer-events: none; }
.cp-search:focus-within .cp-search-key { display: none; }

.cp-board { width: 330px; margin: 0; padding: 16px 18px 12px; border-radius: 18px; background: var(--board); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); color: var(--board-text); font-family: var(--font-mono); }
.cp-board-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px dashed rgba(255, 255, 255, .14); font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--board-faint); }
.cp-board-dots { display: inline-flex; gap: 4px; }
.cp-board-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--board-ink); opacity: .25; animation: cp-dot 1.8s infinite; }
.cp-board-dots i:nth-child(2) { animation-delay: .3s; } .cp-board-dots i:nth-child(3) { animation-delay: .6s; }
@keyframes cp-dot { 30% { opacity: 1; } 60% { opacity: .25; } }
.cp-board-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cp-board-row:last-of-type { border-bottom: 0; }
.cp-board-row dt { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cp-board-row dd { margin: 0; }
.flaps { display: inline-flex; gap: 3px; perspective: 300px; }
.flap { position: relative; display: inline-grid; place-items: center; width: 26px; height: 34px; border-radius: 5px; background: linear-gradient(180deg, var(--board-2) 0 50%, #16152a 50%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .04); color: var(--board-ink); font-size: 1.12rem; font-weight: 700; line-height: 1; animation: cp-flap .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
.flap-dim { color: var(--board-faint); }
.is-go .flap:not(.flap-dim) { color: #4be3a0; }
.is-stop .flap { color: #ff7a8a; }
.is-mine .flap { color: color-mix(in srgb, var(--hue) 70%, #fff); }
@keyframes cp-flap { from { transform: rotateX(-90deg); opacity: 0; } }
.cp-board-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px -6px 0; padding: 9px; border-radius: 10px; font-family: var(--font-sans); font-size: .82rem; font-weight: 650; color: var(--board-ink); text-decoration: none !important; background: rgba(255, 255, 255, .04); }
.cp-board-link:hover { background: rgba(255, 255, 255, .08); }

/* About + how to apply */
.cp-body { padding-top: 40px; }
.cp-brief { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; margin-bottom: 56px; }
.cp-about, .cp-route { position: relative; padding: 26px 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.cp-about::before { content: ""; position: absolute; left: 28px; top: -1px; width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--hue); }
.cp-label { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.cp-about-text { white-space: pre-wrap; font-size: 1.02rem; line-height: 1.7; }
/* Only one of About / featured application: it takes the full width. */
.cp-brief.no-about, .cp-brief.no-feature { grid-template-columns: minmax(0, 1fr); }
/* Featured application: the owner's pick, or the first open application. */
.cp-brief:not(.no-about):not(.no-feature) { align-items: start; }
.cp-route.cp-feature { --tile-accent: var(--hue); padding: 18px 20px; border-color: color-mix(in srgb, var(--hue) 40%, var(--border)); background: radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--hue) 12%, transparent), transparent 70%), var(--surface); }
.cp-feature::before { content: ""; position: absolute; left: 20px; top: -1px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--hue); }
.cp-feature .cp-label { margin-bottom: 12px; }
.cp-feature .cp-label .icon-sm { color: var(--hue); }
.cp-feature-id { display: flex; align-items: center; gap: 12px; }
.cp-feature-id .cp-tile-logo { margin-top: 0; width: 42px; height: 42px; border-radius: 12px; border-width: 2px; border-color: var(--surface-2); box-shadow: none; }
.cp-feature-id .btn { flex: none; }
.cp-feature-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 3px; overflow-wrap: anywhere; }
.cp-feature-name a { color: inherit; text-decoration: none; }
.cp-feature-name a:hover { text-decoration: underline; text-decoration-color: var(--hue); }
.cp-feature .cp-tile-meta { font-size: .76rem; gap: 8px; }
.cp-feature-desc { margin: 12px 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-feature .cp-mine { margin: 10px 0 0; }
/* "How to apply": a route across the page, under the applications. */
.cp-howto { position: relative; margin-top: 56px; padding: 26px 28px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.cp-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cp-steps::before { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; border-top: 2px dashed var(--border-strong); }
.cp-steps li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; align-content: start; }
.cp-steps li > div { padding-right: 8px; }
.cp-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--hue) 55%, var(--border)); color: var(--hue); font-family: var(--font-mono); font-size: .84rem; font-weight: 700; }
.cp-steps li:first-child .cp-step-n { background: var(--hue); border-color: var(--hue); color: var(--bg-deep); }
.cp-steps strong { display: block; font-size: .95rem; font-weight: 650; line-height: 1.3; }
.cp-steps li span:not(.cp-step-n) { display: block; font-size: .84rem; color: var(--text-muted); margin-top: 2px; }

.cp-apps-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 4px; scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
.cp-apps-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.05em; margin: 0; }

@media (max-width: 900px) {
  .cp-hero { padding: 44px 0 36px; }
  .cp-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cp-board { width: 100%; }
  .cp-brief { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .cp-hero-logo.community-logo { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 16px; }
  .cp-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .cp-about, .cp-route { padding: 22px 20px; }
  .cp-about::before { left: 20px; }
  .cp-hero-search .btn { display: none; } /* Enter / the keyboard's search key submits */
  .cp-search-key { display: none; }
  .cp-howto { margin-top: 40px; padding: 22px 20px; }
  .cp-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cp-steps::before { left: 15px; right: auto; top: 16px; bottom: 16px; border-top: 0; border-left: 2px dashed var(--border-strong); }
  .cp-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .cp-steps strong { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) { .flap, .cp-board-dots i, .cp-eyebrow.is-go::before { animation: none; } }

.cp-toolbar { position: sticky; top: var(--header-h, 72px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 0; margin-bottom: 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.cp-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; padding: 3px; }
.cp-cats::-webkit-scrollbar { display: none; }
.cp-cat { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .86rem; font-weight: 600; text-decoration: none !important; transition: border-color .15s, color .15s, background .15s; }
.cp-cat:hover { color: var(--text); border-color: var(--border-strong); }
.cp-cat.is-active { color: var(--text); border-color: var(--hue); background: color-mix(in srgb, var(--hue) 15%, var(--surface)); }
.cp-cat:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
.cp-count { display: inline-grid; place-items: center; min-width: 22px; height: 19px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); font-size: .72rem; font-weight: 700; font-family: var(--font-sans); letter-spacing: 0; }
.cp-cat.is-active .cp-count { background: var(--hue); color: #fff; }
.cp-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cp-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.cp-toggle input { accent-color: var(--hue); }
.cp-view { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cp-view .btn { border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); box-shadow: none; height: 30px; width: 32px; }
.cp-view .btn:active { transform: none; }
.cp-view .btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

.cp-section { margin-bottom: 34px; scroll-margin-top: calc(var(--header-h, 72px) + 70px); }
/* Grid view: small gates share a row (each sized by its tile count, --n ≤ 3) instead of one lonely tile per line. */
.cp-forms[data-view="grid"] { display: flex; flex-wrap: wrap; gap: 0 20px; }
.cp-forms[data-view="grid"] .cp-section { flex: 1 1 calc(var(--n, 1) * 300px + (var(--n, 1) - 1) * 20px); min-width: min(100%, 290px); }
.cp-forms[data-view="grid"] .cp-nomatch { flex-basis: 100%; }
/* Equal-height heads so tickets in neighbouring gates line up. */
@media (min-width: 700px) {
  .cp-forms[data-view="grid"] .cp-section-head { align-items: flex-start; min-height: 82px; }
  .cp-forms[data-view="grid"] .cp-section-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.cp-section-head { display: flex; align-items: center; gap: 14px; margin: 10px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cp-gate { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--board); border: 1px solid rgba(255, 255, 255, .08); color: var(--accent); }
.cp-gate .icon { width: 24px; height: 24px; }
.cp-section-logo { width: 40px; height: 40px; }
.cp-section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.04em; margin: 0; }
.cp-section-desc { margin-top: 3px; }
.cp-kind { font-weight: 650; }

/* Form tiles are application passes: banner, details, then a perforated tear line above the Apply stub. */
.cp-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cp-tile { --tile-accent: var(--accent, var(--primary)); --notch: 11px; --tear: 72px; position: relative; transition: transform .3s var(--ease); }
.cp-tile:hover { transform: translateY(-5px) rotate(-.6deg); }
.cp-tile-in { height: 100%; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .3s; }
.cp-tile:hover .cp-tile-in, .cp-tile:hover .cp-tile-in::before, .cp-tile:hover .cp-tile-in::after { border-color: var(--tile-accent); }
.cp-tile:hover .cp-tile-in { box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--tile-accent) 55%, transparent); }
.cp-tile.is-closed { opacity: .7; }
.cp-tile.is-closed:hover { transform: none; }
.cp-tile-banner { position: relative; height: 108px; border-radius: 21px 21px 0 0; background-size: var(--banner-size, cover); background-position: var(--banner-pos, center); background-repeat: no-repeat; background-color: var(--surface-2); overflow: hidden; }
.cp-tile-banner.is-fallback { background-image: linear-gradient(125deg, var(--tile-accent) 0%, color-mix(in srgb, var(--tile-accent) 40%, var(--violet)) 70%, color-mix(in srgb, var(--pink) 60%, var(--tile-accent))); }
.cp-tile-banner.is-fallback::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 160px at 15% 0%, rgba(255, 255, 255, .28), transparent 60%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 13px); }
.cp-tile-state { position: absolute; right: 12px; top: 12px; z-index: 2; }
.cp-tile-state .badge { background: color-mix(in srgb, var(--bg-deep) 75%, transparent); backdrop-filter: blur(8px); }
.cp-tile-body { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 18px; flex: 1; }
.cp-tile-logo { width: 58px; height: 58px; margin-top: -29px; border-radius: 16px; border: 4px solid var(--surface); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; position: relative; z-index: 1; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.cp-tile-logo .community-logo { width: 100%; height: 100%; border-radius: 0; }
.cp-tile-icon { color: #fff; background: var(--tile-accent); }
.cp-tile-text { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-tile-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.cp-tile-title a { color: inherit; text-decoration: none; }
.cp-tile-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is clickable */
.cp-tile-title a:focus-visible { outline: none; }
.cp-tile:has(.cp-tile-title a:focus-visible) { outline: 3px solid var(--tile-accent); outline-offset: 3px; }
.cp-tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8rem; color: var(--text-muted); }
.cp-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.cp-mine { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.cp-mine, .cp-mine a, .cp-tile-foot .btn { position: relative; z-index: 2; }
.cp-tile-foot { height: var(--tear); padding: 0 20px; display: flex; align-items: center; gap: 12px; border-top: 2px dashed var(--border-strong); margin: 0 calc(var(--notch) + 2px); padding-inline: calc(20px - var(--notch) - 2px); }
.cp-tile-foot .btn { flex: 1; justify-content: center; }
.cp-tile-foot .barcode { height: 30px; width: 54px; flex: none; opacity: .3; }

/* List view: compact rows, no banner, no tear. */
.cp-forms[data-view="list"] .cp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cp-forms[data-view="list"] .cp-tile-in { flex-direction: row; align-items: center; border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--tile-accent); }
.cp-forms[data-view="list"] .cp-tile-in::before, .cp-forms[data-view="list"] .cp-tile-in::after { display: none; }
.cp-forms[data-view="list"] .cp-tile:hover { transform: translateX(3px); }
.cp-forms[data-view="list"] .cp-tile-banner { display: none; }
.cp-forms[data-view="list"] .cp-tile-body { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; }
.cp-forms[data-view="list"] .cp-tile-logo { margin-top: 0; width: 46px; height: 46px; border-radius: 13px; border-width: 0; box-shadow: none; }
.cp-forms[data-view="list"] .cp-tile-text { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cp-forms[data-view="list"] .cp-mine { flex-basis: 100%; }
.cp-forms[data-view="list"] .cp-tile-foot { height: auto; border: 0; margin: 0; padding: 0 16px 0 0; }
.cp-forms[data-view="list"] .cp-tile-foot .btn { flex: none; }
.cp-forms[data-view="list"] .cp-tile-foot .barcode, .cp-forms[data-view="list"] .cp-tile-state { display: none; }
.cp-nomatch { margin-bottom: 24px; }
@media (max-width: 700px) {
  .cp-toolbar { position: static; }
  .cp-tools { width: 100%; margin-left: 0; justify-content: flex-end; }
  .cp-forms[data-view="list"] .cp-tile-in { flex-wrap: wrap; }
  .cp-forms[data-view="list"] .cp-tile-body { flex-basis: 100%; padding-bottom: 8px; }
  .cp-forms[data-view="list"] .cp-tile-foot { flex-basis: 100%; padding: 0 16px 14px 20px; }
  .cp-forms[data-view="list"] .cp-tile-foot .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cp-tile, .cp-cat { transition: none; } .cp-tile:hover { transform: none; } }
.public-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 28px 0 12px; }
.form-category-desc { margin: -6px 0 12px; }

/* ---------- Apply form ---------- */
.apply-title { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; margin: 0 0 18px; }
.apply-progress { position: sticky; top: calc(var(--header-h) + 8px); z-index: 6; display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .82rem; color: var(--text-muted); }
.apply-progress .meter { flex: 1; height: 8px; }
.apply-progress .meter > span { background: linear-gradient(90deg, var(--hue), color-mix(in srgb, var(--hue) 50%, var(--pink))); animation: none; }
.apply-progress strong { color: var(--text); font-variant-numeric: tabular-nums; }
.apply-progress.is-complete .meter > span { background: var(--green); }
.apply-card { position: relative; padding: 8px 30px 28px; counter-reset: q; }
@media (max-width: 620px) { .apply-card { padding: 4px 18px 20px; } }
.apply-card .q { position: relative; margin-bottom: 0; padding: 24px 0 24px 48px; border-bottom: 1px solid var(--border); }
.apply-card .q:not(.q-section) { counter-increment: q; }
.apply-card .q:not(.q-section)::before { content: counter(q); position: absolute; left: 0; top: 24px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); transition: background .2s, color .2s, border-color .2s; }
.apply-card .q:not(.q-section):focus-within::before { background: var(--hue); color: #fff; border-color: transparent; }
.apply-card .q.is-answered:not(.q-section)::before { content: "✓"; background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.apply-card .q.is-invalid::before { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
@media (max-width: 620px) { .apply-card .q { padding-left: 0; } .apply-card .q:not(.q-section)::before { position: static; display: inline-grid; margin-bottom: 10px; } }
.apply-card .q-label { display: block; font-weight: 650; margin-bottom: 4px; font-size: 1.04rem; padding: 0; }
.apply-card .q:focus-within .q-label { color: var(--text); }
.apply-card .q-help { color: var(--text-muted); font-size: .86rem; margin-bottom: 12px; }
.apply-card .req { color: var(--pink); margin-left: 4px; }
.apply-card .input, .apply-card .textarea { width: 100%; }
.apply-card .check:last-child { margin-bottom: 0; }
.apply-card > .row-between { margin-top: 26px; flex-wrap: wrap; gap: 12px; }
.q-section { margin: 24px 0 0; padding: 28px 0 10px !important; border-bottom: 0 !important; }
.q-section:first-child { margin-top: 0; }
.q-section h2 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.035em; display: flex; align-items: center; gap: 10px; }
.q-section h2::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--hue); transform: rotate(45deg); flex: none; }
.q[hidden] { display: none; }
.rules-box { max-height: 260px; overflow-y: auto; white-space: pre-wrap; padding: 14px 16px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 12px; font-size: .9rem; margin-bottom: 10px; }
.autosave { font-size: .8rem; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; }
.signin-gate { text-align: center; padding: 34px 26px; background: radial-gradient(500px 200px at 50% 0%, color-mix(in srgb, var(--discord) 22%, transparent), transparent 70%), var(--surface); }
.signin-gate .chip-icon { --hue: var(--discord); width: 56px; height: 56px; border-radius: 18px; margin-bottom: 14px; }
.discord-id { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2); }

/* ---------- Applicant portal ---------- */
.status-pass { --tear: 84px; margin: 24px 0 22px; }
.status-pass .pass-top { height: 120px; }
.status-pass .pass-top.has-image { background-image: var(--banner); background-size: var(--banner-size, cover); background-position: var(--banner-pos, center); }
.status-pass .pass-top.has-image::before { background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .35)); }
.status-pass .pass-body { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; padding-bottom: 22px; }
.status-pass .pass-id { flex: 1; min-width: 240px; margin-top: -34px; }
.status-pass .pass-id .community-logo { width: 72px; height: 72px; border-radius: 20px; border: 4px solid var(--surface) !important; background: var(--surface-2) !important; }
.status-pass .pass-name { font-size: clamp(1.25rem, 3vw, 1.7rem); }
.status-pass .stamp { margin: 0 6px 4px auto; }
.status-pass .pass-foot { font-size: .86rem; color: var(--text-muted); }
@media (max-width: 620px) { .status-pass .pass-foot .barcode { display: none; } .status-pass .stamp { margin: 0; } }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.slot { position: relative; display: flex; flex-direction: column; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: .86rem; transition: border-color .15s, background .15s, transform .15s; }
.slot:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.slot:has(input:checked) { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 13%, transparent); }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot-day { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); margin: 16px 0 8px; font-weight: 700; }
.my-app { --hue: var(--accent, var(--primary)); display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.my-app .community-logo, .my-app .monogram { width: 46px; height: 46px; border-radius: 13px; }
.my-app-go { color: var(--text-faint); transition: transform .2s var(--ease); }
.my-app:hover .my-app-go { transform: translateX(3px); color: var(--text); }

/* ---------- Demo community bar (Services\Demo) ---------- */
/* Reuses the striped preview bar, but scrolls away so it never covers the sticky site header. */
.demo-bar { position: relative; z-index: 1; }
.demo-bar .preview-bar-inner { max-width: 1200px; }

/* ---------- Back-to-top arrow (home page; shown by app.js once scrolled) ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s, background .15s, color .15s, border-color .15s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.to-top:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 3px; }
.to-top .icon { width: 20px; height: 20px; }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }