/* Extends the selected A2 system with services and creator engagement. */
.services-section{background:var(--fill);color:var(--onFill);padding:88px 0 80px;scroll-margin-top:24px}
h2,h3{font-family:Neue,sans-serif;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(2.25rem,4.25vw,3.5rem);line-height:1.08;margin:0}
.services-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:42px}
.services-intro p{font-size:18px;line-height:1.7;margin:0 0 4px}
.section-hand{font-family:Nothing,cursive;font-weight:400;letter-spacing:0}
.services-intro .section-hand{color:var(--highlight);font-size:24px;line-height:1.6}
.service-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.service-tab{position:relative;display:flex;flex-direction:column;text-align:left;gap:10px;min-height:156px;padding:24px 28px 28px;background:var(--surface);color:var(--ink);border-radius:12px;transition:background-color 160ms ease,color 160ms ease}
.service-tab-title{font-family:Neue,sans-serif;font-weight:600;letter-spacing:-.03em;font-size:30px;line-height:1.15}
.service-tab-summary{font-size:14px;line-height:1.5;color:var(--ink2);max-width:none;padding-right:26px}
.service-tab-arrow{position:absolute;bottom:20px;right:24px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.service-tab-arrow svg{width:20px;height:20px;transition:transform 160ms ease}
.service-tab:hover{background:var(--canvas)}
.service-tab:hover .service-tab-arrow svg{transform:translateX(2px)}
.service-tab[aria-selected="true"]{background:#10131C;color:#F7F8FA}
.service-tab[aria-selected="true"] .service-tab-summary{color:rgba(247,248,250,.75)}
.service-tab[aria-selected="true"] .service-tab-arrow{background:var(--highlight);color:var(--chipInk)}
.service-tab:focus-visible{outline:3px solid var(--highlight);outline-offset:4px}
.service-panel{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;min-height:430px;padding:42px;background:var(--surface);color:var(--ink);border-radius:16px}
.service-panel[hidden]{display:none}
.service-panel:focus-visible{outline:3px solid var(--highlight);outline-offset:4px}
.service-copy h3{font-size:clamp(1.9rem,3vw,2.625rem);line-height:1.12;margin:0 0 22px;max-width:18ch}
.service-copy p{font-size:17px;line-height:1.65;max-width:37ch;margin:0;color:var(--ink2)}
.service-list{list-style:none;margin:28px 0 0;padding:0;max-width:37ch;font-size:14px;line-height:1.5}
.service-list li{padding:10px 0;border-top:1px solid var(--line2)}
.service-visual{min-width:0}
.process-canvas{width:min(100%,400px);margin:0 auto}
.process-canvas svg{width:100%;height:auto;display:block;stroke-width:1.65;overflow:visible}
.process-canvas text{font-family:NeueText,sans-serif;font-size:11px;fill:var(--ink2);stroke:none}
.process-canvas .accent,.process-canvas .accent-line{color:var(--accentText);stroke:currentColor}
.process-canvas .service-ghost{opacity:.13}
.service-token{fill:var(--accentText);stroke:var(--surface);stroke-width:1.5;opacity:0}
.scene-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:12px;margin:0;padding:0}
.scene-stages li{border-top:1px solid var(--line2);padding-top:10px;font-size:13px;line-height:1.5}
.scene-stages span{display:block;color:var(--ink2);font-size:11px;width:26px;margin:0 0 3px;padding:1px 4px;border-radius:3px}
.scene-stages .is-active span{background:var(--highlight);color:var(--chipInk)}
.service-motion-controls{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;min-height:40px}
.service-pause .play-icon{display:none}.service-pause[aria-pressed="true"] .pause-icon{display:none}.service-pause[aria-pressed="true"] .play-icon{display:block}
.service-panel:focus{scroll-margin-top:24px}
.engagement-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-block:110px;scroll-margin-top:20px}
.engagement-intro .section-hand{display:inline-block;font-size:.73em;line-height:1.7;color:var(--hand);margin-top:8px;white-space:nowrap}
.engagement-intro p{max-width:36ch;font-size:17px;line-height:1.65;color:var(--ink2);margin:24px 0 28px}
.engagement-steps{list-style:none;margin:0;padding:0}
.engagement-steps li{display:grid;grid-template-columns:44px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line2)}
.engagement-steps li:first-child{padding-top:10px;border-top:0}
.step-number{font-family:Neue,sans-serif;font-weight:600;font-size:26px;color:var(--accentText);line-height:1.3;letter-spacing:-.03em}
.engagement-steps h3{font-size:24px;line-height:1.25;margin:0 0 10px}
.engagement-steps p{font-size:16px;line-height:1.6;color:var(--ink2);max-width:33ch;margin:0}
.site-footer{padding-block:28px;border-top:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px;color:var(--ink2)}
.footer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Neue,sans-serif;font-size:23px;font-weight:600;color:var(--ink)}
.footer-brand img{display:block;width:44px;height:32px;object-fit:contain}.footer-brand .brand-dark{display:none}[data-theme="dark"] .footer-brand .brand-light{display:none}[data-theme="dark"] .footer-brand .brand-dark{display:block}
html:not([data-services-ready]) .service-tabs{display:none}html:not([data-services-ready]) .service-panel+.service-panel{margin-top:16px}
@media(max-width:1050px){.services-section{padding-block:68px}.services-intro{gap:28px}.service-tab{padding:22px;min-height:150px}.service-tab-title{font-size:26px}.service-tab-summary{font-size:13px}.service-tab-arrow{right:18px;bottom:16px}.service-panel{gap:28px;padding:32px;min-height:420px}.service-copy p{font-size:16px}.engagement-section{gap:44px;padding-block:84px}.engagement-steps li{gap:16px}.engagement-steps h3{font-size:22px}}
@media(max-width:760px){.services-section{padding:52px 0}.services-intro{display:block;margin-bottom:26px}.services-intro h2{font-size:2.375rem}.services-intro p{font-size:16px;margin-top:22px}.services-intro .section-hand{font-size:24px}.service-tabs{gap:6px;margin-bottom:12px}.service-tab{min-height:60px;padding:16px 8px;align-items:center;justify-content:center;border-radius:8px}.service-tab-title{font-size:17px;letter-spacing:-.025em}.service-tab-summary,.service-tab-arrow{display:none}.service-tab[aria-selected="true"]{color:var(--highlight)}.service-panel{grid-template-columns:1fr;gap:28px;min-height:0;padding:26px 22px}.service-copy h3{font-size:30px;max-width:19ch;margin-bottom:18px}.service-copy p{font-size:16px;line-height:1.6}.service-list{margin-top:22px;font-size:13px}.process-canvas{max-width:360px}.scene-stages{gap:10px}.scene-stages li{font-size:12px}.engagement-section{grid-template-columns:1fr;gap:38px;padding-block:64px}.engagement-intro h2{font-size:2.375rem}.engagement-intro p{font-size:16px;max-width:36ch;margin:20px 0 24px}.engagement-intro .section-hand{margin-top:5px}.engagement-steps li{gap:16px;grid-template-columns:32px 1fr;padding-block:24px}.step-number{font-size:22px}.site-footer{font-size:12px;gap:20px;padding-block:24px}.footer-brand{font-size:20px;gap:7px}.footer-brand img{width:34px;height:26px}.site-footer>span{max-width:16ch;text-align:right}}
@media(max-width:380px){.service-tab-title{font-size:15px}.service-panel{padding:24px 18px}.service-copy h3{font-size:28px}.services-intro h2,.engagement-intro h2{font-size:2.1rem}}
@media(prefers-reduced-motion:reduce){.service-pause{display:none}.service-tab,.service-tab-arrow svg{transition:none}}

