.itsp-page { --itsp-navy: #102d40; --itsp-blue: #2e7fa3; --itsp-green: #4caf6f; --itsp-ink: #243847; --itsp-muted: #60717b; --itsp-line: #e1e9ec; color: var(--itsp-ink); background: #fff; font-family: inherit; }
.itsp-page *, .itsp-page *::before, .itsp-page *::after { box-sizing: border-box; }
.itsp-page a:focus-visible, .itsp-page summary:focus-visible { outline: 3px solid var(--itsp-green); outline-offset: 3px; }
.itsp-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(ellipse 46% 88% at 58% 56%, rgba(8,124,192,.37) 0%, rgba(8,92,148,.19) 54%, transparent 100%), linear-gradient(102deg, #061c34 0%, #07365b 43%, #075c94 73%, #075c94 100%); }
.itsp-hero::before { content: ''; position: absolute; z-index: -1; inset: auto auto -35% -14%; width: 680px; aspect-ratio: 1; background: linear-gradient(135deg, #2e7fa3, #76c3de); -webkit-mask: var(--itsp-graphic) center/contain no-repeat; mask: var(--itsp-graphic) center/contain no-repeat; opacity: .12; pointer-events: none; }
.itsp-hero__inner { display: flex; align-items: center; min-height: 520px; max-width: 1304px; margin: auto; padding: 38px 32px 40px; }
.itsp-hero__copy { position: relative; z-index: 3; width: 52%; min-width: 0; padding-right: 18px; }
.itsp-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 17px; font-size: 13px; line-height: 1.5; color: #d7e5ea; }
.itsp-breadcrumb a { color: inherit; text-decoration: none; }
.itsp-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.itsp-breadcrumb__current { max-width: 27ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itsp-category { display: inline-block; width: fit-content; margin-bottom: 10px; padding: 6px 11px; border: 1px solid #58b8d2; border-radius: 100px; color: #fff; background: var(--itsp-blue); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .075em; text-decoration: none; text-transform: uppercase; }
.itsp-category:hover { background: #3a91b4; color: #fff; }
.itsp-hero__title { margin: 0; max-width: 24ch; color: #fff; font-size: clamp(42px, 3vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; overflow-wrap: break-word; word-break: normal; hyphens: none; }
.itsp-hero__excerpt { max-width: 62ch; margin: 17px 0 0; color: #dce9ec; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; }
.itsp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 25px; color: #e2edf0; font-size: 11px; line-height: 1.4; }
.itsp-meta__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.itsp-meta__item + .itsp-meta__item { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.24); }
.itsp-meta__icon { flex: none; width: 15px; height: 15px; color: #8bc8df; }
.itsp-hero__bottom { display: flex; justify-content: flex-start; align-items: center; gap: clamp(32px, 3vw, 44px); margin-top: 28px; }
.itsp-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.itsp-author__photo { display: block; flex: none; width: 56px; height: 56px; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; object-fit: cover; }
.itsp-author__text { display: grid; gap: 3px; }
.itsp-author__label { color: #b9d2dc; font-size: 11px; line-height: 1.2; }
.itsp-author__name { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; }
.itsp-author__role { color: #b9d2dc; font-size: 11px; line-height: 1.2; }
.itsp-hero__cta { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; padding: 11px 17px; border-radius: 8px; color: #fff; background: linear-gradient(110deg, var(--itsp-green), var(--itsp-blue)); font-size: 13px; font-weight: 700; text-decoration: none; }
.itsp-hero__cta:hover { color: #fff; filter: brightness(1.08); }
.itsp-hero__visual { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 58%; height: 100%; overflow: hidden; -webkit-mask: url('hero-mask.svg?v=1.6.0') center/100% 100% no-repeat; mask: url('hero-mask.svg?v=1.6.0') center/100% 100% no-repeat; background: #193f55; }
.itsp-hero__visual::before { content: ''; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, rgba(6,28,52,.92) 0%, rgba(7,54,91,.72) 26%, rgba(8,92,148,.48) 58%, rgba(8,124,192,.18) 80%, transparent 100%); pointer-events: none; }
.itsp-hero__visual::after { content: ''; position: absolute; z-index: 4; inset: 0 auto 0 0; width: 30%; background: radial-gradient(ellipse 100% 72% at 0 58%, rgba(8,124,192,.16), transparent 78%); pointer-events: none; }
.itsp-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.itsp-hero__visual--empty { background: linear-gradient(140deg, #07365b, #061c34 65%, #075c94); }
.itsp-hero__visual--empty::after { content: ''; position: absolute; inset: 8%; width: auto; background: linear-gradient(135deg, #2e7fa3, #76c3de); -webkit-mask: var(--itsp-graphic) center/contain no-repeat; mask: var(--itsp-graphic) center/contain no-repeat; opacity: .3; }
.itsp-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(275px, 3fr); gap: clamp(40px, 5.5vw, 76px); align-items: start; max-width: 1240px; margin: 0 auto; padding: 72px 32px 100px; }
.itsp-article__content { min-width: 0; max-width: 760px; font-size: 18px; line-height: 1.72; overflow-wrap: break-word; }
.itsp-article__content > :first-child { margin-top: 0; }
.itsp-article__content p { margin: 0 0 1.45em; }
.itsp-article__content h2, .itsp-article__content h3, .itsp-article__content h4 { color: var(--itsp-navy); font-weight: 700; line-height: 1.28; scroll-margin-top: 110px; }
.itsp-article__content h2 { margin: 2.2em 0 .7em; font-size: clamp(25px, 2.4vw, 32px); }
.itsp-article__content h3 { margin: 1.85em 0 .65em; font-size: clamp(21px, 2vw, 26px); }
.itsp-article__content h4 { margin: 1.5em 0 .55em; font-size: 20px; }
.itsp-article__content a { color: var(--itsp-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.itsp-article__content a:hover { color: var(--itsp-navy); }
.itsp-article__content ul, .itsp-article__content ol { padding-left: 1.4em; margin: 0 0 1.5em; }
.itsp-article__content li { margin: .28em 0; padding-left: .15em; }
.itsp-article__content li::marker { color: var(--itsp-blue); }
.itsp-article__content blockquote { margin: 1.9em 0; padding: 22px 28px; border-left: 4px solid var(--itsp-green); background: #edf6f8; color: var(--itsp-navy); font-size: 1.08em; }
.itsp-article__content blockquote > :last-child { margin-bottom: 0; }
.itsp-article__content img { max-width: 100%; height: auto; border-radius: 6px; }
.itsp-article__content figure, .itsp-article__content .wp-block-image { max-width: 100%; margin: 1.8em 0; }
.itsp-article__content iframe, .itsp-article__content video, .itsp-article__content embed { max-width: 100%; }
.itsp-article__content table { display: block; max-width: 100%; margin: 1.5em 0; overflow-x: auto; border-collapse: collapse; font-size: .92em; }
.itsp-article__content th, .itsp-article__content td { padding: 10px 14px; border: 1px solid var(--itsp-line); text-align: left; }
.itsp-article__content th { background: #edf6f8; color: var(--itsp-navy); }
.itsp-sidebar { display: grid; gap: 24px; min-width: 0; }
.itsp-sidebar__panel { min-width: 0; padding: 24px; border: 1px solid var(--itsp-line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(16,45,64,.045); }
.itsp-sidebar__panel h2, .itsp-toc summary { margin: 0 0 18px; color: var(--itsp-navy); font-size: 19px; font-weight: 700; line-height: 1.25; }
.itsp-toc { position: static; }
.itsp-toc[hidden] { display: none; }
.itsp-toc summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.itsp-toc summary::-webkit-details-marker { display: none; }
.itsp-toc[open] summary { margin-bottom: 16px; }
.itsp-toc__chevron { transition: transform .2s; }
.itsp-toc[open] .itsp-toc__chevron { transform: rotate(180deg); }
.itsp-toc__list { display: grid; gap: 11px; max-height: min(55vh, 430px); margin: 0; padding: 0 0 0 16px; overflow-y: auto; list-style: none; border-left: 2px solid #d8e7ec; }
.itsp-toc__list li { margin: 0; font-size: 13px; line-height: 1.45; }
.itsp-toc__subitem { padding-left: 15px; }
.itsp-toc__list a { color: var(--itsp-muted); text-decoration: none; }
.itsp-toc__list a:hover, .itsp-toc__list a:focus-visible { color: var(--itsp-blue); text-decoration: underline; }
.itsp-related__list { display: grid; gap: 15px; }
.itsp-related__card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--itsp-navy); text-decoration: none; }
.itsp-related__card + .itsp-related__card { padding-top: 15px; border-top: 1px solid var(--itsp-line); }
.itsp-related__thumb { display: block; width: 76px; height: 68px; overflow: hidden; border-radius: 6px; background: #e8f1f3; }
.itsp-related__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.itsp-related__body { display: grid; gap: 4px; }
.itsp-related__category { color: var(--itsp-blue); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.itsp-related__title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.itsp-related__card:hover .itsp-related__title { color: var(--itsp-blue); text-decoration: underline; }
.itsp-sidebar-cta { position: relative; isolation: isolate; overflow: hidden; border-color: #174356; color: #fff; background: linear-gradient(138deg, #071f36 0%, #0b2a4b 68%, #171d3e 100%); }
.itsp-sidebar-cta::before { content: ''; position: absolute; z-index: -1; right: -68px; bottom: -88px; width: 250px; height: 250px; background: linear-gradient(135deg, #2e7fa3, #756bb6); -webkit-mask: var(--itsp-graphic) center/contain no-repeat; mask: var(--itsp-graphic) center/contain no-repeat; opacity: .25; pointer-events: none; }
.itsp-sidebar-cta__eyebrow { margin: 0 0 13px; color: #7dc6e1; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.itsp-sidebar-cta h2 { margin-bottom: 23px; color: #fff; font-size: 23px; line-height: 1.25; }
.itsp-sidebar-cta__benefits { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.itsp-sidebar-cta__benefits li { display: flex; gap: 8px; align-items: flex-start; color: #fff; font-size: 12px; line-height: 1.45; }
.itsp-sidebar-cta__benefits li::before { content: '✓'; flex: none; color: #7dc6e1; font-weight: 700; }
.itsp-sidebar-cta a { display: inline-flex; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 8px; color: #fff; background: linear-gradient(110deg, var(--itsp-green), var(--itsp-blue)); font-size: 13px; font-weight: 700; text-decoration: none; }
.itsp-sidebar-cta a:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 1100px) { .itsp-hero__inner { min-height: 500px; } .itsp-hero__title { font-size: clamp(38px, 3.8vw, 42px); } .itsp-hero__visual::before { width: 52%; } .itsp-layout { gap: 36px; } }
@media (max-width: 900px) { .itsp-hero__inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 38px 28px 0; } .itsp-hero__copy { width: 100%; padding: 0 0 32px; } .itsp-hero__title { max-width: 24ch; font-size: clamp(34px, 5vw, 42px); } .itsp-hero__visual { position: relative; width: calc(100% + 56px); height: clamp(270px, 45vw, 410px); margin: 0 -28px; -webkit-mask: none; mask: none; } .itsp-hero__visual::before { display: none; } .itsp-hero__visual::after { inset: 0 0 auto; width: 100%; height: 56px; background: linear-gradient(180deg, #07365b, transparent); } .itsp-hero__visual--empty::after { inset: 8%; width: auto; height: auto; background: linear-gradient(135deg, #2e7fa3, #76c3de); -webkit-mask: var(--itsp-graphic) center/contain no-repeat; mask: var(--itsp-graphic) center/contain no-repeat; } .itsp-layout { grid-template-columns: 1fr; gap: 40px; padding: 52px 28px 76px; } .itsp-article__content { max-width: 760px; } .itsp-sidebar { max-width: 760px; } .itsp-toc { position: static; } }
@media (max-width: 600px) { .itsp-hero__inner { padding: 28px 20px 0; } .itsp-breadcrumb { margin-bottom: 18px; font-size: 12px; } .itsp-breadcrumb__current { max-width: 17ch; } .itsp-hero__title { font-size: clamp(30px, 8vw, 38px); } .itsp-hero__excerpt { font-size: 16px; } .itsp-hero__visual { width: calc(100% + 40px); height: 250px; margin: 0 -20px; } .itsp-meta { gap: 8px 10px; margin-top: 19px; } .itsp-meta__item + .itsp-meta__item { padding-left: 0; border-left: 0; } .itsp-hero__bottom { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 19px; } .itsp-author__photo { width: 52px; height: 52px; } .itsp-layout { padding: 40px 20px 64px; } .itsp-article__content { font-size: 17px; line-height: 1.68; } .itsp-sidebar__panel { padding: 20px; } }