/* CG168 · The Culture Studio pages: three cards, the flow chart, real screens, questions and the closing call.
   Everything else is the site's own system (the hero, sections, cards, functions and chart from CG164 and CG165). */
.cg-parts.st-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (width<=980px){.cg-parts.st-3{grid-template-columns:1fr}}
.st-sec .cg-parts{margin-top:32px}
.st-sec .cg-fn{margin-top:32px}
.st-fn{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (width<=980px){.st-fn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=640px){.st-fn{grid-template-columns:1fr}}
/* the flow: the chart on laptops, a numbered list on phones */
.st-flow{margin-top:32px}
.st-flow svg{width:100%;height:auto;display:block}
.st-flowlist{display:none;margin:0;padding:0;list-style:none;counter-reset:st}
.st-flowlist li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:12px 0;border-top:1px solid var(--px-line)}
.st-flowlist li::before{content:counter(st);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--px-blue,#1559F5);color:#fff;font:500 13px/28px var(--sans,Rubik,sans-serif);text-align:center}
.st-flowlist b{font-weight:500;color:var(--px-ink)}
.st-flowlist span{font-size:15px;color:var(--px-char,#454d5c)}
@media (width<=640px){.st-flow svg{display:none}.st-flowlist{display:block}}
/* real screens: a laptop and a phone side by side, stacked on a phone */
.st-shots{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:32px}
.st-shot{margin:0}
.st-shot img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--px-line)}
.st-shot figcaption{margin-top:12px;font-size:13px;color:var(--px-char,#454d5c)}
@media (width<=760px){.st-shots{grid-template-columns:1fr}.st-shot.ph{max-width:280px}}
/* questions */
.st-faq{margin-top:32px;border-top:1px solid var(--px-line)}
.st-faq details{border-bottom:1px solid var(--px-line)}
.st-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:500;color:var(--px-ink)}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary::after{content:"+";flex:none;font-size:24px;line-height:1;color:var(--px-blue,#1559F5)}
.st-faq details[open] summary::after{content:"\2212"}
.st-faq summary:focus-visible{outline:2px solid #1559F5;outline-offset:4px;border-radius:4px}
.st-faq p{margin:0 0 20px;max-width:64ch;color:var(--px-char,#454d5c)}
/* the closing call */
.st-close .cg-more{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.st-cta{display:inline-flex;align-items:center;min-height:44px}
.st-fn4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (width<=980px){.st-fn4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width<=640px){.st-fn4{grid-template-columns:1fr}}
/* the Studio's mark on the blue hero: the family's cap token, reverse master */
.st-mark{margin:0 0 24px;--cap:20px}
.st-mark img{display:block;height:calc(var(--cap) * var(--k-group));width:auto;filter:brightness(0) invert(1)} /* one colour, white, on the brand blue */
@media (width<=640px){.st-mark{--cap:16px}}
html.sh-on .st-mark img{filter:none;content:url(/img/brand/theculturestudio-logo-original-cg176.svg)} /* the phone shell draws the hero light: the full-colour master */