/* Shared visual refinement for Media Hosting landing pages and detail views. */
:root{--space-1:.5rem;--space-2:.85rem;--space-3:1.25rem;--space-4:1.75rem;--space-5:2.5rem;--space-6:clamp(3.5rem,7vw,6rem);--page-max:1180px;--reading-max:760px;--card-radius:14px;--card-shadow:0 12px 30px #00000012;--focus-ring:0 0 0 3px #f0474780}
body{font-size:16px;line-height:1.68;text-rendering:optimizeLegibility}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)}
h1,h2,h3{font-weight:850;text-wrap:balance}p,li{max-width:var(--reading-max)}
.landing-hero .hero{min-height:clamp(300px,32vw,420px);display:flex;align-items:flex-end;padding:clamp(4.5rem,8vw,7rem) 0 clamp(3rem,5vw,4.5rem);background-image:linear-gradient(90deg,#080808f4 0%,#080808dc 39%,#0808088a 63%,#0808083a 100%),var(--landing-image);background-position:center;background-size:cover}
.landing-hero .hero:after{background:linear-gradient(90deg,transparent 49.7%,#fff1 50%,transparent 50.3%),linear-gradient(#fff1 1px,transparent 1px);background-size:84px 84px;opacity:.14}.landing-hero .hero .shell{width:100%}.landing-hero .hero h1{max-width:720px;margin:.55rem 0 1rem;font-size:clamp(2.75rem,5.5vw,4.85rem);line-height:1.04;letter-spacing:-.055em}.landing-hero .hero .lede{max-width:650px;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.65}
.visual-storage{--landing-image:url('/assets/hero-storage.webp')}.visual-hosting{--landing-image:url('/assets/hero-hosting.webp')}.visual-compare{--landing-image:url('/assets/hero-compare.webp')}.visual-tools{--landing-image:url('/assets/hero-tools.webp')}.visual-guides{--landing-image:url('/assets/hero-guides.webp')}.visual-blog{--landing-image:url('/assets/hero-blog.webp')}
.content{padding:var(--space-6) 0}.content>.shell{max-width:var(--page-max)}.content h2{margin:0 0 var(--space-2);font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.12}.content h3{margin:var(--space-5) 0 var(--space-2);font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.25}.content p{margin:0 0 var(--space-3);font-size:1.04rem}.content .cards{gap:1.25rem;margin:var(--space-4) 0 var(--space-5)}
.card,.article-card{border-radius:var(--card-radius)}.card{padding:1.45rem;background:#fff;border-color:#d8d9dc;box-shadow:var(--card-shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover{transform:translateY(-4px);border-color:#f04747;box-shadow:0 18px 38px #0000001c}.card h3{margin:.1rem 0 .65rem;font-size:1.2rem}.card p{font-size:.98rem;line-height:1.62}.card a{margin-top:1.2rem;transition:color .2s}.card a:hover{color:#6e0813}.route-list{margin:var(--space-4) 0 var(--space-5)}.route-list a{border-radius:10px}.notice{margin:var(--space-4) 0}
.breadcrumbs{max-width:var(--page-max);margin:0 auto;padding:.8rem 1.25rem .2rem;color:#b9bdc4;font-size:.78rem;line-height:1.35}.breadcrumbs a{color:#e2e3e5}.breadcrumbs a:hover{color:#ff858c}.breadcrumbs span{margin:0 .45rem;color:#71757c}.detail-page .hero{padding:3.65rem 0 2.9rem;min-height:0}.detail-page .hero h1{font-size:clamp(2.35rem,4.4vw,4.2rem);line-height:1.08;letter-spacing:-.05em}.detail-page .hero .lede{font-size:1.04rem}.detail-page .content{padding-top:clamp(2.75rem,5vw,4.5rem)}
.article-copy{max-width:var(--reading-max)}.article-copy p{line-height:1.75}.article-copy h2{margin:3rem 0 1rem;line-height:1.18}.article-hero{min-height:clamp(280px,30vw,390px)}.article-hero .shell{padding-top:3.5rem;padding-bottom:3rem}.article-hero h1{font-size:clamp(2.35rem,5vw,4.4rem);line-height:1.04}
.blog-landing .hero{min-height:clamp(300px,32vw,420px);display:flex;align-items:flex-end;padding:clamp(4.5rem,8vw,7rem) 0 clamp(3rem,5vw,4.5rem);background-image:linear-gradient(90deg,#080808f4 0%,#080808dc 39%,#0808088a 63%,#0808083a 100%),var(--landing-image);background-position:center;background-size:cover}.blog-landing .hero:after{opacity:.12}.blog-landing .hero h1{max-width:720px;font-size:clamp(2.75rem,5.5vw,4.85rem);line-height:1.04}.blog-landing .articles{padding:var(--space-6) 0}.blog-landing .article-card{border-radius:var(--card-radius)}
@media(max-width:760px){body{font-size:16px}.landing-hero .hero,.blog-landing .hero{min-height:315px;padding:4.6rem 0 2.7rem;background-position:60% center}.landing-hero .hero h1,.blog-landing .hero h1{font-size:clamp(2.45rem,11vw,3.4rem)}.content{padding:clamp(2.75rem,10vw,3.6rem) 0}.content h2{font-size:clamp(1.75rem,8vw,2.3rem)}.content h3{margin-top:2rem}.content p{font-size:1rem}.card{padding:1.25rem}.breadcrumbs{padding:.72rem 1.1rem .15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-page .hero{padding:2.7rem 0 2.35rem}.detail-page .hero h1{font-size:clamp(2.2rem,10vw,3.1rem)}.detail-page .hero .lede{font-size:1rem}.article-hero{min-height:285px}.article-hero .shell{padding-top:2.75rem;padding-bottom:2.25rem}.article-copy p{line-height:1.7}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
.topic-card h3{color:#fff}
@media(min-width:761px){#topics h2{max-width:none;white-space:nowrap;font-size:clamp(2rem,4.2vw,3.4rem)}}