/* Narrow screens and enlarged text must retain the full navigation and headline. */
/* Editorial density and diagrams, based on the supplied local reference. */
.section{padding-block:64px}.hero-grid{min-height:570px;padding-bottom:32px}.hero-visual .hero-image{height:480px}.hero-copy{padding-block:24px}.header-inner{min-height:78px}
.problem{background:#faf8f2}.problem .chapter{grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}.problem h2{font-size:32px}.problem .plain-list{margin-top:22px}.problem .plain-list li{padding-block:7px}
.paper-panel{position:relative;min-height:340px;padding:45px 35px 30px;background:#ede6d7;border:1px solid #d8cebb;box-shadow:8px 10px 0 #e7e0d2}.paper-panel blockquote{margin:40px 0 24px;font:32px/1.9 var(--serif);background:repeating-linear-gradient(transparent 0,transparent 59px,#c9beaa 60px,transparent 61px)}.paper-caption{font-size:14px;color:var(--muted)}.bookmark-mark{position:absolute;right:30px;top:0;width:19px;height:48px;background:#507351;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.solution-layout{display:grid;grid-template-columns:.8fr 1.35fr;align-items:center;gap:38px}.solution-layout .section-heading{display:block;margin:0}.solution-layout .section-heading>p{margin-top:24px}.solution-layout h2{font-size:33px}.solution-layout .product-frame{padding:8px}.solution-layout>figure{min-width:0}
.how{padding-top:0}.how h2{font-size:32px}.steps{margin-top:25px}.steps li{padding-top:20px;padding-bottom:20px}.step-number{margin-bottom:10px}.steps h3{font-size:17px}.step-art{min-height:67px;display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px}.step-art .line-icon{width:38px;height:38px}.url-example{display:block;background:#fffefb;border:1px solid #cbd0c6;padding:6px 14px;width:100%;max-width:260px;color:#627066}.save-example{display:inline-block;background:#238b4b;color:white;border-radius:3px;padding:7px 35px;font-weight:700}
.line-icon{width:28px;height:28px;flex:none;color:#325c46;vertical-align:middle}.reading-features{gap:55px;margin-top:25px;padding-top:26px}.reading-lead>.line-icon{display:block;margin-bottom:15px;width:35px;height:35px}.reading-lead h3{margin-top:12px;font-size:27px}.reading-options dt{display:flex;gap:15px;align-items:center}.reading-options dd{margin-left:43px}.reading-motto{font:23px/1.7 var(--serif);color:#325c46!important;border-left:2px solid #82947e;padding-left:18px}.reading-options>div{padding-block:17px}
.smartphone{background:#f0eee3}.smartphone .chapter{gap:55px}.smartphone h2{font-size:32px}.device-diagram{margin-top:24px;border:0;background:#e4e9dd;padding:28px 20px;gap:22px}.phone-outline{width:95px;height:155px;border:2px solid #3b5547;border-radius:12px;background:#fcfbf5;display:flex;align-items:center;flex-direction:column;padding:10px 8px}.device-topline{width:24px;height:3px;background:#6b7e6d;margin-bottom:18px}.device-diagram .device-label{font-size:12px}.device-diagram .device-url{font-size:10px;padding:3px;border:1px solid #cbd0c6;margin-top:12px}.device-line{width:62px;height:3px;background:#d1d8c9;margin-top:12px}.device-line.short{width:42px;align-self:flex-start;margin-left:6px;margin-top:7px}.network-path{display:flex;align-items:center;flex-direction:column}.network-path b{font-size:25px;color:#507351;font-weight:400}.computer-outline{display:flex;align-items:center;flex-direction:column;gap:8px}.computer-outline .line-icon{width:75px;height:65px}.computer-outline strong{font-size:16px}.computer-outline span{max-width:130px;font-size:11px}
.start{padding-block:30px}.start-inner{padding-block:25px;gap:35px;align-items:center}.start h2{font-size:28px}.tags{gap:18px}.tags>span{border:0;padding:0;display:flex;align-items:center;gap:7px;font-size:13px}.tags .line-icon{width:23px;height:23px}.start-inner p{font-size:15px}
.important{padding:28px 35px}.article-scope{margin-top:15px}.article-scope p+p{margin-top:12px}.scope-footnote{margin-top:17px;padding-top:14px}.faq-layout{max-width:1050px;grid-template-columns:.7fr 1.5fr;gap:45px}.faq-list summary{padding-block:18px}.closing{padding-block:57px}.closing h2{font-size:38px}.closing p{margin-block:18px 25px}
@media(max-width:1000px){.solution-layout{grid-template-columns:.9fr 1.1fr;gap:25px}.solution-layout h2,.problem h2{font-size:28px}.problem .chapter{gap:30px}.paper-panel{padding:35px 22px}.paper-panel blockquote{font-size:27px}.device-diagram{gap:12px;padding-inline:10px}}
@media(max-width:700px){.section{padding-block:42px}.hero-grid{padding-bottom:26px}.hero-copy{padding-top:25px}.problem .chapter,.solution-layout,.faq-layout{grid-template-columns:1fr;gap:30px}.paper-panel{min-height:260px;padding:28px}.paper-panel blockquote{margin-block:25px 18px;font-size:29px}.problem h2,.solution-layout h2,.smartphone h2{font-size:27px}.how{padding-top:0}.how h2{font-size:26px}.step-art{min-height:55px}.steps li+li{padding-left:58px}.reading-options dd{margin-left:0}.smartphone .chapter{gap:25px}.device-diagram{padding-block:24px;gap:20px}.start{padding-block:25px}.start h2{font-size:25px}.start-inner{padding-block:20px;gap:22px}.tags{gap:13px}.tags>span{font-size:12px}.important{padding:25px 23px}.closing{padding-block:44px}.closing h2{font-size:29px}}
.hero h1{font-size:clamp(30px,3.25vw,46px);white-space:normal}
.header-inner>*{min-width:0}
/* SECTION 01: use the real hero image in the right column, never a background substitute. */
.hero-grid{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.hero-visual{min-width:0;width:100%;margin-right:0}
.hero-visual .hero-image{display:block;width:100%;visibility:visible;opacity:1}
@media(max-width:700px){.hero-grid{display:flex;flex-direction:column}.hero-copy{order:0}.hero-visual{order:1}.hero-visual .hero-image{height:auto}}
.reading-features{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;margin-top:44px;border-top:1px solid #cbd3c7;padding-top:38px}
.feature-index{font-size:13px;letter-spacing:.12em;color:#507351}
.reading-lead h3{font:500 30px/1.75 var(--serif);margin-top:23px}
.reading-lead p{margin-top:20px;color:var(--muted)}
.reading-rule{width:70px;height:3px;background:#728569;margin-top:28px}
.reading-options{margin:0}
.reading-options>div{padding:22px 0;border-bottom:1px solid #cbd3c7}
.reading-options>div:first-child{padding-top:0}
.reading-options dt{font-size:19px;font-weight:700}
.reading-options dt span{font:16px var(--serif);color:#507351;margin-right:12px}
.reading-options dd{margin:8px 0 0 37px;font-size:16px;color:var(--muted)}
.article-scope{max-width:920px;margin-top:24px}
.article-scope .note{font-size:14px}
.scope-footnote{border-top:1px solid #cbd3c7;padding-top:20px;margin-top:25px;font-size:14px;color:var(--muted)}
.steps li:not(:last-child):after{right:8px}
.steps li:not(:last-child){padding-right:38px}
@media(max-width:1000px){.reading-features{gap:35px}}
@media(max-width:700px){.reading-features{grid-template-columns:1fr;gap:30px;margin-top:28px;padding-top:28px}.reading-lead h3{font-size:27px}.reading-options dt{font-size:18px}.reading-options dd{margin-left:0}.steps li:not(:last-child){padding-bottom:38px;padding-right:0}.steps li:not(:last-child):after{content:'↓';left:14px;right:auto;top:auto;bottom:5px;font-size:22px}}
@media(max-width:700px){.hero h1{font-size:clamp(25px,7.2vw,43px)}}
@media(max-width:360px){.header-inner{flex-wrap:wrap;justify-content:center;padding-block:14px;gap:12px}.header-inner nav{width:100%;justify-content:center}.header-inner .button.small{font-size:14px}.hero small{font-size:12px}.network{flex-wrap:wrap}}