/* "Getting the first pill down" (first-pill v002), owner-approved and locked 2026-10-29. Site placement of the locked style.css: every rule scoped to
   .dio-first-pill, values unchanged; the font-face, page shell and review note dropped (fonts.css supplies Nunito Sans); the arch mask is the site's own
   assets/arch-tile.svg (resolved from this stylesheet); the locked 520/340 container queries on .fp-card are kept, so the 2x2 grid holds on phones. */
.dio-first-pill{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;color:#2f4452;font-synthesis:none}.dio-first-pill *{box-sizing:border-box}.dio-first-pill .fp-card{margin:0;container-type:inline-size}.dio-first-pill .fp-surface{background:#f5f7f7}
.dio-first-pill .fp-head{position:relative;isolation:isolate;padding:22px 28px 20px;background:#e8eff3;border-bottom:1px solid #cad5da}
.dio-first-pill .fp-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-first-pill .fp-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-first-pill .fp-head .fp-title{font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0}
.dio-first-pill .fp-head .fp-title span{white-space:nowrap}
.dio-first-pill .fp-list{list-style:none;margin:0;padding:24px 28px 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dio-first-pill .fp-item{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:0;margin:0;padding:18px;background:#fff;border:1px solid #d5dfe4}.dio-first-pill .fp-picture{width:138px;aspect-ratio:180/142;align-self:center}.dio-first-pill .fp-picture svg{display:block;width:100%;height:100%;overflow:visible}.dio-first-pill .fp-item p{font-size:18px;line-height:1.45;font-weight:400;color:#506875;margin:0}.dio-first-pill .fp-item strong{font-size:18px;font-weight:500;color:#2f4452;letter-spacing:-.01em}.dio-first-pill .fp-card figcaption{font-size:17px;line-height:1.5;font-weight:400;color:#2f4452;margin:0;padding:21px 28px 0}.dio-first-pill .fp-disclaimer{font-size:15px;line-height:1.5;color:#506875;margin:10px 0 0;padding:0 28px}
.dio-first-pill .fp-playing .fp-field>i{animation:fp-wave 4.4s cubic-bezier(.45,.05,.35,1) .2s 1 both}.dio-first-pill .fp-playing .fp-item{animation:fp-enter .65s cubic-bezier(.22,.7,.25,1) both}.dio-first-pill .fp-playing .fp-item:nth-child(1){animation-delay:.15s}.dio-first-pill .fp-playing .fp-item:nth-child(2){animation-delay:.4s}.dio-first-pill .fp-playing .fp-item:nth-child(3){animation-delay:.65s}.dio-first-pill .fp-playing .fp-item:nth-child(4){animation-delay:.9s}.dio-first-pill .fp-playing .fp-sip{animation:fp-sip .7s ease both}.dio-first-pill .fp-playing .fp-sip-one{animation-delay:.55s}.dio-first-pill .fp-playing .fp-sip-two{animation-delay:.8s}.dio-first-pill .fp-playing .fp-sip-three{animation-delay:1.05s}.dio-first-pill .fp-playing .fp-tablet-left{animation:fp-half-left .8s ease .95s 1 both}.dio-first-pill .fp-playing .fp-tablet-right{animation:fp-half-right .8s ease .95s 1 both}.dio-first-pill .fp-paused *{animation-play-state:paused!important}
@keyframes fp-wave{from{background-position:100% 0}to{background-position:0 0}}@keyframes fp-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes fp-sip{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes fp-half-left{from{transform:translateX(3px)}to{transform:none}}@keyframes fp-half-right{from{transform:translateX(-3px)}to{transform:none}}
@container(max-width:520px){.dio-first-pill .fp-head .fp-title{font-size:23px}.dio-first-pill .fp-list{padding:22px 22px 24px;gap:14px}.dio-first-pill .fp-item{padding:16px;gap:12px}.dio-first-pill .fp-picture{width:100px}.dio-first-pill .fp-item p{font-size:16.5px;line-height:1.48}.dio-first-pill .fp-item strong{font-size:17px}.dio-first-pill .fp-card figcaption{font-size:16px;padding:20px 24px 0}.dio-first-pill .fp-disclaimer{font-size:14px;padding:0 24px}}
@container(max-width:340px){.dio-first-pill .fp-head .fp-title{font-size:22px}.dio-first-pill .fp-list{padding:18px 16px 20px;gap:12px}.dio-first-pill .fp-item{padding:12px;gap:10px}.dio-first-pill .fp-picture{width:76px}.dio-first-pill .fp-item p{font-size:16px;line-height:1.48}.dio-first-pill .fp-item strong{font-size:16px}.dio-first-pill .fp-card figcaption{padding:19px 20px 0}.dio-first-pill .fp-disclaimer{padding:0 20px}}

@media(prefers-reduced-motion:reduce){.dio-first-pill .fp-card *{animation:none!important}}
@media print{.dio-first-pill .fp-card *{animation:none!important}}

/* reduced motion: the system setting, the site's html.reduce-motion / data-motion and .dio-alive-off all show the complete still */
html:is(.reduce-motion,.dio-alive-off) .dio-first-pill .fp-card *,html[data-motion="reduce"] .dio-first-pill .fp-card *,.dio-alive-off .dio-first-pill .fp-card *,.dio-first-pill .fp-card.dio-alive-off *{animation:none!important}
/* guards against the answer-body rules (section.part p/li/h3, .ans-anim figcaption); no visual change from the lock */
.dio-first-pill .fp-card .fp-title{font-family:inherit;color:#2f4452}
.dio-first-pill .fp-card .fp-list>li.fp-item{margin:0}
.dio-first-pill .fp-card .fp-item p{margin:0}
.dio-first-pill .fp-card>figcaption{text-align:left;font-style:normal}
.dio-first-pill .fp-card p.fp-disclaimer{color:#506875}
.dio-first-pill .fp-picture svg{max-width:none}
.dio-first-pill .fp-picture svg text{font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif}
/* Replay / Still view controls restored 2026-11-11 (Daniel: animations get pause or replay; GPT 21:37Z). One row above the figure, right side,
   wrapping on narrow widths, outside the title band; button look, focus ring and print rule follow the adapters that already ship controls. */
.dio-first-pill .fp-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 0 12px;padding:0}
.dio-first-pill .fp-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-first-pill .fp-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-first-pill .fp-controls button:hover{background:#f1f5f6}.dio-first-pill .fp-controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}.dio-first-pill .fp-controls button[aria-pressed=true]{background:#e6edf0}.dio-first-pill .fp-controls button:disabled{opacity:.55;cursor:default}
.dio-first-pill .fp-sr{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-first-pill .fp-controls{display:none!important}}