:root {
    --orange: var(--twytch-connect-accent);
}

.connect-page {
    --connect-accent: var(--product-accent);
    --connect-accent-soft: rgba(18, 216, 120, .13);
    background:
        radial-gradient(ellipse at 75% 13%, rgba(18, 216, 120, .045), transparent 36rem),
        #0b0c0d;
}
.connect-page ::selection { background: var(--connect-accent); color: #071311; }
.connect-page a:focus-visible,
.connect-page button:focus-visible,
.connect-page summary:focus-visible,
.connect-page [tabindex]:focus-visible { outline-color: var(--connect-accent); }
.connect-page .wordmark span,
.connect-page .eyebrow,
.connect-page h1 span,
.connect-page h2 span,
.connect-page .text-link span,
.connect-page .value-mark,
.connect-page .footer-links a:hover { color: var(--connect-accent); }
.connect-page .nav-download,
.connect-page .dashboard-brand-mark { background: var(--connect-accent); color: #071311; }
.connect-page .nav-download:hover { background: #36e58e; }
.connect-mobile-menu { display: none; position: relative; }
.connect-mobile-menu > summary { align-content: center; cursor: pointer; display: grid; gap: 5px; height: 42px; justify-items: end; list-style: none; width: 44px; }
.connect-mobile-menu > summary::-webkit-details-marker { display: none; }
.connect-mobile-menu > summary span { background: var(--text); height: 2px; transition: transform .2s ease, width .2s ease; width: 22px; }
.connect-mobile-menu > summary span:last-child { width: 16px; }
.connect-mobile-menu[open] > summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.connect-mobile-menu[open] > summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); width: 22px; }
.connect-mobile-menu nav { background: #17191a; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 20px 45px rgba(0,0,0,.4); display: grid; gap: 2px; min-width: 230px; padding: 8px; position: absolute; right: 0; top: 51px; }
.connect-mobile-menu nav a { border-radius: 8px; color: var(--muted); font-size: .84rem; font-weight: 600; padding: 11px 12px; }
.connect-mobile-menu nav a:hover { background: rgba(255,255,255,.06); color: var(--connect-accent); }
.connect-hero { grid-template-columns: .88fr 1.12fr; }
.connect-hero .hero-copy { padding-block: 20px; }
.connect-page .hero h1 { max-width: 620px; }
.connect-eyebrow-mark { background: var(--connect-accent); border-radius: 50%; box-shadow: 0 0 16px rgba(18,216,120,.4); display: inline-block; height: 7px; margin-right: 4px; width: 7px; }
.connect-primary-cta { box-shadow: 0 7px 26px rgba(18,216,120,.12); }
.connect-dashboard-wrap { isolation: isolate; padding: 8px 0 20px 10px; position: relative; }
.connect-dashboard {
    background: #f1f4f3;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 17px;
    box-shadow: 0 36px 90px rgba(0,0,0,.48);
    color: #1a2424;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.dashboard-topbar { align-items: center; background: #111819; color: #f2f6f4; display: flex; height: 54px; justify-content: space-between; padding: 0 19px; }
.dashboard-brand { align-items: center; display: flex; font-size: .59rem; font-weight: 800; gap: 9px; letter-spacing: .1em; }
.dashboard-brand b { color: #8eaaa5; font-weight: 600; }
.dashboard-brand-mark { align-items: center; border-radius: 6px; display: inline-flex; font-size: .67rem; height: 26px; justify-content: center; width: 26px; }
.dashboard-context { align-items: center; color: #a6b7b3; display: flex; font-size: .47rem; font-weight: 700; gap: 8px; letter-spacing: .11em; }
.dashboard-context i { background: var(--connect-accent); border-radius: 50%; height: 6px; width: 6px; }
.dashboard-layout { display: grid; grid-template-columns: 51px 1fr; min-height: 443px; }
.dashboard-sidebar { align-items: center; background: #e5ebe8; border-right: 1px solid #dce3e0; display: flex; flex-direction: column; gap: 15px; padding: 20px 0 13px; }
.sidebar-icon { align-items: center; border-radius: 7px; color: #81908c; display: flex; font-size: .86rem; height: 30px; justify-content: center; width: 30px; }
.sidebar-icon.is-selected { background: #d0f0e8; color: #147e70; }
.sidebar-avatar { align-items: center; background: #d3ded9; border-radius: 50%; color: #54645e; display: flex; font-size: .57rem; font-weight: 800; height: 26px; justify-content: center; margin-top: auto; width: 26px; }
.dashboard-content { min-width: 0; padding: 21px 22px 17px; }
.dashboard-heading { align-items: flex-end; display: flex; gap: 12px; justify-content: space-between; }
.dashboard-kicker { color: #778780; display: block; font-size: .44rem; font-weight: 800; letter-spacing: .13em; }
.connect-page .dashboard-heading h2 { color: #192624; font-size: 1.16rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; margin: 5px 0 0; text-transform: none; }
.dashboard-period { border: 1px solid #d9e1dd; border-radius: 6px; color: #6e7e78; flex-shrink: 0; font-size: .42rem; font-weight: 800; letter-spacing: .06em; padding: 7px 8px; }
.dashboard-period b { color: #72827b; font-size: .66rem; margin-left: 5px; }
.dashboard-source-row { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 11px; }
.source-chip { align-items: center; background: #fff; border: 1px solid #e0e6e2; border-radius: 6px; color: #596761; display: inline-flex; font-size: .39rem; font-weight: 800; gap: 5px; letter-spacing: .06em; padding: 5px 7px; }
.source-chip i { align-items: center; border-radius: 50%; display: inline-flex; font-size: .42rem; font-style: normal; height: 16px; justify-content: center; width: 16px; }
.source-motion { background: #eee5ff; color: #754bb0; }
.source-basketball { background: #fff0e5; color: #c46837; }
.source-note { color: #8a9690; font-size: .36rem; font-weight: 700; letter-spacing: .08em; margin-left: auto; }
.dashboard-metrics { display: grid; gap: 9px; grid-template-columns: 1fr 1fr 1.2fr; }
.metric-card { background: #fff; border: 1px solid #e1e7e3; border-radius: 9px; min-width: 0; min-height: 112px; padding: 11px 12px; }
.metric-label { align-items: center; color: #7b8983; display: flex; font-size: .39rem; font-weight: 800; gap: 5px; letter-spacing: .07em; white-space: nowrap; }
.metric-dot { border-radius: 50%; display: inline-block; height: 5px; width: 5px; }
.motion-dot { background: #9147ff; }
.basketball-dot { background: #ff6b2c; }
.metric-card > strong { color: #23312d; display: block; font-size: .76rem; letter-spacing: -.02em; margin-top: 11px; }
.metric-caption { color: #8c9993; display: block; font-size: .43rem; margin-top: 2px; }
.metric-spark { align-items: end; display: flex; gap: 4px; height: 21px; margin-top: 6px; }
.metric-spark i { background: #b9a0ee; border-radius: 2px 2px 0 0; flex: 1; height: 30%; }
.metric-spark i:nth-child(3n) { height: 83%; }
.metric-spark i:nth-child(3n + 1) { height: 55%; }
.metric-spark i:nth-child(4n) { height: 100%; }
.metric-bars { align-items: end; border-bottom: 1px solid #e6ece8; display: flex; gap: 4px; height: 20px; margin-top: 7px; }
.metric-bars i { background: #f6a77a; border-radius: 2px 2px 0 0; flex: 1; height: 36%; }
.metric-bars i:nth-child(2n) { height: 68%; }
.metric-bars i:nth-child(3n) { height: 94%; }
.metric-bars i:nth-child(5n) { height: 55%; }
.context-metric { background: #e7f5f1; border-color: #d4ebe3; }
.context-metric > strong { font-size: .69rem; margin-top: 9px; }
.context-description { color: #61766e; display: block; font-size: .43rem; line-height: 1.5; margin-top: 3px; max-width: 190px; }
.context-link { color: #287b6a; display: block; font-size: .41rem; font-weight: 800; margin-top: 8px; }
.context-link b { margin-left: 4px; }
.dashboard-lower { display: grid; gap: 9px; grid-template-columns: 1.4fr 1fr; margin-top: 9px; }
.trend-panel,.coach-note { background: #fff; border: 1px solid #e1e7e3; border-radius: 9px; min-width: 0; padding: 12px; }
.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; }
.panel-heading strong { color: #28352f; display: block; font-size: .65rem; margin-top: 4px; }
.concept-label { border: 1px solid #dce4df; border-radius: 10px; color: #84928b; font-size: .34rem; font-weight: 800; letter-spacing: .06em; padding: 3px 5px; white-space: nowrap; }
.trend-chart { margin-top: 8px; padding-left: 35px; position: relative; }
.trend-chart svg { display: block; height: 77px; overflow: visible; width: 100%; }
.trend-y-labels { color: #95a09a; display: flex; flex-direction: column; font-size: .31rem; font-weight: 700; height: 65px; justify-content: space-between; left: 0; letter-spacing: .05em; position: absolute; top: 2px; }
.trend-grid { fill: none; stroke: #e7ece9; stroke-width: 1; }
.trend-line { fill: none; stroke-linecap: round; stroke-width: 2.5; }
.trend-line-motion { stroke: #8c5bd0; }
.trend-line-basketball { stroke: #e98b56; }
.trend-legend { display: flex; gap: 13px; justify-content: flex-end; }
.trend-legend span { align-items: center; color: #738078; display: inline-flex; font-size: .37rem; gap: 5px; }
.trend-legend i { border-radius: 50%; height: 5px; width: 5px; }
.legend-motion { background: #8c5bd0; }
.legend-basketball { background: #e98b56; }
.coach-note { background: #f8faf9; padding: 12px; }
.coach-note-icon { align-items: center; background: #dff1ec; border-radius: 8px; color: #2b8b78; display: flex; font-size: .88rem; height: 27px; justify-content: center; margin-bottom: 11px; width: 27px; }
.coach-note > strong { color: #28352f; display: block; font-size: .68rem; line-height: 1.35; margin-top: 6px; max-width: 180px; }
.coach-note p { color: #7c8982; font-size: .43rem; line-height: 1.5; margin: 5px 0 8px; }
.dashboard-disclaimer { background: #e8edeb; color: #839089; font-size: .38rem; font-weight: 700; letter-spacing: .06em; padding: 7px 10px; text-align: right; }
.dashboard-glow { background: radial-gradient(ellipse, rgba(18,216,120,.12), transparent 68%); inset: 2% -12%; position: absolute; z-index: -1; }
.connect-value-strip { border-block: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: repeat(3,1fr); padding-block: 24px; }
.connect-value-strip > div { align-items: center; border-right: 1px solid rgba(255,255,255,.09); display: flex; gap: 14px; justify-content: center; padding: 8px 14px; }
.connect-value-strip > div:last-child { border-right: 0; }
.connect-value-strip > div > span { color: var(--connect-accent); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.connect-value-strip p { color: #d1d6d3; font-size: .78rem; font-weight: 550; line-height: 1.45; margin: 0; }
.connect-insights { padding-block: clamp(96px, 11vw, 148px); }
.connect-section-heading { max-width: 770px; }
.connect-section-heading h2,.platforms-copy h2 { font-size: clamp(2.7rem, 4.6vw, 4.5rem); margin-bottom: 21px; }
.connect-section-heading > p:last-child,.platforms-copy > p:not(.eyebrow) { color: #b7babb; font-size: .94rem; line-height: 1.85; max-width: 700px; }
.insight-grid { display: grid; gap: 15px; grid-template-columns: repeat(3,1fr); margin-top: 50px; }
.insight-card { background: #17191a; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; min-height: 290px; padding: 24px; }
.insight-number { color: #89958f; font-size: .52rem; font-weight: 800; letter-spacing: .13em; }
.insight-icon { align-items: center; display: flex; gap: 5px; height: 52px; margin: 27px 0 20px; position: relative; width: 65px; }
.insight-icon > span { border: 1px solid rgba(18,216,120,.55); border-radius: 8px; height: 27px; position: absolute; transform: rotate(45deg); width: 27px; }
.insight-icon > span:first-child { left: 0; }
.insight-icon > span:nth-child(2) { left: 18px; }
.insight-icon > span:nth-child(3) { left: 36px; }
.insight-icon-graph { align-items: end; border-bottom: 1px solid rgba(18,216,120,.4); gap: 6px; padding: 0 7px 0 4px; }
.insight-icon-graph i { background: linear-gradient(180deg,rgba(18,216,120,.8),rgba(18,216,120,.12)); border-radius: 3px 3px 0 0; height: 52%; width: 9px; }
.insight-icon-graph i:nth-child(2) { height: 84%; }
.insight-icon-graph i:nth-child(3) { height: 68%; }
.insight-icon-focus { border: 1px solid rgba(18,216,120,.42); border-radius: 50%; height: 48px; justify-content: center; margin-left: 7px; width: 48px; }
.insight-icon-focus i { border: 1px solid rgba(18,216,120,.5); border-radius: 50%; height: 29px; position: absolute; width: 29px; }
.insight-icon-focus i:nth-child(2) { height: 12px; width: 12px; }
.insight-icon-focus b { background: #17191a; color: var(--connect-accent); font-size: 1.15rem; font-weight: 500; position: absolute; right: -12px; top: 15px; }
.insight-card h3 { font-size: 1.25rem; font-weight: 620; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 10px; }
.insight-card p { color: #aab0ad; font-size: .78rem; line-height: 1.72; margin: 0; max-width: 330px; }
.connect-note { align-items: center; color: #87918c; display: flex; font-size: .67rem; gap: 9px; margin: 20px 0 0; }
.connect-note span { align-items: center; border: 1px solid rgba(18,216,120,.4); border-radius: 50%; color: var(--connect-accent); display: inline-flex; flex: 0 0 18px; font-size: .65rem; font-weight: 700; height: 18px; justify-content: center; }
.connect-workflow { background: #111314; border-block: 1px solid rgba(255,255,255,.08); padding-block: clamp(92px, 10vw, 132px); }
.connect-workflow .connect-section-heading { margin-bottom: 47px; }
.workflow-grid { border-top: 1px solid rgba(255,255,255,.13); display: grid; grid-template-columns: repeat(3,1fr); }
.workflow-step { min-height: 220px; padding: 24px 28px 15px 0; position: relative; }
.workflow-step + .workflow-step { border-left: 1px solid rgba(255,255,255,.1); padding-left: 28px; }
.workflow-index { color: #64736d; font-size: .56rem; font-weight: 800; letter-spacing: .12em; position: absolute; right: 22px; top: 25px; }
.workflow-step .eyebrow { font-size: .58rem; margin: 8px 0 14px; }
.workflow-step h3 { font-size: 1.18rem; font-weight: 620; letter-spacing: -.03em; line-height: 1.25; margin: 0 0 9px; max-width: 260px; }
.workflow-step > p:last-child { color: #aab0ad; font-size: .76rem; line-height: 1.7; margin: 0; max-width: 300px; }
.connect-platforms { align-items: center; display: grid; gap: clamp(50px, 9vw, 120px); grid-template-columns: .9fr 1.1fr; padding-block: clamp(96px, 11vw, 148px); }
.platforms-copy h2 { max-width: 540px; }
.platforms-copy > p:not(.eyebrow) { margin-bottom: 21px; }
.platforms-copy .text-link { font-size: .8rem; font-weight: 650; }
.platform-list { border-top: 1px solid rgba(255,255,255,.11); }
.platform-row { align-items: center; border-bottom: 1px solid rgba(255,255,255,.11); display: flex; gap: 14px; min-height: 88px; padding: 15px 4px; }
.platform-row > span:nth-child(2) { display: grid; gap: 2px; }
.platform-symbol { align-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; color: #f0f1ef; display: flex; flex: 0 0 42px; font-size: .9rem; font-weight: 700; height: 42px; justify-content: center; }
.motion-symbol { background: rgba(145,71,255,.13); border-color: rgba(145,71,255,.3); color: #c5a5ff; }
.basketball-symbol { background: rgba(255,107,44,.12); border-color: rgba(255,107,44,.28); color: #ff9e71; }
.connect-symbol { background: rgba(57,214,197,.12); border-color: rgba(57,214,197,.32); color: var(--connect-accent); }
.platform-row small { color: #84918b; font-size: .46rem; font-weight: 800; letter-spacing: .12em; }
.platform-row strong { color: #f3f4f2; font-size: .88rem; font-weight: 620; }
.platform-row em { color: #a2aaa5; font-size: .68rem; font-style: normal; }
.platform-row > b { color: var(--connect-accent); font-size: .88rem; font-weight: 500; margin-left: auto; }
.platform-row-connect { cursor: default; }
.connect-page .final-cta-inner {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(18,216,120,.14), transparent 60%),
        linear-gradient(110deg,#17191a,#191d1b 52%,#17191a);
    border-color: rgba(18,216,120,.16);
}
.connect-page .final-cta .eyebrow { color: var(--connect-accent); }
.connect-page .final-cta h2 span { color: #a9f3ca; }
.connect-page .site-footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 48px; }

@media (max-width: 1060px) {
    .connect-hero { gap: 36px; grid-template-columns: .9fr 1.1fr; }
    .dashboard-layout { grid-template-columns: 43px 1fr; }
    .dashboard-content { padding: 17px 15px 14px; }
    .dashboard-metrics { gap: 6px; }
    .metric-card { padding: 9px; }
    .metric-label { font-size: .35rem; }
    .connect-platforms { gap: 54px; }
}
@media (max-width: 900px) {
    .connect-hero { grid-template-columns: 1fr; padding-top: 70px; }
    .connect-hero .hero-copy { max-width: 700px; }
    .connect-dashboard-wrap { margin-inline: 4%; }
    .connect-dashboard { max-width: 850px; }
    .dashboard-layout { min-height: 420px; }
    .connect-platforms { gap: 38px; grid-template-columns: 1fr; }
    .connect-platforms .platforms-copy { max-width: 680px; }
}
@media (max-width: 760px) {
    .connect-mobile-menu { display: block; }
    .connect-nav-cta,.connect-page .primary-nav { display: none; }
    .connect-hero { gap: 20px; padding-block: 58px 38px; }
    .connect-page .hero h1 { font-size: clamp(3rem, 12vw, 4.8rem); }
    .connect-hero .hero-copy { padding-block: 0; }
    .connect-hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
    .connect-dashboard-wrap { margin-inline: -8px; padding: 0 0 10px; }
    .connect-dashboard { border-radius: 12px; }
    .dashboard-topbar { height: 46px; padding-inline: 12px; }
    .dashboard-layout { grid-template-columns: 34px 1fr; min-height: 0; }
    .dashboard-sidebar { gap: 10px; padding-top: 14px; }
    .sidebar-icon { height: 25px; width: 25px; }
    .sidebar-avatar { height: 22px; width: 22px; }
    .dashboard-content { padding: 14px 10px 11px; }
    .connect-page .dashboard-heading h2 { font-size: .94rem; }
    .dashboard-period { font-size: .34rem; padding: 6px; }
    .dashboard-source-row { gap: 5px; margin-block: 11px 8px; }
    .source-chip { font-size: .31rem; padding: 4px 5px; }
    .source-chip i { height: 14px; width: 14px; }
    .source-note { font-size: .3rem; }
    .dashboard-metrics { grid-template-columns: 1fr 1fr; }
    .metric-card { min-height: 94px; padding: 8px; }
    .metric-label { font-size: .32rem; }
    .metric-card > strong { font-size: .68rem; margin-top: 9px; }
    .metric-caption,.context-description { font-size: .39rem; }
    .context-metric { grid-column: 1 / -1; min-height: 88px; }
    .context-metric > strong { font-size: .67rem; }
    .context-link { font-size: .38rem; margin-top: 5px; }
    .dashboard-lower { grid-template-columns: 1fr; }
    .trend-panel,.coach-note { padding: 10px; }
    .trend-chart svg { height: 65px; }
    .trend-y-labels { height: 54px; }
    .coach-note { display: grid; gap: 5px 10px; grid-template-columns: 28px 1fr; }
    .coach-note-icon { grid-row: span 3; margin: 0; }
    .coach-note .dashboard-kicker,.coach-note > strong,.coach-note p,.coach-note .concept-label { grid-column: 2; }
    .coach-note .dashboard-kicker { align-self: end; }
    .coach-note > strong { font-size: .62rem; margin: 0; }
    .coach-note p { margin: 0; }
    .coach-note .concept-label { justify-self: start; }
    .dashboard-disclaimer { font-size: .32rem; }
    .connect-value-strip { grid-template-columns: 1fr; padding-block: 8px; }
    .connect-value-strip > div { border-bottom: 1px solid rgba(255,255,255,.08); border-right: 0; justify-content: flex-start; min-height: 61px; padding-inline: 14px; }
    .connect-value-strip > div:last-child { border-bottom: 0; }
    .connect-value-strip p { font-size: .75rem; }
    .connect-insights,.connect-platforms { padding-block: 82px; }
    .connect-section-heading h2,.platforms-copy h2 { font-size: clamp(2.55rem, 9vw, 4rem); }
    .connect-section-heading > p:last-child,.platforms-copy > p:not(.eyebrow) { font-size: .86rem; }
    .insight-grid { gap: 11px; grid-template-columns: 1fr; margin-top: 32px; }
    .insight-card { min-height: 0; padding: 20px; }
    .insight-icon { margin: 20px 0 15px; }
    .insight-card h3 { font-size: 1.18rem; }
    .insight-card p { font-size: .75rem; }
    .connect-note { align-items: flex-start; font-size: .62rem; line-height: 1.6; }
    .connect-workflow { padding-block: 78px; }
    .connect-workflow .connect-section-heading { margin-bottom: 31px; }
    .workflow-grid { grid-template-columns: 1fr; }
    .workflow-step { min-height: 0; padding: 21px 40px 22px 0; }
    .workflow-step + .workflow-step { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-left: 0; }
    .workflow-index { right: 7px; top: 25px; }
    .workflow-step .eyebrow { margin-top: 0; }
    .workflow-step h3 { font-size: 1.08rem; }
    .workflow-step > p:last-child { font-size: .73rem; }
    .connect-platforms { gap: 32px; }
    .platform-row { gap: 11px; min-height: 78px; }
    .platform-symbol { flex-basis: 38px; height: 38px; }
    .platform-row strong { font-size: .82rem; }
    .platform-row em { font-size: .62rem; }
    .connect-page .final-cta-inner { margin-inline: 23px; min-height: 330px; padding: 48px 20px; }
    .connect-page .final-cta h2 { font-size: clamp(2.65rem, 10vw, 4rem); }
    .connect-page .site-footer { margin-top: 32px; }
}
@media (max-width: 390px) {
    .connect-dashboard-wrap { margin-inline: -10px; }
    .dashboard-context { font-size: .37rem; }
    .dashboard-content { padding-inline: 8px; }
    .connect-page .dashboard-heading h2 { font-size: .86rem; }
    .source-note { display: none; }
    .metric-label { font-size: .29rem; }
    .connect-page .final-cta-inner { margin-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .connect-page *, .connect-page *::before, .connect-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .connect-page.motion-ready .reveal { opacity: 1; transform: none; }
}