.document-example{max-width:960px;padding-top:1.4rem}
.document-example *{box-sizing:border-box}
.example-intro{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:2rem;padding-bottom:1.4rem;border-bottom:1px solid #cbd8d2}
.example-intro h1{max-width:18ch;margin:.4rem 0 1rem}
.example-intro .lede{max-width:46rem;margin-bottom:.6rem}
.example-provenance{max-width:60ch;color:var(--muted,#50645f);font-size:.9rem;line-height:1.55}
.example-art{display:block;width:220px;aspect-ratio:3/2;overflow:hidden;border-radius:1rem;background:#dcece5}
.example-art img{display:block;width:100%;height:100%;object-fit:cover}
.example-start{display:inline-flex;align-items:center;min-height:44px;margin-top:.5rem;font-weight:700;color:var(--petrol,#123c3a)}
.example-walkthrough{margin-top:1.7rem}
.example-steps{display:none}
.example-steps ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.example-steps button{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .7rem;border:1px solid #adcac0;border-radius:999px;background:#f7faf7;color:#123c3a;font:inherit;font-size:.77rem;font-weight:700;cursor:pointer;text-align:left}
.example-steps button span{color:#53776e}
.example-steps button[aria-current=step]{border-color:#123c3a;background:#123c3a;color:#fff}
.example-steps button[aria-current=step] span{color:#ade0cf}
.example-progress{display:none;margin:1rem 0 .5rem;color:#517269;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.example-panel{min-width:0;margin:1rem 0 1.3rem;padding:clamp(1.25rem,4vw,2.5rem);border:1px solid #cbd8d2;border-radius:1rem;background:#fbf9f2;box-shadow:0 12px 28px rgb(18 60 58/.07);scroll-margin-top:6.5rem}
.example-panel[hidden]{display:none!important}
.example-panel h2{margin:.2rem 0 1.2rem;color:#123c3a;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.2}
.example-panel h2:focus{outline:none}
.example-panel h2:focus-visible{outline:3px solid #ad633c;outline-offset:5px}
.example-panel h3{font-size:1.05rem;margin:0 0 .5rem}
.example-panel p{line-height:1.65}
.example-panel code{font-size:.84em;overflow-wrap:anywhere}
.example-number{margin:0;color:#9e5b39;font-size:.8rem;font-weight:800;letter-spacing:.09em}
.example-callout,.example-answer,.example-case{padding:1rem 1.25rem;border-left:4px solid #258374;background:#e6f1eb;border-radius:.35rem;margin:1rem 0}
.example-answer{background:#fff;border-color:#bd7550}
.example-callout p,.example-answer p,.example-case p{margin:.4rem 0 0}
.example-docs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:1.2rem 0 0;padding:0}
.example-docs li{min-width:0;padding:.85rem;border:1px solid #cedbd3;border-radius:.6rem;background:#fff;font-size:.88rem;line-height:1.5}
.example-docs strong,.example-docs code,.example-docs span{display:block}
.example-docs code{margin:.3rem 0;color:#517269}
.example-detail{margin:1rem 0;border:1px solid #b4d3c6;border-radius:.55rem;background:#fff}
.example-detail summary{min-height:44px;padding:.85rem 1rem;color:#123c3a;font-weight:700;cursor:pointer}
.example-detail>ol{padding:0 1.4rem 1rem 2.4rem;line-height:1.6}
.example-detail li+li{margin-top:.45rem}
.example-citations{display:grid;gap:.75rem;padding:0 1rem 1rem}
.example-citations>div{min-width:0;padding:1rem;background:#f1f6f2;border-radius:.4rem}
.example-citations p{margin:.4rem 0}
.example-citations blockquote{margin:.5rem 0 0;padding-left:.8rem;border-left:2px solid #258374;line-height:1.7}
.example-case{background:#fff;border-color:#258374}
.example-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;list-style:none;padding:0;counter-reset:flow}
.example-flow li{counter-increment:flow;padding:1rem;border:1px solid #cedbd3;border-radius:.55rem;background:#fff}
.example-flow li:before{content:counter(flow,decimal-leading-zero);display:block;margin-bottom:.35rem;color:#ad633c;font-weight:800}
.example-flow strong,.example-flow span{display:block}
.example-video{margin:1.3rem 0}
.example-video video{display:block;width:100%;max-width:720px;aspect-ratio:16/9;background:#123c3a}
.example-video figcaption{margin-top:.45rem;color:#50645f;font-size:.82rem;line-height:1.5}
.example-context{color:#50645f;font-size:.88rem}
.example-controls{display:none;justify-content:space-between;gap:1rem;margin-top:1rem}
.example-controls button{min-width:108px;min-height:44px;padding:.65rem 1rem;border:1px solid #123c3a;border-radius:.5rem;background:#123c3a;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.example-controls button:disabled{opacity:.4;cursor:default}
.example-controls button:focus-visible,.example-steps button:focus-visible,.example-detail summary:focus-visible,.example-start:focus-visible{outline:3px solid #ad633c;outline-offset:3px}
.is-enhanced .example-steps,.is-enhanced .example-progress,.is-enhanced .example-controls{display:block}
.is-enhanced .example-controls{display:flex}
@media(max-width:760px){.example-intro{grid-template-columns:minmax(0,1fr) 160px;gap:1rem}.example-art{width:160px}.example-docs{grid-template-columns:1fr}}
@media(max-width:600px){.example-intro{grid-template-columns:minmax(0,1fr)}.example-art{grid-row:1;width:min(180px,100%)}.example-steps ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.example-steps button{width:100%;min-width:0}.example-flow{grid-template-columns:1fr}}
@media(max-width:430px){.example-art{width:112px;aspect-ratio:4/5}.example-panel{padding:1.1rem}.example-callout,.example-answer,.example-case{padding:.8rem}.example-steps button{font-size:.7rem;padding:.4rem .5rem}}
@media print{.example-steps,.example-progress,.example-controls{display:none!important}.example-panel,.example-panel[hidden]{display:block!important;break-inside:avoid;box-shadow:none}.example-art{display:none}}
.document-example-page .breadcrumb{flex-wrap:wrap;column-gap:.55rem;row-gap:.15rem;line-height:1.5}
.document-example-page .contact h2{max-width:24ch;font-size:clamp(2rem,4vw,3.4rem);overflow-wrap:normal}
@media(max-width:600px){.document-example-page .contact h2{font-size:clamp(1.8rem,8vw,2.5rem)}}
/* The child page keeps the global navigation but has no fixed contact rail. */
@media(max-width:850px){.document-example-page{padding-inline-end:0}.document-example-page .site-header{right:0}.document-example-page .site-nav.is-open{right:1rem}}
.example-step-picker{display:none}
/* A compact native choice replaces the six-button list only on narrow screens. */
@media(max-width:600px){
 .document-example{padding-top:.5rem}
 .document-example-page .breadcrumb{padding-block:.6rem}
 .example-intro{display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:auto auto auto auto auto;gap:0 .8rem;align-items:start;padding-bottom:.55rem}
 .example-intro>div{display:contents}
 .example-intro .kicker{grid-column:1;grid-row:1;margin:0 0 .25rem}
 .example-intro h1{grid-column:1;grid-row:2;margin:0;font-size:clamp(1.85rem,8.5vw,2.35rem);line-height:1.08}
 .example-art{position:static;grid-column:2;grid-row:1/3;width:96px;aspect-ratio:4/5;align-self:center}
 .example-intro .lede{grid-column:1/-1;margin:.6rem 0 0;font-size:1rem;line-height:1.4}
 .example-provenance{grid-column:1/-1;margin:.55rem 0 0;font-size:.82rem;line-height:1.4}
 .example-start{grid-column:1/-1;min-height:44px;margin:.15rem 0 0}
 .example-walkthrough{margin-top:.5rem}
 .is-enhanced .example-steps{display:none}
 .is-enhanced .example-step-picker{display:block}
 .example-progress{margin:.45rem 0 .2rem}
 .example-step-picker label{display:block;margin:0 0 .2rem;color:#123c3a;font-size:.82rem;font-weight:700}
 .example-step-picker select{display:block;width:100%;min-height:44px;padding:.45rem .7rem;border:1px solid #adcac0;border-radius:.5rem;background:#fff;color:#123c3a;font:inherit;font-size:.9rem;font-weight:700}
 .example-step-picker select:focus-visible{outline:3px solid #ad633c;outline-offset:3px}
 .example-panel{margin:.55rem 0 1rem}
}
.document-example-page .contact{padding:0 0 2rem;background:transparent;color:#123c3a}
.document-example-page .contact-grid{max-width:1104px;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.5rem;border:1px solid #cbd8d2;border-radius:1rem;background:#e9f0e9}
.document-example-page .contact h2{max-width:none;margin:0;font:650 clamp(1.55rem,3vw,2rem)/1.2 Inter,ui-sans-serif,sans-serif;letter-spacing:-.02em;color:#123c3a}
.document-example-page .contact p:not(.kicker){margin:.35rem 0 0;color:#50645f;font-size:.9rem}
.document-example-page .contact-action{gap:.2rem;align-items:flex-start}
.document-example-page .contact .button.light{min-height:44px;background:#123c3a;color:#fff}
.document-example-page .contact a:focus-visible{outline:3px solid var(--focus-dark)!important;outline-offset:3px}
@media(max-width:600px){.document-example-page .contact-grid{grid-template-columns:1fr;padding:1.1rem}.document-example-page .contact h2{font-size:1.65rem}.document-example-page .contact-action{align-items:stretch}.document-example-page .contact .button.light{width:100%}}
@media print{.example-step-picker{display:none!important}}
@media(min-width:431px) and (max-width:600px){.example-intro{grid-template-columns:minmax(0,1fr) 120px}.example-art{width:120px;aspect-ratio:3/2}}
.document-example-page .example-intro h1,.document-example-page .example-panel,.document-example-page .contact-grid{overflow-wrap:anywhere}
.document-example-page .contact h2{overflow-wrap:anywhere}
.document-example-page .example-return{margin:0 auto 1.5rem}
.document-example-page .example-return a{display:inline-flex;min-height:44px;align-items:center;color:var(--focus-dark);font-weight:700}

/* Visual example family: contained intro, readable source layers and desktop step rail. */
.document-example{max-width:1104px;padding-top:1rem}
.document-example .example-intro{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:1.4rem;padding:clamp(1.4rem,3vw,2.4rem);border:1px solid var(--line);border-radius:1.2rem;background:var(--white);box-shadow:0 18px 46px rgb(16 44 43/.07)}
.document-example .example-intro h1{max-width:18ch;margin:.3rem 0 .7rem;color:var(--dark);font:650 clamp(2.1rem,4vw,3.4rem)/1.08 Inter,ui-sans-serif,sans-serif;letter-spacing:-.025em;hyphens:auto;overflow-wrap:anywhere}
.document-example .example-intro .lede{max-width:54ch;margin:.5rem 0;color:var(--muted);font-size:1.06rem;line-height:1.55}
.document-example .example-provenance{margin:.55rem 0;color:var(--muted);font-size:.83rem}
.document-example .example-art{justify-self:center;width:min(100%,300px);padding:.5rem;border-radius:.85rem;background:#eaf1ed}
.document-example .example-art img{object-fit:contain}
.document-example .example-start{color:var(--focus-dark)}
.document-example .example-panel{margin:.6rem 0 1rem;padding:clamp(1.2rem,3vw,2rem);border-radius:.95rem;background:var(--white);box-shadow:0 12px 32px rgb(16 44 43/.06)}
.document-example .example-panel h2{color:var(--dark);font:650 clamp(1.55rem,2.6vw,2.2rem)/1.17 Inter,ui-sans-serif,sans-serif}
.document-example .example-panel h3{color:var(--dark)}
.document-example .example-callout{border-left-color:var(--teal);border-radius:.55rem;background:#e8f1ec}
.document-example .example-answer{border:1px solid #e4d4c3;border-left:4px solid var(--warm);border-radius:.55rem;background:#fffcf7}
.document-example .example-docs li{position:relative;padding:1rem 1rem 1rem 3.2rem;border-radius:.65rem;background:#fffdf8}
.document-example .example-docs li:before{content:'PDF';position:absolute;left:.65rem;top:1rem;padding:.25rem .3rem;border-radius:.25rem;background:#e1ece7;color:var(--focus-dark);font-size:.6rem;font-weight:850}
.document-example .example-citations{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 1rem 1rem}
.document-example .example-citations>div{border:1px solid #cfdbd4;border-radius:.55rem;background:#f5f8f4}
.document-example .example-case{border-radius:.55rem}
.document-example .example-steps button{border-radius:.6rem}
.document-example .example-progress{color:var(--teal)}
.document-example .example-controls button{border-radius:.6rem}
.document-example-page .example-related{max-width:1104px;margin:1.2rem auto 1.7rem}
@media(min-width:1000px){
 .document-example .is-enhanced.example-walkthrough{display:grid;grid-template-columns:218px minmax(0,1fr);column-gap:1.2rem;align-items:start}
 .document-example .is-enhanced .example-steps{grid-column:1;grid-row:1/4;position:sticky;top:6.2rem;display:block;margin-top:1rem;padding:1rem;border:1px solid #cfdbd4;border-radius:.9rem;background:#edf3ee}
 .document-example .is-enhanced .example-steps ol{display:grid;gap:.35rem}
 .document-example .is-enhanced .example-steps button{width:100%;justify-content:flex-start}
 .document-example .is-enhanced .example-progress{grid-column:2;grid-row:1}
 .document-example .is-enhanced .example-panels{grid-column:2;grid-row:2}
 .document-example .is-enhanced .example-controls{grid-column:2;grid-row:3}
}
@media(max-width:760px){.document-example .example-intro{grid-template-columns:minmax(0,1fr) 160px}.document-example .example-art{width:160px}.document-example .example-citations{grid-template-columns:1fr}}
@media(max-width:600px){
 .document-example{padding-top:.4rem}
 .document-example .example-intro{grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:repeat(5,auto);gap:.1rem .7rem;padding:1rem}
 .document-example .example-intro>div{display:contents}
 .document-example .example-intro .kicker{grid-column:1/-1;grid-row:1}
 .document-example .example-intro h1{grid-column:1/-1;grid-row:2;font-size:clamp(1.8rem,8vw,2.35rem);line-height:1.12}
 .document-example .example-intro .lede{grid-column:1/-1;grid-row:3;margin:.5rem 0 0;font-size:.98rem;line-height:1.43}
 .document-example .example-provenance{grid-column:1;grid-row:4;margin:.5rem 0 0}
 .document-example .example-start{grid-column:1;grid-row:5;justify-self:start;margin:.1rem 0 0;overflow-wrap:anywhere}
 .document-example .example-art{grid-column:2;grid-row:4/6;width:96px;margin-top:.5rem;padding:.2rem;align-self:center;justify-self:end}
 .document-example .example-walkthrough{margin-top:.55rem}
 .document-example .example-panel{margin:.5rem 0 1rem;padding:1rem}
 .document-example .example-citations{padding:0 .7rem .7rem}
}
@media(max-width:430px){.document-example .example-art{aspect-ratio:4/5}.document-example .example-intro h1{font-size:1.85rem}}
@media print{.document-example .example-intro,.document-example .example-panel{box-shadow:none}.document-example .is-enhanced.example-walkthrough{display:block}.document-example .is-enhanced .example-steps{display:none!important}}

/* The selected step and its one shared Back/Next control form one card. */
.document-example .example-stage{min-width:0;border:1px solid #cbd8d2;border-radius:.95rem;background:var(--white);box-shadow:0 12px 32px rgb(16 44 43/.06)}
.document-example .example-stage .example-panel{margin:0;padding:clamp(1.1rem,2.6vw,1.7rem);border:0;border-radius:0;background:transparent;box-shadow:none}
.document-example .example-stage .example-controls{margin:0;padding:.8rem clamp(1.1rem,2.6vw,1.7rem);border-top:1px solid #cbd8d2;background:#f4f8f3}
.document-example .example-walkthrough:not(.is-enhanced) .example-stage .example-panel+.example-panel{border-top:1px solid #cbd8d2}
@media(min-width:1000px){.document-example .is-enhanced .example-stage{grid-column:2;grid-row:2/4}}
@media print{.document-example .example-stage{overflow:visible;box-shadow:none}.document-example .is-enhanced .example-stage .example-panel+.example-panel{border-top:1px solid #cbd8d2}}

.document-example .example-stage .example-controls{border-radius:0 0 .95rem .95rem}

/* Enhanced walkthrough: one viewport-sized card, one scroll region and a fixed footer.
   The native document/print fallback keeps all six steps in normal page flow. */
.document-example .is-enhanced .example-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;block-size:min(42rem,70vh);block-size:min(42rem,70svh);overflow-anchor:none}
.document-example .is-enhanced .example-stage .example-panels{grid-column:1;grid-row:1;min-height:0;overflow:auto;scroll-behavior:auto;overscroll-behavior:auto;border-radius:.95rem .95rem 0 0}
.document-example .is-enhanced .example-stage .example-controls{grid-column:1;grid-row:2}
.document-example .is-enhanced .example-panels:focus-visible{outline:3px solid var(--focus-dark);outline-offset:-4px}
.document-example .example-steps button span{flex:none;white-space:nowrap}
@media(max-width:600px){
 .document-example-page .breadcrumb{overflow-wrap:anywhere}
 .document-example .is-enhanced .example-stage .example-docs li{padding:.8rem}
 .document-example .is-enhanced .example-stage .example-docs li:before{position:static;display:inline-block;margin-bottom:.4rem}
 .document-example .is-enhanced .example-controls{gap:.5rem;padding:.6rem .5rem}
 .document-example .is-enhanced .example-controls button{flex:1;min-width:0;padding:.4rem .35rem;line-height:1.25;overflow-wrap:anywhere}
}
@media print{
 .document-example .is-enhanced .example-stage{display:block;block-size:auto}
 .document-example .is-enhanced .example-stage .example-panels{overflow:visible}
}

/* A passive edge cue sits above the fixed controls, never above the last readable line. */
.document-example .is-enhanced .example-stage{position:relative}
.document-example .is-enhanced .example-stage:after{content:'';grid-column:1;grid-row:1;align-self:end;z-index:1;block-size:2rem;pointer-events:none;background:linear-gradient(transparent,#fffdf8);opacity:0}
.document-example .is-enhanced .example-stage.has-more-content:after{opacity:1}
.document-example .is-enhanced .example-controls button{line-height:1.3;white-space:normal}
@media print{.document-example .is-enhanced .example-stage:after{display:none}}