/* "Watch for cover that shrinks" (prorated), owner-approved and locked 2026-10-29 (Codex prorated v002, final precise static graph; Daniel: "approved,
   send to lead to give to claude for publishing"). Site placement of the locked style.css: every rule scoped to .dio-prorated, values unchanged.
   Dropped: @font-face (site fonts.css supplies Nunito Sans), :root/body rules, the private review shell and note, the page media rule. The h1/h2 rules
   style the h3/h4 the site uses. The arch band masks with the site's own assets/arch-tile.svg (resolved from this stylesheet's folder). The graph is
   static from first paint; only the header wave moves, one 4.4 s pass after .2 s, resting at 0 0. */
.dio-prorated{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#2f4452;font-synthesis:none}
.dio-prorated *{box-sizing:border-box}
.dio-prorated .prw-card{margin:0;container-type:inline-size}.dio-prorated .prw-surface{background:#f5f7f7}
.dio-prorated .prw-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-prorated .prw-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-prorated .prw-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-prorated .prw-head h3{font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}.dio-prorated .prw-head h3 span{white-space:nowrap}.dio-prorated .prw-body{padding:28px 28px 24px}.dio-prorated .prw-lifetime{margin-left:10.666667%;margin-bottom:8px}.dio-prorated .prw-lifetime h4{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.01em;margin:0 0 5px}.dio-prorated .prw-lifetime p{font-size:17px;line-height:1.45;font-weight:400;color:#506875;margin:0}.dio-prorated .prw-plot{position:relative;aspect-ratio:600/365}.dio-prorated .prw-plot svg{display:block;width:100%;height:100%;overflow:visible;fill:none}.dio-prorated .prw-plot path{vector-effect:non-scaling-stroke}.dio-prorated .prw-axes{stroke:#9fb0b9;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}.dio-prorated .prw-step{stroke:#4c7288;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2}.dio-prorated .prw-level{stroke:#ed873c;stroke-width:3;stroke-linecap:butt}.dio-prorated .prw-y{position:absolute;left:0;top:43%;transform:translate(-15%,-50%) rotate(-90deg);font-size:15px;line-height:1.2;font-weight:400;color:#506875}.dio-prorated .prw-x{position:absolute;left:10.666667%;right:5.333333%;bottom:0;text-align:center;font-size:16px;line-height:1.3;font-weight:400;color:#506875}.dio-prorated .prw-prorated{position:absolute;left:16%;top:62%;display:grid;gap:3px;color:#506875;font-size:17px;line-height:1.4}.dio-prorated .prw-prorated strong{font-size:19px;font-weight:500;color:#2f4452}.dio-prorated .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.dio-prorated .prw-playing .prw-field>i{animation:prw-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}.dio-prorated .prw-paused *{animation-play-state:paused!important}@keyframes prw-wave{from{background-position:100% 0}to{background-position:0 0}}
@container(max-width:500px){.dio-prorated .prw-head h3{font-size:23px}.dio-prorated .prw-body{padding:24px 24px 25px}.dio-prorated .prw-lifetime h4{font-size:19px}.dio-prorated .prw-lifetime p{font-size:16px}.dio-prorated .prw-x{font-size:15px}.dio-prorated .prw-prorated{font-size:16px;top:calc(60% - 8px)}/* 2026-11-11 watched review: lifted 8px so "Less cover over time." clears the axis line on phones */.dio-prorated .prw-prorated strong{font-size:18px}}
@container(max-width:340px){.dio-prorated .prw-head h3{font-size:22px}.dio-prorated .prw-body{padding:22px 20px 25px}.dio-prorated .prw-lifetime{margin-bottom:12px}.dio-prorated .prw-lifetime h4{font-size:18px}.dio-prorated .prw-lifetime p{font-size:16px}.dio-prorated .prw-y{font-size:14px;left:-1%;transform:translate(-24%,-50%) rotate(-90deg)}.dio-prorated .prw-x{font-size:14px}.dio-prorated .prw-prorated{left:17%;top:52%;font-size:15px;gap:1px}.dio-prorated .prw-prorated strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.dio-prorated .prw-card *{animation:none!important}}
html:is(.reduce-motion,.dio-alive-off) .dio-prorated .prw-card *,body:is(.reduce-motion,.dio-alive-off) .dio-prorated .prw-card *,html[data-motion="reduce"] .dio-prorated .prw-card *,.dio-alive-off .dio-prorated .prw-card *,.dio-prorated.dio-alive-off .prw-card *{animation:none!important}
@media print{.dio-prorated .prw-card *{animation:none!important}}
/* site guards (answer-body and header rules must not reach in; values as locked) */
.dio-prorated .prw-head h3,.dio-prorated .prw-lifetime h4{font-family:inherit;color:#2f4452;text-transform:none;padding:0}
.dio-prorated .prw-lifetime p{max-width:none}
.dio-prorated .prw-plot svg{max-width:none}
/* 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-prorated .controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0;max-width:none}
.dio-prorated .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-prorated .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-prorated .controls button:hover{background:#f1f5f6}.dio-prorated .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-prorated .controls button[aria-pressed=true]{background:#e6edf0}.dio-prorated .controls button:disabled{opacity:.55;cursor:default}
.dio-prorated .prw-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media print{.dio-prorated .controls{display:none!important}}