/* Scope new photographic headers and illustrations to these two guides. */
.editorial .topic-guide{padding:28px 0 42px;background:#edf3f7;isolation:isolate;position:relative;overflow:hidden}
.editorial .topic-guide .hero-scene{object-position:center;z-index:-3}
.editorial .topic-guide:before{background:linear-gradient(90deg,#eff5f9fa 0%,#eff5f9f2 29%,#eff5f9d9 43%,#eff5f936 64%,transparent 82%)}
.editorial .topic-guide:after{background:linear-gradient(0deg,#eef4f780,transparent 30%)}
.editorial .topic-guide .hero-grid{display:block;min-height:420px;padding:65px 0 30px}
.editorial .topic-guide .hero-copy{max-width:550px;width:51%}
.editorial .topic-guide .hero-copy h1{font-size:clamp(30px,3.2vw,43px);line-height:1.35;letter-spacing:-.025em;text-wrap:balance}
.editorial .topic-guide .hero-copy>p{color:#344e65;font-size:17px;line-height:1.85}
.editorial .topic-guide .hero-meta{font-size:12px;color:#415e74}
.editorial .topic-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.editorial .topic-product{display:block;border:1px solid #dce5ee;border-radius:14px;padding:24px;background:#f7f9fb;text-decoration:none!important}
.editorial .topic-product:hover{border-color:#8baec8}
.editorial .topic-product img{width:100%;height:200px;object-fit:contain;display:block;margin:0 auto 16px}
.editorial .topic-product strong{display:block;font-size:19px;color:#153b60}
.editorial .topic-product span{font-size:14px;display:block;color:#3b5e77;line-height:1.7;margin-top:8px}
.editorial .topic-sources{border-top:1px solid #dce5ee;padding-top:22px;font-size:13px;line-height:1.9}
.editorial .topic-sources h2{font-size:19px}
.editorial .topic-sources ul{padding-left:20px}
/* Explanatory body visuals: original product photos, semantic diagrams and scenes. */
.topic-guide-page .guide-visual{margin:30px 0 38px;border:1px solid #dce5ee;border-radius:16px;background:#f5f8fb;overflow:hidden;scroll-margin-top:100px}
.topic-guide-page .guide-visual-title{padding:22px 24px 0;font-size:19px;line-height:1.6;font-weight:650;color:#123b60}
.topic-guide-page .guide-visual figcaption{padding:18px 24px;font-size:13px;line-height:1.8;color:#4b657b;border-top:1px solid #dce5ee}
.topic-guide-page .guide-visual-photo>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.topic-guide-page .guide-product-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px}
.topic-guide-page .guide-product-pair>a{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:20px;background:#fff;border-radius:12px;text-decoration:none;border:1px solid transparent}
.topic-guide-page .guide-product-pair>a:hover{border-color:#9cb5cb}
.topic-guide-page .guide-product-pair img{display:block;width:100%;height:210px;object-fit:contain;margin-bottom:20px}
.topic-guide-page .guide-product-pair strong{font-size:20px;color:#123b60}
.topic-guide-page .guide-product-pair span{font-size:14px;line-height:1.8;color:#425e75;margin-top:10px}
.topic-guide-page .guide-product-pair b{position:absolute;right:18px;top:16px;color:#174eac}
.topic-guide-page .guide-control-flow{padding:24px;display:grid;gap:20px}
.topic-guide-page .guide-flow-row{display:flex;align-items:center;gap:15px}
.topic-guide-page .guide-flow-row>b{width:36px;flex-shrink:0;color:#087e91;font-size:13px}
.topic-guide-page .guide-flow-row ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0;flex:1}
.topic-guide-page .guide-flow-row li{position:relative;background:#fff;border:1px solid #d9e4ed;border-radius:9px;padding:17px 12px;color:#163d60;font-size:14px;line-height:1.65;display:flex;align-items:center;justify-content:center;text-align:center}
.topic-guide-page .guide-flow-row li:not(:last-child):after{content:'→';position:absolute;right:-20px;top:calc(50% - 13px);font-size:20px;color:#168b9b}
.topic-guide-page .guide-calculation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding:32px 24px}
.topic-guide-page .guide-calculation>div{position:relative;text-align:center;min-width:0}
.topic-guide-page .guide-calculation strong{font-size:clamp(22px,2.9vw,34px);color:#123b60;display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.topic-guide-page .guide-calculation span{display:block;font-size:13px;color:#4b657b;line-height:1.6;margin-top:10px}
.topic-guide-page .guide-calculation>div:not(:last-child):after{position:absolute;right:-25px;top:1px;font-size:28px;color:#168b9b;content:'÷'}
.topic-guide-page .guide-calculation>div:nth-child(2):after{content:'='}
.topic-guide-page .guide-app-pair{display:grid;grid-template-columns:1fr .65fr;align-items:center;gap:30px;padding:30px 55px}
.topic-guide-page .guide-app-pair img{display:block;width:100%;height:310px;object-fit:contain}
.topic-guide-page .guide-product-pair a:focus-visible{outline:3px solid #168cbd;outline-offset:3px}
@media(max-width:760px){
 .topic-guide-page .guide-visual-title{padding:20px 18px 0;font-size:18px}
 .topic-guide-page .guide-visual figcaption{padding:16px 18px}
 .topic-guide-page .guide-product-pair{grid-template-columns:1fr;padding:18px;gap:14px}
 .topic-guide-page .guide-product-pair img{height:230px}
 .topic-guide-page .guide-flow-row{align-items:flex-start;gap:12px}
 .topic-guide-page .guide-control-flow{padding:22px 18px}
 .topic-guide-page .guide-flow-row>b{padding-top:14px}
 .topic-guide-page .guide-flow-row ol{grid-template-columns:1fr;gap:24px}
 .topic-guide-page .guide-flow-row li:not(:last-child):after{content:'↓';right:calc(50% - 8px);top:auto;bottom:-25px}
 .topic-guide-page .guide-calculation{grid-template-columns:1fr;gap:45px;padding:28px 18px}
 .topic-guide-page .guide-calculation strong{font-size:32px}
 .topic-guide-page .guide-calculation>div:not(:last-child):after{right:calc(50% - 9px);top:auto;bottom:-38px}
 .topic-guide-page .guide-app-pair{gap:18px;padding:26px 18px;grid-template-columns:1fr .7fr}
 .topic-guide-page .guide-app-pair img{height:210px}
}
.editorial .topic-cover{width:100%;height:100%;object-fit:cover;object-position:75% center;display:block}
.support-new-topics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.support-new-topics a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:#fff;border:1px solid #dce5ee;border-radius:10px;color:#123b60;line-height:1.6;text-decoration:none}
.support-new-topics a:hover{border-color:#809fbd;background:#f5f8fb}
.support-new-topics a:focus-visible{outline:3px solid #168cbd;outline-offset:4px}
.support-new-topics a>span:last-child{color:#174eac}
@media(max-width:1000px) and (min-width:761px){.editorial .topic-guide .hero-copy{width:58%}.editorial .topic-guide:before{background:linear-gradient(90deg,#eff5f9fc 0%,#eff5f9e8 40%,#eff5f970 63%,transparent 90%)}}
@media(max-width:760px){
 .editorial .topic-guide{padding:25px 0 235px}
 .editorial .topic-guide .hero-grid{min-height:0;padding:36px 0 22px}
 .editorial .topic-guide .hero-copy{width:100%;max-width:none}
 .editorial .topic-guide .hero-copy h1{font-size:29px;line-height:1.45;margin-top:15px}
 .editorial .topic-guide .hero-copy>p{font-size:16px;line-height:1.85}
 .editorial .topic-guide .hero-scene{top:auto;bottom:0;height:265px;object-position:82% center}
 .editorial .topic-guide:before{background:linear-gradient(180deg,#eff5f9 0%,#eff5f9 48%,#eff5f9f0 62%,transparent 82%)}
 .editorial .topic-guide:after{background:linear-gradient(0deg,#eff5f926,transparent 30%)}
 .editorial .topic-product-grid,.support-new-topics{grid-template-columns:1fr}
 .editorial .topic-product{padding:20px}.editorial .topic-product img{height:210px}
 .support-new-topics a{padding:17px 18px;font-size:15px}
}
@media print{.editorial .topic-guide .hero-scene,.support-new-topics{display:none}.editorial .topic-guide{padding:20px 0}.editorial .topic-guide .hero-copy{width:100%}.editorial .topic-guide .hero-grid{min-height:0;padding:10px 0}}
@media(max-width:380px){
 body.site-page.topic-guide-page{min-width:0}
 body.topic-guide-page .site-header{padding:0 18px;gap:8px}
 body.topic-guide-page .site-header .site-brand img{width:106px;height:17px}
 body.topic-guide-page .site-header-actions{gap:4px}
 body.topic-guide-page .site-language,body.topic-guide-page .site-menu-toggle{font-size:11px}
}