/* Method page: concise copy paired with readable, native process diagrams. */
.method-page .detail-hero{padding-bottom:36px}
.method-page .detail-intro{display:block;max-width:750px}
.method-page .detail-intro>p{max-width:62ch}
.method-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:42px}
.method-route a{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);min-height:65px;padding:18px 0}
.method-route a>span{font-size:11px;color:var(--blue);font-variant-numeric:tabular-nums}
.method-route strong{font-size:16px;font-weight:500}
.method-route a:hover strong{color:var(--blue)}
.method-page .method-journey{padding-bottom:35px}
.method-page .method-step{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:65px;padding:58px 0}
.method-step-copy{min-width:0}
.method-page .method-step-heading .eyebrow{margin-bottom:20px}
.method-page .method-step-heading h2{font-size:clamp(31px,3.1vw,45px);line-height:1.17;letter-spacing:-.045em}
.method-step-lead{font-size:16px;line-height:1.75;color:var(--muted);max-width:51ch;margin-top:22px}
.method-facts{margin-top:25px;border-top:1px solid var(--line)}
.method-facts>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;padding-top:17px}
.method-facts dt{font-size:12px;font-weight:600;color:var(--ink);padding-top:2px}
.method-facts dd{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.method-diagram{margin:0;min-width:0;padding:27px 30px 22px;background:#e8edfd;border-radius:6px;color:var(--ink);box-sizing:border-box}
.method-diagram *{box-sizing:border-box;min-width:0}
.method-diagram p,.method-diagram ol,.method-diagram ul{margin:0}
.method-diagram ol,.method-diagram ul{padding:0;list-style:none}
.method-diagram-kicker{font-size:10px;letter-spacing:.08em;color:#485c8f;margin-bottom:24px;font-weight:500}
.method-diagram figcaption{font-size:11px;color:#53637e;line-height:1.6;margin-top:20px}
.method-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.method-inputs span{text-align:center;border:1px solid #becaec;background:#f8f9ff;border-radius:4px;padding:12px 7px;font-size:12px;line-height:1.4}
.method-connector{display:block;width:1px;height:26px;background:#9aacdb;margin:0 auto;position:relative}
.method-connector:after{content:'';position:absolute;bottom:0;left:-3px;width:7px;height:7px;border-bottom:1px solid #7e94ca;border-right:1px solid #7e94ca;transform:rotate(45deg)}
.method-priority-card{background:#fff;border:1px solid #c5ceed;border-radius:5px;padding:19px 21px;box-shadow:0 8px 22px #193b8610}
.method-card-heading{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid #e0e5f1;font-size:15px}
.method-card-heading strong{font-weight:600}
.method-document-icon{position:relative;display:block;width:21px;height:26px;border:1px solid var(--blue);border-radius:2px;flex-shrink:0}
.method-document-icon:before,.method-document-icon:after{content:'';position:absolute;left:5px;right:5px;height:1px;background:var(--blue);top:9px}
.method-document-icon:after{top:15px}
.method-priority-line{display:flex;align-items:flex-start;gap:13px;margin-top:17px}
.method-priority-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:6px}
.method-priority-dot.is-light{background:#a9b8e1}
.method-priority-line strong{font-size:13px;font-weight:500;line-height:1.5}
.method-priority-line p{font-size:12px;color:#667286;line-height:1.6;margin-top:3px}
.method-diagram-design{background:#19212b;color:#f5f4ef}
.method-diagram-design .method-diagram-kicker,.method-diagram-design figcaption{color:#c0cbe0}
.method-wireframe{background:#f8f9fc;color:var(--ink);border:1px solid #b7c0d0;border-radius:5px;overflow:hidden;box-shadow:0 10px 25px #0002}
.method-wireframe-bar{display:flex;align-items:center;gap:18px;background:#e7ebf2;border-bottom:1px solid #d5dce8;padding:11px 15px;font-size:11px}
.method-wireframe-bar>span{display:flex;gap:4px}
.method-wireframe-bar i{width:4px;height:4px;border-radius:50%;background:#a7b3c5}
.method-wireframe-bar strong{font-weight:500}
.method-wireframe-body{padding:20px}
.method-wireframe-title{display:flex;align-items:center;gap:12px}
.method-wire-avatar{width:33px;height:33px;border:1px solid #b7c6ef;border-radius:50%;background:#e5ebfc;flex-shrink:0;position:relative}
.method-wire-avatar:before{content:'';position:absolute;width:7px;height:7px;border-radius:50%;top:6px;left:12px;background:#8c9fd2}
.method-wire-avatar:after{content:'';position:absolute;width:15px;height:8px;border-radius:8px 8px 3px 3px;bottom:6px;left:8px;background:#8c9fd2}
.method-wireframe-title strong{display:block;font-size:15px;font-weight:600}
.method-wireframe-title div>span{display:block;font-size:11px;color:#6a768a;margin-top:4px}
.method-wireframe-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.method-wireframe-fields>div>span,.method-wireframe-row>span{font-size:11px;color:#5e6a7e;display:block}
.method-wireframe-fields i{display:block;background:#e1e7f1;width:80%;height:7px;border-radius:2px;margin-top:9px}
.method-wireframe-row{border-top:1px solid #dce2ec;padding-top:16px;margin-top:20px}
.method-wireframe-row i{display:block;background:#e4e9f1;width:93%;height:6px;border-radius:2px;margin-top:10px}
.method-wireframe-row i+i{width:67%;margin-top:7px}
.method-wireframe-action{display:flex;align-items:center;gap:9px;border:1px solid #c9d4f3;background:#edf1fd;font-size:11px;padding:10px 12px;margin-top:18px;border-radius:3px}
.method-wireframe-action .method-priority-dot{width:6px;height:6px;margin:0}
.method-design-rules{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.method-design-rules span{border:1px solid #536077;border-radius:3px;padding:5px 9px;font-size:11px;color:#d2dbeb}
.method-diagram-build{background:#eceee8}
.method-diagram-build .method-diagram-kicker,.method-diagram-build figcaption{color:#526056}
.method-build-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative}
.method-build-flow:before{content:'';height:1px;background:#bdc7ba;position:absolute;left:17%;right:17%;top:21px}
.method-build-flow li{text-align:center;position:relative}
.method-build-flow li>span{display:grid;place-items:center;width:44px;height:44px;border:1px solid #bdc7ba;background:#f8f9f5;border-radius:50%;font-size:19px;margin:0 auto 11px;color:#49654e}
.method-build-flow li:first-child>span{font-size:14px;font-weight:600;letter-spacing:-.04em}
.method-build-flow strong{font-size:12px;line-height:1.5;font-weight:500}
.method-checklist{margin-top:24px;padding:19px 21px;border:1px solid #cbd2c6;border-radius:5px;background:#fff}
.method-checklist>strong{font-size:14px;font-weight:600}
.method-checklist ul{margin-top:15px;display:grid;gap:11px}
.method-checklist li{display:flex;align-items:center;gap:11px;font-size:12px;line-height:1.5;color:#526056}
.method-checklist li>span{width:17px;height:17px;display:grid;place-items:center;background:#edf1e9;border:1px solid #cad4c6;border-radius:3px;font-size:11px;flex-shrink:0}
.method-diagram-launch{background:#3159e8;color:#fff}
.method-diagram-launch .method-diagram-kicker,.method-diagram-launch figcaption{color:#d9e2ff}
.method-launch-flow{display:grid;gap:14px;position:relative}
.method-launch-flow:before{content:'';position:absolute;left:19px;top:20px;bottom:20px;width:1px;background:#9bb2ff}
.method-launch-flow li{display:flex;align-items:center;gap:16px;position:relative}
.method-launch-flow li>span{width:39px;height:39px;display:grid;place-items:center;font-size:11px;border:1px solid #a5baff;background:#3159e8;border-radius:50%;flex-shrink:0}
.method-launch-flow li>div{padding:14px 17px;background:#fff;color:var(--ink);border:1px solid #cbd6ff;border-radius:4px;flex:1}
.method-launch-flow strong{font-size:13px;font-weight:600}
.method-launch-flow p{font-size:12px;color:#626f85;line-height:1.6;margin-top:3px}
.method-it-points{padding:0;margin:21px 0 0;list-style:none;display:grid;gap:11px}
.method-it-points li{padding-left:18px;position:relative;color:#d0d7df;font-size:14px;line-height:1.6}
.method-it-points li:before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;background:#b7c8ff;border-radius:50%}
@media(max-width:1050px){
  .method-page .method-step{gap:38px;grid-template-columns:1fr 1fr}
  .method-diagram{padding:24px 22px 20px}
  .method-facts>div{grid-template-columns:85px minmax(0,1fr);gap:14px}
}
@media(max-width:760px){
  .method-page .detail-hero{padding-bottom:27px}
  .method-route{grid-template-columns:1fr 1fr;gap:0 20px;margin-top:27px}
  .method-route a{gap:10px;padding:14px 0;min-height:54px}
  .method-route strong{font-size:14px}
  .method-page .method-step{grid-template-columns:1fr;gap:27px;padding:36px 0}
  .method-page .method-step-heading h2{font-size:34px}
  .method-page .method-step-heading .eyebrow{margin-bottom:16px}
  .method-step-lead{font-size:15px;line-height:1.75;max-width:none;margin-top:18px}
  .method-facts{margin-top:20px}
  .method-facts>div{grid-template-columns:90px minmax(0,1fr);gap:15px;padding-top:14px}
  .method-facts dd{font-size:14px}
  .method-diagram{padding:25px 24px 21px}
  .method-diagram-kicker{font-size:10px;margin-bottom:22px}
  .method-diagram figcaption{font-size:12px;margin-top:18px}
  .method-inputs span{font-size:12px;padding:12px 7px}
  .method-page .method-journey{padding-bottom:20px}
}
@media(max-width:380px){
  .method-diagram{padding:21px 17px 18px}
  .method-page .method-step-heading h2{font-size:31px}
  .method-facts>div{grid-template-columns:78px minmax(0,1fr);gap:12px}
  .method-facts dt{font-size:11px}
  .method-inputs{gap:6px}
  .method-inputs span{font-size:11px;padding:10px 4px}
  .method-priority-card{padding:17px 16px}
  .method-card-heading{font-size:13px;gap:10px}
  .method-priority-line{gap:10px}
  .method-priority-line strong{font-size:12px}
  .method-wireframe-body{padding:17px 15px}
  .method-wireframe-title strong{font-size:14px}
  .method-wireframe-title div>span{font-size:10px}
  .method-build-flow{gap:10px}
  .method-build-flow strong{font-size:11px}
  .method-checklist{padding:17px 15px}
  .method-launch-flow li{gap:12px}
  .method-launch-flow li>div{padding:12px}
  .method-launch-flow strong{font-size:12px}
  .method-launch-flow p{font-size:11px}
}