/* Public channels page (/canais, backend/channels-page.mjs), Flicko identity: colours, type, radii and glass come from
   src/flicko-tokens.css (loaded just before this file), light and dark. The only colours set here are the official
   network colours, passed per card as --ch-ink / --ch-ink-dark from src/brand-glyphs.js, and the logo tile behind
   them: white in light, near-black in dark so every official colour keeps >= 3:1 (black marks turn white). */
.ch-body{margin:0;min-height:100vh;background:var(--fk-scene);background-attachment:fixed;color:var(--fk-text);font-family:var(--fk-font-text)}
.ch-defs{position:absolute;width:0;height:0;overflow:hidden}
.ch-header{position:relative;z-index:20}
.ch-main{padding-bottom:96px}
.ch-wrap{max-width:1180px;margin:0 auto;padding-inline:24px;box-sizing:content-box}
.ch-section{padding-top:88px}

/* Hero */
.ch-hero{padding-top:56px;max-width:760px;text-align:center}
.ch-eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fk-text-brand)}
.ch-hero h1{margin:14px 0 0;font-family:var(--fk-font-display);font-weight:800;font-size:clamp(2.25rem,1.4rem + 3vw,4rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.ch-lead{max-width:600px;margin:20px auto 0;font-size:1.0625rem;line-height:1.65;color:var(--fk-text-soft)}
.ch-start{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:560px;margin:32px auto 0}
.ch-error{margin:0}
.ch-hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:22px}
.ch-live{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:.9375rem;font-weight:600;color:var(--fk-text-soft)}
.ch-live-logos{display:inline-flex}
.ch-live-logo{display:grid;place-items:center;width:28px;height:28px;margin-left:-6px;border-radius:9999px;background:#FFFFFF;box-shadow:0 0 0 2px var(--fk-bg),var(--fk-elev-1)}
.ch-live-logo:first-child{margin-left:0}
.ch-live-logo svg{fill:var(--ch-ink)}
.ch-link{font-weight:700;color:var(--fk-text);text-decoration:underline;text-decoration-color:var(--fk-caju);text-decoration-thickness:2px;text-underline-offset:6px}
.ch-link:hover{text-decoration-color:var(--fk-text)}
.ch-link:focus-visible{outline:2px solid var(--fk-focus);outline-offset:3px;border-radius:4px}

/* Section titles */
.ch-section>h2,.ch-cta h2{margin:0;font-family:var(--fk-font-display);font-weight:800;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);letter-spacing:-.025em;line-height:1.1}
.ch-section-lead{max-width:620px;margin:10px 0 0;font-size:1rem;line-height:1.6;color:var(--fk-text-soft)}

/* Live networks */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:28px 0 0;padding:0;list-style:none}
.ch-card,.ch-steps li,.ch-cta-card{background:var(--fk-glass-fill);border:1px solid var(--fk-glass-border);box-shadow:var(--fk-glass-highlight),var(--fk-glass-shadow);-webkit-backdrop-filter:var(--fk-glass-blur);backdrop-filter:var(--fk-glass-blur)}
.ch-card{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--fk-radius-lg)}
.ch-logo{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:16px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(26,16,36,.06),var(--fk-elev-2)}
.ch-logo svg{fill:var(--ch-ink)}
.ch-card-body{min-width:0}
.ch-card h3{margin:2px 0 0;font-family:var(--fk-font-display);font-size:1.1875rem;font-weight:700;line-height:1.25}
.ch-benefit{margin:6px 0 0;font-size:.9375rem;line-height:1.55;color:var(--fk-text-soft)}
.ch-need{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--fk-line)}
.ch-need dt{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fk-text-muted)}
.ch-need dd{margin:4px 0 0;font-size:.875rem;line-height:1.5;color:var(--fk-text)}

/* How it works */
.ch-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:0;list-style:none;counter-reset:ch-step}
.ch-steps li{position:relative;padding:24px;border-radius:var(--fk-radius-lg);counter-increment:ch-step}
.ch-steps li::before{content:counter(ch-step);position:absolute;top:22px;right:24px;font-family:var(--fk-font-display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--fk-line)}
.ch-steps svg{display:block;color:var(--fk-text-brand)}
.ch-steps h3{margin:14px 0 0;font-family:var(--fk-font-display);font-weight:700;font-size:1.125rem;line-height:1.25}
.ch-steps p{margin:8px 0 0;font-size:.9375rem;line-height:1.6;color:var(--fk-text-soft)}

/* Coming soon: monochrome, so they never read as available */
.ch-soon{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.ch-soon-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 14px;border-radius:9999px;background:var(--fk-glass-fill);border:1px dashed var(--fk-line);color:var(--fk-text-soft);font-size:.9375rem;font-weight:600}
.ch-soon-logo{display:grid;place-items:center;color:var(--fk-text-muted)}
.ch-soon-logo svg{fill:currentColor}
.ch-soon-label{padding:3px 9px;border-radius:9999px;background:color-mix(in srgb,var(--fk-caju) 26%,transparent);color:var(--fk-text);font-size:.75rem;font-weight:700}

/* Closing call to action */
.ch-cta{padding-top:96px}
.ch-cta-card{display:flex;flex-direction:column;align-items:center;gap:0;padding:48px 28px;border-radius:var(--fk-radius-xl);text-align:center}
.ch-cta-card>p{max-width:520px;margin:12px 0 0;font-size:1rem;line-height:1.6;color:var(--fk-text-soft)}
.ch-cta-card .ch-start{width:100%;margin-top:24px}
.ch-cta-card .ch-link{margin-top:18px}

/* Dark: the logo tiles go near-black, black marks turn white (brand guidance for dark backgrounds). */
html.dark .ch-logo,html[data-theme=dark] .ch-logo,html.dark .ch-live-logo,html[data-theme=dark] .ch-live-logo{background:#0B0810}
html.dark .ch-logo,html[data-theme=dark] .ch-logo{box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--fk-elev-2)}
html.dark .ch-logo svg,html[data-theme=dark] .ch-logo svg,html.dark .ch-live-logo svg,html[data-theme=dark] .ch-live-logo svg{fill:var(--ch-ink-dark)}

/* Fallback chrome (only when the home header/footer cannot be read) */
.ch-fallback-header{max-width:1180px;margin:0 auto;padding:24px;color:var(--fk-text)}
.ch-fallback-logo{display:inline-flex;color:inherit}
.ch-fallback-footer{display:flex;gap:24px;justify-content:center;padding:40px 24px}

/* The footer is copied from the home (1100 px container); here it follows this page grid (.ch-wrap). */
main:has(.ch-wrap) ~ footer .mx-auto.max-w-\[1100px\]{max-width:1180px;box-sizing:content-box;padding-inline:24px}

@media(max-width:1023px){.ch-steps{grid-template-columns:1fr}}
@media(max-width:680px){.ch-wrap{padding-inline:16px}.ch-section{padding-top:64px}.ch-hero{padding-top:36px}.ch-grid{grid-template-columns:1fr}.ch-card{padding:18px;gap:14px}.ch-logo{width:46px;height:46px;border-radius:14px}.ch-cta{padding-top:72px}.ch-cta-card{padding:36px 18px}}
@media(prefers-reduced-motion:reduce){.ch-link{transition:none}}