/* Reusable component. Fonts inherit the portfolio's main stylesheet. */
.df-preview{width:90%;max-width:1500px;margin:50px auto 90px}
.df-heading{max-width:800px;margin:0 0 42px}.df-heading h1{text-align:left;padding:0}.df-heading p{margin-top:16px}
.df-eyebrow,.df-step{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#737b91}
.discovery-flow{--df-line:#a9aebc;margin:0;padding:36px;background:#f5f5f7;border:1px solid #eeeef2;border-radius:20px;box-sizing:border-box}
.discovery-flow *{box-sizing:border-box}
.df-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 48px;align-items:stretch}
.df-card{position:relative;background:white;border:1px solid #e7e8ed;border-radius:14px;padding:26px;box-shadow:0 3px 12px #24243b03}
.df-card h3{font-size:24px;line-height:1.25;margin:14px 0 22px;color:#292b33}
.df-card p,.df-card dd,.df-card blockquote{font-size:16px;line-height:1.55;color:#656570}
.df-card p{margin:0}.df-card blockquote{margin:0;padding:0;border:0;font-style:normal;font-size:19px;line-height:1.55;color:#424551}
.df-card dl{margin:0}.df-card dt{font-size:14px;font-weight:600;color:#343641;margin:16px 0 3px}.df-card dt:first-child{margin-top:0}.df-card dd{margin:0}
.df-tag{display:inline-block;margin-top:24px;background:#f2f3f6;border-radius:20px;padding:5px 10px;font-size:11px;color:#697187}
.df-request{grid-area:1/1}.df-interpret{grid-area:1/2}.df-retrieve{grid-area:1/3}.df-eligible{grid-area:2/3}.df-rank{grid-area:2/2}.df-recommend{grid-area:2/1;background:#eef0f6;border-color:#dce0eb}
.df-request:after,.df-interpret:after,.df-eligible:after,.df-rank:after{position:absolute;content:'→';font-family:Arial,sans-serif;font-size:30px;color:var(--df-line);width:48px;text-align:center;right:-49px;top:42%}
.df-eligible:after,.df-rank:after{content:'←';left:-49px;right:auto}
.df-retrieve:after{content:'↓';position:absolute;bottom:-59px;left:calc(50% - 12px);font-family:Arial,sans-serif;font-size:32px;color:var(--df-line)}
.df-decision{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #e9eaf0;margin-top:22px;padding-top:16px;font-size:13px;color:#525a70}.df-yes{color:#52715f;white-space:nowrap}
.df-branch{margin-top:12px;padding:12px 14px;border-radius:8px;background:#f8f5ef;border:1px dashed #ddd5c8}.df-branch>span{font-size:11px;font-weight:600;color:#8a7351}.df-branch p{font-size:14px;margin-top:4px;color:#766954}
.discovery-flow>figcaption{margin-top:26px;font-size:12px;color:#868792;max-width:700px}
@media(max-width:1050px){.discovery-flow{padding:24px}.df-grid{gap:56px 30px}.df-card{padding:20px}.df-card h3{font-size:21px}.df-card p,.df-card dd{font-size:14px}.df-request:after,.df-interpret:after{width:30px;right:-31px}.df-eligible:after,.df-rank:after{width:30px;left:-31px}.df-retrieve:after{bottom:-49px}}
@media(max-width:760px){.df-preview{margin-top:28px}.discovery-flow{padding:18px;border-radius:14px}.df-grid{display:flex;flex-direction:column;gap:36px}.df-card{padding:24px}.df-card h3{font-size:24px}.df-card p,.df-card dd{font-size:16px}.df-card:after{content:'↓';top:auto;bottom:-34px;left:calc(50% - 15px);right:auto;width:30px;font-size:26px}.df-recommend:after{content:none}.df-heading{margin-bottom:26px}.df-branch br{display:none}}

/* Explicit decision branch between interpretation and the two destinations. */
.df-grid{grid-template-columns:minmax(0,1fr) 36px minmax(0,1.08fr) 150px minmax(0,1fr);column-gap:0}
.df-request{grid-area:1/1}.df-interpret{grid-area:1/3}.df-destinations{grid-area:1/5;display:grid;grid-template-rows:auto 1fr;gap:20px;min-width:0}.df-eligible{grid-area:2/5}.df-rank{grid-area:2/3}.df-recommend{grid-area:2/1}
.df-destinations .df-retrieve{grid-area:auto}.df-clarify h3{margin-bottom:0;font-size:21px}.df-clarify{background:#f8f5ef;border-color:#e6ded0}.df-destinations .df-tag{display:none}
.df-interpret:after{content:none}.df-request:after{width:36px;right:-37px}.df-eligible:after{width:150px;left:-151px}.df-rank:after{width:36px;left:-37px}
.df-fork{grid-area:1/4;position:relative;min-height:300px;align-self:stretch}.df-fork svg{position:absolute;inset:0;width:100%;height:100%}.df-fork>span{position:absolute;left:15%;top:50%;transform:translateY(-50%);font-size:14px;line-height:1.4;background:#f5f5f7;z-index:1;color:#626777;padding:4px}.df-fork small{position:absolute;left:70%;background:#f5f5f7;padding:2px 5px;font-size:12px;color:#737b91}.df-no-label{top:22%}.df-yes-label{top:62%}
@media(max-width:1100px) and (min-width:761px){.df-grid{grid-template-columns:minmax(0,1fr) 28px minmax(0,1.1fr) 110px minmax(0,1fr)}.df-card{padding:16px}.df-fork>span{font-size:12px}.df-request:after{width:28px;right:-29px}.df-rank:after{width:28px;left:-29px}.df-eligible:after{width:110px;left:-111px}}
@media(max-width:760px){.df-grid{display:flex}.df-fork{min-height:0;height:auto;text-align:center;padding:12px}.df-fork svg,.df-fork small{display:none}.df-fork>span{position:static;display:block;transform:none;font-size:16px}.df-fork>span br{display:none}.df-destinations{display:grid;gap:28px}.df-clarify:before{content:'No';display:block;color:#8a7351;font-size:12px;margin-bottom:8px}.df-retrieve:before{content:'Yes';display:block;color:#52715f;font-size:12px;margin-bottom:8px}.df-clarify:after{content:none}.df-request:after,.df-eligible:after,.df-rank:after{content:'↓';width:30px;left:calc(50% - 15px);right:auto}.df-interpret:after{content:'↓'}.df-destinations .df-retrieve:after{bottom:-34px}}

/* Original phase-label typography, with the supplied title wording. */
.discovery-flow .df-card:not(.df-clarify) h3{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.12em;line-height:1.6;text-transform:uppercase;color:#737b91;margin:0 0 20px}

/* Continuous edge-to-edge connector instead of a spaced text glyph. */
@media(min-width:761px){
 .df-eligible:after{content:'';height:2px;width:150px;left:-151px;top:50%;background:var(--df-line)}
 .df-eligible:before{content:'';position:absolute;left:-151px;top:calc(50% - 5px);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:9px solid var(--df-line)}
}
@media(max-width:1100px) and (min-width:761px){.df-eligible:after{width:110px;left:-111px}.df-eligible:before{left:-111px}}

/* Uniform 10 × 10 triangular arrowheads on every connector. */
@media(min-width:761px){
 .df-request:after,.df-rank:after,.df-eligible:after{content:'';height:2px;background:var(--df-line);top:50%}
 .df-request:before{content:'';position:absolute;right:-37px;top:calc(50% - 4px);border:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid var(--df-line)}
 .df-rank:before,.df-eligible:before{content:'';position:absolute;top:calc(50% - 4px);border:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:10px solid var(--df-line)}
 .df-rank:before{left:-37px}
 .df-retrieve:after{content:'';width:2px;height:72px;background:var(--df-line);left:50%;bottom:-73px}
 .df-retrieve:before{content:'';position:absolute;left:calc(50% - 4px);bottom:-73px;border:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid var(--df-line)}
}
@media(max-width:1100px) and (min-width:761px){.df-request:before{right:-29px}.df-rank:before{left:-29px}.df-retrieve:after{height:56px;bottom:-57px}.df-retrieve:before{bottom:-57px}}
@media(max-width:760px){
 .df-request:after,.df-interpret:after,.df-retrieve:after,.df-eligible:after,.df-rank:after{content:'';width:2px;height:36px;background:var(--df-line);left:50%;bottom:-37px;top:auto}
 .df-request:before,.df-interpret:before,.df-eligible:before,.df-rank:before{content:'';position:absolute;left:calc(50% - 4px);bottom:-37px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid var(--df-line)}
 .df-retrieve:after{clip-path:polygon(40% 0,60% 0,60% 72%,100% 72%,50% 100%,0 72%,40% 72%);width:10px;left:calc(50% - 4px)}
}

/* Branch heads use the same CSS triangles as the other horizontal arrows. */
@media(min-width:761px){
 .df-fork:before,.df-fork:after{content:'';position:absolute;right:0;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid var(--df-line)}
 .df-fork:before{top:calc(18.333333% - 5px)}
 .df-fork:after{top:calc(75% - 5px)}
 .df-fork .df-no-label,.df-fork .df-yes-label{left:auto;right:4px;padding:2px 4px;line-height:1.3;background:#f5f5f7}
 .df-fork .df-no-label{top:calc(18.333333% - 27px)}
 .df-fork .df-yes-label{top:calc(75% - 27px)}
}

/* Mobile decision outcomes share one row. */
@media(max-width:760px){
 .df-destinations{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
 .df-destinations .df-card{min-width:0;padding:16px}
 .df-destinations .df-clarify h3{font-size:18px;line-height:1.4}
 .df-destinations .df-card dd,.df-destinations .df-card p{font-size:14px;overflow-wrap:anywhere}
 .df-destinations .df-card dt{font-size:13px}
}

/* Mobile decision fork: labels belong to connectors, not destination cards. */
@media(max-width:760px){
 .df-fork{height:106px;padding:0;position:relative;width:100%;margin-bottom:-36px}
 .df-fork>span{position:absolute;top:0;left:0;right:0;transform:none;padding:0;text-align:center}
 .df-fork:before{content:'';position:absolute;top:30px;left:50%;height:18px;width:2px;background:var(--df-line)}
 .df-fork:after{content:'';position:absolute;top:48px;left:25%;right:25%;height:48px;border-top:2px solid var(--df-line);border-left:2px solid var(--df-line);border-right:2px solid var(--df-line)}
 .df-fork .df-no-label,.df-fork .df-yes-label{display:block;position:absolute;top:63px;left:calc(25% + 9px);right:auto;padding:0 4px;background:#f5f5f7;font-size:12px;line-height:1.5}
 .df-fork .df-yes-label{left:calc(75% + 9px)}
 .df-fork small:after{content:'';position:absolute;top:33px;left:-13px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid var(--df-line)}
 .df-destinations .df-clarify:before,.df-destinations .df-retrieve:before{content:none}
}

/* Complete the mobile evidence-to-options connector across the full row gap. */
@media(max-width:760px){
 .df-destinations .df-retrieve:after{content:'';position:absolute;top:auto;bottom:-37px;left:calc(50% - 4px);width:10px;height:36px;background:var(--df-line);clip-path:polygon(40% 0,60% 0,60% 72%,100% 72%,50% 100%,0 72%,40% 72%)}
}

/* Remove the desktop stack's empty second row on mobile. */
@media(max-width:760px){
 .df-destinations{grid-template-rows:1fr}
 .df-destinations .df-retrieve:after{height:38px;bottom:-38px}
}

/* Outcome colors and paragraph treatment for the clarification path. */
.discovery-flow .df-recommend{background:#edf5e8;border-color:#d7e5cf}
.discovery-flow .df-clarify{background:#fff8df;border-color:#eee2b5}
.discovery-flow .df-clarify h3{font-family:inherit;font-size:16px;font-weight:400;line-height:1.55;letter-spacing:normal;text-transform:none;color:#656570;margin:0}