/* Article 07: approved P4 visual styles. Shared stylesheet remains unchanged. */

/* Article 07 visual prototype p2. All new rules are scoped; r2 shared CSS is untouched. */
.article.visual-p2 { --vx-teal:#1e4f8f; --vx-amber:#12355f; }
.article.visual-p2 .vx-intro { display:flex; align-items:center; gap:22px; margin:24px 0 16px; }
.article.visual-p2 .vx-person { width:94px; height:auto; flex:0 0 94px; }
.article.visual-p2 .vx-intro .lead { margin:0; }
.article.visual-p2 .vx-guide { width:86px; height:auto; float:right; margin:0 0 10px 16px; }
.article.visual-p2 h2 { margin-top:48px; margin-bottom:16px; }
.article.visual-p2 h3 { margin-top:30px; margin-bottom:12px; }
.article.visual-p2 > p { margin-top:0; margin-bottom:18px; font-size:18px; line-height:1.78; }
.article.visual-p2 .scan-lead { background:none; border:0; border-radius:0; padding:0; color:var(--ink); font-size:18px; font-weight:650; box-shadow:none; }
.article.visual-p2 .scan-hero { padding:24px; margin:24px 0 18px; }
.article.visual-p2 .scan-hero .grade-hero-lines { font-size:clamp(24px,3.2vw,34px); line-height:1.5; margin:8px 0 12px; }
.article.visual-p2 .scan-hero p { line-height:1.65; }
.article.visual-p2 .grade-note, .article.visual-p2 .grade-source { font-size:14px; line-height:1.7; }
.article.visual-p2 .toc { margin:24px 0 36px; padding:18px 22px; }
.article.visual-p2 .toc ul { margin:8px 0 0; padding-left:1.3em; }
.article.visual-p2 .toc li { margin:6px 0; }
.article.visual-p2 .grade-terms { padding:16px 18px; margin:18px 0; }
.article.visual-p2 .grade-terms p { font-size:16px; line-height:1.6; margin:0 0 8px; }
.article.visual-p2 .grade-terms p:last-child { margin:0; }
.article.visual-p2 .grade-card { margin:18px 0; padding:20px 22px; }
.article.visual-p2 .grade-card p { font-size:17px; line-height:1.7; margin:0 0 10px; }
.article.visual-p2 .grade-card .grade-note {font-size:14px; margin-bottom:0; }
.article.visual-p2 .grade-card .grade-number {font-size:clamp(22px,3.4vw,32px); line-height:1.5;}
.article.visual-p2 .grade-change { gap:10px; }
.article.visual-p2 .grade-change strong {font-size:clamp(25px,4vw,36px);}
.article.visual-p2 .grade-change span {font-size:14px;}
.article.visual-p2 .grade-change > div {padding:12px;}
.article.visual-p2 .grade-period {font-size:19px; margin:12px 0;}
.article.visual-p2 .scan-impact { margin:20px 0; padding:20px 22px; }
.article.visual-p2 .scan-impact > strong {font-size:clamp(21px,3vw,28px);line-height:1.5;}
.article.visual-p2 .scan-impact p {font-size:17px;line-height:1.7;}
.article.visual-p2 .grade-question-grid {display:block;margin:18px 0;}
.article.visual-p2 .grade-question {padding:15px 18px;margin:10px 0;}
.article.visual-p2 .grade-question strong {font-size:18px;line-height:1.7;}
.article.visual-p2 .grade-question p {margin:0;font-size:16px;line-height:1.65;}
.article.visual-p2 .related-box {padding:20px;margin:24px 0;}
.article.visual-p2 .related-box p, .article.visual-p2 .related-box a {font-size:17px;line-height:1.75;}
.article.visual-p2 .related-box[data-link-id="L01"] {padding:14px 18px;}
.article.visual-p2 .vx-figure {background:#fff;border:1px solid #d7e2ef;border-radius:16px; padding:22px; margin:20px 0 22px; overflow:visible; width:100%;max-width:100%;box-shadow:none;}
.article.visual-p2 .vx-figure figcaption {display:block;font-size:clamp(20px,2.6vw,26px);color:var(--blue-dark);font-weight:700;line-height:1.5;margin:0 0 12px;}
.article.visual-p2 .vx-figure figcaption strong {font-weight:900;}
.article.visual-p2 .vx-condition {font-size:14px;line-height:1.65;color:#465560; margin:0 0 18px; padding:10px 12px; background:#f4f7f9;border-radius:8px;}
.article.visual-p2 .vx-condition p {font-size:14px;line-height:1.65;margin:4px 0 0;}
.article.visual-p2 .vx-two {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;}
.article.visual-p2 .vx-panel {border-radius:12px;padding:18px 12px;display:flex;align-items:center;flex-direction:column;min-width:0;text-align:center;border:1px solid #cedcee;}
.article.visual-p2 .vx-green {background:#edf4fb;color:#12355f;}
.article.visual-p2 .vx-orange {background:#f5f8fd;color:#1e4f8f;}
.article.visual-p2 .vx-tag {font-size:16px;line-height:1.3;font-weight:800;padding:4px 14px;border:1px solid currentColor;border-radius:100px;}
.article.visual-p2 .vx-car {width:126px;max-width:95%;height:auto;margin:16px 0 5px;}
.article.visual-p2 .vx-grade {font-size:48px;line-height:1.2;font-weight:850;letter-spacing:-.025em;}
.article.visual-p2 .vx-grade span {font-size:20px;margin-left:3px;letter-spacing:0;}
.article.visual-p2 .vx-panel p {font-size:14px;line-height:1.6;margin:8px 0 12px;color:#465560;}
.article.visual-p2 .vx-verdict {display:block;font-size:21px;line-height:1.4;font-weight:800;}
.article.visual-p2 .vx-panel small {font-size:12px;line-height:1.5;display:block;margin-top:5px;color:#53636d;}
.article.visual-p2 .vx-figure-note {font-size:15px;line-height:1.7;margin:16px 0 0;color:#465560;max-width:none;}
.article.visual-p2 .vx-countdown {display:flex;gap:8px;justify-content:space-between;align-items:center;}
.article.visual-p2 .vx-countdown > div {display:flex;align-items:baseline;justify-content:center;flex:1;background:#edf4fb;padding:14px 2px;border-radius:9px;color:#1e4f8f;}
.article.visual-p2 .vx-countdown strong {font-size:32px;line-height:1.2;}
.article.visual-p2 .vx-countdown span {font-size:15px;margin-left:2px;}
.article.visual-p2 .vx-countdown b {font-size:20px; color:#6b7b89;}
.article.visual-p2 .vx-countdown .vx-zero {background:#dceafa;color:#12355f;}
.article.visual-p2 .vx-axis-caption {font-size:14px;color:#53636d;font-weight:600;margin:0 0 10px;}
.article.visual-p2 .vx-time-area {display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));position:relative;gap:0;}
.article.visual-p2 .vx-time-col {display:flex;align-items:center;flex-direction:column;position:relative;min-width:0;}
.article.visual-p2 .vx-time-label {height:40px;display:flex;align-items:flex-start;justify-content:center;text-align:center;font-size:14px;line-height:1.45;font-weight:700;}
.article.visual-p2 .vx-plot-slot {height:142px;width:100%;position:relative;}
.article.visual-p2 .vx-plot-slot > strong {position:absolute;top:var(--point-y);left:50%;transform:translate(-50%,-50%);font-size:31px;line-height:1.05;color:var(--blue-dark);display:flex;flex-direction:column;align-items:center;background:#fff;border:2px solid #7896b2;border-radius:10px;padding:5px 6px;min-width:46px;}
.article.visual-p2 .vx-plot-slot > strong span {font-size:13px;line-height:1.4;font-weight:600;}
.article.visual-p2 .vx-plot-lines {position:absolute;top:40px;left:0;width:100%;height:142px;z-index:0;pointer-events:none;}
.article.visual-p2 .vx-period-pill {font-size:21px;line-height:1.4;background:#e9f1fb;color:#1e4f8f;display:block;min-width:45px;text-align:center;padding:3px 7px;border-radius:20px;}
.article.visual-p2 .vx-period-pill small {font-size:13px;}
.article.visual-p2 .vx-period-pill.vx-zero {background:#dceafa;color:#12355f;}
.article.visual-p2 .vx-final .vx-plot-slot > strong {border-color:#1e4f8f;background:#edf4fb;color:#12355f;}
.article.visual-p2 .vx-years-brace {margin:14px 7% 0 26%;border-top:2px solid #6e8fb9;text-align:center;color:#12355f;padding-top:7px;position:relative;line-height:1.5;font-size:14px;font-weight:650;}
.article.visual-p2 .vx-years-brace:before,.article.visual-p2 .vx-years-brace:after{content:'';position:absolute;top:-5px;height:8px;border-left:2px solid #6e8fb9;}
.article.visual-p2 .vx-years-brace:before{left:0;}.article.visual-p2 .vx-years-brace:after{right:0;}
.article.visual-p2 .vx-start {background:#edf4fb;border:1px solid #d6e3ef;padding:10px;border-radius:12px;text-align:center;font-size:16px;color:var(--blue-dark);margin:0 26% 22px;line-height:1.3;position:relative;}
.article.visual-p2 .vx-start strong {font-size:32px;}.article.visual-p2 .vx-start span{font-size:13px;display:block;margin-top:5px;color:#53636d;}
.article.visual-p2 .vx-start:after {content:'↓';position:absolute;left:calc(50% - 8px);bottom:-23px;font-size:20px;color:#718494;}
.article.visual-p2 .vx-route-head, .article.visual-p2 .vx-route-row {display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;}
.article.visual-p2 .vx-route-head {font-size:15px;font-weight:600;line-height:1.4;text-align:center;margin-bottom:6px;}
.article.visual-p2 .vx-route-head > span {font-size:12px;color:#53636d;}
.article.visual-p2 .vx-use {color:#1e4f8f;}.article.visual-p2 .vx-without{color:var(--blue);}
.article.visual-p2 .vx-route-row {padding:10px 0;position:relative;}
.article.visual-p2 .vx-update {font-size:14px;text-align:center;font-weight:600;line-height:1.3;}
.article.visual-p2 .vx-route-node {justify-self:center;text-align:center;font-size:27px;line-height:1.2;min-width:64px;border:1px solid currentColor;border-radius:30px;padding:8px 7px;position:relative;background:#fff;}
.article.visual-p2 .vx-route-node small {font-size:13px;margin-left:2px;}
.article.visual-p2 .vx-route-row:not(:last-child) .vx-route-node:after {content:'↓';position:absolute;left:calc(50% - 7px);bottom:-23px;font-size:18px;line-height:20px;font-weight:400;}
.article.visual-p2 .vx-route-last {margin-top:4px;background:#f6f8fb;border-radius:12px;padding:14px 0;}
.article.visual-p2 .vx-route-last .vx-use {background:#edf4fb;}.article.visual-p2 .vx-route-last .vx-without {background:#edf4fb;}
.article.visual-p2 .vx-route-summary {margin-top:14px;text-align:center;padding:16px;background:#edf4fb;border-radius:10px;font-size:19px;color:#12355f;line-height:1.5;}
.article.visual-p2 .vx-route-summary span {display:block;font-size:14px;margin-top:4px;color:#53636d;}
.article.visual-p2 .vx-only-narrow{display:none;}
.article.visual-p2 .vx-small-car {display:block;width:84px;max-width:100%;height:auto;margin:4px auto 10px;}
.article.visual-p2 .vx-coverage .grade-coverage-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.article.visual-p2 .vx-coverage .grade-coverage-pair p {font-size:16px;line-height:1.6;text-align:center;padding:14px 10px;}
.article.visual-p2 .vx-recap {overflow:auto;}
.article.visual-p2 .vx-recap p {font-size:17px;line-height:1.6;}
.article.visual-p2 .vx-recap .grade-number {font-size:20px;line-height:1.5;}
.vx-prototype-notice {font-size:13px;line-height:1.5;background:#f6f8fb;color:#53636d;border-bottom:1px solid #dfe5eb;text-align:center;padding:8px 16px;}
@media(max-width:768px){
.article.visual-p2 > p,.article.visual-p2 .scan-lead{font-size:17px;line-height:1.76;}
.article.visual-p2 h2{margin-top:44px;margin-bottom:14px;}
.article.visual-p2 h3{margin-top:28px;margin-bottom:10px;}
.article.visual-p2 .vx-intro{gap:14px;margin-top:22px;}
.article.visual-p2 .vx-person{width:68px;flex-basis:68px;}
.article.visual-p2 .vx-intro .lead{font-size:17px;line-height:1.65;}
.article.visual-p2 .vx-figure{padding:16px 13px;border-radius:14px;margin:18px 0 20px;}
.article.visual-p2 .vx-figure figcaption{font-size:21px;}
.article.visual-p2 .vx-two{gap:10px;}
.article.visual-p2 .vx-panel{padding:14px 9px;}
.article.visual-p2 .vx-car{width:105px;margin:12px 0 6px;}
.article.visual-p2 .vx-grade{font-size:40px;}.article.visual-p2 .vx-grade span{font-size:16px;}
.article.visual-p2 .vx-tag{font-size:15px;padding:4px 10px;}
.article.visual-p2 .vx-verdict{font-size:18px;}
.article.visual-p2 .vx-panel small{font-size:12px;line-height:1.6;}
.article.visual-p2 .vx-figure-note{font-size:14px;line-height:1.7;}
.article.visual-p2 .vx-time-label{font-size:13px;}
.article.visual-p2 .vx-plot-slot > strong{font-size:25px;padding:5px 3px;min-width:39px;}
.article.visual-p2 .vx-plot-slot > strong span{font-size:12px;}
.article.visual-p2 .vx-period-pill{min-width:36px;font-size:19px;padding:2px 5px;}
.article.visual-p2 .vx-route-head,.article.visual-p2 .vx-route-row{grid-template-columns:67px minmax(0,1fr) minmax(0,1fr);gap:7px;}
.article.visual-p2 .vx-route-head{font-size:14px;}.article.visual-p2 .vx-update{font-size:13px;}
.article.visual-p2 .vx-start{margin-left:25%;margin-right:25%;}
.article.visual-p2 .vx-route-summary{font-size:18px;padding:14px 10px;}
.article.visual-p2 .vx-coverage .grade-coverage-pair p{padding:10px 6px;font-size:15px;}
.article.visual-p2 .vx-guide{width:63px;margin-left:10px;}
.article.visual-p2 .grade-card{padding:18px 16px;}.article.visual-p2 .grade-card .grade-note{font-size:14px;}
.article.visual-p2 .scan-impact{padding:18px 16px;}.article.visual-p2 .scan-impact > strong{font-size:22px;}
}
@media(max-width:350px){
.article.visual-p2 .vx-countdown{gap:4px;}.article.visual-p2 .vx-countdown strong{font-size:28px;}
.article.visual-p2 .vx-countdown b{font-size:16px;}
.article.visual-p2 .vx-verdict{font-size:16px;}.article.visual-p2 .vx-panel p{font-size:13px;}
.article.visual-p2 .vx-route-node{min-width:58px;font-size:25px;}
.article.visual-p2 .vx-only-narrow{display:initial;}
.article.visual-p2 .vx-start{margin-left:23%;margin-right:23%;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

.article.visual-p2 > p, .article.visual-p2 p.scan-lead { font-size:18px !important; line-height:1.78 !important; margin:0 0 18px !important; }
.article.visual-p2 h2 { margin:48px 0 16px !important; }
.article.visual-p2 h3 { margin:30px 0 12px !important; }
.article.visual-p2 .scan-lead { background:none !important; border:0 !important; padding:0 !important; }
.article.visual-p2 .vx-intro .lead { margin:0 !important; font-size:18px !important; line-height:1.65 !important; }
.article.visual-p2 .vx-figure .vx-condition, .article.visual-p2 .vx-figure .vx-condition p { font-size:14px !important; line-height:1.65 !important; }
.article.visual-p2 .vx-figure .vx-condition { margin:0 0 16px !important; }
.article.visual-p2 .vx-figure .vx-condition p { margin:4px 0 0 !important; }
.article.visual-p2 .vx-panel p { font-size:14px !important; line-height:1.6 !important; margin:8px 0 10px !important; }
.article.visual-p2 .vx-figure p.vx-figure-note { font-size:14px !important; line-height:1.7 !important; margin:14px 0 0 !important; }
.article.visual-p2 .vx-figure p.vx-axis-caption { font-size:14px !important; line-height:1.6 !important; margin:0 0 10px !important; }
.article.visual-p2 .grade-card p {font-size:17px !important;line-height:1.7 !important;margin:0 0 10px !important;}
.article.visual-p2 .grade-card p.grade-note, .article.visual-p2 > p.grade-note {font-size:14px !important;line-height:1.7 !important;}
.article.visual-p2 .vx-coverage .grade-coverage-pair p {font-size:16px !important;line-height:1.6 !important;}
.article.visual-p2 .grade-terms p {font-size:16px !important;line-height:1.6 !important;margin:0 0 8px !important;}
.article.visual-p2 .scan-hero p {line-height:1.65 !important;margin:10px 0 !important;}
.article.visual-p2 .scan-hero p.grade-note {font-size:14px !important;}
.article.visual-p2 .grade-question p {font-size:16px !important;line-height:1.65 !important;margin:0 !important;}
.article.visual-p2 .related-box p {font-size:17px !important;line-height:1.75 !important;margin:8px 0 !important;}
@media(max-width:768px){
.article.visual-p2 > p,.article.visual-p2 p.scan-lead {font-size:17px !important;line-height:1.76 !important;}
.article.visual-p2 h2 {margin:44px 0 14px !important;}
.article.visual-p2 h3 {margin:28px 0 10px !important;}
.article.visual-p2 .vx-intro .lead {font-size:17px !important;line-height:1.65 !important;}
.article.visual-p2 .vx-coverage .grade-coverage-pair p {font-size:15px !important;}
}

/* P2 palette uses the site's existing navy/blue tokens. No global stylesheet mutation. */
.article.visual-p2 { --green:#1e4f8f; --green-soft:#edf4fb; --vx-teal:#1e4f8f; --vx-amber:#12355f; }
.article.visual-p2 .vx-intro { gap:22px; align-items:center; }
.article.visual-p2 .vx-intro .vx-speech {
 position:relative; flex:1; min-width:0; background:#f3f7fc;
 border:1.5px solid #9bb7d7; border-radius:16px; padding:16px 20px !important;
 color:#12355f; box-shadow:none;
}
/* Exactly one pseudo-element creates one tail. No tail is baked into the alpha-masked illustration. */
.article.visual-p2 .vx-speech::before { content:none !important; }
.article.visual-p2 .vx-speech::after {
 content:""; position:absolute; width:12px; height:12px; left:-7px; top:calc(50% - 6px);
 background:#f3f7fc; border-left:1.5px solid #9bb7d7; border-bottom:1.5px solid #9bb7d7;
 transform:rotate(45deg); pointer-events:none;
}
/* Tint only the existing green clothing through CSS; raster originals are retained byte-for-byte. */
.article.visual-p2 .vx-person, .article.visual-p2 .vx-guide { filter:hue-rotate(54deg) saturate(.72); }
.article.visual-p2 .vx-green { background:#edf4fb; color:#12355f; border-color:#bed1e8; }
.article.visual-p2 .vx-orange { background:#f8faff; color:#1e4f8f; border-color:#90afd4; }
.article.visual-p2 .vx-panel { border-top:4px solid #1e4f8f; }
.article.visual-p2 .vx-orange .vx-tag { background:#1e4f8f; color:#fff; }
.article.visual-p2 .vx-green .vx-tag { background:#fff; color:#12355f; }
.article.visual-p2 .vx-final .vx-plot-slot > strong { border-color:#12355f; background:#edf4fb; color:#12355f; }
.article.visual-p2 .vx-use { color:#12355f; }
.article.visual-p2 .vx-without { color:#285f9e; }
.article.visual-p2 .vx-route-last .vx-use { background:#e4edf8; }
.article.visual-p2 .vx-route-last .vx-without { background:#f3f7fc; }
.article.visual-p2 .scan-impact { background:#edf4fb !important; border-color:#bbcee5 !important; border-left-color:#1e4f8f !important; color:#12355f !important; }
.article.visual-p2 .scan-impact strong { color:#12355f !important; }
.article.visual-p2 .grade-card.positive { border-top-color:#1e4f8f; background:#edf4fb; }
.article.visual-p2 .grade-card.warning { border-top-color:#b77a2a; background:#fff9ef; }
.article.visual-p2 .vx-period-pill.vx-zero { background:#dceafa; color:#12355f; }
@media(max-width:768px){
 .article.visual-p2 .vx-intro {gap:14px;}
 .article.visual-p2 .vx-intro .vx-person {width:72px;flex-basis:72px;}
 .article.visual-p2 .vx-intro .vx-speech {padding:12px 13px !important;}
}
@media(max-width:350px){
 .article.visual-p2 .vx-intro {gap:11px;}
 .article.visual-p2 .vx-intro .vx-person {width:58px;flex-basis:58px;}
 .article.visual-p2 .vx-intro .vx-speech {padding:10px 11px !important;}
}



/* P3 visual table of contents: scoped to this prototype. Original P2 styles remain unchanged. */
.article.visual-p2 .knowledge-toc {
  max-width:none; margin:28px 0 36px !important; padding:0 !important;
  border:0; border-radius:0; background:transparent; color:#12355f;
}
.article.visual-p2 .knowledge-toc .kt-heading {display:flex;align-items:center;gap:10px;margin:0 0 6px;}
.article.visual-p2 .knowledge-toc #article-guide-heading {display:block;margin:0;font-size:23px;line-height:1.5;font-weight:800;letter-spacing:.015em;color:#12355f;}
.article.visual-p2 .knowledge-toc .kt-heading-badge {flex-shrink:0;padding:3px 9px;background:#edf4fb;border-radius:6px;font-size:12px;line-height:1.5;font-weight:700;color:#1e4f8f;}
.article.visual-p2 .knowledge-toc p.kt-hint {font-size:14px!important;line-height:1.7!important;margin:0 0 14px!important;color:#53657a;}
.article.visual-p2 .knowledge-toc ol.kt-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0!important;padding:0!important;list-style:none;}
.article.visual-p2 .knowledge-toc li.kt-item {min-width:0;margin:0!important;padding:0!important;border:0;list-style:none;}
.article.visual-p2 .knowledge-toc a.kt-link {box-sizing:border-box;display:flex;flex-direction:column;gap:0;height:100%;min-height:150px;margin:0;padding:15px 16px;border:1px solid #b9cde5;border-radius:12px;background:#f7faff;color:#12355f;text-decoration:none!important;line-height:1.5;box-shadow:none;transition:background-color .16s,border-color .16s;}
.article.visual-p2 .knowledge-toc .kt-top {display:flex;align-items:center;gap:10px;height:36px;margin:0 0 9px;color:#1e4f8f;}
.article.visual-p2 .knowledge-toc .kt-number {font-size:12px;line-height:1.4;font-weight:750;font-variant-numeric:tabular-nums;color:#526d8d;}
.article.visual-p2 .knowledge-toc .kt-icon {display:block;width:34px;height:34px;flex-shrink:0;overflow:visible;}
.article.visual-p2 .knowledge-toc .kt-arrow {display:block;width:18px;height:18px;margin-left:auto;flex-shrink:0;}
.article.visual-p2 .knowledge-toc .kt-title {display:block;font-size:17px;font-weight:750;line-height:1.5;overflow-wrap:anywhere;}
.article.visual-p2 .knowledge-toc .kt-desc {display:block;margin-top:6px;font-size:13.5px;font-weight:400;line-height:1.6;color:#465c73;overflow-wrap:anywhere;}
.article.visual-p2 .knowledge-toc .kt-phrase {display:inline-block;max-width:100%;overflow-wrap:anywhere;}
.article.visual-p2 .knowledge-toc a.kt-link:visited {color:#12355f;}
.article.visual-p2 .knowledge-toc a.kt-link:hover {background:#eaf2fc;border-color:#1e4f8f;}
.article.visual-p2 .knowledge-toc a.kt-link:focus-visible {outline:3px solid #1e4f8f;outline-offset:3px;background:#eaf2fc;}
.article.visual-p2 h2[id] {scroll-margin-top:112px;}
@media(max-width:768px) {
 .article.visual-p2 .knowledge-toc {margin:24px 0 32px!important;}
 .article.visual-p2 .knowledge-toc #article-guide-heading {font-size:21px;}
 .article.visual-p2 .knowledge-toc ol.kt-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .article.visual-p2 .knowledge-toc a.kt-link {padding:12px;min-height:146px;border-radius:10px;}
 .article.visual-p2 .knowledge-toc .kt-title {font-size:16px;line-height:1.5;}
 .article.visual-p2 .knowledge-toc .kt-desc {font-size:13px;line-height:1.6;}
 .article.visual-p2 .knowledge-toc .kt-top {height:30px;gap:8px;margin-bottom:8px;}
 .article.visual-p2 .knowledge-toc .kt-icon {width:30px;height:30px;}
}
@media(max-width:350px) {
 .article.visual-p2 .knowledge-toc a.kt-link {padding:11px 10px;}
 .article.visual-p2 .knowledge-toc #article-guide-heading {font-size:20px;}
}
@media(prefers-reduced-motion:reduce) {
 .article.visual-p2 .knowledge-toc a.kt-link {transition:none;}
}




/* P3: the user's reference layout, adapted to article 07 (grades), not deductible content. */
.article.visual-p2 .scan-hero.kp-answer {background:#edf4fb!important;border:1px solid #a9c3e1!important;border-radius:16px!important;padding:24px 28px!important;box-shadow:none!important;color:#12355f!important;}
.article.visual-p2 .kp-answer .kp-answer-head {display:flex;align-items:center;gap:14px;margin:0 0 12px;}
.article.visual-p2 .kp-answer .kp-bulb {display:block;flex:none;width:54px;height:54px;color:#224b75;}
.article.visual-p2 .kp-answer .label {display:inline-block;margin:0!important;padding:7px 16px!important;background:#1e4f8f!important;color:#fff!important;border-radius:28px;font-size:19px!important;line-height:1.5!important;font-weight:800;}
.article.visual-p2 .kp-answer .kp-keep {display:inline-block;max-width:100%;}
.article.visual-p2 .kp-answer .grade-kicker {font-size:16px!important;line-height:1.6!important;margin:7px 0!important;}
.article.visual-p2 .kp-answer .grade-hero-lines {display:block;font-size:clamp(24px,3vw,32px)!important;line-height:1.55!important;}
.article.visual-p2 .kp-answer .grade-hero-lines em {color:#12355f!important;font-style:normal;}
.article.visual-p2 .kp-answer .grade-hero-lines .grade-nowrap {color:#1e4f8f!important;}
.article.visual-p2 .kp-answer > p:not(.grade-kicker):not(.grade-note) {font-size:18px!important;line-height:1.7!important;}
.article.visual-p2 .kp-answer p.grade-note {font-size:14px!important;line-height:1.7!important;margin-bottom:0!important;color:#465c73!important;}
.article.visual-p2 .grade-terms {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:none;padding:0;border:0;}
.article.visual-p2 .grade-terms p.grade-term {display:flex;align-items:center;gap:12px;background:#f4f8fd;border:1px solid #ccdbeb;border-radius:12px;padding:16px;margin:0!important;}
.article.visual-p2 .grade-terms .kp-icon {display:block;width:34px;height:34px;flex:0 0 34px;color:#1e4f8f;}
.article.visual-p2 .grade-terms .kp-term-copy {min-width:0;}
.article.visual-p2 .grade-question-grid.kp-summary {display:grid;grid-template-columns:94px minmax(0,1fr);align-items:end;gap:20px;border:1px solid #c4d6eb;border-radius:14px;background:#f0f6fc;padding:20px;margin:18px 0 22px;}
.article.visual-p2 .kp-summary .kp-summary-person {display:block;float:none;width:94px;height:auto;max-width:100%;margin:0;align-self:end;}
.article.visual-p2 .kp-question-list {min-width:0;}
.article.visual-p2 .kp-summary .grade-question {position:relative;background:transparent;border:0;border-radius:0;padding:12px 0 12px 30px;margin:0;box-shadow:none;}
.article.visual-p2 .kp-summary .grade-question + .grade-question {border-top:1px solid #cfdded;}
.article.visual-p2 .kp-summary .grade-question .kp-check {position:absolute;left:0;top:16px;width:21px;height:21px;color:#1e4f8f;}
.article.visual-p2 .kp-summary .grade-question strong {font-size:17px;line-height:1.7;color:#12355f;}
.article.visual-p2 .kp-summary .grade-question > p {font-size:16px!important;line-height:1.7!important;}
.article.visual-p2 .knowledge-toc .kt-top {display:grid;grid-template-columns:20px minmax(0,1fr) 20px;}
.article.visual-p2 .knowledge-toc .kt-icon {justify-self:center;}
.article.visual-p2 .knowledge-toc .kt-arrow {margin:0;}
@media(max-width:768px){
 .article.visual-p2 .scan-hero.kp-answer {padding:18px 16px!important;border-radius:13px!important;}
 .article.visual-p2 .kp-answer .kp-answer-head {gap:10px;margin-bottom:10px;}
 .article.visual-p2 .kp-answer .kp-bulb {width:44px;height:44px;}
 .article.visual-p2 .kp-answer .label {padding:6px 14px!important;font-size:18px!important;}
 .article.visual-p2 .kp-answer .grade-hero-lines {font-size:24px!important;line-height:1.6!important;}
 .article.visual-p2 .kp-answer > p:not(.grade-kicker):not(.grade-note) {font-size:17px!important;}
 .article.visual-p2 .grade-terms {grid-template-columns:1fr;gap:10px;}
 .article.visual-p2 .grade-terms p.grade-term {padding:14px 12px;font-size:16px!important;}
 .article.visual-p2 .grade-question-grid.kp-summary {display:block;position:relative;padding:12px 14px 6px;}
 .article.visual-p2 .kp-summary .kp-summary-person {float:right;width:60px;height:auto;margin:2px 0 8px 12px;}
 .article.visual-p2 .kp-summary .grade-question:first-child {padding-right:0;}
 .article.visual-p2 .kp-summary .grade-question {padding-left:26px;}
 .article.visual-p2 .kp-summary .grade-question + .grade-question {clear:both;}
 .article.visual-p2 .kp-summary .grade-question strong {font-size:16px!important;}
 .article.visual-p2 .kp-summary .grade-question > p {font-size:15px!important;}
 .article.visual-p2 .kp-summary .grade-question .kp-check {width:19px;height:19px;top:15px;}
}
@media(max-width:350px){.article.visual-p2 .kp-answer .grade-hero-lines{font-size:22px!important;}.article.visual-p2 .kp-answer .label{font-size:17px!important;}}


/* P4: reference-led hierarchy and generous, collision-free connector lanes.
   Local to article 07 prototype. Shared CSS, source illustrations, and JavaScript are untouched. */
.article.visual-p4 {--p4-navy:#12355f;--p4-blue:#1e4f8f;--p4-light:#edf4fb;--p4-ink:#243747;}
.article.visual-p4 > h1 {max-width:none!important;width:100%;margin:20px 0 18px!important;line-height:1.32!important;letter-spacing:-.015em;color:var(--p4-navy);}
.article.visual-p4 > h1 .p4-title-main {display:block;white-space:normal;font-size:clamp(34px,3.5vw,44px)!important;font-weight:850;line-height:1.36;}
.article.visual-p4 > h1 .p4-title-focus {color:var(--p4-blue);font-size:1.1em;}
.article.visual-p4 > h1 .p4-title-sub {display:block;white-space:normal;margin-top:10px;font-size:clamp(23px,2.5vw,30px)!important;line-height:1.45;font-weight:700;color:#52677b;letter-spacing:0;}
.article.visual-p4 > .article-meta {margin:0 0 18px!important;}
.article.visual-p4 .vx-intro {margin:18px 0 16px;}
/* Topic, conclusion, and supporting sentence have separate visual weights. */
.article.visual-p4 h2 {border:0!important;border-left:5px solid var(--p4-blue)!important;background:transparent!important;padding:0 0 0 17px!important;margin:52px 0 18px!important;box-shadow:none!important;line-height:1.45!important;}
.article.visual-p4 h2::before,.article.visual-p4 h2::after {content:none!important;}
.article.visual-p4 .p4-heading-main {display:block;font-size:28px;line-height:1.5;font-weight:800;color:var(--p4-navy);}
.article.visual-p4 .p4-heading-sub {display:block;font-size:21px;line-height:1.55;font-weight:650;color:#52677b;margin-top:5px;}
.article.visual-p4 .p4-heading-context {display:block;font-size:19px;line-height:1.55;font-weight:650;color:#52677b;margin-bottom:3px;}
.article.visual-p4 .p4-heading-main em,.article.visual-p4 .p4-heading-sub em {color:var(--p4-blue);font-style:normal;}
.article.visual-p4 .p4-keep {display:inline-block;}
.article.visual-p4 h3 {font-size:22px!important;font-weight:750!important;line-height:1.55!important;margin:30px 0 12px!important;color:var(--p4-ink);}
.article.visual-p4 .p4-heading-accent {color:var(--p4-blue);}
.article.visual-p4 > p, .article.visual-p4 p.scan-lead {line-height:1.8!important;margin-bottom:16px!important;}
.article.visual-p4 p.scan-lead {font-weight:650;color:var(--p4-ink);}
/* Keep the most useful cards; open up surrounding explanations instead of framing every paragraph. */
.article.visual-p4 .scan-hero.kp-answer {margin:24px 0 14px!important;box-shadow:none!important;}
.article.visual-p4 .kp-answer .grade-kicker {font-size:15px!important;color:#52677b;}
.article.visual-p4 .kp-answer .grade-hero-lines em {font-size:.7em!important;font-weight:650!important;color:var(--p4-ink)!important;line-height:1.65;}
.article.visual-p4 .kp-answer .grade-hero-lines .grade-nowrap {font-size:1.43em;font-weight:850;color:var(--p4-blue);}
.article.visual-p4 .kp-answer .grade-hero-lines {line-height:1.7!important;}
.article.visual-p4 .grade-terms {gap:14px;}
.article.visual-p4 .grade-terms p.grade-term {background:#f6f9fd;border-color:#dce6f1;padding:14px;}
.article.visual-p4 .vx-figure.vx-comparison,
.article.visual-p4 .vx-figure.vx-period,
.article.visual-p4 .vx-figure.vx-recovery {padding:12px 0 8px;border:0;background:transparent;border-radius:0;margin:18px 0 24px;}
.article.visual-p4 .vx-figure figcaption {font-size:21px;font-weight:650;color:#52677b;line-height:1.55;margin-bottom:14px;}
.article.visual-p4 .vx-figure figcaption strong {font-size:1.12em;color:var(--p4-blue);font-weight:800;}
.article.visual-p4 .vx-condition {border-radius:0;border-left:3px solid #c7d8ed;background:#f7f9fc;padding:10px 13px;}
.article.visual-p4 .grade-card[data-block="6"],
.article.visual-p4 .grade-card[data-block="7"],
.article.visual-p4 .grade-card[data-block="8"] {border:1px solid #d5e1ef!important;border-top:3px solid var(--p4-blue)!important;background:#fff!important;box-shadow:none;padding:18px 20px;margin:16px 0 20px;}
.article.visual-p4 .grade-card-label .grade-number {font-size:23px!important;color:var(--p4-navy)!important;}
.article.visual-p4 .grade-change {display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;gap:10px;align-items:center;margin:16px 0!important;}
.article.visual-p4 .grade-change > div {min-width:0;border:0;background:var(--p4-light);padding:13px 8px!important;border-radius:10px;}
.article.visual-p4 .grade-change > b {display:flex;align-items:center;justify-content:center;position:static!important;width:28px;height:32px;transform:none!important;margin:0;line-height:1;color:#537ba5;}
.article.visual-p4 .grade-change strong {font-size:30px!important;line-height:1.3;margin-top:6px;}
.article.visual-p4 .grade-change span {font-size:14px;}
.article.visual-p4 .p4-prose-note {background:transparent!important;border:0!important;border-left:3px solid #becfe3!important;border-radius:0!important;padding:5px 0 5px 16px!important;margin:20px 0!important;box-shadow:none!important;}
.article.visual-p4 .p4-prose-note .grade-number,.article.visual-p4 .p4-prose-note > strong {font-size:18px!important;line-height:1.7!important;font-weight:700!important;}
.article.visual-p4 .p4-prose-note p {font-size:17px!important;line-height:1.75!important;margin:5px 0!important;}
.article.visual-p4 .related-box[data-link-id="L01"] {border:0;border-radius:0;border-top:1px solid #dae4ef;background:transparent;padding:14px 0;margin:20px 0 28px;}
/* Route connectors occupy their own rows. They cannot intersect a numbered node or final-row frame. */
.article.visual-p4 .vx-start::after,
.article.visual-p4 .vx-route-node::after {content:none!important;display:none!important;}
.article.visual-p4 .vx-start {margin:0 24% 0;padding:12px;}
.article.visual-p4 .p4-start-connector {height:38px;display:flex;align-items:center;justify-content:center;}
.article.visual-p4 .p4-flow-arrow {display:block;width:20px;height:24px;flex:none;color:#678ab3;overflow:visible;}
.article.visual-p4 .vx-route-rows {display:flex;flex-direction:column;gap:0;}
.article.visual-p4 .vx-route-row {padding:4px 0;}
.article.visual-p4 .p4-route-connector {display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,1fr);column-gap:12px;height:38px;align-items:center;justify-items:center;flex:none;}
.article.visual-p4 .vx-route-last {margin:0!important;padding:14px 0!important;}
.article.visual-p4 .vx-route-summary {padding:14px;margin-top:16px;}
.article.visual-p4 .vx-coverage .grade-arrow.p4-coverage-connector {display:flex;align-items:center;justify-content:center;position:static!important;height:38px!important;margin:6px 0!important;padding:0!important;line-height:1!important;font-size:22px!important;}
.article.visual-p4 .vx-coverage .grade-coverage-pair {margin:16px 0 0!important;}
.article.visual-p4 .vx-coverage .grade-one-result {margin-top:0!important;}
.article.visual-p4 .vx-countdown {gap:10px;}
.article.visual-p4 .vx-countdown b {flex:0 0 20px;text-align:center;line-height:1;font-size:20px;}
.article.visual-p4 .vx-routes {padding:22px;background:#fff;border-color:#d5e1ef;}
@media(min-width:1100px){.article.visual-p4 > h1 .p4-title-main {white-space:nowrap;}}
@media(max-width:768px){
 .article.visual-p4 > h1 {margin-top:18px!important;margin-bottom:16px!important;}
 .article.visual-p4 > h1 .p4-title-main {font-size:clamp(26px,6.4vw,33px)!important;line-height:1.43;white-space:normal;}
 .article.visual-p4 > h1 .p4-title-sub {font-size:clamp(19px,4.4vw,23px)!important;line-height:1.55;margin-top:9px;white-space:normal;}
 .article.visual-p4 h2 {margin:40px 0 16px!important;padding-left:12px!important;border-left-width:4px!important;}
 .article.visual-p4 .p4-heading-main {font-size:23px;line-height:1.5;}
 .article.visual-p4 .p4-heading-sub {font-size:18px;line-height:1.65;}
 .article.visual-p4 .p4-heading-context {font-size:17px;line-height:1.65;}
 .article.visual-p4 h3 {font-size:20px!important;line-height:1.55!important;margin:27px 0 11px!important;}
 .article.visual-p4 .grade-change {gap:8px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;}
 .article.visual-p4 .grade-change > b {width:24px;font-size:20px;}
 .article.visual-p4 .grade-change strong {font-size:27px!important;}
 .article.visual-p4 .grade-card[data-block="6"],.article.visual-p4 .grade-card[data-block="7"],.article.visual-p4 .grade-card[data-block="8"] {padding:16px 14px;}
 .article.visual-p4 .vx-figure figcaption {font-size:18px;}
 .article.visual-p4 .vx-routes {padding:17px 13px;}
 .article.visual-p4 .p4-route-connector {grid-template-columns:67px minmax(0,1fr) minmax(0,1fr);column-gap:7px;}
 .article.visual-p4 .vx-countdown {gap:6px;}
 .article.visual-p4 .vx-countdown b {flex-basis:17px;font-size:17px;}
 .article.visual-p4 .p4-prose-note .grade-number,.article.visual-p4 .p4-prose-note > strong {font-size:17px!important;}
}
@media(max-width:350px){
 .article.visual-p4 .grade-change strong {font-size:25px!important;}
 .article.visual-p4 .grade-change span {font-size:13px;}
 .article.visual-p4 .p4-heading-main {font-size:22px;}
 .article.visual-p4 .vx-start {margin-left:20%;margin-right:20%;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important;}}

.article.visual-p4 .p4-title-question{display:inline-block;}