/* Product is a connected loop, with an illustrative paid-order state. */
.product-system{width:min(100%,450px)}
.product-system svg{stroke-width:1.65}
.product-system .system-paper{fill:var(--surface)}
.product-system .system-cover{fill:var(--fill);stroke:none}
.product-system .system-cover-play{stroke:var(--onFill)}
.product-system text{fill:var(--ink);font-size:12px}
.product-system .system-node-title{font-family:Neue,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em}
.product-system .system-app-heading{font-family:Neue,sans-serif;font-weight:600;font-size:16px}
.product-system .system-small{fill:var(--ink2);font-size:10px}
.system-connections{stroke:var(--accentText)}
.system-buy{stroke:var(--accentText);stroke-width:3}
.system-buy-check,.system-lesson-check{stroke:var(--accentText);stroke-width:2.2;opacity:0}
.system-paid-disc{fill:var(--highlight);stroke:none}
.system-paid-check{stroke:var(--chipInk);stroke-width:2.4}
.product-system .system-paid-label{font-size:12px;fill:var(--accentText)}

.system-caption{max-width:36ch;margin:12px auto 22px;text-align:center;color:var(--ink2);font-size:12px;line-height:1.5}
#panel-product{--cycle-state:paused}
#panel-product[data-cycle-state="running"]{--cycle-state:running}
#panel-product[data-cycle="true"] :is(.system-buy-check,.system-lesson-check,.system-paid-disc,.system-paid-label){animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--cycle-state)}
#panel-product[data-cycle="true"] .system-buy-check{animation-name:system-order}
#panel-product[data-cycle="true"] .system-paid-disc{animation-name:system-paid;transform-origin:244px 283px}
#panel-product[data-cycle="true"] .system-paid-label{animation-name:system-paid-text}
#panel-product[data-cycle="true"] .system-lesson-check{animation-name:system-return}
@keyframes system-order{0%,14%{opacity:0}20%,75%{opacity:1}83%,100%{opacity:0}}
@keyframes system-paid{0%,35%,79%,100%{transform:scale(1)}41%,47%{transform:scale(1.16)}54%{transform:scale(1)}}
@keyframes system-paid-text{0%,34%{opacity:.35}42%,85%{opacity:1}95%,100%{opacity:.35}}
@keyframes system-return{0%,68%{opacity:0}75%,90%{opacity:1}98%,100%{opacity:0}}
@media(max-width:760px){.product-system{max-width:380px}.system-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){#panel-product[data-cycle="true"] :is(.system-buy-check,.system-lesson-check,.system-paid-disc,.system-paid-label){animation:none}.system-buy-check,.system-lesson-check{opacity:1}}

/* Shared approved Product drawing language across the three responsibilities. */
.service-system svg{stroke-width:1.65}.service-system .system-paper{fill:var(--surface);stroke:var(--ink)}
.service-system text{fill:var(--ink2);font-size:12px}.service-system .system-node-title{fill:var(--ink);font-family:Neue,sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em}
.service-system .system-cover{fill:var(--fill);stroke:none}.service-system .system-cover-play{stroke:var(--onFill);fill:none}
.service-token{fill:var(--accentText);stroke:var(--surface);stroke-width:2;opacity:0}

/* Keep each sentence intact at the client-marked line break. */
.service-title-sentence{display:block;text-wrap:pretty}

/* Each drawn widget releases the same contribution dots as the team map. */
.process-canvas [data-phase]{cursor:pointer;outline:none;touch-action:manipulation}
.process-canvas [data-phase]:hover>.system-paper{stroke:var(--accentText)}
.process-canvas [data-phase]:focus-visible>.system-paper{stroke:var(--accentText);stroke-width:3}
.service-token{pointer-events:none;stroke:none}

/* September 30: a visible control affordance on every service, including touch. */
.service-tab{border:1px solid var(--line2);transition:background-color 180ms,color 180ms,border-color 180ms,transform 180ms}
.service-tab-arrow{background:var(--canvas);border:1px solid var(--line2)}
.service-tab[aria-selected="true"]{border-color:var(--highlight)}
.service-tab[aria-selected="true"] .service-tab-arrow{border-color:var(--highlight)}
.service-tab:hover{border-color:var(--highlight)}
.service-tab:active{transform:scale(.985)}
@media(max-width:760px){.service-tab{min-height:92px;gap:10px}.service-tab-arrow{display:grid;position:static;width:26px;height:26px}.service-tab-arrow svg{width:16px;height:16px}}
/* A calm selected surface, without the former black card. */
.service-tab[aria-selected="true"]{background:#e4e5e8;color:#10131c;border-color:#b6bac2}
.service-tab[aria-selected="true"] .service-tab-summary{color:#515661}
.service-tab[aria-selected="true"] .service-tab-arrow{background:#f6f7f8;color:#10131c;border-color:#bdc2cb}