/* Shared explanatory illustrations: all selectors remain inside .agv. */
.agv{box-sizing:border-box;margin:24px 0 30px;padding:26px 22px 24px;border:1px solid #dbe7e9;border-radius:20px;background:#f4f8f9;color:#173b53;container-type:inline-size}
.agv *{box-sizing:border-box}
.agv .agv-caption{margin:0 0 22px;font-size:clamp(17px,2vw,22px);font-weight:750;line-height:1.6;letter-spacing:.02em;text-align:center;color:#173b53}
.agv .agv-track{display:grid;grid-template-columns:repeat(var(--agv-count),minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.agv .agv-step{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:0;text-align:center}
.agv .agv-step::before{content:none}
.agv .agv-picture{display:flex;align-items:center;justify-content:center;width:100%;min-height:114px;margin-bottom:12px}
.agv .agv-art{display:block;width:100%;max-width:165px;height:auto;overflow:visible}
.agv .agv-title{display:block;font-size:16px;font-weight:750;line-height:1.6;color:#173b53;overflow-wrap:anywhere}
.agv .agv-description{display:block;margin-top:6px;font-size:16px;font-weight:400;line-height:1.8;color:#455e6d;overflow-wrap:anywhere}
.agv .agv-connector{position:absolute;top:47px;right:-27px;width:26px;color:#16817b;font-size:28px;line-height:1;font-weight:700}
.agv .agv-connector--plus{color:#ae782d;font-size:23px}
.agv .agv-note{margin:20px 0 0;font-size:16px;line-height:1.8;text-align:center;color:#455e6d}
.agv--signing .agv-picture{border-radius:50%;background:#e6efef;max-width:160px;aspect-ratio:1;margin-bottom:15px}
.agv--signing .agv-title{font-size:20px}
.agv--signing .agv-art{width:88%}
.agv--referral .agv-step:nth-child(2) .agv-description{padding:5px 9px;background:#fff0d9;color:#80551c;border-radius:7px;font-weight:700}
@container (max-width: 540px){
.agv .agv-track{grid-template-columns:1fr;gap:36px}
.agv .agv-step{display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:15px;text-align:left;align-items:center}
.agv .agv-picture{grid-row:1/3;width:90px;min-height:0;margin:0}
.agv .agv-title{align-self:end;font-size:16px}
.agv .agv-description{align-self:start;font-size:16px;margin-top:3px}
.agv .agv-connector{top:auto;bottom:-29px;left:32px;right:auto;transform:rotate(90deg);font-size:25px}
.agv .agv-connector--plus{transform:none}
.agv--signing .agv-picture{width:90px;margin:0}
}
@media(max-width:600px){
.agv{padding:20px 16px;border-radius:16px}
.agv .agv-caption{font-size:17px;text-align:left;margin-bottom:20px}
.agv .agv-track{grid-template-columns:1fr;gap:36px}
.agv .agv-step{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:12px;text-align:left;align-items:center}
.agv .agv-picture{grid-row:1/3;width:76px;min-height:0;margin:0}
.agv .agv-title{align-self:end;font-size:16px}
.agv .agv-description{align-self:start;font-size:16px;margin-top:3px}
.agv .agv-connector{top:auto;bottom:-29px;left:25px;right:auto;transform:rotate(90deg);font-size:25px}
.agv .agv-connector--plus{transform:none}
.agv--signing .agv-picture{width:76px;margin:0}
.agv .agv-note{text-align:left}
}
@media print{.agv{break-inside:avoid;background:#fff}.agv .agv-description{color:#173b53}}

/* Six stages stay in a single reading direction at every width. */
.agv--overview .agv-track{grid-template-columns:1fr;gap:36px;max-width:640px;margin-inline:auto}
.agv--overview .agv-step{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:24px;text-align:left;align-items:center}
.agv--overview .agv-picture{grid-row:1/3;width:110px;min-height:0;margin:0}
.agv--overview .agv-title{align-self:end;font-size:18px}
.agv--overview .agv-description{align-self:start;font-size:16px;margin-top:3px}
.agv--overview .agv-connector{top:auto;bottom:-29px;left:42px;right:auto;transform:rotate(90deg);font-size:25px}
@media(max-width:600px){
.agv--overview .agv-step{grid-template-columns:76px minmax(0,1fr);column-gap:12px}
.agv--overview .agv-picture{width:76px}
.agv--overview .agv-title{font-size:16px}
.agv--overview .agv-connector{left:25px}
}
/* Deeply nested cards need the full text width on the smallest screens. */
@container (max-width:230px){
.agv .agv-track{grid-template-columns:1fr;gap:40px}
.agv .agv-step{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.agv .agv-picture{width:90px;margin:0 0 10px}
.agv .agv-title,.agv .agv-description{align-self:stretch;font-size:16px}
.agv .agv-description{margin-top:4px}
.agv .agv-connector{left:calc(50% - 13px);right:auto;top:auto;bottom:-31px;transform:rotate(90deg)}
.agv .agv-connector--plus{transform:none}
.agv .agv-caption{text-align:center}
}