/* "Tell us early, not on surgery day", owner-approved and locked 2026-10-29 (Daniel: "great- approved"; Codex family-c/tell-us-early-v002,
   APPROVED-LOCK.json). Site placement of the locked style.css: every rule scoped to .dio-tell-us-early, the h1/h2 rules moved to the component
   title (h3) and step/notice headings (h4), the review controls, page body/main/:root/button rules and the @font-face dropped (the site's
   fonts.css supplies Nunito Sans). Values are unchanged. The arch header is the site's own chart-card band (answer-charts.css lines 14-24):
   the mask is the site file assets/arch-tile.svg (sha256 cd8e28f9...), referenced from this sheet's folder, never a copy. The 600/350 media
   queries are container queries on the component. */
.dio-tell-us-early{font-family:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;color:#203846;font-synthesis:none;font-size:16px;line-height:normal}
.dio-tell-us-early *{box-sizing:border-box}
.dio-tell-us-early .tue-card{margin:0;container-type:inline-size}
.dio-tell-us-early .tell-us-early{background:#f5f7f7}
/* header band: the light arch field from the answer page header, quiet at the reading edge, a little stronger to the right */
.dio-tell-us-early .tell-us-early-header{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-tell-us-early .header-art{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}
/* resting state is the end frame: steel lines, the orange crest already past */
.dio-tell-us-early .header-art>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-tell-us-early .tell-us-early.is-playing .header-art>i{animation:tell-us-early-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}
@keyframes tell-us-early-wave{from{background-position:100% 0}to{background-position:0 0}}
.dio-tell-us-early .tell-us-early-header h3.tue-title{position:relative;margin:0;font-family:inherit;color:#203846;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.dio-tell-us-early .tue-process{padding:26px 28px 28px}
.dio-tell-us-early .tue-process p.tue-intro{font-size:15px;font-weight:500;line-height:1.5;color:#536f80;margin:0 0 22px}
.dio-tell-us-early .tue-list{list-style:none;margin:0;padding:0}
.dio-tell-us-early .tue-list>li.tue-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;margin:0;padding-bottom:28px}
.dio-tell-us-early .tue-list>li.tue-step:last-child{padding-bottom:0}
.dio-tell-us-early .tue-step:not(:last-child)::after{position:absolute;content:"";left:27px;top:60px;bottom:0;width:2px;background:#cad9e1}
.dio-tell-us-early .tue-icon{position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center;background:#e3edf2;border-radius:50%}
.dio-tell-us-early .tue-icon svg{display:block;width:39px;height:39px;max-width:none;fill:none;stroke:#4c7288;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dio-tell-us-early .tue-accent{fill:#ed873c;stroke:#ed873c}
.dio-tell-us-early .tue-icon .tue-accent-line{stroke:#ed873c;stroke-width:2.5}
.dio-tell-us-early .tue-step:last-child .tue-icon{background:#f5dec9}
.dio-tell-us-early .tue-copy h4{font-family:inherit;color:#203846;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.012em;margin:3px 0 6px}
.dio-tell-us-early .tue-copy p{color:#203846;font-size:16px;line-height:1.5;font-weight:400;margin:0}
.dio-tell-us-early .tue-copy p.tue-doctor{font-size:15px;font-weight:500;color:#35596e;margin-top:10px}
.dio-tell-us-early .tue-notice{display:grid;grid-template-columns:36px minmax(0,1fr);gap:15px;margin:0;padding:22px 28px 25px;background:#f8e8da;border-top:1px solid #ead0b8}
.dio-tell-us-early .tue-notice>svg{display:block;width:36px;height:36px;max-width:none;fill:none;stroke:#bf6e32;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.dio-tell-us-early .tue-notice p.tue-condition{font-size:14px;line-height:1.5;font-weight:400;margin:0 0 7px;color:#4b606b}
.dio-tell-us-early .tue-notice h4{font-family:inherit;color:#203846;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em;margin:0 0 7px}
.dio-tell-us-early .tue-notice p{color:#203846;font-size:16px;line-height:1.5;font-weight:400;margin:0}
.dio-tell-us-early .tue-card figcaption{font-size:13px;line-height:1.5;color:#536b79;text-align:center;padding:16px 10px 0;margin:0;background:none}
.dio-tell-us-early .sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dio-tell-us-early .tell-us-early.is-playing .tue-step{animation:tue-arrive .7s cubic-bezier(.22,.7,.25,1) .2s both}
.dio-tell-us-early .tell-us-early.is-playing .tue-step:nth-child(2){animation-delay:.6s}
.dio-tell-us-early .tell-us-early.is-playing .tue-step:nth-child(3){animation-delay:1s}
.dio-tell-us-early .tell-us-early.is-playing .tue-step:nth-child(4){animation-delay:1.4s}
.dio-tell-us-early .tell-us-early.is-playing .tue-notice{animation:tue-arrive .7s cubic-bezier(.22,.7,.25,1) 1.9s both}
@keyframes tue-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.dio-tell-us-early .tell-us-early.is-paused *{animation-play-state:paused!important}
@container (max-width:600px){
 .dio-tell-us-early .tell-us-early-header h3.tue-title{font-size:23px}
 .dio-tell-us-early .tue-process{padding:23px 20px 25px}
 .dio-tell-us-early .tue-process p.tue-intro{margin-bottom:20px}
 .dio-tell-us-early .tue-list>li.tue-step{grid-template-columns:48px minmax(0,1fr);gap:14px;padding-bottom:25px}
 .dio-tell-us-early .tue-step:not(:last-child)::after{left:23px;top:52px}
 .dio-tell-us-early .tue-list>li.tue-step:last-child{padding-bottom:0}
 .dio-tell-us-early .tue-icon{width:48px;height:48px}
 .dio-tell-us-early .tue-icon svg{width:35px;height:35px}
 .dio-tell-us-early .tue-copy h4{font-size:19px;margin-top:2px}
 .dio-tell-us-early .tue-copy p{font-size:16px}
 .dio-tell-us-early .tue-copy p.tue-doctor{font-size:15px}
 .dio-tell-us-early .tue-notice{grid-template-columns:29px minmax(0,1fr);gap:12px;padding:21px 20px 23px}
 .dio-tell-us-early .tue-notice>svg{width:29px;height:29px}
 .dio-tell-us-early .tue-notice h4{font-size:19px}
 .dio-tell-us-early .tue-notice p{font-size:15px}
 .dio-tell-us-early .tue-notice p.tue-condition{font-size:13px}
}
@container (max-width:350px){
 .dio-tell-us-early .tell-us-early-header{padding-inline:20px}
 .dio-tell-us-early .tue-process{padding-inline:16px}
 .dio-tell-us-early .tue-list>li.tue-step{gap:12px}
 .dio-tell-us-early .tue-copy h4{font-size:18px}
 .dio-tell-us-early .tue-notice{padding-inline:16px;grid-template-columns:25px minmax(0,1fr);gap:10px}
 .dio-tell-us-early .tue-notice>svg{width:25px;height:25px}
}
html:is(.reduce-motion,.dio-alive-off) .dio-tell-us-early .tell-us-early *{animation:none!important}
.dio-tell-us-early .tell-us-early:not(.is-playing) .header-art>i{background-position:0 0}
@media(prefers-reduced-motion:reduce){.dio-tell-us-early .tell-us-early *{animation:none!important}.dio-tell-us-early .header-art>i{background-position:0 0!important}}
@media print{.dio-tell-us-early .tell-us-early *{animation:none!important}}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z).
   Same look as the where-bar and plan-b controls: one row above the figure, right side, wrapping on narrow widths; real buttons at least 44 px
   tall with a visible focus ring; hidden in print. Every rule is scoped to this widget. */
.dio-tell-us-early .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-tell-us-early .controls[hidden]{display:none}
/* 2026-11-11 audit: the controls take the finish of the site's animation toggle (2px steel border, 6px corners, ink focus ring) so every animation's controls match */
.dio-tell-us-early .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;cursor:pointer}
.dio-tell-us-early .controls button:hover{background:#f1f5f6}.dio-tell-us-early .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-tell-us-early .controls button[aria-pressed=true]{background:#e6edf0}.dio-tell-us-early .controls button:disabled{opacity:.55;cursor:default}
@media print{.dio-tell-us-early .controls{display:none!important}}