/* Future page: goal cards that flip to show the plan. future.js adds .fl-on; without it the plan shows under each goal. */
.fcard .fin{width:100%}
.fcard .fback{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.fgrid .fback .ftag{background:var(--gold);color:#000}
.fback h4{font:600 1.15rem var(--serif);color:var(--navy);margin:0 0 .4rem}
.fplan{list-style:none;counter-reset:fp;margin:.2rem 0 1rem;padding:0}
.fplan li{counter-increment:fp;position:relative;padding-left:2.1rem;margin:.55rem 0;font-size:.96rem;line-height:1.5}
.fplan li:before{content:counter(fp);position:absolute;left:0;top:.08rem;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--gold);color:#000;font:700 .78rem/1.45rem var(--sans);text-align:center}
.fgrid .fchurch{font-size:.94rem;line-height:1.55}
.fchurch strong{color:var(--navy)}
.fvh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.fhint{display:flex;align-items:center;gap:.55rem;margin:1.5rem 0 0;font-weight:600;color:var(--navy)}
.fhint svg{width:1.25rem;height:1.25rem;flex:none;color:var(--gold-d)}
.fhint+.fgrid{margin-top:1.1rem}

.fgrid.fl-on .fcard{display:grid;padding:0;background:transparent;border:0;border-radius:.9rem;box-shadow:none;perspective:1600px;cursor:pointer}
.fgrid.fl-on .fcard:hover{box-shadow:none}
.fgrid.fl-on .fin{display:grid;width:auto;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.fgrid.fl-on .fcard.on .fin{transform:rotateY(180deg)}
.fgrid.fl-on .fface{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:1.5rem 1.6rem;border-radius:.9rem;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 10px 30px rgba(10,31,77,.07);transition:visibility 0s linear .4s,box-shadow .35s var(--ease)}
.fgrid.fl-on .ffront{background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold)}
.fgrid.fl-on .fback{background:var(--navy);color:#dbe4f5;border:1px solid var(--navy);border-top:5px solid var(--gold);transform:rotateY(180deg)}
.fgrid.fl-on .fcard:not(.on) .ffront,.fgrid.fl-on .fcard.on .fback{visibility:visible;transition-delay:0s,0s}
.fgrid.fl-on .fcard.on .ffront,.fgrid.fl-on .fcard:not(.on) .fback{visibility:hidden}
.fgrid.fl-on .fcard:hover .fface{box-shadow:0 22px 44px rgba(10,31,77,.16)}
.fgrid.fl-on .fback h4{color:#fff}
.fgrid.fl-on .fplan,.fgrid.fl-on .fchurch{align-self:stretch}
.fgrid.fl-on .fchurch{border-top:1px solid rgba(255,255,255,.18);padding-top:.85rem;color:#c9d5ee}
.fgrid.fl-on .fchurch strong{color:var(--gold)}
.fgrid.fl-on .fback a{color:var(--gold)}
.fface h3:focus,.fface h4:focus{outline:none}
.fact{margin-top:auto;padding-top:1.2rem}
.fbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.05rem;border:0;border-radius:999px;background:var(--pale);color:var(--navy);font:700 .9rem var(--sans);cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.fbtn svg{width:1.05rem;height:1.05rem;flex:none}
.fbtn:hover{background:#d9e4f6;transform:translateY(-1px)}
.fback .fbtn{background:rgba(255,255,255,.13);color:#fff}
.fback .fbtn:hover{background:rgba(255,255,255,.22)}
.fbtn:focus-visible{outline:3px solid var(--gold-d);outline-offset:3px}
@media(max-width:620px){.fgrid.fl-on .fface{padding:1.3rem 1.25rem}}
@media(prefers-reduced-motion:reduce){.fgrid.fl-on .fin{transition:none}.fgrid.fl-on .fcard.on .fin,.fgrid.fl-on .fback{transform:none}.fgrid.fl-on .fface{transition:none}}
.fgrid.fl-on .ffront{position:relative;overflow:hidden}
.fgrid.fl-on .ffront:after{content:"";position:absolute;right:-2.6rem;bottom:-2.6rem;width:12.5rem;aspect-ratio:1;border-radius:50%;background:url(verena-mark.webp) center/cover no-repeat;opacity:.09;pointer-events:none}
.fgrid.fl-on .ffront>*{position:relative;z-index:1}
/* Every card the same size: equal rows, and both faces fill the whole card so the buttons line up */
.fgrid.fl-on{grid-auto-rows:1fr}
.fgrid.fl-on .fcard{display:flex;flex-direction:column}
.fgrid.fl-on .fin{flex:1 1 auto;grid-template-rows:1fr}
/* Two columns (tablets): center a last card that would sit alone */
@media(min-width:621px) and (max-width:960px){.fgrid .fcard:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc((100% - 1.5rem)/2)}}