@keyframes sdEyebrowPing { 0% { transform: scale(0.72); opacity: 0.42; } 72%, 100% { transform: scale(2.65); opacity: 0; } } @keyframes sdStatLift { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .stats__eyebrow-dot, .role-intro__eyebrow-dot, .when-frac__eyebrow-dot, .cream-flow .eyebrow .dot, .vet-frac .eyebrow .dot, .sd-insight__section--showcase .sd-insight__eyebrow-dot { position: relative; isolation: isolate; flex: 0 0 auto; } .stats__eyebrow-dot::after, .role-intro__eyebrow-dot::after, .when-frac__eyebrow-dot::after, .cream-flow .eyebrow .dot::after, .vet-frac .eyebrow .dot::after, .sd-insight__section--showcase .sd-insight__eyebrow-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid currentColor; opacity: 0; animation: sdEyebrowPing 2.7s ease-out infinite; pointer-events: none; } .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: 100%; } .stats__grid, .stats__grid > li, .stat { list-style: none !important; } .stats__grid > li::marker, .stat::marker { content: "" !important; font-size: 0 !important; } .stat { min-width: 0; box-sizing: border-box; padding: 4px clamp(18px, 2.3vw, 34px); } .stat:first-child { padding-left: 0; } .stat:last-child { padding-right: 0; } .stat__icon { width: 83px; height: 83px; padding: 10px; box-sizing: border-box; background: rgba(255, 246, 232, 0.075); border: 1px solid rgba(246, 200, 147, 0.2); overflow: visible; } .stat__icon img { object-fit: contain !important; transform: none !important; border-radius: 50%; } .stat__eyebrow { list-style: none !important; } .stat__eyebrow::before { content: none !important; } .stat__num { animation: sdStatLift 580ms ease both; font-size: clamp(44px, 4.7vw, 64px); white-space: nowrap; } .stat__unit { white-space: nowrap; margin-left: 4px; } .stat:nth-child(2) .stat__num { animation-delay: 90ms; } .stat:nth-child(3) .stat__num { animation-delay: 180ms; } .stat:nth-child(4) .stat__num { animation-delay: 270ms; } .beats-fulltime__row { grid-template-columns: 54px minmax(200px, 30%) 1fr; } .beats-fulltime__num { display: none !important; } .beats-fulltime__icon { width: 46px; height: 46px; } .beats-fulltime__icon svg { width: 25px; height: 25px; } .sd-insight__playbook-banner { position: relative; z-index: 2; max-width: 1100px; margin: clamp(10px, 2vw, 22px) auto clamp(36px, 5vw, 68px); padding: 22px clamp(20px, 3vw, 30px); display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 30px); align-items: center; color: var(--cream); background: radial-gradient( ellipse at 18% 50%, rgba(84, 146, 182, 0.26), rgba(84, 146, 182, 0) 48% ), linear-gradient(135deg, #235C81 0%, #11314A 100%); border: 1px solid rgba(246, 200, 147, 0.22); border-radius: 18px; box-shadow: 0 18px 44px rgba(17, 49, 74, 0.18); overflow: hidden; } .sd-insight__playbook-banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 90deg, rgba(255, 246, 232, 0.06) 1px, transparent 1px ), linear-gradient( rgba(255, 246, 232, 0.04) 1px, transparent 1px ); background-size: 36px 36px; opacity: 0.22; pointer-events: none; } .sd-insight__playbook-banner-cover, .sd-insight__playbook-banner-body, .sd-insight__playbook-banner-btn { position: relative; z-index: 1; } .sd-insight__playbook-banner-cover { width: 74px; height: auto; align-self: center; background: transparent; border: 0; box-shadow: none; object-fit: initial; border-radius: 0; transform: rotate(-3deg); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.24)); } .sd-insight__playbook-banner-cover img { display: block; width: 100%; height: auto; border-radius: 4px; } .sd-insight__playbook-banner-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 7px; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-sand); } .sd-insight__playbook-banner-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(246, 200, 147, 0.2); } .sd-insight__playbook-banner-title { margin: 0 0 6px; font-family: "DM Sans", "Inter", sans-serif; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.16; font-weight: 600; letter-spacing: -0.01em; color: var(--cream); } .sd-insight__playbook-banner-copy { max-width: 620px; margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: rgba(255, 246, 232, 0.78); } .sd-insight__playbook-banner-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--coral); color: var(--cream); font-family: "DM Sans", "Inter", sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 24px rgba(219, 99, 93, 0.28); } .sd-insight__playbook-banner-btn:hover { background: var(--salmon); transform: translateY(-1px); } .sd-cartography-flow > .sd-cartography-flow__bottom-wave { display: none !important; } .sd-playbook-cta-wrap { box-sizing: border-box; width: 100%; padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); } .sd-lower-map-shared .sd-playbook-cta { width: min(1180px, 100%) !important; max-width: 100% !important; } .sd-playbook-cta-wrap.sd-lower-map-panel-band, .sd-fg-faq-wrap.sd-cartography-flow--lower, .sd-insight__section--author-band.sd-cartography-flow--lower { background: var(--cream) !important; } .sd-fg-faq-wrap { border-top: 0 !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower { margin-top: -88px; padding-top: calc(clamp(56px, 7vw, 96px) + 88px); } .sd-insight__section--author-band.sd-cartography-flow--lower { margin-top: -1px; } .sd-fg-faq-wrap.sd-cartography-flow--lower > .sd-imagegen-map-panel, .sd-insight__section--author-band.sd-cartography-flow--lower > .sd-imagegen-map-panel { display: block !important; height: 100%; } .sd-insight__section--author-band.sd-cartography-flow--lower > .sd-imagegen-map-panel { -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 66%, rgba(0, 0, 0, 0) 100% ), radial-gradient( ellipse 82% 72% at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.82) 46%, rgba(0, 0, 0, 0) 78% ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 66%, rgba(0, 0, 0, 0) 100% ), radial-gradient( ellipse 82% 72% at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.82) 46%, rgba(0, 0, 0, 0) 78% ); } .sd-fg-faq__eyebrow { display: inline-flex; align-items: center; gap: 10px; } .sd-insight__what-we-run-row { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; } .sd-insight__what-we-run-icon { width: 46px; height: 46px; margin-top: 28px; } .sd-insight__what-we-run-title { min-height: 46px; display: flex; align-items: center; margin-top: 0; } @media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .stat__icon { width: 78px; height: 78px; } } @media (max-width: 760px) { .sd-imagegen-map-panel--right { right: -56vw; width: 166vw; opacity: 0.72; } .sd-imagegen-map-panel--left { left: -62vw; width: 152vw; opacity: 0.52; } .sd-navy-imagegen-panel--left { left: -62vw; width: 150vw; opacity: 0.42; } .sd-navy-imagegen-panel--right { right: -58vw; width: 160vw; opacity: 0.46; } .sd-insight__playbook-banner { grid-template-columns: 64px 1fr; gap: 18px; margin: 8px 20px 44px; } .sd-insight__playbook-banner-cover { width: 64px; grid-row: 1 / span 2; } .sd-insight__playbook-banner-btn { grid-column: 2; justify-self: start; padding: 12px 18px; } .beats-fulltime__row { grid-template-columns: 44px 1fr; grid-template-areas: "icon title" "body body"; } .beats-fulltime__icon { grid-area: icon; width: 40px; height: 40px; } .beats-fulltime__title { grid-area: title; } .beats-fulltime__body { grid-area: body; } .sd-insight__what-we-run-title { min-height: 40px; } } .stats .sd-navy-imagegen-panel, .sd-insight__section--showcase .sd-navy-imagegen-panel { width: 50vw !important; max-width: none !important; min-width: 50vw !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 14%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 14%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0) 100% ) !important; -webkit-mask-composite: initial !important; mask-composite: initial !important; } .stats .sd-navy-imagegen-panel--left, .sd-insight__section--showcase .sd-navy-imagegen-panel--left { left: 0 !important; right: auto !important; object-position: left center; } .stats .sd-navy-imagegen-panel--right, .sd-insight__section--showcase .sd-navy-imagegen-panel--right { right: 0 !important; left: auto !important; object-position: right center; } @media (max-width: 760px) { .sd-opening-flow, .sd-cartography-flow--tech, .sd-cartography-flow--pricing, .sd-lower-map-panel-band, .sd-cartography-flow--lower { overflow: hidden !important; } .sd-imagegen-map-panel { display: block !important; top: 0 !important; height: 100% !important; max-width: none !important; opacity: 0.47 !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100% ) !important; -webkit-mask-composite: initial !important; mask-composite: initial !important; } .sd-imagegen-map-panel--left { left: -22vw !important; right: auto !important; width: 88vw !important; opacity: 0.31 !important; object-position: left center !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 92% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 92% ) !important; -webkit-mask-composite: source-in !important; mask-composite: intersect !important; } .sd-imagegen-map-panel--right { right: -24vw !important; left: auto !important; width: 92vw !important; object-position: right center !important; opacity: 0.35 !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 92% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 93%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 92% ) !important; -webkit-mask-composite: source-in !important; mask-composite: intersect !important; } .sd-lower-map-panel-band > .sd-imagegen-map-panel, .sd-fg-faq-wrap.sd-cartography-flow--lower > .sd-imagegen-map-panel, .sd-insight__section--author-band.sd-cartography-flow--lower > .sd-imagegen-map-panel { display: block !important; height: 100% !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower, .sd-insight__section--author-band.sd-cartography-flow--lower { background: var(--cream) !important; } .stats .sd-navy-imagegen-panel, .sd-insight__section--showcase .sd-navy-imagegen-panel { top: 0 !important; width: 50vw !important; min-width: 50vw !important; max-width: none !important; height: 100% !important; opacity: 0.52 !important; } .stats .sd-navy-imagegen-panel--left, .sd-insight__section--showcase .sd-navy-imagegen-panel--left { left: 0 !important; right: auto !important; object-position: left center !important; } .stats .sd-navy-imagegen-panel--right, .sd-insight__section--showcase .sd-navy-imagegen-panel--right { right: 0 !important; left: auto !important; object-position: right center !important; } } @media (max-width: 560px) { .stats__grid { grid-template-columns: 1fr !important; } .stat__icon { width: 73px; height: 73px; } .sd-insight__playbook-banner { grid-template-columns: 1fr; text-align: left; } .sd-insight__playbook-banner-cover { grid-row: auto; } .sd-insight__playbook-banner-btn { grid-column: auto; width: 100%; } } @media (max-width: 760px) { .stats { padding-top: 96px !important; padding-bottom: 56px !important; } .stats__head { margin-bottom: 22px !important; } .stats__eyebrow { margin-bottom: 12px !important; } .stats__title { font-size: 28px !important; line-height: 1.14 !important; } .stats__grid { grid-template-columns: 1fr !important; gap: 0 !important; } .stat, .stat:first-child, .stat:last-child { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; padding: 18px 0 !important; } .stat + .stat { padding-top: 18px !important; } .stat__icon { grid-column: 1; grid-row: 1 / span 3; width: 106px !important; height: 106px !important; padding: 6px !important; margin: 0 !important; align-self: start; } .stat__eyebrow { grid-column: 2; margin: 0 !important; font-size: 10px !important; letter-spacing: 0.14em !important; line-height: 1.25 !important; } .stat__num { grid-column: 2; font-size: 38px !important; line-height: 1 !important; margin: 0 !important; } .stat__unit { font-size: 0.46em !important; } .stat__label { grid-column: 2; margin-top: 4px !important; font-size: 13px !important; line-height: 1.45 !important; } .sd-imagegen-map-panel { opacity: 0.37 !important; } .sd-imagegen-map-panel--left { opacity: 0.21 !important; } .sd-imagegen-map-panel--right { opacity: 0.25 !important; } .beats-fulltime__row { grid-template-columns: 42px minmax(0, 1fr) !important; grid-template-areas: "icon title" "body body" !important; align-items: center !important; column-gap: 14px !important; row-gap: 10px !important; } .beats-fulltime__icon { grid-area: icon; align-self: center; margin: 0 !important; } .beats-fulltime__title { grid-area: title; min-height: 40px; display: flex; align-items: center; margin: 0 !important; } .beats-fulltime__body { grid-area: body; min-width: 0; } .cream-flow .numbers { display: block !important; padding: 34px 20px 44px !important; } .cream-flow .numbers > div, .cream-flow .field-note { min-width: 0; max-width: 100%; } .cream-flow .numbers table, .cream-flow .numbers thead, .cream-flow .numbers tbody, .cream-flow .numbers tr, .cream-flow .numbers th, .cream-flow .numbers td { display: block; width: 100%; box-sizing: border-box; } .cream-flow .numbers thead { display: none; } .cream-flow .numbers table { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } .cream-flow .numbers tbody tr { margin-bottom: 12px; overflow: hidden; border: 1px solid rgba(17, 49, 74, 0.12); border-radius: 10px; background: rgba(255, 246, 232, 0.72); box-shadow: 0 10px 28px rgba(17, 49, 74, 0.08); } .cream-flow .numbers tbody td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 14px !important; border-bottom: 1px solid rgba(17, 49, 74, 0.08); font-size: 13.5px !important; line-height: 1.45 !important; white-space: normal !important; overflow-wrap: anywhere; } .cream-flow .numbers tbody td:last-child { border-bottom: 0; } .cream-flow .numbers tbody td::before { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17, 49, 74, 0.52); } .cream-flow .numbers tbody td:nth-child(1)::before { content: "Model"; } .cream-flow .numbers tbody td:nth-child(2)::before { content: "Rate"; } .cream-flow .numbers tbody td:nth-child(3)::before { content: "Start"; } .cream-flow .numbers tbody td:nth-child(4)::before { content: "Scope"; } .cream-flow .numbers tbody td br { display: initial; } .cream-flow .field-note { padding-top: 22px !important; overflow-wrap: anywhere; } .vet-frac__row { grid-template-columns: 42px minmax(0, 1fr) !important; grid-template-areas: "num title" "body body"; column-gap: 14px; row-gap: 10px; align-items: center; } .vet-frac__num { grid-area: num; margin: 0 !important; align-self: center; } .vet-frac__title { grid-area: title; min-height: 36px; display: flex; align-items: center; margin: 0 !important; } .vet-frac__body { grid-area: body; min-width: 0; } .sd-insight__section--showcase .sd-insight__eyebrow { gap: 18px !important; } .sd-insight__section--showcase .sd-insight__eyebrow-dot::after { inset: -4px !important; transform-origin: center; } .sd-insight__section--showcase .sd-insight__section-num { position: relative; z-index: 2; padding-left: 2px; } .sd-playbook-cta-wrap { padding-left: 16px !important; padding-right: 16px !important; } .sd-playbook-cta { width: 100%; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 44px 16px !important; border-radius: 20px !important; clip-path: inset(0 round 20px) !important; contain: none !important; overflow: hidden !important; transform: none !important; will-change: auto !important; } .sd-playbook-cta__bg, .sd-playbook-cta__bg-gradient { border-radius: 0 !important; transform: none !important; } .sd-playbook-cta__grid { gap: 28px !important; } .sd-playbook-cta__cover-wrap { padding: 0 !important; } .sd-playbook-cta__cover { max-width: min(210px, 72vw) !important; } .sd-playbook-cta__body { max-width: 100%; min-width: 0; } .sd-playbook-cta__headline { font-size: 28px !important; } .sd-playbook-cta__trust { justify-content: flex-start; line-height: 1.55; } .sd-lower-map-panel-band { overflow: visible !important; z-index: 0; } .sd-lower-map-panel-band > .sd-imagegen-map-panel { height: calc(100% + 2700px) !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower > .sd-imagegen-map-panel, .sd-insight__section--author-band.sd-cartography-flow--lower > .sd-imagegen-map-panel { display: block !important; height: 100% !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower, .sd-insight__section--author-band.sd-cartography-flow--lower { background: var(--cream) !important; border-top: 0 !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower { margin-top: 0 !important; padding-top: clamp(56px, 7vw, 96px) !important; } } @media (min-width: 431px) and (max-width: 760px) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 18px !important; row-gap: 0 !important; } .stat, .stat:first-child, .stat:last-child { grid-template-columns: 100px minmax(0, 1fr) !important; column-gap: 16px !important; padding: 18px 10px !important; } .stat:nth-child(2n + 1) { padding-left: 0 !important; } .stat:nth-child(2n) { padding-right: 0 !important; } .stat:nth-child(2n)::before { display: block !important; top: 16px !important; bottom: 16px !important; left: 0 !important; background: rgba(255, 246, 232, 0.18) !important; } .stat:nth-child(2n + 1)::before { display: none !important; } .stat:nth-child(n + 3)::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 246, 232, 0.16); } .stat__icon { width: 96px !important; height: 96px !important; padding: 5px !important; } .stat__eyebrow { font-size: 9px !important; letter-spacing: 0.11em !important; } .stat__num { font-size: clamp(30px, 7vw, 38px) !important; } .stat__label { font-size: 12px !important; line-height: 1.38 !important; } } .vet-frac .eyebrow, .sd-insight__section--showcase .sd-insight__eyebrow { align-items: center !important; column-gap: 8px !important; line-height: 1 !important; } .vet-frac .eyebrow .dot, .sd-insight__section--showcase .sd-insight__eyebrow-dot, .sd-insight__section--showcase .sd-insight__section-num { align-self: center !important; } .vet-frac .eyebrow .dot, .sd-insight__section--showcase .sd-insight__eyebrow-dot { margin-right: 12px !important; } .vet-frac .eyebrow .dot::after, .sd-insight__section--showcase .sd-insight__eyebrow-dot::after { inset: -4px !important; transform-origin: center; } .vet-frac .eyebrow__num, .vet-frac .eyebrow__slash, .vet-frac .eyebrow__label, .sd-insight__section--showcase .sd-insight__section-num, .sd-insight__section--showcase .sd-insight__section-slash, .sd-insight__section--showcase .sd-insight__section-label { display: inline-flex !important; align-items: center !important; line-height: 1 !important; } .vet-frac .eyebrow__num { color: #F6C893; } .sd-insight__section--showcase .sd-insight__section-num { display: inline-flex !important; align-items: center !important; line-height: 1 !important; padding-left: 0 !important; } .sd-insight__section--showcase .sd-insight__section-num::after { content: none !important; display: none !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow { column-gap: 8px !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow-dot { width: 16px !important; height: 16px !important; display: inline-grid !important; place-items: center !important; margin-right: 0 !important; background: transparent !important; color: #DB635D; transform: none !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #DB635D; grid-area: 1 / 1; } .sd-insight__section--what-we-run .sd-insight__eyebrow-dot::after { inset: 0 !important; grid-area: 1 / 1; border-color: rgba(246, 200, 147, 0.8) !important; transform-origin: center center !important; } .sd-insight__section--what-we-run .sd-insight__section-num, .sd-insight__section--what-we-run .sd-insight__section-slash, .sd-insight__section--what-we-run .sd-insight__section-label { min-height: 16px; } .sd-lower-map-shared.sd-lower-map-panel-band { background: var(--cream) !important; overflow: hidden !important; z-index: 0; } .sd-lower-map-shared > .sd-playbook-cta-wrap { position: relative; z-index: 1; background: transparent !important; } .sd-lower-map-shared > .sd-fg-faq-wrap, .sd-lower-map-shared > .sd-insight__section--author-band { position: relative; z-index: 1; } .sd-insight__group--cream-tan { background: var(--cream) !important; } .sd-lower-map-shared.sd-lower-map-panel-band::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient( to bottom, rgba(255, 246, 232, 0.16) 0%, rgba(255, 246, 232, 0.16) 94%, rgba(255, 246, 232, 0) 100% ); pointer-events: none; z-index: 0; } .sd-lower-map-panel-band > .sd-imagegen-map-panel { display: block !important; top: 0 !important; bottom: auto !important; height: 100% !important; width: auto !important; min-width: 0 !important; max-width: none !important; object-fit: contain !important; mix-blend-mode: multiply !important; } .sd-lower-map-panel-band > .sd-imagegen-map-panel--left, .sd-lower-map-panel-band > .sd-imagegen-map-panel--right { -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 91%, rgba(0, 0, 0, 0) 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 91%, rgba(0, 0, 0, 0) 100% ) !important; -webkit-mask-composite: initial !important; mask-composite: initial !important; } .sd-lower-map-panel-band > .sd-imagegen-map-panel--left { left: 0 !important; right: auto !important; opacity: 0.28 !important; object-position: left top !important; } .sd-lower-map-panel-band > .sd-imagegen-map-panel--right { right: 0 !important; left: auto !important; opacity: 0.36 !important; object-position: right top !important; } @media (max-width: 760px) { .sd-lower-map-shared.sd-lower-map-panel-band > .sd-imagegen-map-panel--left { left: 0 !important; width: auto !important; min-width: 0 !important; height: 100% !important; } .sd-lower-map-shared.sd-lower-map-panel-band > .sd-imagegen-map-panel--right { right: 0 !important; width: auto !important; min-width: 0 !important; height: 100% !important; opacity: 0.25 !important; object-position: right top !important; } } .sd-fg-faq-wrap.sd-cartography-flow--lower, .sd-insight__section--author-band.sd-cartography-flow--lower { background: transparent !important; border-top: 0 !important; overflow: visible !important; } .sd-insight__section--author-band.sd-cartography-flow--lower { padding-top: clamp(24px, 3vw, 44px) !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower { margin-top: -1px !important; } .sd-fg-faq-wrap.sd-cartography-flow--lower > .sd-imagegen-map-panel, .sd-insight__section--author-band.sd-cartography-flow--lower > .sd-imagegen-map-panel { display: none !important; } .sd-lower-map-shared.sd-lower-map-panel-band { position: relative !important; left: 50% !important; width: 100vw !important; max-width: 100vw !important; margin-left: -50vw !important; margin-right: -50vw !important; padding: 0 !important; background-color: var(--cream) !important; overflow: hidden !important; isolation: isolate !important; } .sd-lower-map-shared > .sd-playbook-cta-wrap, .sd-lower-map-shared > .sd-fg-faq-wrap, .sd-lower-map-shared > .sd-insight__section--author-band { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; background: transparent !important; position: relative !important; z-index: 2 !important; } .sd-lower-map-shared > .sd-imagegen-map-panel { position: absolute !important; z-index: 0 !important; top: 0 !important; bottom: auto !important; height: 100% !important; width: auto !important; max-width: none !important; min-width: 0 !important; object-fit: contain !important; pointer-events: none !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 6%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 84%, rgba(0, 0, 0, 0.42) 94%, rgba(0, 0, 0, 0) 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 6%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 84%, rgba(0, 0, 0, 0.42) 94%, rgba(0, 0, 0, 0) 100% ) !important; } .sd-lower-map-shared > .sd-imagegen-map-panel--left { left: 0 !important; right: auto !important; opacity: 0.24 !important; object-position: left top !important; } .sd-lower-map-shared > .sd-imagegen-map-panel--right { right: clamp(-120px, -7vw, -72px) !important; left: auto !important; opacity: 0.3 !important; object-position: right top !important; } .sd-lower-map-shared.sd-lower-map-panel-band > .sd-imagegen-map-panel--left { left: 0 !important; opacity: 0.24 !important; } .sd-lower-map-shared.sd-lower-map-panel-band > .sd-imagegen-map-panel--right { right: clamp(-120px, -7vw, -72px) !important; left: auto !important; opacity: 0.3 !important; } .sd-lower-map-shared .sd-lower-author-divider { display: none !important; } .stats { z-index: 1; } .stats + .cream-flow.sd-cartography-flow { position: relative; z-index: 2; } .wave-divider--top-rolematrix { top: -124px !important; height: 128px !important; } .wave-divider--top-rolematrix svg { height: calc(100% + 2px) !important; } .stats + .cream-flow.sd-cartography-flow::after { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 6px; background: var(--cream); z-index: 8; pointer-events: none; } .sd-insight__author-box { background: rgba(255, 246, 232, 0.86) !important; border-color: rgba(246, 200, 147, 0.44) !important; } .sd-lower-map-shared.sd-lower-map-panel-band::before { content: none !important; display: none !important; } .sd-lower-map-shared.sd-lower-map-panel-band > .sd-imagegen-map-panel--right { display: block !important; right: 0 !important; left: auto !important; height: 100% !important; width: auto !important; opacity: 0.34 !important; object-position: right top !important; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 4%, rgba(0, 0, 0, 0.55) 9%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0.42) 94%, rgba(0, 0, 0, 0) 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 4%, rgba(0, 0, 0, 0.55) 9%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0.42) 94%, rgba(0, 0, 0, 0) 100% ) !important; } .sd-lower-map-shared.sd-lower-map-panel-band > .sd-imagegen-map-panel--left { -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 4%, rgba(0, 0, 0, 0.55) 9%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0.42) 94%, rgba(0, 0, 0, 0) 100% ) !important; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 4%, rgba(0, 0, 0, 0.55) 9%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 0.42) 94%, rgba(0, 0, 0, 0) 100% ) !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow { display: inline-grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important; align-items: center !important; column-gap: 8px !important; line-height: 1 !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow-dot { position: relative !important; isolation: isolate !important; width: 7px !important; height: 7px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: #DB635D !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; transform: none !important; color: #DB635D !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow-dot::before { content: none !important; display: none !important; border: 0 !important; animation: none !important; } .sd-insight__section--what-we-run .sd-insight__eyebrow-dot::after { content: "" !important; display: block !important; position: absolute !important; inset: -5px !important; border: 1px solid rgba(246, 200, 147, 0.72) !important; border-radius: 999px !important; animation: sdEyebrowPing 2.7s ease-out infinite !important; pointer-events: none !important; } .sd-insight__section--what-we-run .sd-insight__section-num, .sd-insight__section--what-we-run .sd-insight__section-slash, .sd-insight__section--what-we-run .sd-insight__section-label { display: block !important; align-items: center !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } body.postid-4125 { --sd-fg-porthole-icon-size: 83px; } .stats .stat__icon { background: #11314A !important; overflow: hidden !important; padding: 0 !important; position: relative !important; } .stats .stat__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 4px #11314A; pointer-events: none; } .stats .stat__icon img { background: #11314A !important; object-fit: cover !important; display: block !important; height: 100% !important; margin: 0 !important; transform-origin: center center !important; transform: scale(1.24) !important; width: 100% !important; } .wrong-answer__card.wrong-answer__card--editorial { background: transparent; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; } .wrong-answer--editorial .wrong-answer__title { color: #11314A; } .wrong-answer--editorial .wrong-answer__intro { color: rgba(17, 49, 74, 0.78); } .wrong-answer--editorial .eyebrow { color: #DB635D; } .skip-spread { margin-top: 0; max-width: 720px; margin-left: auto; margin-right: auto; } .skip-spread__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17, 49, 74, 0.14); } .skip-spread__item { display: grid; grid-template-columns: var(--sd-fg-porthole-icon-size) minmax(0, 1fr); column-gap: 22px; row-gap: 8px; align-items: start; padding: 26px 0 28px; border-bottom: 1px solid rgba(17, 49, 74, 0.14); } .skip-spread__mark { grid-row: 1 / span 2; width: var(--sd-fg-porthole-icon-size); height: var(--sd-fg-porthole-icon-size); border-radius: 50%; overflow: hidden; background: transparent; box-shadow: 0 0 0 1px rgba(219, 99, 93, 0.28); display: block; margin-top: 4px; flex-shrink: 0; } .skip-spread__mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .skip-spread__num { grid-column: 2; grid-row: 1; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #DB635D; margin: 4px 0 0; display: block; } .skip-spread__title { grid-column: 2; grid-row: 2; font-family: "DM Sans", "Inter", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: #11314A; margin: 0; } .skip-spread__body { grid-column: 2; grid-row: 3; font-family: "Inter", sans-serif; font-size: 14.75px; line-height: 1.7; color: rgba(17, 49, 74, 0.74); margin: 6px 0 0; } @media (max-width: 720px) { .skip-spread__item { grid-template-columns: var(--sd-fg-porthole-icon-size) minmax(0, 1fr); column-gap: 16px; padding: 22px 0 24px; } .skip-spread__mark { width: var(--sd-fg-porthole-icon-size); height: var(--sd-fg-porthole-icon-size); } .skip-spread__title { font-size: 17.5px; } .skip-spread__body { font-size: 14.25px; } }