.seo-hero { padding: 150px 28px 90px; min-height: 680px; display: flex; align-items: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.seo-hero::before { content: ''; position: absolute; width: 760px; height: 560px; left: 50%; top: 45%; transform: translate(-50%,-50%); background: radial-gradient(circle,rgba(99,102,241,.2),transparent 68%); pointer-events: none; }
.seo-wrap { width: 100%; max-width: 900px; margin: 0 auto; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; margin-bottom: 32px; }
.breadcrumbs a { color: #a5b4fc; text-decoration: none; }
.breadcrumbs i { font-size: .65rem; }
.seo-badge { display: inline-flex; gap: 9px; align-items: center; color: var(--green); background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 999px; padding: 8px 16px; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 800; margin-bottom: 24px; }
.seo-hero h1 { color: #fff; font-size: clamp(2.6rem,6vw,4.8rem); line-height: 1.04; letter-spacing: -2.8px; max-width: 880px; }
.seo-lead { color: #a1a1aa; font-size: 1.16rem; line-height: 1.7; max-width: 700px; margin-top: 28px; }
.seo-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
.availability-note { max-width: 720px; color: #71717a; font-size: .78rem; line-height: 1.55; margin-top: 24px; }
.availability-note i { margin-right: 5px; }
.seo-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 80px; align-items: start; }
.seo-content article > h2, .related-section h2 { color: #fff; font-size: clamp(1.65rem,3vw,2.25rem); letter-spacing: -.8px; margin: 0 0 20px; }
.seo-content article > p { color: #a1a1aa; line-height: 1.8; font-size: 1rem; margin-bottom: 18px; }
.seo-content article > h2:not(:first-of-type) { margin-top: 64px; }
.country-fact { display: flex; align-items: center; gap: 18px; margin: 36px 0 12px; background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.22); padding: 22px; border-radius: 16px; }
.country-fact > i { color: #818cf8; font-size: 1.6rem; }
.country-fact div { display: flex; flex-direction: column; gap: 4px; }
.country-fact span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.country-fact strong { color: #fff; }
.combination-notes { margin-top: 24px; padding: 26px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); }
.combination-notes h2 { color: #fff; font-size: 1.25rem; margin-bottom: 14px; }
.combination-notes p { color: var(--muted); line-height: 1.7; margin-top: 10px; }
.intent-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.intent-chips span { color: #a5b4fc; background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.2); border-radius: 999px; padding: 7px 10px; font-size: .72rem; }
.catalog-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.catalog-panels > div { min-height: 160px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.catalog-panels i { color: #818cf8; font-size: 1.35rem; display: block; margin-bottom: 18px; }
.catalog-panels strong { color: #fff; display: block; margin-bottom: 8px; }
.catalog-panels p { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.mid-cta { margin: 24px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-radius: 16px; padding: 22px; background: linear-gradient(120deg,rgba(99,102,241,.16),rgba(139,92,246,.08)); border: 1px solid rgba(99,102,241,.28); }
.mid-cta strong { color: #fff; }
.mid-cta p { color: var(--muted); font-size: .84rem; margin-top: 5px; line-height: 1.5; }
.mid-cta a { flex-shrink: 0; color: #000; background: #fff; text-decoration: none; font-size: .86rem; font-weight: 800; padding: 12px 15px; border-radius: 10px; }
.process-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.process-list li { display: flex; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.process-list li > span { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; color: #a5b4fc; background: rgba(99,102,241,.12); font-family: var(--mono); font-size: .8rem; font-weight: 700; }
.process-list strong { color: #fff; display: block; margin: 3px 0 5px; }
.process-list p { color: var(--muted); line-height: 1.55; font-size: .9rem; }
.responsible-note { margin-top: 64px; padding: 28px; border: 1px solid rgba(245,158,11,.2); background: rgba(245,158,11,.05); border-radius: 18px; }
.responsible-note h2 { color: #fff; font-size: 1.25rem; margin-bottom: 10px; }
.responsible-note p { color: #a1a1aa; line-height: 1.7; font-size: .92rem; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { color: #fff; cursor: pointer; padding: 22px 2px; display: flex; justify-content: space-between; gap: 20px; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { color: #818cf8; transition: transform .2s; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); line-height: 1.7; padding: 0 2px 22px; }
.seo-aside { position: sticky; top: 92px; }
.aside-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 28px; }
.aside-label { color: var(--muted); text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.aside-card ul { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 14px; }
.aside-card li { color: #d4d4d8; font-size: .9rem; display: flex; gap: 10px; }
.aside-card li i { color: var(--green); }
.aside-card > a { display: flex; justify-content: space-between; color: #fff; background: var(--primary); padding: 14px 16px; border-radius: 11px; text-decoration: none; font-weight: 700; }
.related-section { background: var(--bg2); border-block: 1px solid var(--border); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.related-grid a { min-height: 170px; position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; text-decoration: none; transition: transform .2s,border-color .2s; }
.related-grid a:hover { transform: translateY(-4px); border-color: rgba(99,102,241,.35); }
.related-grid span { color: #818cf8; text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; font-weight: 800; }
.related-grid strong { color: #fff; font-size: 1.05rem; line-height: 1.35; max-width: 90%; }
.related-grid i { position: absolute; right: 22px; bottom: 20px; color: var(--muted); }
.compact-cta { padding-block: 90px; }
.footer-brand { text-decoration: none; }
.home-seo-grid { grid-template-columns: repeat(4,1fr); }
.country-label { margin-top: 52px; }
.country-links { display: flex; flex-wrap: wrap; gap: 10px; }
.country-links a { color: #e4e4e7; text-decoration: none; font-size: .88rem; font-weight: 700; padding: 11px 15px; border: 1px solid var(--border); background: var(--card); border-radius: 999px; transition: border-color .2s,color .2s; }
.country-links a:hover { border-color: rgba(99,102,241,.4); color: #fff; }
.country-links span { color: var(--muted); margin-left: 4px; font-family: var(--mono); font-size: .72rem; }
.directory-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 30px; padding: 24px; border: 1px solid rgba(99,102,241,.3); background: rgba(99,102,241,.08); border-radius: 18px; }
.directory-cta strong { color: #fff; font-size: 1.05rem; }
.directory-cta p { color: var(--muted); font-size: .86rem; margin-top: 5px; }
.directory-cta a { color: #fff; text-decoration: none; font-weight: 800; flex-shrink: 0; }
.directory-hero { min-height: 570px; }
.directory-tools { position: sticky; top: 64px; z-index: 20; padding: 18px 28px; background: rgba(7,7,10,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.directory-tools .section-inner { display: grid; grid-template-columns: minmax(260px,430px) 1fr auto; gap: 18px; align-items: center; }
.directory-tools label { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.04); }
.directory-tools label i { color: #818cf8; }
.directory-tools input { width: 100%; color: #fff; font: inherit; background: transparent; border: 0; outline: 0; }
.directory-tools nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.directory-tools nav a { white-space: nowrap; color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
.directory-tools nav a:hover { color: #fff; background: var(--card); }
.directory-tools p { color: var(--muted); white-space: nowrap; font-size: .74rem; }
.directory-grid a[hidden], .directory-section[hidden] { display: none; }
.preview-tools .section-inner { grid-template-columns: minmax(280px,600px) auto; justify-content: space-between; }
.preview-grid { grid-template-columns: repeat(4,1fr); }
.directory-section { border-bottom: 1px solid var(--border); }
.directory-section:nth-child(odd) { background: var(--bg2); }
.directory-section h2 { color: #fff; font-size: clamp(1.7rem,3vw,2.4rem); margin-bottom: 12px; }
.directory-intro { color: var(--muted); line-height: 1.65; margin-bottom: 34px; }
.directory-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.directory-grid a { min-height: 126px; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); background: var(--card); border-radius: 14px; text-decoration: none; transition: transform .2s,border-color .2s; }
.directory-grid a:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.38); }
.directory-grid span { color: #818cf8; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.directory-grid strong { color: #fff; font-size: .93rem; line-height: 1.35; padding-right: 24px; }
.directory-grid i { position: absolute; right: 18px; bottom: 16px; color: var(--muted); }
.guides-home-section { background: var(--bg); }
.content-library-section { position: relative; overflow: hidden; background: linear-gradient(180deg,var(--bg2),var(--bg)); border-bottom: 1px solid var(--border); }
.content-library-section::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -360px; transform: translateX(-50%); border-radius: 50%; background: rgba(99,102,241,.14); filter: blur(90px); pointer-events: none; }
.content-library-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.content-library-card { min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); text-decoration: none; transition: transform .25s,border-color .25s,box-shadow .25s; }
.content-library-card:hover { transform: translateY(-5px); border-color: rgba(99,102,241,.45); box-shadow: 0 22px 55px rgba(0,0,0,.2); }
.library-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid rgba(129,140,248,.28); border-radius: 15px; background: rgba(99,102,241,.12); color: #a5b4fc; font-size: 1.25rem; }
.guides-card .library-icon { color: #c4b5fd; background: rgba(139,92,246,.12); }
.news-card .library-icon { color: #67e8f9; background: rgba(6,182,212,.1); border-color: rgba(34,211,238,.24); }
.library-count { color: #818cf8; font: 700 .68rem/1.2 'Space Mono',monospace; text-transform: uppercase; letter-spacing: .08em; }
.content-library-card > strong { color: #fff; font-size: 1.25rem; margin-top: 10px; }
.content-library-card > p { color: var(--muted); font-size: .88rem; line-height: 1.65; margin-top: 12px; }
.library-link { color: #fff; font-size: .84rem; font-weight: 800; margin-top: auto; padding-top: 28px; }
.library-link i { margin-left: 5px; transition: margin-left .2s; }
.content-library-card:hover .library-link i { margin-left: 10px; }
.guides-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }
.guides-heading h2 { color: #fff; font-size: clamp(1.8rem,3.5vw,2.8rem); letter-spacing: -1.2px; }
.guides-heading p { color: var(--muted); max-width: 650px; margin-top: 12px; line-height: 1.65; }
.guides-heading > a { color: #fff; text-decoration: none; font-weight: 800; flex-shrink: 0; }
.guide-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.guide-card { min-height: 310px; display: flex; flex-direction: column; padding: 26px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; transition: transform .2s,border-color .2s; }
.guide-card:hover { transform: translateY(-4px); border-color: rgba(99,102,241,.35); }
.guide-meta { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: .72rem; }
.guide-meta span:first-child { color: #a5b4fc; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.guide-card h2, .guide-card h3 { font-size: 1.2rem; line-height: 1.35; margin: 20px 0 12px; }
.guide-card h2 a, .guide-card h3 a { color: #fff; text-decoration: none; }
.guide-card > p { color: var(--muted); line-height: 1.65; font-size: .88rem; }
.guide-read { color: #fff; text-decoration: none; font-weight: 700; font-size: .83rem; margin-top: auto; padding-top: 24px; }
.guide-index-grid { grid-template-columns: repeat(3,1fr); }
.article-hero { padding: 150px 28px 80px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 50% 0,rgba(99,102,241,.17),transparent 55%); }
.article-wrap { max-width: 880px; margin: 0 auto; }
.article-wrap .breadcrumbs { margin-bottom: 28px; }
.article-meta { margin-bottom: 24px; }
.article-wrap h1 { color: #fff; font-size: clamp(2.5rem,5.5vw,4.5rem); line-height: 1.05; letter-spacing: -2.5px; }
.article-wrap > p { color: #a1a1aa; font-size: 1.15rem; line-height: 1.75; margin-top: 28px; max-width: 780px; }
.article-layout { max-width: 1120px; margin: 0 auto; padding: 90px 28px; display: grid; grid-template-columns: minmax(0,740px) 300px; gap: 72px; }
.article-body section { margin-top: 54px; }
.article-body h2 { color: #fff; font-size: 1.75rem; letter-spacing: -.5px; margin-bottom: 16px; }
.article-body section p { color: #a1a1aa; line-height: 1.85; font-size: 1rem; }
.takeaway-box { padding: 26px; border: 1px solid rgba(99,102,241,.28); background: rgba(99,102,241,.08); border-radius: 18px; }
.takeaway-box > strong { color: #fff; font-size: 1.1rem; }
.takeaway-box ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.takeaway-box li { color: #c4c4cc; line-height: 1.55; display: flex; gap: 10px; }
.takeaway-box i { color: var(--green); flex-shrink: 0; }
.article-sidebar { position: sticky; top: 92px; align-self: start; }
.article-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 60px; padding: 28px; background: linear-gradient(120deg,rgba(99,102,241,.18),rgba(139,92,246,.08)); border: 1px solid rgba(99,102,241,.3); border-radius: 18px; }
.article-cta strong { color: #fff; }
.article-cta p { color: var(--muted); line-height: 1.55; font-size: .86rem; margin-top: 6px; }
.article-cta a { flex-shrink: 0; color: #000; background: #fff; border-radius: 11px; padding: 13px 16px; text-decoration: none; font-weight: 800; }

@media (max-width: 900px) { .seo-layout, .article-layout { grid-template-columns: 1fr; gap: 44px; } .seo-aside, .article-sidebar { position: static; } .related-grid, .home-seo-grid, .directory-grid, .guide-card-grid, .guide-index-grid, .content-library-grid { grid-template-columns: 1fr 1fr; } .directory-tools .section-inner { grid-template-columns: 1fr auto; } .directory-tools nav { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 640px) { .seo-hero, .article-hero { padding: 116px 20px 64px; min-height: auto; } .seo-hero h1, .article-wrap h1 { letter-spacing: -1.7px; } .seo-lead { font-size: 1rem; } .related-grid, .catalog-panels, .directory-grid, .guide-card-grid, .guide-index-grid, .content-library-grid { grid-template-columns: 1fr; } .content-library-card { min-height: 285px; } .breadcrumbs { margin-bottom: 22px; } .mid-cta, .directory-cta, .article-cta, .guides-heading { align-items: stretch; flex-direction: column; } .mid-cta a, .directory-cta a, .article-cta a { text-align: center; } .article-layout { padding: 64px 20px; } .directory-tools { position: static; padding: 14px 20px; } .directory-tools .section-inner { grid-template-columns: 1fr; } .directory-tools nav { grid-column: auto; grid-row: auto; } }

.guide-toc{margin-bottom:22px}.guide-toc h2{font-size:1rem;color:#fff;margin-bottom:14px}.guide-toc a{display:block!important;margin:0!important;padding:8px 0!important;background:transparent!important;color:#a1a1aa!important;font-weight:500!important;font-size:.82rem!important;line-height:1.6}.guide-toc a:hover{color:#fff!important}.guide-faq{border-bottom:1px solid var(--border);padding:18px 0}.guide-faq summary{cursor:pointer;color:#fff;font-weight:650;line-height:1.55}.guide-faq p{margin-top:14px}.article-body section{scroll-margin-top:100px}.guide-filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}.guide-filters label{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.85rem}.guide-filters input,.guide-filters select{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:12px;color:#fff;font:inherit;max-width:100%}.guide-card[hidden]{display:none}.guide-empty{color:var(--muted);padding:20px 0}@media(max-width:640px){.guide-filters,.guide-filters label{flex-direction:column;align-items:stretch}.guide-filters input{width:100%}}

/* Long editorial guides retain natural page scrolling at every width. */
.article-layout > *{min-width:0}.article-wrap h1,.article-body h2,.guide-card h2,.guide-faq summary{overflow-wrap:anywhere}.article-body section p+p{margin-block-start:16px}.article-cta a{max-width:100%;white-space:normal}.article-sidebar{position:static}

.article-wrap,.article-body,.article-sidebar,.article-mobile-toc{overflow-wrap:anywhere}

@media(max-width:640px){.article-hero h1{font-size:clamp(2rem,6vw,2.5rem);line-height:1.12;letter-spacing:-.035em}}

.article-mobile-toc{display:none}@media(max-width:900px){.article-mobile-toc{display:block;margin:24px 28px 0;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--card)}.article-mobile-toc summary{cursor:pointer;color:var(--text);font-weight:650;line-height:1.6}.article-mobile-toc[open] summary{margin-block-end:12px}.article-mobile-toc .guide-toc{margin:0}.article-mobile-toc .guide-toc a{min-height:44px;box-sizing:border-box;overflow-wrap:anywhere}.article-sidebar .guide-toc{display:none}.article-layout{padding-block-start:28px}}@media(max-width:640px){.article-mobile-toc{margin-inline:20px}}
