/* ===== ONE FLOW — shared controls (learn once, recognise everywhere) ===== */
.ofl{ --ofl-navy:#20354B; --ofl-sage:#6F9272; --ofl-sage-pale:#DCE7D7; --ofl-border:#E8E4DC; --ofl-muted:#687383;
  background:#fff; border:1px solid var(--ofl-border); border-radius:24px; padding:22px; margin:18px 0 0; box-sizing:border-box; }
.ofl *{ box-sizing:border-box; }
.ofl-eyebrow{ font-size:0.68rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:#6F9272 !important; -webkit-text-fill-color:#6F9272 !important; margin:0 0 6px; }
.ofl-lede{ font-size:0.88rem; line-height:1.6; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:0 0 16px; }
.ofl-row{ display:flex; align-items:flex-start; gap:14px; padding:13px 0; border-top:1px solid #F1EEE8; }
.ofl-row:first-of-type{ border-top:none; }
.ofl-row-txt{ flex:1; min-width:0; }
.ofl-row-t{ font-size:0.9rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0; }
.ofl-row-d{ font-size:0.8rem; line-height:1.55; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:4px 0 0; }
/* accessible switch with a visible text label */
.ofl-switch{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; flex:0 0 auto; min-height:44px; }
.ofl-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.ofl-track{ width:46px; height:27px; border-radius:50px; background:#E3E0D9; position:relative; transition:.18s; flex:0 0 46px; }
.ofl-track::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.18s; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.ofl-switch input:checked + .ofl-track{ background:#6F9272; }
.ofl-switch input:checked + .ofl-track::after{ transform:translateX(19px); }
.ofl-switch input:focus-visible + .ofl-track{ box-shadow:0 0 0 3px #CF9E3F; }
.ofl-state{ font-size:0.72rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#687383 !important; -webkit-text-fill-color:#687383 !important; min-width:26px; }
.ofl-switch input:checked ~ .ofl-state{ color:#4d6a50 !important; -webkit-text-fill-color:#4d6a50 !important; }
.ofl-row.is-off .ofl-row-t, .ofl-row.is-off .ofl-row-d{ opacity:.55; }
.ofl-vis{ border-top:1px solid #F1EEE8; padding-top:15px; margin-top:4px; }
.ofl-vis-l{ font-size:0.9rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0 0 4px; }
.ofl-vis-d{ font-size:0.8rem; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:0 0 11px; }
.ofl-vis-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.ofl-vis-opt{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ofl-border); background:#fff; border-radius:50px; padding:9px 15px; font-family:inherit; font-size:0.81rem; font-weight:700; color:#687383 !important; -webkit-text-fill-color:#687383 !important; cursor:pointer; transition:.15s; min-height:42px; }
.ofl-vis-opt:hover{ border-color:#cfc9bd; }
.ofl-vis-opt.is-on{ border-color:#B9CDB4; background:#DCE7D7; color:#31503a !important; -webkit-text-fill-color:#31503a !important; }
.ofl-vis-opt svg{ width:14px; height:14px; }
.ofl.is-compact{ padding:16px; border-radius:20px; }
.ofl.is-compact .ofl-row{ padding:10px 0; }

/* ===== confirmation ===== */
.ofl-confirm-ov{ position:fixed; inset:0; z-index:10000; background:rgba(32,53,75,.34); display:flex; align-items:center; justify-content:center; padding:20px; }
.ofl-confirm{ background:#fff; border-radius:28px; border:1px solid #E8E4DC; max-width:430px; width:100%; padding:28px; box-shadow:0 26px 70px rgba(32,53,75,.22); animation:oflIn .26s cubic-bezier(.2,.8,.3,1); }
@keyframes oflIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ofl-confirm{ animation:none; } }
.ofl-confirm-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ofl-confirm-ic{ width:46px; height:46px; flex:0 0 46px; border-radius:16px; background:#DCE7D7; color:#4d6a50; display:flex; align-items:center; justify-content:center; }
.ofl-confirm-ic svg{ width:23px; height:23px; }
.ofl-confirm-src{ font-size:0.68rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#6F9272 !important; -webkit-text-fill-color:#6F9272 !important; margin:0; }
.ofl-confirm-h{ font-family:Georgia,serif; font-size:1.2rem; font-weight:700; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:2px 0 0; }
.ofl-msg{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; font-size:0.89rem; line-height:1.5; color:#3d4a5a !important; -webkit-text-fill-color:#3d4a5a !important; }
.ofl-msg svg{ width:17px; height:17px; flex:0 0 17px; color:#6F9272; margin-top:1px; }
.ofl-confirm-acts{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; padding-top:16px; border-top:1px solid #F1EEE8; }
.ofl-act{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ofl-border); background:#fff; border-radius:50px; padding:11px 17px; font-family:inherit; font-size:0.8rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; cursor:pointer; min-height:44px; transition:.15s; }
.ofl-act:hover{ background:#FBFAF7; border-color:#cfc9bd; }
.ofl-act.is-primary{ background:#6F9272; border-color:#6F9272; color:#fff !important; -webkit-text-fill-color:#fff !important; margin-left:auto; }
.ofl-act.is-primary:hover{ background:#5d7d60; border-color:#5d7d60; }

/* ===== how one flow works ===== */
.ofl-how{ background:#fff; border:1px solid #E8E4DC; border-radius:28px; padding:26px; }
.ofl-how-h{ font-family:Georgia,serif; font-size:1.25rem; font-weight:700; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0 0 10px; }
.ofl-how-p{ font-size:0.9rem; line-height:1.72; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:0 0 12px; max-width:64ch; }
.ofl-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }
.ofl-step{ background:#FBFAF7; border:1px solid #EFEBE3; border-radius:20px; padding:16px 14px; text-align:center; position:relative; }
.ofl-step-ic{ width:40px; height:40px; margin:0 auto 10px; border-radius:13px; background:#DCE7D7; color:#4d6a50; display:flex; align-items:center; justify-content:center; }
.ofl-step-ic svg{ width:19px; height:19px; }
.ofl-step-t{ font-size:0.84rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0; }
.ofl-step-d{ font-size:0.75rem; line-height:1.5; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:5px 0 0; }
.ofl-step-arrow{ position:absolute; right:-11px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#C7BFB1; z-index:2; }
.ofl-step:last-child .ofl-step-arrow{ display:none; }

@media (max-width:760px){
  .ofl-steps{ grid-template-columns:1fr 1fr; }
  .ofl-step:nth-child(2) .ofl-step-arrow{ display:none; }
  .ofl-row{ flex-wrap:wrap; }
  .ofl-confirm-acts .ofl-act.is-primary{ margin-left:0; width:100%; justify-content:center; }
}
@media (max-width:480px){
  .ofl-steps{ grid-template-columns:1fr; }
  .ofl-step-arrow{ display:none !important; }
}