/* HockeyMON public showcase. Authentic product imagery and original copy. */
:root {
  --ice: #63dbff;
  --ice-bright: #bcefff;
  --volt: #ccf33f;
  --navy: #07111f;
  --navy-soft: #0d1b2d;
  --navy-raised: #12243a;
  --line: rgba(169, 210, 235, 0.16);
}

html { scroll-behavior: smooth; }
body { background: radial-gradient(circle at 15% -10%, rgba(42, 130, 180, 0.13), transparent 34rem), var(--bg); }

.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; }
.skip-link { position: fixed; z-index: 1000; top: .65rem; left: .65rem; transform: translateY(-160%); padding: .65rem .9rem; border-radius: .5rem; background: #fff; color: #07111f; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.site-header { background: rgba(7, 17, 31, .9); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nav-wrap { max-width: 1280px; min-height: 70px; padding: .75rem 1.5rem; }
.brand { gap: .65rem; }
.brand-badge { position: relative; width: 32px; height: 32px; overflow: hidden; border: 1px solid rgba(99, 219, 255, .5); border-radius: 50%; background: transparent; box-shadow: inset 0 0 15px rgba(99, 219, 255, .1); }
.brand-badge::before, .brand-badge::after { position: absolute; content: ""; }
.brand-badge::before { width: 21px; height: 6px; right: -1px; top: 9px; border-radius: 50%; background: var(--ice); transform: rotate(-20deg); box-shadow: 0 0 13px rgba(99, 219, 255, .72); }
.brand-badge::after { width: 12px; height: 3px; left: 2px; bottom: 8px; border-radius: 100%; background: rgba(255, 255, 255, .82); box-shadow: 5px -5px 0 -1px rgba(255, 255, 255, .4); }
.brand-title { font-size: 1.06rem; font-weight: 900; letter-spacing: -.02em; }
.brand-title span { color: var(--ice); }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { margin-left: 0; color: #b9c7d8; font-size: .88rem; font-weight: 750; }
.nav-links .nav-app-link { color: var(--ice-bright); }
.nav-links .nav-cta { margin-left: -.35rem; padding: .55rem .9rem; color: #06101d; }
.nav-toggle { display: none; }

.site-footer { margin-top: 5rem; border-top: 1px solid var(--line); background: #060e19; }
.footer-grid, .footer-bottom { width: min(100% - 3rem, 1230px); margin-inline: auto; }
.footer-grid { display: grid; grid-template-columns: minmax(260px, 2fr) 1fr 1fr; gap: 5rem; padding: 4.5rem 0 3.25rem; }
.footer-grid h2 { margin: 0 0 1rem; color: #eef8ff; font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; }
.footer-grid > div:not(.footer-brand) a { margin-bottom: .65rem; color: #98aabd; text-decoration: none; }
.footer-grid > div:not(.footer-brand) a:hover { color: var(--ice); }
.footer-brand p { max-width: 390px; margin: 1.15rem 0 1.25rem; color: #8fa0b2; }
.sport-note { color: var(--ice); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-bottom { display: flex; justify-content: space-between; padding: 1.4rem 0 2rem; border-top: 1px solid var(--line); color: #66798e; font-size: .76rem; }

.showcase-page { --accent: var(--ice); --accent-2: var(--ice-bright); background: var(--navy); color: #edf7fc; }
.showcase-page .container { max-width: 1280px; padding: 0 1.5rem; overflow: clip; }
.showcase-page .btn { border-radius: 999px; box-shadow: none; }
.showcase-page .btn.primary { border-color: var(--ice); background: var(--ice); color: #06111f; }
.showcase-page .btn.primary:hover { background: #98e8ff; border-color: #98e8ff; }
.btn-large { padding: .82rem 1.25rem; }
.eyebrow { margin: 0 0 1.05rem; color: var(--ice); font-size: .73rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 23px; height: 1px; margin: 0 .6rem .22rem 0; background: currentColor; }
.showcase-page h1, .showcase-page h2, .showcase-page h3 { color: #f4faff; line-height: 1.03; letter-spacing: -.045em; }
.showcase-page h1 em, .showcase-page h2 em { color: var(--ice); font-style: normal; }
.text-link { color: #d7e7f2; font-weight: 750; text-decoration: none; }
.text-link:hover { color: var(--ice); }
.text-link.strong { color: var(--ice); }

.showcase-hero { position: relative; display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: 3.25rem; min-height: 720px; padding: 5.75rem 0 5rem; }
.showcase-hero::before { position: absolute; z-index: -1; width: 46rem; height: 46rem; left: -30rem; top: -11rem; border: 1px solid rgba(99, 219, 255, .08); border-radius: 50%; content: ""; box-shadow: 0 0 0 8rem rgba(99, 219, 255, .016), 0 0 0 16rem rgba(99, 219, 255, .012); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 620px; margin: 0 0 1.35rem; font-size: clamp(3.4rem, 5.9vw, 6.1rem); font-weight: 900; }
.hero-lede { max-width: 600px; margin: 0; color: #a9bacb; font-size: 1.12rem; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 1.55rem; margin: 2rem 0; }
.play-dot { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; margin-right: .45rem; padding-left: 2px; border: 1px solid rgba(99, 219, 255, .35); border-radius: 50%; color: var(--ice); font-size: .62rem; }
.hero-trust { display: flex; gap: 1.25rem; padding: 1.35rem 0 0; margin: 0; border-top: 1px solid var(--line); color: #8fa2b6; font-size: .76rem; list-style: none; }
.hero-trust span { color: var(--volt); font-weight: 900; }
.hero-visual { position: relative; min-height: 480px; margin-right: -11rem; overflow: hidden; border: 1px solid rgba(99, 219, 255, .24); border-radius: 1.25rem 0 0 1.25rem; background: #02070d; box-shadow: 0 35px 90px rgba(0, 0, 0, .42); }
.hero-visual::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7, 17, 31, .42), transparent 30%), linear-gradient(0deg, rgba(7, 17, 31, .66), transparent 32%); content: ""; }
.hero-visual img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: center; filter: saturate(.74) contrast(1.1) brightness(.9); }
.hero-status, .hero-metric { position: absolute; z-index: 4; border: 1px solid rgba(169, 210, 235, .22); background: rgba(5, 14, 25, .85); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-status { top: 1rem; left: 1rem; padding: .52rem .8rem; border-radius: 999px; color: #c7d6e3; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.live-pulse { display: inline-block; width: 7px; height: 7px; margin-right: .45rem; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 4px rgba(204, 243, 63, .14); }
.hero-metric { right: 12rem; bottom: 1rem; display: flex; align-items: center; gap: .75rem; padding: .7rem .95rem; border-radius: .75rem; }
.hero-metric strong { color: var(--ice); font-size: 1.35rem; line-height: 1; }
.hero-metric span { max-width: 70px; color: #aebdcc; font-size: .62rem; line-height: 1.25; text-transform: uppercase; }
.hero-footnote { position: absolute; right: 0; bottom: 3.3rem; color: #597087; font-size: .62rem; }

.runtime-showcase { padding: 1rem 0 6rem; }
.runtime-heading { display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: 5rem; margin-bottom: 2rem; }
.runtime-heading h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.25rem); }
.runtime-heading > p { max-width: 510px; margin: 0 0 .35rem; color: #91a5b9; line-height: 1.75; }
.runtime-window { margin: 0; overflow: hidden; border: 1px solid rgba(99, 219, 255, .24); border-radius: 1rem; background: #02070d; box-shadow: 0 35px 90px rgba(0, 0, 0, .38); }
.runtime-window img { display: block; width: 100%; height: auto; }
.runtime-window figcaption { display: flex; justify-content: space-between; gap: 2rem; padding: .9rem 1.1rem; border-top: 1px solid rgba(169, 210, 235, .16); color: #8195a9; font-size: .69rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.runtime-window figcaption span:first-child { color: #c7d6e3; }
.runtime-window figcaption i { display: inline-block; width: 7px; height: 7px; margin-right: .45rem; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 4px rgba(204, 243, 63, .12); }

.proof-strip { display: flex; align-items: center; min-height: 82px; gap: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-strip p { flex: 0 0 auto; margin: 0; color: #778a9f; font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.proof-strip ul { display: flex; justify-content: space-between; flex: 1; padding: 0; margin: 0; list-style: none; }
.proof-strip li { color: #aebdcc; font-size: .84rem; font-weight: 750; }
.proof-strip li:not(:last-child)::after { padding-left: 2.2rem; color: #30445b; content: "/"; }
.showcase-section { padding: 7rem 0; }
.section-heading h2, .feature-copy h2, .audience-copy h2, .guide-callout h2, .open-source-banner h2, .download-help h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.25rem); }
.split-heading { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 6rem; margin-bottom: 3.5rem; }
.split-heading > p { max-width: 470px; margin: 0 0 .35rem; color: #91a5b9; line-height: 1.75; }

.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.workflow-grid li { position: relative; min-height: 295px; padding: 1.15rem 1.3rem 1.35rem; border-right: 1px solid var(--line); }
.workflow-grid li:first-child { border-left: 1px solid var(--line); }
.workflow-grid li:hover { background: rgba(99, 219, 255, .035); }
.step-number { color: #597087; font-size: .63rem; font-weight: 900; letter-spacing: .12em; }
.step-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 2.2rem 0 1.5rem; border: 1px solid rgba(99, 219, 255, .28); border-radius: 50%; color: var(--ice); font-size: .84rem; }
.panorama-icon { font-size: 1.35rem; }
.workflow-grid h3 { margin: 0 0 .7rem; font-size: 1.25rem; }
.workflow-grid p { margin: 0; color: #8296a9; font-size: .85rem; line-height: 1.6; }
.workflow-grid a { position: absolute; bottom: 1.35rem; left: 1.3rem; color: var(--ice); font-size: .71rem; font-weight: 800; text-decoration: none; }

.feature-story { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 5rem; padding: 6rem 0; border-top: 1px solid var(--line); }
.feature-media, .project-detail-media { position: relative; overflow: hidden; border: 1px solid rgba(99, 219, 255, .16); border-radius: 1rem; background: #02070c; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.feature-media video, .project-detail-media video, .project-detail-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-media { aspect-ratio: 16 / 9; }
.feature-media video { filter: contrast(1.08) saturate(.85); }
.media-label { position: absolute; left: 1rem; bottom: 1rem; padding: .48rem .75rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(5, 14, 25, .82); color: #c8d8e5; font-size: .64rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media-label i { display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: var(--volt); }
.feature-copy > p:not(.eyebrow), .audience-copy > p:not(.eyebrow) { color: #91a5b9; line-height: 1.75; }
.check-list { padding: 0; margin: 1.6rem 0 1.8rem; list-style: none; }
.check-list li { position: relative; padding: .6rem 0 .6rem 1.7rem; border-bottom: 1px solid rgba(169, 210, 235, .1); color: #bdcbd7; font-size: .9rem; }
.check-list li::before { position: absolute; left: 0; color: var(--volt); font-weight: 900; content: "✓"; }

.audience-section { display: grid; grid-template-columns: .64fr 1.36fr; gap: 5rem; border-top: 1px solid var(--line); }
.audience-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.audience-cards article { min-height: 300px; padding: 1.5rem; border: 1px solid var(--line); border-radius: .8rem; background: linear-gradient(155deg, rgba(19, 40, 64, .78), rgba(10, 23, 39, .66)); }
.sport-symbol { position: relative; display: block; width: 48px; height: 48px; margin-bottom: 3.25rem; border: 1px solid rgba(99, 219, 255, .3); border-radius: 50%; }
.sport-symbol::before, .sport-symbol::after { position: absolute; content: ""; }
.hockey-symbol::before { width: 25px; height: 4px; left: 11px; top: 22px; border-radius: 50%; background: var(--ice); transform: rotate(-18deg); }
.hockey-symbol::after { width: 7px; height: 7px; right: 8px; bottom: 7px; border: 1px solid var(--volt); border-radius: 50%; }
.field-symbol::before { inset: 9px; border: 1px solid var(--ice); border-radius: 50%; }
.field-symbol::after { width: 1px; height: 28px; left: 23px; top: 9px; background: rgba(99, 219, 255, .55); }
.parent-symbol::before { width: 12px; height: 12px; left: 17px; top: 8px; border: 1px solid var(--ice); border-radius: 50%; }
.parent-symbol::after { width: 25px; height: 14px; left: 10px; top: 25px; border: 1px solid var(--ice); border-radius: 15px 15px 3px 3px; }
.card-kicker { margin: 0 0 .35rem; color: var(--ice); font-size: .61rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.audience-cards h3 { margin: 0 0 .75rem; font-size: 1.32rem; }
.audience-cards article > p:last-child { margin: 0; color: #8396a9; font-size: .82rem; line-height: 1.65; }

.guide-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem 5rem; align-items: end; padding: 6rem; margin: 1rem -3.75rem 7rem; border: 1px solid rgba(99, 219, 255, .16); border-radius: 1rem; background: linear-gradient(135deg, #10243b, #0b1829 70%); }
.guide-callout > div:first-child > p:last-child { max-width: 620px; color: #91a5b9; line-height: 1.75; }
.guide-callout > a { justify-self: start; }

.open-source-banner { display: flex; align-items: end; justify-content: space-between; gap: 4rem; padding: 4.25rem; margin-bottom: 6rem; border-radius: 1rem; background: var(--ice); color: #06111f; }
.open-source-banner .eyebrow { color: #0b5c76; }
.open-source-banner h2 { color: #06111f; }
.open-source-banner p:last-child { max-width: 690px; margin-bottom: 0; color: #15475a; }
.banner-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 1.25rem; }
.btn.light { border-color: #06111f; background: #06111f; color: white; }
.light-link { color: #082636; }
.light-link:hover { color: #000; }

/* Inner showcase pages */
.inner-hero { max-width: 1050px; padding: 7rem 0 5rem; }
.inner-hero h1 { margin: 0 0 1.5rem; font-size: clamp(3.25rem, 6vw, 6rem); font-weight: 900; }
.inner-hero > p:not(.eyebrow) { max-width: 720px; color: #9aabba; font-size: 1.12rem; line-height: 1.72; }
.inner-hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.project-jump-nav { position: sticky; z-index: 30; top: 70px; display: flex; gap: 0; padding: 0; overflow-x: auto; border: 1px solid var(--line); background: rgba(7, 17, 31, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.project-jump-nav a { flex: 1 0 auto; padding: .85rem 1rem; border-right: 1px solid var(--line); color: #91a5b9; font-size: .74rem; font-weight: 800; text-align: center; text-decoration: none; }
.project-jump-nav a:hover { background: rgba(99, 219, 255, .06); color: var(--ice); }

.project-detail { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 5rem; min-height: 700px; padding: 6.5rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.project-detail.reverse { grid-template-columns: 1.14fr .86fr; }
.project-detail.reverse .project-detail-copy { order: 2; }
.project-detail.reverse .project-detail-media, .project-detail.reverse .web-product-card { order: 1; }
.project-heading-row { display: flex; align-items: flex-start; gap: 1.2rem; }
.project-index { color: var(--ice); font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.project-role { margin: 0 0 .3rem; color: var(--ice); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.project-heading-row h2 { margin: 0; font-size: clamp(2.6rem, 4vw, 4rem); }
.project-summary { margin: 1.5rem 0 0; color: #9cadbd; font-size: 1rem; line-height: 1.75; }
.check-list.compact { margin: 1.3rem 0; }
.check-list.compact li { padding-top: .42rem; padding-bottom: .42rem; font-size: .82rem; }
.tech-row, .platform-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.3rem 0; }
.tech-row span, .platform-chips span { padding: .3rem .55rem; border: 1px solid rgba(99, 219, 255, .2); border-radius: 999px; color: #8ca4b7; font-size: .63rem; font-weight: 750; }
.project-actions, .download-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.project-actions .btn { padding: .68rem 1rem; }
.project-actions .text-link { font-size: .8rem; }
.printable-feature-link { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .9rem 1rem; margin: 1.3rem 0; border: 1px solid rgba(204, 243, 63, .22); border-radius: .6rem; background: linear-gradient(100deg, rgba(204, 243, 63, .055), rgba(99, 219, 255, .035)); text-decoration: none; }
.printable-feature-link:hover { border-color: rgba(204, 243, 63, .48); background: linear-gradient(100deg, rgba(204, 243, 63, .09), rgba(99, 219, 255, .055)); }
.printable-feature-link > span { display: flex; flex-direction: column; width: 100%; min-width: 0; color: #8297aa; font-size: .67rem; line-height: 1.45; }
.printable-feature-link b { margin-bottom: .12rem; color: #dce8c3; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.printable-feature-link strong { flex: 0 0 auto; color: var(--volt); font-size: .68rem; white-space: nowrap; }
.fine-print { color: #60758b; font-size: .66rem; }
.project-detail-media { min-height: 390px; }
.tracking-media { aspect-ratio: 16 / 9; min-height: 0; }
.desktop-media { min-height: 0; padding: 1.25rem .75rem .75rem; border-radius: .75rem; background: #dfe4e8; }
.desktop-media img { border: 1px solid #aab3bb; object-fit: contain; }
.window-dots { position: absolute; top: .55rem; left: .75rem; display: flex; gap: .3rem; }
.window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #9aa4ac; }
.window-dots span:first-child { background: #f26e66; }
.window-dots span:nth-child(2) { background: #e7b94f; }
.window-dots span:nth-child(3) { background: #5fbd79; }
.remote-media { display: flex; align-items: center; justify-content: center; min-height: 500px; background: radial-gradient(circle at 50% 42%, rgba(99, 219, 255, .16), transparent 40%), repeating-linear-gradient(90deg, transparent 0 59px, rgba(99, 219, 255, .035) 60px), repeating-linear-gradient(0deg, transparent 0 59px, rgba(99, 219, 255, .035) 60px), #081523; }
.remote-media > img { width: 44%; height: auto; object-fit: contain; border: 8px solid #02070c; border-radius: 1.6rem; box-shadow: 0 24px 55px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .12); }
.media-note { position: absolute; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; max-width: 165px; padding: .8rem; border: 1px solid var(--line); border-radius: .6rem; background: rgba(4, 12, 22, .88); }
.media-note strong { color: var(--ice); font-size: .8rem; }
.media-note span { color: #8297aa; font-size: .67rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.5rem 0 .3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-row > div { padding: 1rem .8rem; border-right: 1px solid var(--line); }
.stat-row > div:last-child { border-right: 0; }
.stat-row strong { display: block; color: var(--ice); font-size: 1.65rem; line-height: 1; }
.stat-row span { display: block; margin-top: .45rem; color: #8296a9; font-size: .61rem; line-height: 1.35; }
.project-detail-web { border-bottom: 0; }
.web-product-card { padding: 1.4rem; border: 1px solid rgba(99, 219, 255, .2); border-radius: 1rem; background: linear-gradient(145deg, #122942, #0b192a); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.mini-scoreboard { padding: 2.2rem; border-radius: .65rem; background: #07101b; text-align: center; }
.mini-scoreboard > span { color: #758da1; font-size: .63rem; font-weight: 900; letter-spacing: .1em; }
.mini-scoreboard > div { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1rem; }
.mini-scoreboard b { width: 55px; color: #b9ccda; font-size: .8rem; }
.mini-scoreboard strong { color: white; font-size: 3rem; line-height: 1; }
.mini-scoreboard i { color: #4b6074; font-style: normal; }
.mini-stats { margin-top: 1rem; }
.mini-stats > div { display: grid; grid-template-columns: 1fr 50px 50px; padding: .7rem; border-bottom: 1px solid var(--line); color: #99acbc; font-size: .74rem; }
.mini-stats strong { color: var(--ice); text-align: right; }
.mini-stats em { color: #b9c8d4; font-style: normal; text-align: right; }
.web-product-card > p { margin: 1rem 0 0; color: #758b9e; font-size: .65rem; text-align: right; }
.compact-banner { margin-top: 2rem; }

/* Guides */
.guide-hero { max-width: 1150px; }
.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 5rem; padding-bottom: 3rem; }
.guide-sidebar { position: relative; }
.guide-sidebar nav { position: sticky; top: 105px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.guide-sidebar nav > p { margin: 0 0 .75rem 1rem; color: #5d7388; font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.guide-sidebar nav a { padding: .58rem 1rem; border-left: 1px solid transparent; color: #8296a9; font-size: .77rem; font-weight: 750; text-decoration: none; }
.guide-sidebar nav a:hover { margin-left: -1px; border-left-color: var(--ice); color: var(--ice); }
.guide-sidebar nav a span { display: inline-block; width: 25px; color: #496077; font-family: ui-monospace, monospace; font-size: .62rem; }
.guide-help { margin-top: 2.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; }
.guide-help strong { font-size: .75rem; }
.guide-help p { color: #71869a; font-size: .7rem; }
.guide-help a { color: var(--ice); font-size: .7rem; font-weight: 800; text-decoration: none; }
.guide-intro-card { padding: 1.25rem 1.4rem; border: 1px solid rgba(204, 243, 63, .2); border-left: 3px solid var(--volt); border-radius: .45rem; background: rgba(204, 243, 63, .035); }
.guide-intro-card strong { color: var(--volt); font-size: .76rem; }
.guide-intro-card p { margin: .35rem 0 0; color: #92a6b8; font-size: .8rem; line-height: 1.6; }
.guide-step { display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; padding: 5rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.guide-step-number { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid rgba(99, 219, 255, .3); border-radius: 50%; color: var(--ice); font-family: ui-monospace, monospace; font-size: .7rem; }
.guide-step h2 { margin: 0 0 1rem; font-size: clamp(2rem, 3.5vw, 3.35rem); }
.guide-step > div:last-child > p { color: #96a8b9; line-height: 1.75; }
.guide-step code { padding: .08rem .28rem; border-radius: .2rem; background: rgba(99, 219, 255, .08); color: #c7ecf8; font-size: .85em; }
.tip-card { display: flex; flex-direction: column; padding: 1.1rem 1.25rem; margin: 1.4rem 0; border-left: 2px solid var(--ice); background: rgba(99, 219, 255, .04); }
.tip-card strong { color: var(--ice-bright); font-size: .82rem; }
.tip-card span { margin-top: .25rem; color: #8297aa; font-size: .76rem; }
.plain-checks { padding: 0; margin: 1.25rem 0; list-style: none; }
.plain-checks li { position: relative; padding: .38rem 0 .38rem 1.35rem; color: #9eb0bf; font-size: .82rem; }
.plain-checks li::before { position: absolute; left: 0; color: var(--volt); content: "✓"; }
.code-block { margin: 1.5rem 0; overflow: hidden; border: 1px solid rgba(99, 219, 255, .15); border-radius: .55rem; background: #050d17; }
.code-block > div { display: flex; justify-content: space-between; padding: .55rem .8rem; border-bottom: 1px solid rgba(99, 219, 255, .1); color: #5f7589; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.code-block button { padding: 0; border: 0; background: transparent; color: var(--ice); font: inherit; }
.code-block pre { padding: 1rem 1.2rem 1.2rem; margin: 0; overflow-x: auto; }
.code-block pre code { padding: 0; background: transparent; color: #c8d8e4; font-size: .76rem; line-height: 1.75; }
.print-kit-card { padding: 1.3rem; margin: 1.7rem 0; border: 1px solid rgba(204, 243, 63, .2); border-radius: .65rem; background: linear-gradient(145deg, rgba(204, 243, 63, .045), rgba(99, 219, 255, .035)); }
.print-kit-card h3 { margin: .25rem 0 .55rem; font-size: 1.3rem; letter-spacing: -.02em; }
.print-kit-card > div:first-child > p:last-child { margin: 0; color: #8ea2b4; font-size: .78rem; line-height: 1.65; }
.model-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.model-chip-row span { padding: .28rem .5rem; border: 1px solid rgba(204, 243, 63, .18); border-radius: 999px; color: #b8c6a4; font-size: .61rem; font-weight: 750; }
.compact-code-block { margin: 1rem 0; }
.print-kit-card > .btn { padding: .65rem .9rem; }
.file-tree { padding: 1.15rem 1.3rem; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: .55rem; background: #091422; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.file-tree p { margin: .45rem 0; color: #b8c8d6; font-size: .74rem; }
.file-tree p span { display: inline-block; width: 18px; color: var(--ice); }
.file-tree .level-1 { padding-left: 1.2rem; }
.file-tree .level-2 { padding-left: 2.4rem; }
.file-tree .level-3 { padding-left: 3.6rem; color: #8297a9; }
.file-tree i { margin-left: .8rem; color: #526a80; font-style: normal; }
.platform-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1.5rem 0; }
.platform-options a { display: flex; flex-direction: column; padding: .9rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(99, 219, 255, .025); text-decoration: none; }
.platform-options a:hover { border-color: rgba(99, 219, 255, .45); background: rgba(99, 219, 255, .05); }
.platform-options strong { color: #d9e8f2; font-size: .72rem; }
.platform-options span { margin-top: .35rem; color: var(--ice); font-size: .66rem; }
.guide-finish { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem; margin-top: 1.6rem; border: 1px solid rgba(204, 243, 63, .2); border-radius: .6rem; background: rgba(204, 243, 63, .035); }
.guide-finish > div:first-child { display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; border-radius: 50%; background: var(--volt); color: #07111f; font-weight: 900; }
.guide-finish strong { color: #eaf4f8; font-size: .82rem; }
.guide-finish p { margin: .2rem 0 0; color: #7e93a6; font-size: .7rem; }

/* Downloads */
.featured-download { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4rem; padding: 3.5rem; margin-bottom: 5rem; border: 1px solid rgba(99, 219, 255, .22); border-radius: 1rem; background: linear-gradient(145deg, #11283f, #091726); }
.featured-download > * { min-width: 0; }
.release-badge { display: inline-flex; align-items: center; padding: .4rem .65rem; margin-bottom: 1.4rem; border: 1px solid rgba(204, 243, 63, .25); border-radius: 999px; color: var(--volt); font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.release-badge i { width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: var(--volt); }
.featured-download h2 { margin: 0; font-size: clamp(3rem, 5vw, 5rem); }
.featured-download h2 em { color: var(--ice); font-size: .42em; font-style: normal; letter-spacing: -.02em; }
.featured-download > div > p:not(.project-role) { color: #9bafc1; line-height: 1.7; }
.featured-download > img { width: 100%; height: auto; border: 7px solid #d9dee3; border-radius: .55rem; box-shadow: 0 25px 55px rgba(0, 0, 0, .28); }
.download-actions .text-link { font-size: .76rem; }
.release-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.release-card { position: relative; min-height: 390px; padding: 1.7rem; border: 1px solid var(--line); border-radius: .8rem; background: linear-gradient(145deg, rgba(18, 36, 58, .74), rgba(10, 22, 38, .68)); }
.release-card-top { display: flex; justify-content: space-between; margin-bottom: 2.4rem; }
.release-state { padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: #8195a7; font-size: .57rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.release-state.available { border-color: rgba(204, 243, 63, .2); color: var(--volt); }
.release-state.source { border-color: rgba(99, 219, 255, .25); color: var(--ice); }
.release-state.restricted { color: #f0bc7b; border-color: rgba(240, 188, 123, .22); }
.release-card h2 { margin: 0 0 .8rem; font-size: 2.15rem; }
.release-card > p:not(.project-role):not(.fine-print) { min-height: 55px; color: #8fa3b5; font-size: .82rem; line-height: 1.6; }
.release-card dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 1.3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.release-card dl > div { padding: .8rem 0; }
.release-card dt { color: #5c7186; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.release-card dd { margin: .25rem 0 0; color: #c2d1dd; font-size: .72rem; }
.release-links { display: flex; align-items: center; gap: 1rem; }
.release-links .btn { padding: .6rem .85rem; font-size: .75rem; }
.release-links > a:not(.btn) { color: var(--ice); font-size: .72rem; font-weight: 800; text-decoration: none; }
.printable-download { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; margin: -0.2rem 0 1rem; border: 1px solid rgba(204, 243, 63, .2); border-radius: .5rem; background: rgba(204, 243, 63, .035); text-decoration: none; }
.printable-download:hover { border-color: rgba(204, 243, 63, .45); background: rgba(204, 243, 63, .065); }
.printable-download span { color: #9bae88; font-size: .65rem; }
.printable-download strong { color: var(--volt); font-size: .67rem; white-space: nowrap; }
.download-help { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; padding: 7rem 0; }
.decision-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.decision-list a { display: flex; justify-content: space-between; gap: 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); color: #8fa3b5; font-size: .8rem; text-decoration: none; }
.decision-list a:hover span { color: #dceaf3; }
.decision-list strong { color: var(--ice); font-size: .72rem; white-space: nowrap; }
.integrity-note { display: flex; gap: 1.2rem; padding: 1.3rem; border: 1px solid rgba(99, 219, 255, .15); border-radius: .55rem; background: rgba(99, 219, 255, .035); }
.integrity-note > span { color: var(--ice); font-size: 1.7rem; }
.integrity-note strong { color: #cce0ec; font-size: .8rem; }
.integrity-note p { margin: .2rem 0 0; color: #748a9e; font-size: .72rem; }
.integrity-note code { color: var(--ice); }

@media (max-width: 1100px) {
  .nav-links { gap: 1rem; }
  .showcase-hero { grid-template-columns: .9fr 1.1fr; gap: 2rem; }
  .hero-visual { margin-right: -4rem; }
  .hero-metric { right: 5rem; }
  .workflow-grid, .release-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-grid li { border-bottom: 1px solid var(--line); }
  .workflow-grid li:nth-child(n+3) { border-bottom: 0; }
  .audience-section { grid-template-columns: 1fr; }
  .guide-callout { margin-inline: 0; padding: 4rem; }
  .project-detail, .project-detail.reverse { gap: 3rem; }
  .footer-grid { gap: 3rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; flex-direction: column; gap: 4px; padding: .5rem; margin-left: auto; border: 0; background: transparent; }
  .nav-toggle > span:not(.sr-only) { display: block; width: 21px; height: 2px; border-radius: 2px; background: #c8d6e1; }
  .nav-links { position: absolute; top: 70px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .75rem 1.5rem 1.25rem; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, .98); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: .65rem 0; border-bottom: 1px solid rgba(169, 210, 235, .08); }
  .nav-links .nav-cta { align-self: start; padding: .6rem 1rem; margin: .8rem 0 0; border-bottom: 0; }
  .showcase-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 4.5rem; }
  .hero-copy { max-width: 680px; }
  .hero-visual { min-height: 410px; margin: 1rem -1.5rem 0 2rem; }
  .hero-visual img { min-height: 410px; }
  .hero-footnote { position: static; justify-self: end; }
  .runtime-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  .proof-strip { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.5rem 0; }
  .proof-strip ul { width: 100%; flex-wrap: wrap; gap: .75rem 1.5rem; }
  .proof-strip li:not(:last-child)::after { display: none; }
  .split-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  .feature-story { grid-template-columns: 1fr; gap: 3rem; }
  .audience-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-callout { grid-template-columns: 1fr; }
  .open-source-banner { align-items: flex-start; flex-direction: column; }
  .project-detail, .project-detail.reverse { grid-template-columns: 1fr; min-height: 0; padding: 5rem 0; }
  .project-detail.reverse .project-detail-copy { order: 1; }
  .project-detail.reverse .project-detail-media, .project-detail.reverse .web-product-card { order: 2; }
  .project-detail-media { min-height: 0; }
  .remote-media { min-height: 440px; }
  .guide-layout { grid-template-columns: 1fr; gap: 2rem; }
  .guide-sidebar nav { position: static; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
  .guide-sidebar nav > p { grid-column: 1 / -1; padding: .8rem 1rem 0; margin-left: 0; }
  .guide-sidebar nav a { border-left: 0; }
  .guide-help { display: none; }
  .featured-download { grid-template-columns: 1fr; }
  .download-help { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .nav-wrap { padding-inline: 1rem; }
  .showcase-page .container { padding-inline: 1rem; }
  .hero-copy h1 { font-size: clamp(3.1rem, 15vw, 4.6rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions, .inner-hero-actions, .project-actions, .download-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .printable-feature-link, .printable-download { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .hero-trust { flex-wrap: wrap; gap: .65rem 1rem; }
  .hero-visual { min-height: 310px; margin-left: 0; margin-right: -1rem; border-radius: .8rem 0 0 .8rem; }
  .hero-visual img { min-height: 310px; }
  .hero-metric { display: none; }
  .runtime-showcase { padding-top: 0; padding-bottom: 5rem; }
  .runtime-window { margin-inline: -1rem; border-radius: 0; }
  .runtime-window figcaption { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .showcase-section { padding: 5rem 0; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-grid li, .workflow-grid li:nth-child(n+3) { min-height: 250px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .workflow-grid li:last-child { border-bottom: 0; }
  .audience-cards { grid-template-columns: 1fr; }
  .audience-cards article { min-height: 250px; }
  .sport-symbol { margin-bottom: 2rem; }
  .guide-callout { padding: 2rem 1.25rem; margin-bottom: 5rem; }
  .open-source-banner { padding: 2.25rem 1.4rem; }
  .banner-actions { align-items: flex-start; flex-direction: column; }
  .inner-hero { padding: 5rem 0 3.5rem; }
  .inner-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .project-heading-row h2 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  .project-jump-nav { margin-inline: -1rem; top: 69px; }
  .project-jump-nav a { padding-inline: .8rem; }
  .remote-media { min-height: 370px; }
  .remote-media > img { width: 55%; }
  .stat-row strong { font-size: 1.3rem; }
  .stat-row > div { padding-inline: .45rem; }
  .guide-sidebar nav { grid-template-columns: repeat(2, 1fr); }
  .guide-step { grid-template-columns: 1fr; gap: 1rem; padding: 4rem 0; }
  .platform-options { grid-template-columns: 1fr; }
  .guide-finish { grid-template-columns: 42px 1fr; }
  .guide-finish .btn { grid-column: 1 / -1; justify-self: start; }
  .file-tree { padding-inline: .8rem; overflow-x: auto; }
  .file-tree p { white-space: nowrap; }
  .featured-download { padding: 1.5rem; }
  .featured-download h2 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  .release-grid { grid-template-columns: 1fr; }
  .release-card { min-height: 0; }
  .decision-list a { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; padding-top: 3.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}