/* Educational page: existing studio identity, a worked example, no scripts. */
.ob-guide{max-width:1056px;margin:0 auto}
.ob-guide h1{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.12;letter-spacing:-.045em}
.ob-guide h2{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2;letter-spacing:-.035em}
.ob-guide h3{font-size:1.125rem;line-height:1.35;margin:0 0 20px}
.ob-guide p,.ob-guide li,.ob-guide dd{line-height:1.7}
.ob-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:48px;align-items:center;padding:8px 0 64px}
.ob-hero .eyebrow{margin-bottom:20px;max-width:46ch}
.ob-hero .lead{font-size:1rem;color:var(--muted);margin:24px 0;max-width:48ch}
.ob-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.ob-actions .button{flex-shrink:0}
.ob-hero .micro{margin:16px 0 0}
.ob-example{margin:0;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.ob-example figcaption{font-size:.8125rem;color:var(--muted);margin-bottom:24px}
.ob-example-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.ob-example-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:64px;height:80px;color:var(--accent)}
.ob-example-mark .icon{width:64px;height:76px;stroke-width:1.25}
.ob-example-label{font-size:.8125rem;color:var(--accent);display:block;margin-bottom:8px}
.ob-example h2{font-size:1.375rem;line-height:1.25}
.ob-example>p{font-size:.9375rem;color:var(--muted)}
.ob-example dl{margin:24px 0}
.ob-example dl>div+div{margin-top:16px}
.ob-example dt{font-size:.8125rem;color:var(--muted);margin-bottom:4px}
.ob-example dd{margin:0;font-size:.9375rem}
.ob-example .ob-example-note{font-size:.8125rem;margin:0;padding-top:20px;border-top:1px solid var(--line)}
.ob-definition,.ob-value,.ob-usecases,.ob-start,.ob-questions{padding:56px 0;border-top:1px solid var(--line)}
.ob-definition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px}
.ob-definition .eyebrow{margin-bottom:16px}
.ob-prose p{color:var(--muted);max-width:65ch}
.ob-prose p:last-child{margin-bottom:0}
.ob-value>h2{max-width:32ch;margin-bottom:36px}
.ob-value-columns{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.ob-value ul{margin:0;padding:0;list-style:none}
.ob-value li{color:var(--muted);margin-bottom:20px;max-width:55ch}
.ob-value li:last-child{margin-bottom:0}
.ob-value li strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.ob-section-intro{color:var(--muted);margin:20px 0 32px}
.ob-cases{margin:0}
.ob-cases>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;padding:24px 0;border-top:1px solid var(--line)}
.ob-cases>div:last-child{padding-bottom:0}
.ob-cases dt{font-weight:600}
.ob-cases dd{margin:0;color:var(--muted);max-width:60ch}
.ob-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 56px}
.ob-start h2{margin-bottom:24px}
.ob-start p{color:var(--muted)}
.ob-workflow{list-style:none;margin:0;padding:0}
.ob-workflow li{position:relative;padding-left:44px;margin-bottom:24px}
.ob-workflow .ob-step-number{position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-size:.8125rem;color:var(--accent)}
.ob-workflow strong,.ob-workflow li>span:not(.ob-step-number){display:block}
.ob-workflow strong{font-weight:600}
.ob-workflow li>span:not(.ob-step-number){color:var(--muted);font-size:.9375rem;margin-top:4px}
.ob-start-action{grid-column:1/-1}
.ob-start-action .ob-actions{margin-top:0}
.ob-start-action .micro{margin:16px 0 0}
.ob-questions{padding-bottom:0}
.ob-questions>h2{margin-bottom:28px}
.ob-questions details{border-bottom:1px solid var(--line);padding:0}
.ob-questions summary{padding:20px 0;min-height:44px;font-weight:600;cursor:pointer;line-height:1.5}
.ob-questions details p{margin:0 0 24px;max-width:70ch;color:var(--muted)}
.ob-guide .ob-source{font-size:.8125rem;color:var(--muted);margin:28px 0 0;max-width:85ch}
@media(max-width:740px){
 .ob-hero,.ob-definition,.ob-value-columns,.ob-start{grid-template-columns:minmax(0,1fr);gap:28px}
 .ob-hero{padding:0 0 40px}
 .ob-hero-copy{max-width:65ch}
 .ob-example{max-width:520px;width:100%}
 .ob-definition,.ob-value,.ob-usecases,.ob-start,.ob-questions{padding-top:36px;padding-bottom:36px}
 .ob-questions{padding-bottom:0}
 .ob-cases>div{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
 .ob-guide h1{font-size:2.375rem}
 .ob-value>h2{margin-bottom:28px}
 .ob-value-columns{gap:32px}
 .ob-start-action{grid-column:auto}
}
@media(max-width:480px){
 .entry-surface .ob-guide h1{font-size:2rem;line-height:1.15}
 .ob-guide h2{font-size:1.5rem}
 .ob-hero .eyebrow,.ob-hero .micro,.ob-example figcaption,.ob-example-label,.ob-example dt,.ob-example .ob-example-note,.ob-guide .ob-source{font-size:.875rem}
 .ob-example{padding:24px 20px}
 .ob-example h2{font-size:1.25rem}
 .ob-example-heading{gap:12px}
 .ob-example-mark,.ob-example-mark .icon{width:48px;height:60px}
 .ob-actions{gap:12px}
 .ob-actions>.button{width:100%}
 .ob-actions>.text-link{min-height:44px}
 .ob-questions summary{padding:18px 0}
}