/* "What happens at your yearly visit" (Visit steps), owner-approved and locked 2026-10-29 (Daniel: "good approved for submission to lead to publish
   with claude..."; Codex visit-steps-v003, sequential waveform pulses; supersedes v002, APPROVED-LOCK.json). Site placement of the locked style.css:
   every rule scoped to .dio-visit-steps, values unchanged. Dropped: @font-face (site fonts.css supplies Nunito Sans), :root/body rules, the private
   review shell and note and their page media rule. The h1/h2/h3 rules style the h3/h4/h5 the site uses; the header element is a div. The arch band
   masks with the site's own assets/arch-tile.svg (resolved from this stylesheet's folder). */
.dio-visit-steps{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;font-synthesis:none;color:#2f4452}
/* approved size (GPT 2026-11-03): the locked .review-shell held this card at most 640 px wide; the wide answer column caps it there, centred */
.dio-visit-steps{max-width:640px;margin-inline:auto}
.dio-visit-steps *{box-sizing:border-box}
.dio-visit-steps .vst-card{margin:0;container-type:inline-size}.dio-visit-steps .vst-surface{background:#f5f7f7;display:flow-root}
.dio-visit-steps .vst-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-visit-steps .vst-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
 -webkit-mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
 mask-image:url(../../arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.10) 40%,rgba(0,0,0,.45) 72%,#000);
 -webkit-mask-size:179.4px 179.4px,100% 100%;mask-size:179.4px 179.4px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
 -webkit-mask-composite:source-in;mask-composite:intersect}
.dio-visit-steps .vst-field>i{position:absolute;inset:0;background:linear-gradient(115deg,rgba(76,114,136,.20) 0%,rgba(76,114,136,.20) 30%,rgba(76,114,136,.34) 40%,rgba(237,135,60,.55) 47%,rgba(76,114,136,.30) 54%,rgba(76,114,136,.20) 64%,rgba(76,114,136,.20) 100%);background-size:300% 100%;background-position:0 0}

.dio-visit-steps .vst-head h3{font-size:25px;line-height:1.3;font-weight:600;letter-spacing:-.02em;margin:0;color:#2f4452}.dio-visit-steps .vst-steps{list-style:none;counter-reset:visit;margin:0;padding:28px 28px 8px;display:grid;gap:0}.dio-visit-steps .vst-steps li{counter-increment:visit;position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:16px;align-items:start;min-height:58px;padding:0 0 22px;margin:0;font-size:18px;line-height:1.5;font-weight:400}.dio-visit-steps .vst-steps li:before{content:counter(visit);position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#4c7288;color:white;font-size:17px;line-height:1;font-weight:600}.dio-visit-steps .vst-steps li:not(:last-child):after{content:"";position:absolute;left:15px;top:30px;bottom:0;width:1px;background:#cad5da}.dio-visit-steps .vst-steps .vst-tap{font-weight:600}.dio-visit-steps .vst-steps .vst-tap:before{background:#ed873c;color:#2f4452;border:1px solid #2f4452}.dio-visit-steps .vst-sound{padding:0 28px 24px}.dio-visit-steps .vst-sound h4{font-size:18px;line-height:1.4;font-weight:500;margin:0 0 14px;color:#506875}.dio-visit-steps .vst-sound-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dio-visit-steps .vst-sound-item{position:relative;padding:16px 18px 18px;background:#fff;border:1px solid #cad5da;min-width:0}.dio-visit-steps .vst-wave{display:block;width:100%;height:90px;margin:0 0 14px}.dio-visit-steps .vst-wave .vst-baseline{stroke:#cad5da;stroke-width:1}.dio-visit-steps .vst-wave polyline{stroke-width:2.4;fill:none;stroke-linejoin:round;stroke-linecap:round}.dio-visit-steps .vst-sound-item h5{font-size:18px;line-height:1.35;font-weight:600;margin:0 0 6px;color:#2f4452}.dio-visit-steps .vst-sound-item p{font-size:16.5px;line-height:1.5;font-weight:400;color:#506875;margin:0}.dio-visit-steps .vst-disclaimer{padding:0 0 0 18px;margin:0 28px 26px;border-left:5px solid #ed873c;font-size:18px;line-height:1.5;color:#506875;font-weight:400}.dio-visit-steps .vst-card>figcaption{padding:18px 28px 0;font-size:15px;line-height:1.5;color:#506875}.dio-visit-steps .vst-controls{display:flex;justify-content:flex-end;gap:10px;margin:18px 28px 0}.dio-visit-steps .vst-controls[hidden]{display:none}.dio-visit-steps .vst-controls button{font:500 14px/1.2 "Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;min-height:48px;min-width:82px;padding:11px 16px;background:#fff;border:1px solid #bdcdd6;border-radius:0;color:#2f4452;cursor:pointer}.dio-visit-steps .vst-controls button:hover,.dio-visit-steps .vst-controls button[aria-pressed=true]{background:#e5edf1}.dio-visit-steps .vst-controls button:focus-visible{outline:2px solid #2f4452;outline-offset:3px}.dio-visit-steps .vst-controls button:disabled{opacity:.55;cursor:default}.dio-visit-steps .vst-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@container(max-width:520px){.dio-visit-steps .vst-head h3{font-size:23px}.dio-visit-steps .vst-steps{padding:24px 22px 6px}.dio-visit-steps .vst-steps li{font-size:17px;grid-template-columns:32px 1fr;gap:13px;padding-bottom:20px}.dio-visit-steps .vst-steps li:before{width:30px;height:30px;font-size:16px}.dio-visit-steps .vst-steps li:not(:last-child):after{left:14px;top:29px}.dio-visit-steps .vst-sound{padding:0 22px 22px}.dio-visit-steps .vst-sound h4{font-size:17px}.dio-visit-steps .vst-sound-pair{gap:12px}.dio-visit-steps .vst-sound-item{padding:14px 12px 16px}.dio-visit-steps .vst-sound-item h5{font-size:17px}.dio-visit-steps .vst-sound-item p{font-size:16px}.dio-visit-steps .vst-wave{height:75px;margin-bottom:12px}.dio-visit-steps .vst-disclaimer{margin:0 22px 24px;font-size:17px}.dio-visit-steps .vst-card>figcaption{padding:17px 22px 0}.dio-visit-steps .vst-controls{margin:16px 22px 0}}
@container(max-width:360px){.dio-visit-steps .vst-head{padding:20px 22px}.dio-visit-steps .vst-steps{padding:22px 18px 4px}.dio-visit-steps .vst-steps li{font-size:16px;line-height:1.5;gap:12px}.dio-visit-steps .vst-sound{padding:0 18px 22px}.dio-visit-steps .vst-sound-pair{grid-template-columns:1fr;gap:14px}.dio-visit-steps .vst-sound-item{padding:14px 16px 17px}.dio-visit-steps .vst-wave{height:72px}.dio-visit-steps .vst-sound-item h5{font-size:18px}.dio-visit-steps .vst-disclaimer{margin:0 18px 24px;font-size:16px}.dio-visit-steps .vst-card>figcaption{padding:17px 18px 0}}
@media(prefers-reduced-motion:reduce){.dio-visit-steps .vst-card *{animation:none!important;transition:none!important}}html.reduce-motion .dio-visit-steps .vst-card *,html[data-motion="reduce"] .dio-visit-steps .vst-card *,.dio-alive-off .dio-visit-steps .vst-card *{animation:none!important;transition:none!important}
@media print{.dio-visit-steps .vst-controls{display:none}.dio-visit-steps .vst-sound-item{break-inside:avoid}}

/* Keep visual numbers out of the native ordered-list accessible text. */
.dio-visit-steps .vst-steps li:before{content:none}.dio-visit-steps .vst-number{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#4c7288;color:#fff;font-size:17px;line-height:1;font-weight:600}.dio-visit-steps .vst-tap .vst-number{background:#ed873c;color:#2f4452;border:1px solid #2f4452}
@container(max-width:520px){.dio-visit-steps .vst-number{width:30px;height:30px;font-size:16px}}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-visit-steps.dio-visit-steps .vst-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.dio-visit-steps.dio-visit-steps .vst-controls[hidden]{display:none}
.dio-visit-steps.dio-visit-steps .vst-controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-visit-steps.dio-visit-steps .vst-controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-visit-steps.dio-visit-steps .vst-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-visit-steps.dio-visit-steps .vst-controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-visit-steps.dio-visit-steps .vst-controls button:disabled{opacity:.55;color:#203846;cursor:default}
/* the row is drawn first although it follows the card in the markup */
.dio-visit-steps.dio-visit-steps .vst-card{display:flex;flex-direction:column}
.dio-visit-steps.dio-visit-steps .vst-controls{order:-1}
@media print{.dio-visit-steps.dio-visit-steps .vst-controls{display:none!important}}
/* end animation controls */