/* A symbol and one short message per phone; explanations stay beside the step title. */
.cycle-mobile-copy{display:none}
.process-cycle{max-width:1160px}
.cycle-steps.phone-steps{max-width:520px;gap:44px 30px}
.cycle-steps.phone-steps>li:nth-child(n){display:flex;flex-direction:column;align-items:center;gap:16px;padding:0;min-height:0}
.step-phone{--step-color:var(--green);--step-soft:var(--mist);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%;max-width:142px;min-height:184px;padding:26px 9px 18px;background:var(--ice);border:4px solid var(--green);border-radius:24px;box-shadow:0 6px 0 #125C5612;color:var(--ink)}
.step-phone.mission{--step-color:var(--coralDeep);--step-soft:var(--coralTint)}
.step-phone.approval{--step-color:var(--green);--step-soft:var(--mist)}
.step-phone.achievement{--step-color:var(--coralDeep);--step-soft:var(--coralTint)}
.phone-camera{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:35px;height:5px;border-radius:10px;background:var(--green)}
.phone-visual{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--step-color);color:var(--ice)}
.phone-visual>svg{width:38px;height:38px;stroke-width:1.7}
.phone-visual>img{width:78px;max-width:none;height:auto}
.achievement .phone-visual{position:relative;display:block;width:104px;height:112px;flex-shrink:0;overflow:hidden;background:var(--mist);border-radius:46% 54% 35% 35% / 44% 44% 16% 16%;box-shadow:inset 0 0 0 1px #125C560d}
.achievement .phone-visual>img{position:absolute;top:8px;left:-8px;width:136px;max-width:none;height:auto}
.phone-action{display:block;max-width:100%;padding:6px 7px;border-radius:10px;background:var(--step-soft);color:var(--step-color);font-size:var(--font-min);font-weight:700;line-height:1.35;text-align:center;white-space:nowrap}
.step-index{position:absolute;right:-9px;bottom:-9px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:3px solid var(--mist);background:var(--step-color);color:var(--ice);font-size:16px;font-weight:700;line-height:1}
.phone-steps .process-copy h3{font-size:1.125rem;line-height:1.2;min-height:0;letter-spacing:-.02em}
.phone-steps .process-copy p{font-size:1rem;line-height:1.4;min-height:0;max-width:21ch;margin:8px auto 0;color:var(--ink)}
.cycle-steps.phone-steps .process-arrow{top:74px}
.cycle-steps.phone-steps>li:nth-child(2) .process-arrow{top:calc(100% + 7px)}
.cycle-steps.phone-steps>li:nth-child(4) .process-arrow{top:-38px}
.cycle-illustration-note{display:block;font-size:var(--font-min);font-weight:400;margin-top:5px;color:var(--muted)}
@media(min-width:900px){
 .how-section.cycle-section{padding-block:42px 30px}
 .cycle-steps.phone-steps{max-width:1160px;gap:28px}
 .cycle-steps.phone-steps>li:nth-child(n){gap:22px}
 .step-phone{max-width:164px;min-height:248px;padding:30px 12px 22px;gap:22px;border-width:5px;border-radius:28px}
 .phone-camera{top:9px;width:42px;height:5px}
 .phone-visual{width:96px;height:96px;border-radius:28px}
 .phone-visual>svg{width:54px;height:54px}
 .phone-visual>img{width:108px}
 .achievement .phone-visual{width:132px;height:140px}
 .achievement .phone-visual>img{top:10px;left:-12px;width:176px}
 .phone-action{font-size:16px;padding:7px 12px;border-radius:11px}
 .step-index{width:34px;height:34px;font-size:18px;right:-12px;bottom:-12px}
 .phone-steps .process-copy h3{font-size:1.5rem;min-height:0}
 .phone-steps .process-copy p{font-size:1.125rem;line-height:1.45;max-width:24ch;margin-top:9px}
 .cycle-steps.phone-steps>li:nth-child(n) .process-arrow{left:auto;right:-30px;top:108px;width:32px;height:32px;transform:none}
 .cycle-steps.phone-steps>li:last-child .process-arrow{display:none}
 .cycle-return{margin-top:12px;height:76px}
 .phone-steps~.cycle-repeat{bottom:12px;font-size:1.125rem;line-height:1.4;max-width:70%}
 .cycle-illustration-note{font-size:1rem;margin-top:5px}
}
@media(max-width:359px){
 .cycle-steps.phone-steps{gap:42px 26px}
 .step-phone{max-width:130px;padding-inline:7px;min-height:180px}
 .phone-action{font-size:var(--font-min);padding-inline:6px}
 .phone-steps .process-copy h3{font-size:1.0625rem}
 .phone-steps .process-copy p{font-size:var(--font-min)}
 .cycle-steps.phone-steps>li:nth-child(4) .process-arrow{top:-36px}
}
/* One caption per step on mobile; the arrows carry the flow. */
@media(max-width:899px){
 .cycle-desktop-copy,.phone-steps .phone-action,.phone-steps .process-copy p{display:none}
 .cycle-mobile-copy{display:inline}
 .cycle-heading{margin-bottom:24px}
 .cycle-heading>p{gap:6px;align-items:center;line-height:1.4;margin-top:10px}
 .cycle-heading>p svg{width:20px;height:20px}
 .cycle-steps.phone-steps{gap:42px 30px}
 .cycle-steps.phone-steps>li:nth-child(n){gap:14px}
 .step-phone{max-width:120px;min-height:164px;padding:24px 8px 18px;gap:0}
 .phone-steps .process-copy h3{font-size:1.125rem;line-height:1.2;min-height:0}
 .cycle-steps.phone-steps .process-arrow{top:66px}
 .cycle-steps.phone-steps>li:nth-child(2) .process-arrow{top:calc(100% + 5px)}
 .cycle-steps.phone-steps>li:nth-child(4) .process-arrow{top:-37px}
 .cycle-repeat{margin-top:16px}
}
@media(max-width:359px){
 .cycle-steps.phone-steps{column-gap:26px}
 .phone-steps .process-copy h3{font-size:1rem}
}