/* "Your experience". Same card language as the other destinations
   (faithful-ready.css): the blues, the 14px radius, 44px touch targets. */
.fx-body{display:grid;gap:22px}
.fx-bridge h2{font-family:var(--font-display);font-size:26px;line-height:1.2;margin:0 0 8px;color:#193654}
.fx-bridge p{font:500 16px/1.6 var(--font-body);color:#27516f;max-width:70ch;margin:0}
.fx-block{background:#fff;border:1px solid #d4e2ee;border-radius:14px;padding:22px}
.fx-block h2{font-family:var(--font-display);font-size:23px;line-height:1.25;margin:0 0 10px;color:#193654}
.fx-lede{font:400 15px/1.6 var(--font-body);color:#27516f;max-width:70ch;margin:0 0 14px}
.fx-answer{display:grid;grid-template-columns:160px 1fr auto;gap:6px 18px;align-items:start;border-top:1px solid #e4eef6;padding:14px 0}
.fx-answer h3{font:600 13px/1.5 var(--font-body);color:#5b7a92;margin:2px 0 0;text-transform:uppercase;letter-spacing:.04em}
.fx-answer dl{margin:0;display:grid;gap:2px}
.fx-answer dt{font:600 13px/1.5 var(--font-body);color:#5b7a92}
.fx-answer dd{margin:0 0 6px;color:#193654;line-height:1.55}
.fx-empty{margin:0;color:#5b7a92;font-style:italic}
.fx-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.fx-link{min-height:44px;padding:8px 10px;border:0;background:transparent;color:#175fa5;font:600 14px/1.4 var(--font-body);text-decoration:underline;cursor:pointer}
.fx-primary{min-height:48px;border:1px solid #175fa5;background:#175fa5;color:#fff;border-radius:10px;padding:12px 18px;font:700 15px/1.4 var(--font-body);cursor:pointer}
.fx-primary:hover{background:#12508c}
a.fx-primary{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none}
a.fx-primary:focus-visible{outline:3px solid #175fa5;outline-offset:3px}
.fx-secondary{display:inline-flex;align-items:center;min-height:44px;border:1px solid #175fa5;color:#175fa5;border-radius:10px;padding:10px 16px;font:600 14px/1.4 var(--font-body);text-decoration:none;margin-top:8px}
.fx-note{background:#e9f3fc;color:#27516f;font:500 13px/1.6 var(--font-body);padding:10px 12px;border-radius:8px;margin:12px 0 0;max-width:70ch}
.fx-status{font:500 14px/1.6 var(--font-body);color:#175fa5;margin:14px 0 0;min-height:22px}
.fx-version-layout{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.fx-phone{border:10px solid #10283f;border-radius:36px;background:#10283f;box-shadow:0 18px 40px #10283f33;width:300px}
.fx-phone-screen{background:linear-gradient(180deg,#eaf3fc,#fff 40%);border-radius:26px;min-height:520px;padding:22px 16px 72px;position:relative;display:grid;align-content:start;gap:10px}
.fx-phone-church{margin:0;font:600 11px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#5b7a92}
.fx-phone-title{margin:0;font-family:var(--font-display);font-size:24px;line-height:1.2;color:#193654}
.fx-phone-lede{margin:0 0 4px;font:400 13px/1.5 var(--font-body);color:#27516f}
.fx-phone-neutral{margin:8px 0 0;font:400 13px/1.55 var(--font-body);color:#5b7a92;background:#f4f8fc;border-radius:12px;padding:12px}
.fx-tile{display:grid;gap:2px;background:#fff;border:1px solid #d9e6f1;border-radius:12px;padding:12px}
.fx-tile strong{font:600 14px/1.35 var(--font-body);color:#193654}
.fx-tile small{font-size:12px;color:#5b7a92}
.fx-tile em{font-size:12px;color:#27516f}
.fx-phone-nav{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:12px 8px 16px;border-top:1px solid #d9e6f1;background:#fff;border-radius:0 0 26px 26px;font:600 11px/1 var(--font-body);color:#5b7a92}
.fx-version-notes p{margin:0 0 10px;color:#27516f;line-height:1.6;max-width:60ch}
.fx-maya{display:flex;gap:18px;align-items:flex-start;border:1px solid #d9e6f1;border-radius:12px;padding:16px;margin:0 0 16px}
.fx-maya img{flex:0 0 auto;border-radius:8px;background:#fff}
.fx-maya h3{margin:0 0 6px;font:600 16px/1.4 var(--font-body);color:#193654}
.fx-maya p{margin:0;color:#27516f;line-height:1.55}
.fx-after{display:grid;gap:8px;justify-items:start}
@media(max-width:900px){.fx-version-layout{grid-template-columns:1fr}.fx-answer{grid-template-columns:1fr}.fx-actions{justify-content:flex-start}}
@media(max-width:720px){.fx-block{padding:18px}.fx-phone{width:100%;max-width:300px}}
/* Take it with you: the personal phone preview (faithful-preview-handoff.js). */
.fph-panel{border:1px solid #d9e6f1;border-radius:12px;padding:16px;margin:0 0 16px;display:grid;gap:12px}
.fph-panel h3{margin:0;font:600 17px/1.4 var(--font-body);color:#193654}
.fph-what h4{margin:0 0 6px;font:600 13px/1.4 var(--font-body);color:#5b7a92;text-transform:uppercase;letter-spacing:.04em}
.fph-what dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 14px}
.fph-what dt{font:600 13px/1.5 var(--font-body);color:#5b7a92}
.fph-what dd{margin:0;color:#193654;line-height:1.5}
.fph-notice{background:#f4f8fc;border-radius:10px;padding:10px 12px;display:grid;gap:6px}
.fph-notice p{margin:0;font:400 13px/1.6 var(--font-body);color:#27516f}
.fph-code{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.fph-code img{border-radius:8px;background:#fff;border:1px solid #d9e6f1}
.fph-code-side{flex:1 1 240px;display:grid;gap:8px}
.fph-code-side p{margin:0;color:#27516f;line-height:1.55}
.fph-countdown{font-weight:600}
.fph-changed{background:#fff6e5;border-radius:8px;padding:8px 10px}
.fph-status{margin:0;min-height:20px;color:#175fa5;font:500 14px/1.5 var(--font-body)}
/* See your version: the real phone app (embedded) beside a summary in words. */
.fx-version-layout{grid-template-columns:390px minmax(0,1fr)}
.fx-phone-frame{max-width:390px;height:760px;margin:0;box-shadow:0 18px 40px #10283f26;box-sizing:border-box}
.fx-version-summary{display:grid;gap:8px;margin:0 0 14px}
.fx-version-label{margin:0;font:600 12px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#5b7a92}
.fx-version-summary .fx-phone-title{font-size:20px}
@media(max-width:900px){.fx-version-layout{grid-template-columns:1fr}.fx-phone-frame{margin:0 auto}}
/* Reached before any page was answered: one card, one way on. */
.fx-first{max-width:640px}
.fx-first .fx-step{margin:0 0 4px;font:700 12px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#8a6a2a}
.fx-first h2{margin:0 0 8px}
.fx-first p{margin:0 0 16px;color:#27516f;line-height:1.55}
.fx-steps{margin:18px 0 12px;padding-left:22px;color:#5b7a92;columns:2;column-gap:28px}
.fx-steps li{margin:0 0 6px}
.fx-first-more{margin:6px 0 0;font-size:14px;color:#5b7a92}
a.fx-link{color:#175fa5;font-weight:600}
.fx-progress{margin:0;padding:12px 16px;border:1px solid #d4e2ee;border-radius:12px;background:#f5f9fc;color:#27516f}
.fx-progress .fx-link{margin-left:6px}
.fx-after h2{margin:4px 0 2px}
/* "What gets stored" folded under the phone-code button's review. */
.fph-more{margin:10px 0 14px;border:1px solid #d4e2ee;border-radius:10px;padding:10px 14px;background:#fbfdff}
.fph-more>summary{cursor:pointer;font-weight:600;color:#175fa5}
.fph-more[open]>summary{margin-bottom:8px}
