@import url('/public/stages-ranges.css');
:root{--navy:#113f77;--blue:#53afe8;--blue-light:#edf8fd;--purple:#9b8ee5;--pink:#ef6ca1;--pink-light:#fff3f8;--text:#365574;--text-soft:#6f87a0;--border:#deebf5;--white:#fff;font-family:"Yu Gothic","Meiryo",sans-serif;color:var(--text);background:#fcfeff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(at 100% 0,#e6f5ff99,transparent 26%),radial-gradient(at 0 100%,#e8f6ff,transparent 25%),#fff}h1,h2,h3,p{margin:0}a{color:inherit;text-underline-offset:4px}button{font:inherit}a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.page{width:min(1200px,calc(100% - 48px));margin:auto}.icon{width:40px;height:40px;fill:none;stroke:#099af0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sprite{position:absolute;width:0;height:0;overflow:hidden}.skip{position:fixed;top:-80px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}.breadcrumbs{display:flex;gap:12px;font-size:11px;padding:22px 15px;color:var(--text-soft);flex-wrap:wrap}.breadcrumbs a{text-decoration:none}.hero{position:relative;padding:5px 22px 30px;isolation:isolate}.hero h1{font-family:"Yu Mincho",serif;font-size:72px;line-height:1.28;letter-spacing:.025em;font-weight:600;color:#081e43}.blue{color:#0877c7}em{font-style:normal;color:#f166a1}.lead{font-size:23px;line-height:1.7;margin-top:17px;color:#56617e;max-width:960px}.handwritten{position:absolute;right:38px;top:0;font-family:"Yu Mincho",serif;font-size:22px;color:#619de5;transform:rotate(-10deg);line-height:1.65;letter-spacing:.09em}.handwritten .icon{position:absolute;right:-35px;top:5px;width:48px;height:110px;stroke:#81b7f0}.hero-small{position:absolute;right:20px;bottom:33px;font-size:13px;color:#6b90be}.panel{border-radius:24px;border:1px solid var(--border);background:#ffffffed;box-shadow:0 8px 28px #285a8c0d}.chart{padding:20px 14px 18px;--label:30%;}.chart>h2{font-size:25px;text-align:center;background:linear-gradient(90deg,#e7f7ff,#e5f4fe);border-radius:50px;padding:7px 25px;width:fit-content;max-width:100%;margin:auto;color:#0c397b;line-height:1.5}.axis-labels{display:flex;justify-content:space-between;font-size:21px;color:#1b4282;margin:6px 12px 9px;font-weight:600}.arrow-track{height:17px;margin:0 18px 0 15px;position:relative;border-radius:20px;background:linear-gradient(90deg,#e7f8ff,#73cff5 27%,#aab3ed 47%,#c898dd 65%,#f8a5cf 85%,#f77aaf)}.arrow-track:after{content:'';position:absolute;right:-17px;top:-9px;border-left:21px solid #f77aaf;border-top:18px solid transparent;border-bottom:18px solid transparent}.chart-head{display:flex;padding:0 0 9px}.label-spacer{flex:0 0 calc(var(--label) - (100% - var(--label))/12)}.stage-labels{display:grid;grid-template-columns:repeat(6,1fr);flex:1;list-style:none;margin:0;padding:16px 0 6px;position:relative}.stage-labels li{display:flex;flex-direction:column;align-items:center;gap:9px;color:#143d7b;font-size:18px;font-weight:600;text-align:center;line-height:1.5;position:relative}.bubble{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#86dcf7,#4ebcf0);color:white;font-size:24px;font-weight:400;box-shadow:inset 0 0 0 2px #fff6}.s2 .bubble{background:linear-gradient(135deg,#a1ddfe,#74b6f1)}.s3 .bubble{background:linear-gradient(135deg,#c4c9ff,#9994ed)}.s4 .bubble{background:linear-gradient(135deg,#d6bdeb,#aa83cc)}.s5 .bubble{background:linear-gradient(135deg,#f6c0e1,#ea9dce)}.s6 .bubble{background:linear-gradient(135deg,#ffafd0,#f768a3)}.stage-labels li:before{content:'';position:absolute;top:-19px;height:21px;border-left:1px solid #b8d4ee}.chart-caveat{font-size:11px;line-height:1.6;color:var(--text-soft);text-align:center;margin:1px 10px 14px}.range-rows{display:grid;gap:10px}.range-row{display:flex;align-items:stretch;background:linear-gradient(100deg,#f3faff,#edf7fdcc);border-radius:18px;min-height:82px}.range-row h3{flex:0 0 var(--label);display:flex;align-items:center;gap:12px;padding:12px 10px 12px 16px;font-size:21px;line-height:1.4;font-weight:600;color:#073e81;min-width:0}.range-row h3 .icon{width:43px;height:48px}.range-area{position:relative;flex:1;min-width:0}.range-band{position:absolute;top:26%;height:49%;border-radius:50px;background:linear-gradient(90deg,#71cef1aa,#a8a6f1b0)}.range-band.purple{background:linear-gradient(90deg,#afb7efa8,#b5a0e9b5)}.range-band.mixed{background:linear-gradient(90deg,#b6aff0aa,#efa2d0bf)}.range-band.pink{background:linear-gradient(90deg,#d799d2b5,#ff85b8bd)}.guides{position:absolute;inset:-10px 0;display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none}.guides i{border-left:1px dashed #acd2f4a6;z-index:2}.mobile-range{display:none}.takeaways{margin-top:20px;padding:20px 15px 16px;background:linear-gradient(130deg,#eef9ff,#fff)}.takeaways h2{display:flex;align-items:center;gap:10px;color:#0054ae;font-size:29px;margin:0 16px 12px}.takeaways ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}.takeaways li{display:flex;align-items:center;gap:23px;background:linear-gradient(90deg,#fff,#f5faff);border:1px solid #fff;border-radius:23px;padding:12px 18px;color:#123777}.count{display:flex;align-items:center;justify-content:center;width:55px;height:55px;flex-shrink:0;border-radius:50%;background:#58bdf1;color:white;font-size:29px}.c2{background:#ed69a2}.c3{background:#9d91ee}.takeaways p{font-size:23px;line-height:1.6;flex:1}.takeaways li>.icon{color:#8daff1;stroke:currentColor;width:36px}.notice{display:flex;align-items:center;gap:15px;margin-top:20px;padding:17px 22px;background:linear-gradient(90deg,#fffaf3,#fcf8ff);border-color:#eee1e9}.notice .icon{stroke:#ffa643;width:40px}.notice p{font-size:15px;line-height:1.8}.notice strong{font-weight:500}.bottom{display:flex;gap:30px;margin-top:20px;align-items:center}.next{padding:20px 23px;flex:1}.next h2{display:flex;align-items:center;gap:12px;color:#0054ad;font-size:25px;margin-bottom:14px}.next h2 .icon{width:36px}.next nav{display:flex;gap:13px}.next nav>*{border:0;border-radius:999px;padding:12px 24px;text-decoration:none;background:#eaf7ff;color:#009af0;font-size:18px;line-height:1.5;text-align:center;display:flex;align-items:center;justify-content:center}.next nav>[aria-current]{background:#eeeaff;color:#7951df;box-shadow:inset 0 0 0 1px #cfc2f3}.next nav>button{background:#fdeaf3;color:#e85696;cursor:not-allowed}.next-status{font-size:12px;color:#be5891;margin-top:12px}.next-status span{color:var(--text-soft)}.closing{display:flex;align-items:center;color:#5f8ec4;font-size:13px;line-height:1.6}.closing .icon{width:45px;height:65px;stroke:#7db9f0;margin-right:10px}.review{font-size:12px;color:var(--text-soft);line-height:1.85;margin-top:20px}.review summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;min-height:42px;list-style:none}.review summary::-webkit-details-marker{display:none}.review p,.review li{margin:9px 0}.review ul{padding-left:23px}.review a{overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:17px 0 22px;font-size:10px;color:var(--text-soft)}footer a{font-weight:700;color:var(--navy);font-size:15px;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.hero h1{font-size:61px}.handwritten{font-size:17px;right:28px}.hero-small{display:none}.lead{font-size:21px}.wide-break{display:none}.range-row h3{font-size:18px;gap:9px;padding-left:12px}.range-row h3 .icon{width:36px}.stage-labels li{font-size:16px}.chart>h2{font-size:23px}.takeaways p{font-size:21px}.next nav>*{padding-inline:16px;font-size:16px}.closing{max-width:140px}.chart{--label:31%}}
@media(max-width:850px){.page{width:calc(100% - 32px)}.hero{padding-inline:10px}.hero h1{font-size:52px}.handwritten{font-size:14px;top:-8px;right:20px}.lead{font-size:18px}.range-row h3{font-size:15px;gap:6px;padding-left:8px}.range-row h3 .icon{width:30px;height:37px}.range-row{min-height:74px}.stage-labels li{font-size:13px}.bubble{width:34px;height:34px;font-size:20px}.axis-labels{font-size:17px}.chart>h2{font-size:21px}.chart{padding-inline:10px}.takeaways h2{font-size:25px}.takeaways p{font-size:18px}.takeaways li{gap:15px}.count{width:45px;height:45px;font-size:25px}.bottom{gap:16px}.next{padding:17px}.next nav{gap:8px}.next nav>*{font-size:14px;padding-inline:13px}.next h2{font-size:21px}.closing{display:none}}
@media(max-width:600px){.breadcrumbs{font-size:9px;gap:8px;padding:18px 0}.hero{padding:12px 2px 24px}.hero h1{font-size:35px;line-height:1.5;letter-spacing:0}.handwritten{position:relative;top:auto;right:auto;font-size:13px;width:fit-content;margin:20px 24px 5px auto;transform:rotate(-6deg)}.handwritten .icon{width:25px;height:55px;right:-25px}.lead{font-size:16px;line-height:1.9;margin-top:14px}.chart{padding:17px 12px;--label:100%;border-radius:20px}.chart>h2{font-size:19px;padding:7px 14px}.axis-labels{font-size:12px;margin-top:15px;margin-inline:0}.arrow-track{height:10px;margin-inline:0 12px}.arrow-track:after{border-left-width:14px;border-top-width:12px;border-bottom-width:12px;top:-7px;right:-12px}.chart-head{display:block;padding:8px 0 0}.label-spacer{display:none}.stage-labels{display:flex;flex-direction:column;gap:10px;padding:14px 0;position:relative}.stage-labels:before{content:'';position:absolute;left:18px;top:28px;bottom:28px;width:3px;background:linear-gradient(#6dccf1,#b99be5,#f47bb1)}.stage-labels li{flex-direction:row;gap:14px;font-size:15px;text-align:left;z-index:1}.stage-labels li>span:last-child br{display:none}.stage-labels li:before{display:none}.bubble{width:38px;height:38px;font-size:22px;flex-shrink:0}.chart-caveat{font-size:11px;text-align:left;margin:8px 0 18px}.range-row{display:block;padding:14px 14px 16px;border-radius:16px}.range-row h3{font-size:17px;padding:0;gap:12px}.range-row h3 .icon{width:36px;height:40px}.range-row h3 br{display:none}.range-area{display:none}.mobile-range{display:block;font-size:12px;line-height:1.8;color:#6e689e;margin:9px 0 0 48px}.takeaways{padding:18px 10px;margin-top:16px}.takeaways h2{font-size:21px;margin-inline:6px;gap:7px}.takeaways h2 .icon{width:30px}.takeaways li{gap:12px;padding:14px 12px;border-radius:17px}.takeaways p{font-size:15px;line-height:1.8}.count{width:34px;height:34px;font-size:21px}.takeaways li>.icon{display:none}.notice{padding:15px 13px;gap:10px;margin-top:16px;border-radius:18px}.notice .icon{width:30px}.notice p{font-size:12px}.bottom{margin-top:16px}.next{padding:17px 14px;border-radius:20px}.next h2{font-size:20px;gap:9px}.next h2 .icon{width:29px}.next nav{flex-direction:column;gap:9px}.next nav>*{font-size:15px;min-height:44px}.next-status{font-size:11px;line-height:1.8}.review{font-size:12px}.review summary{font-size:11px}footer{font-size:9px}}
@media(max-width:350px){.hero h1{font-size:30px}.lead{font-size:15px}.chart>h2{font-size:17px}.range-row h3{font-size:16px}.takeaways h2{font-size:18px}.mobile-range{margin-left:0}.takeaways p{font-size:14px}}
@media(min-width:601px) and (max-width:850px){.handwritten{right:48px}}
/* Comparison pass: use the same six equal-width columns for the axis and range grid. */
.hero:has(>.cl-language){z-index:3}
.next nav>.comparison-link{background:#fdeaf3;color:#e85696}
@media(min-width:601px){.label-spacer{flex-basis:var(--label)}}