/* Strategy page */
.s-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end;padding-top:96px;padding-bottom:64px;border-bottom:1px solid var(--line)}
.fw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:20px 28px;padding-top:64px}
.fw-eng{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fw-eng.l{grid-column:1;grid-row:1}
.fw-eng.r{grid-column:3;grid-row:1}
.c1{grid-column:1;grid-row:2}.c2{grid-column:1;grid-row:3}.c3{grid-column:3;grid-row:2}.c4{grid-column:3;grid-row:3}
.ring-col{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.ring{position:relative;width:100%;max-width:500px;aspect-ratio:1/1}
.ring svg.r{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-base{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 8}
.arc{fill:none;stroke:var(--pencil);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms linear,stroke 400ms}
.arc.on{stroke-dashoffset:0}
.arc.now{stroke:var(--amber)}
.node{fill:var(--ground);stroke:var(--pencil);stroke-width:1.5;transition:fill 400ms}
.node.on{fill:var(--pencil)}
.ring-ast{position:absolute;left:23%;top:23%;width:54%;height:54%}
.ring-tag{position:absolute;color:var(--mute);font-size:10px}
.ring-line{min-height:2.5em;text-align:center;font-size:24px;max-width:22ch;animation:jbup 500ms var(--ease) both}
.ring-ctl{display:flex;align-items:center;gap:14px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:40px 24px 24px;border:1px solid var(--line);background:var(--ground-2);transition:border-color 400ms var(--ease),transform 400ms var(--ease);overflow:hidden}
.card:hover{transform:translateY(-3px);border-color:var(--pencil)}
.card.now{border-color:var(--amber)}
.card .num{font-size:40px;line-height:1;letter-spacing:0;color:var(--mute);transition:color 400ms}
.card.now .num{color:var(--amber)}
.card.done .num{color:var(--text)}
.card svg{width:100%;height:96px}
.card h3{margin:0;font-size:28px}
.card-btn{all:unset;cursor:pointer}
.card-btn::after{content:'';position:absolute;inset:0}
.card-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.card p{color:var(--mute);font-size:15px;line-height:1.45}
.bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--amber)}
.card.now .bar{animation:jbbar 2800ms linear both}
.card.now.held .bar{animation:none;width:100%}
@keyframes jbbar{to{width:100%}}
.ladder{padding-top:144px}
.rung{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px;padding:28px 0;border-top:1px solid var(--line)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:96px}
.pair .sheet{padding:56px 32px 32px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pair .sheet:hover{border-color:var(--pencil)}
.big-n{font-size:48px;line-height:1;letter-spacing:0;color:var(--text)}
@media (max-width:980px){.s-top{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:56px}.fw{grid-template-columns:minmax(0,1fr)}.fw > *{grid-column:1 !important;grid-row:auto !important}.ring-col{order:0}.fw-eng.l{order:1;margin-top:24px}.c1{order:2}.c2{order:3}.fw-eng.r{order:4;margin-top:24px}.c3{order:5}.c4{order:6}.ring{max-width:320px}.pair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.ladder{padding-top:96px}.pair .sheet{padding:48px 20px 20px}.ring-line{font-size:20px}}