/* Readable visual explanations. All labels remain selectable HTML text. */
.visual-process,.visual-tutorial{background:#fcfaf6;border-block:1px solid #e9dcc7}.visual-process h2,.visual-tutorial h2{font-size:clamp(25px,3vw,36px);line-height:1.65;margin:12px 0 16px}.explain-lead{color:#655e51;line-height:1.95;margin:0 0 30px;max-width:760px}.visual-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:35px 0}.visual-steps>li{position:relative;min-width:0;background:white;border:1px solid #ddc9a8;border-radius:28px;padding:26px 22px}.visual-steps>li:not(:last-child)::after{content:'→';position:absolute;right:-23px;top:48px;color:#997435;font-size:19px}.step-token{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.step-token img{width:44px;height:44px;object-fit:contain}.step-token>span{display:grid;place-items:center;border:1px solid #ddc59b;border-radius:50%;width:35px;height:35px;color:#886123;font-size:12px;background:#fffaf0;flex:none}.visual-steps h3{font-size:18px;line-height:1.8;margin:0 0 12px}.visual-steps p{font-size:14px;line-height:1.95;margin:0;color:#625b4e}.explain-note{font-size:13px;line-height:1.9;color:#6b6252;max-width:900px;margin:24px 0}.explain-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;color:#785421;border:1px solid #c9a86f;border-radius:999px;background:#fff;padding:15px 25px;text-decoration:none;line-height:1.8;font-size:15px}.explain-link:hover{background:#fff9ec}.explain-link:focus-visible{outline:3px solid #927033;outline-offset:4px}.tutorial-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;align-items:start}.tutorial-layout figure{margin:0;border:1px solid #ddc9a8;border-radius:26px;overflow:hidden;background:white}.tutorial-layout figure a{display:block}.tutorial-layout figure img{width:100%;height:auto;display:block}.tutorial-layout figcaption{font-size:12px;line-height:1.9;color:#695c43;padding:15px 20px;border-top:1px solid #e9ddc8}.tutorial-steps{grid-template-columns:minmax(0,1fr);gap:18px;margin:0 0 22px}.tutorial-steps>li{padding:21px 24px 21px 86px;border-radius:24px}.tutorial-steps .step-token{position:absolute;top:23px;left:23px;display:flex;flex-direction:column;margin:0;gap:10px}.tutorial-steps .step-token img{width:34px;height:34px}.tutorial-steps>li:not(:last-child)::after{content:'↓';right:auto;left:36px;top:auto;bottom:-20px;font-size:16px}.tutorial-steps h3{font-size:17px;margin-bottom:7px}.example-result{border-left:3px solid #bd9654;background:#fff;padding:18px 20px;border-radius:0 18px 18px 0;font-size:15px;line-height:1.9;color:#725220;margin-bottom:22px}.fee-units{display:flex;align-items:center;justify-content:center;gap:14px;margin:28px 0;flex-wrap:wrap}.fee-unit{flex:1;min-width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:145px;border:1px solid #d9bd8c;border-radius:28px;background:#fffdf7;text-align:center;padding:20px 15px}.fee-unit b{font-size:38px;font-weight:500;line-height:1.4;color:#8a6229}.fee-unit b span{display:block;font-size:14px}.fee-unit>span{font-size:13px;line-height:1.9;color:#655c4c}.fee-plus{font-size:21px;color:#9b7840}.visual-fee-card{overflow:hidden}.fee-picture{margin:-30px -30px 26px;background:#fff}.fee-picture img{display:block;width:100%;height:200px;object-fit:cover;object-position:center 35%}.fee-picture figcaption{padding:8px 17px;text-align:right;font-size:10px;color:#796444;border-bottom:1px solid #e6d6ba}.fee-emblem{min-height:230px;border-bottom:1px solid #e6d6ba;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin:-30px -30px 26px;background:radial-gradient(circle,#fff 0,#fbf6eb 75%);color:#8a6327}.fee-components{background:#fcfaf5;border:1px solid #e5d4b6;border-radius:22px;padding:18px;margin:22px 0}.fee-components p{font-size:14px;line-height:1.9;margin:0 0 12px}.fee-components ul{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:10px}.fee-components li{font-size:13px;line-height:1.9;padding:8px 12px;border:1px solid #e2cfaa;border-radius:999px;background:white;text-align:center}.start-cards .explain-entry{overflow:hidden;padding-top:0}.explain-entry figure{margin:0 -28px 22px}.explain-entry figure img{width:100%;height:190px;object-fit:cover;object-position:center top;display:block}.explain-entry figcaption{font-size:10px;line-height:1.7;color:#796649;text-align:right;background:#fff;padding:8px 18px;border-bottom:1px solid #e5d4b5}.mini-route{display:flex;flex-direction:column;gap:10px;list-style:none;margin:20px 0;padding:0;counter-reset:route-step}.mini-route li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.8;counter-increment:route-step}.mini-route li::before{content:counter(route-step);border:1px solid #d8bf95;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;flex:none;color:#80602d;background:#fffaf0}
@media(max-width:1100px){.visual-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.visual-steps>li::after{display:none}.tutorial-layout{gap:24px}.tutorial-steps{grid-template-columns:minmax(0,1fr)}.fee-picture,.fee-emblem{margin-left:-24px;margin-right:-24px}.explain-entry figure{margin-left:-24px;margin-right:-24px}}
@media(max-width:900px){.tutorial-layout{grid-template-columns:minmax(0,1fr)}.tutorial-layout figure{max-width:600px;width:100%;margin:auto}.tutorial-steps{margin-top:10px}.visual-process,.visual-tutorial{padding-block:38px}.explain-entry figure img{height:205px}}
@media(max-width:600px){.visual-steps{grid-template-columns:minmax(0,1fr);gap:20px;margin:26px 0}.visual-steps>li{padding:22px;border-radius:24px}.visual-steps>li:not(:last-child)::after{display:block;content:'↓';left:calc(50% - 7px);right:auto;top:auto;bottom:-22px;font-size:16px}.step-token{margin-bottom:16px}.tutorial-steps>li{padding:20px 20px 20px 78px}.tutorial-steps .step-token{left:20px;top:23px}.tutorial-steps>li:not(:last-child)::after{left:34px}.explain-link{max-width:100%;padding:14px 20px;gap:18px}.fee-unit{min-height:132px;min-width:100px;padding:16px 10px}.fee-unit b{font-size:33px}.fee-units{gap:9px}.fee-plus{font-size:16px}.fee-picture img{height:205px}.fee-picture,.fee-emblem{margin-left:-24px;margin-right:-24px}.example-result{font-size:14px}.mini-route li{font-size:14px}}

.crafted-site .visual-fee-card>.fee-picture,.crafted-site .visual-fee-card>.fee-emblem{width:100%;max-width:none;align-self:stretch;margin:0 0 24px;border-radius:22px;overflow:hidden;flex:none}.crafted-site .visual-fee-card>.fee-picture img{height:200px}.crafted-site .visual-fee-card>.fee-emblem{min-height:240px;border:1px solid #e6d6ba}.crafted-site .visual-fee-card>.fee-components{width:100%;align-self:stretch}.crafted-site .visual-fee-card>h3{margin-top:0}