/* Commute learning: the approved Catalyst shell, original artwork and a practical lesson example. */
.page-commute .p-path-grid{grid-template-columns:1.1fr 1fr;gap:56px}
.page-commute .p-title{font-size:clamp(40px,4.5vw,66px);max-width:18ch}
.cm-hero-art{margin:0;align-self:center}
.cm-hero-art img{width:100%;border-radius:22px;box-shadow:0 18px 40px rgb(70 49 21 / .10)}
.cm-hero-art figcaption{font:italic 430 clamp(21px,2vw,28px)/1.4 var(--font-display);text-align:center;margin:22px 18px 0}
.cm-intro{font-size:15px;line-height:1.75;color:var(--ink-soft);max-width:57ch;margin-top:20px}
.cm-routine{padding-block:10px 64px}
.cm-routine>h2{max-width:23ch;font-size:clamp(32px,3.4vw,46px)}
.cm-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:34px 0 0;padding:0}
.cm-steps>li{border-top:1px solid var(--hairline);padding-top:21px;min-width:0}
.cm-step{display:block;font:italic 400 25px/1.2 var(--font-display);color:var(--ink-soft);margin-bottom:18px}
.cm-steps h3{font-size:27px}
.cm-steps p{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-top:16px}
.cm-routine>.h-note{max-width:78ch;margin-top:26px}
.cm-question{border-left:2px solid var(--pig-amber);padding-left:24px;margin-top:28px;font:430 27px/1.45 var(--font-display)}
.p-sample-in .cm-question p{color:var(--ink);margin-top:0}
.cm-example-note{font-size:13px!important}
.cm-related-intro{max-width:66ch;margin:-8px 0 28px;color:var(--ink-soft);font-size:16px}
.cm-faq{padding-top:10px;padding-bottom:58px}
.cm-faq>h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:28px}
.page-commute .c-closing .h-note{font-size:13px}
@media(max-width:1100px){.page-commute .p-path-grid{gap:36px}.cm-steps{gap:24px}}
@media(max-width:860px){.page-commute .p-path-grid{grid-template-columns:1fr}.page-commute .p-title{max-width:21ch}.cm-hero-art{max-width:580px;margin-inline:auto}.cm-hero-art img{max-height:340px;object-fit:cover}.cm-steps{grid-template-columns:1fr;gap:28px}.cm-step{margin-bottom:12px}.cm-steps p{max-width:65ch;margin-top:12px}}
@media(max-width:540px){.cm-routine{padding-block:0 44px}.cm-hero-art figcaption{font-size:23px;margin-top:18px}.cm-question{font-size:24px;padding-left:18px}.cm-faq{padding-bottom:42px}}

.page-commute .c-related>h2{font-size:clamp(32px,3.4vw,46px)}
@media(max-width:540px){.page-commute .c-closing{background-image:linear-gradient(rgb(244 237 221 / .7),rgb(244 237 221 / .7)),url('/assets/brand/new-direction/paint-right.webp')}}