body.sd-insight-post #nectar-content-wrap, body.sd-insight-post .container-wrap, body.sd-insight-post .container-wrap > .row, body.sd-insight-post #ajax-content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.sd-insight-post { background: var(--sd-cream, #FFF6E8); } body.sd-insight-post { overflow-x: hidden; } body.sd-insight-post #nectar-nav-spacer { background: transparent !important; } body.sd-insight-post .sd-insight__hero { margin-top: calc(-1 * var(--header-nav-height, 100px) - 50px); padding-top: calc(var(--header-nav-height, 100px) + clamp(32px, 4vw, 56px) + 50px); } @media only screen and (max-width: 1024px) { body.sd-insight-post .sd-insight__hero { margin-top: -154px; padding-top: calc(104px + clamp(24px, 5vw, 40px) + 50px); } } .sd-insight { --sd-navy-deep:  #11314a; --sd-navy:       #11314a; --sd-navy-2:     #235C81; --sd-blue:       #5492B6; --sd-coral:      #DB635D; --sd-salmon:     #F2847D; --sd-sand:       #F6C893; --sd-cream:      #FFF6E8; --sd-cream-2:    #FAF0DC; --sd-warm:       #FAF0DC; --sd-warm-deep:  #F6C893; --sd-border:     rgba(17,49,74,0.14); --sd-border-soft:rgba(17,49,74,0.08); --sd-muted:      rgba(17,49,74,0.62); --sd-on-dark:    rgba(255,246,232,0.82); --sd-on-dark-muted: rgba(255,246,232,0.62); --sd-maxw: 1180px; --sd-read: 720px; --sd-card-radius: 18px; --sd-shadow-card: 0 18px 40px -22px rgba(13,31,46,0.16), 0 2px 6px -2px rgba(13,31,46,0.06); --sd-shadow-card-warm: 0 22px 50px -24px rgba(90,60,20,0.22), 0 2px 6px -2px rgba(90,60,20,0.10); --sd-shadow-hero: 0 40px 80px -40px rgba(13,31,46,0.55); --sd-ease: cubic-bezier(.2,.8,.2,1); --sd-accent:       var(--sd-coral); --sd-accent-soft:  rgba(219,99,93,0.10); --sd-accent-deep:  var(--sd-navy-2); display: block; background: var(--sd-cream); color: var(--sd-navy); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; overflow-x: clip; } .sd-insight *, .sd-insight *::before, .sd-insight *::after { box-sizing: border-box; } .sd-insight--build    { --sd-accent: var(--sd-blue);   --sd-accent-soft: rgba(84,146,182,0.12); --sd-accent-deep: var(--sd-navy-2); } .sd-insight--automate { --sd-accent: var(--sd-salmon); --sd-accent-soft: rgba(242,132,125,0.13); --sd-accent-deep: var(--sd-coral); } .sd-insight--grow     { --sd-accent: var(--sd-coral);  --sd-accent-soft: rgba(219,99,93,0.11);  --sd-accent-deep: var(--sd-coral); } .sd-insight--run      { --sd-accent: #F6C893;          --sd-accent-soft: rgba(246,200,147,0.30); --sd-accent-deep: #F6C893; } .sd-insight--review   { --sd-accent: var(--sd-blue);   --sd-accent-soft: rgba(84,146,182,0.14); --sd-accent-deep: var(--sd-navy-2); } .sd-insight__progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9999; pointer-events: none; background: rgba(13, 31, 46, 0.08); } .sd-insight__progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #F2847D 0%, #FAF0DC 100%); transition: width .12s linear, background .35s ease, box-shadow .35s ease; box-shadow: 0 0 8px rgba(242, 132, 125, 0.45); border-radius: 0 2px 2px 0; } .sd-insight__progress-bar[data-bg-context="light"] { background: linear-gradient(90deg, #5492B6 0%, #235C81 100%); box-shadow: 0 0 8px rgba(35, 92, 129, 0.45); } .sd-insight__progress-bar[data-bg-context="dark"] { background: linear-gradient(90deg, #F2847D 0%, #FAF0DC 100%); box-shadow: 0 0 8px rgba(242, 132, 125, 0.45); } .sd-insight__hero { position: relative; background: var(--sd-navy-deep); color: var(--sd-cream); padding: clamp(84px, 10vw, 140px) 0 calc(clamp(72px, 9vw, 120px) + 50px); overflow: hidden; isolation: isolate; z-index: 2; box-shadow: inset 0 -1px 0 rgba(17, 49, 74, 0); } .sd-insight__hero--has-image { background-size: cover; background-position: center; background-repeat: no-repeat; } .sd-insight__hero--has-image .sd-insight__hero-bg { background: radial-gradient(ellipse at 18% 8%, rgba(84,146,182,0.22), transparent 55%), radial-gradient(ellipse at 88% 82%, rgba(246,200,147,0.12), transparent 60%), linear-gradient(180deg, rgba(13,31,46,0.82) 0%, rgba(17,49,74,0.80) 45%, rgba(13,31,46,0.88) 100%); } .sd-insight__hero-overlay { position: absolute; inset: -120px 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 50% 55% at 22% 30%, rgba(219,99,93,0.22), transparent 58%), radial-gradient(ellipse 60% 60% at 85% 80%, rgba(13,31,46,0.35), transparent 60%); filter: blur(30px); mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } .sd-insight__hero--has-image .sd-insight__hero-overlay { mix-blend-mode: normal; } .sd-insight__hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 18% 8%, rgba(84,146,182,0.28), transparent 55%), radial-gradient(ellipse at 88% 82%, rgba(246,200,147,0.14), transparent 60%), linear-gradient(180deg, var(--sd-navy-deep) 0%, var(--sd-navy) 45%, var(--sd-navy-2) 100%); pointer-events: none; } .sd-insight__hero-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,246,232,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,246,232,0.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 40%, #11314a 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 40%, #11314a 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #11314a 30%, transparent 80%); opacity: .9; } .sd-insight__hero-bg::after { content: ""; position: absolute; left: -15%; top: -25%; width: 60%; height: 90%; background: radial-gradient(circle, rgba(219,99,93,0.18), transparent 58%); filter: blur(60px); z-index: 2; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } .sd-insight__hero-inner { position: relative; z-index: 3; max-width: var(--sd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .sd-insight__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sd-sand); margin: 0 0 26px; } .sd-insight__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-coral); box-shadow: 0 0 0 4px rgba(219,99,93,0.18); } .sd-insight__section--warm .sd-insight__eyebrow, .sd-insight__section--cream .sd-insight__eyebrow, .sd-insight__section--salmon .sd-insight__eyebrow { color: var(--sd-navy-2); } .sd-insight__section--darkblue .sd-insight__eyebrow, .sd-insight__section--navy .sd-insight__eyebrow, .sd-insight__section--deep .sd-insight__eyebrow { color: var(--sd-sand); } .sd-insight__section--darkblue .sd-insight__eyebrow-dot, .sd-insight__section--navy .sd-insight__eyebrow-dot, .sd-insight__section--deep .sd-insight__eyebrow-dot { background: var(--sd-sand); box-shadow: 0 0 0 4px rgba(246,200,147,0.22); } .sd-insight__title { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -.025em; color: var(--sd-cream); font-weight: 700; margin: 0 0 24px; max-width: 900px; } .sd-insight__title-main { display: inline; } .sd-insight__title-italic, .sd-insight__title em { font-family: 'Bodoni Moda', 'Georgia', serif; font-style: italic; font-weight: 500; color: var(--sd-sand); } .sd-insight__subhead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--sd-on-dark); max-width: 700px; margin: 0 0 36px; } .sd-insight__hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 28px; } .sd-insight__freshness { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-on-dark-muted); margin: 0; } .sd-insight__freshness em { font-style: normal; color: var(--sd-sand); } .sd-insight__hero-sep { width: 36px; height: 1px; background: rgba(255,246,232,0.2); display: block; } .sd-insight__byline { display: flex; align-items: center; gap: 14px; width: 100%; } .sd-insight__byline-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral)); flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,246,232,0.18); } .sd-insight__byline-avatar img, .sd-insight__byline-avatar svg { width: 44px; height: 44px; display: block; object-fit: cover; object-position: center; border-radius: 50%; } .sd-insight__byline-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sd-insight__byline-author { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 400; font-size: 15px; color: var(--sd-on-dark); letter-spacing: -0.005em; line-height: 1.25; } .sd-insight__byline-author strong { color: var(--sd-cream); font-weight: 700; } .sd-insight__byline-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-on-dark-muted); line-height: 1.4; } .sd-insight__byline-sub time { color: var(--sd-sand); } .sd-insight__byline-role { color: var(--sd-sand); } .sd-insight__byline-sep { color: var(--sd-on-dark-muted); opacity: 0.55; } .sd-insight__byline-dates { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sd-insight__byline .sd-insight__read-time { color: var(--sd-on-dark-muted); } @media (max-width: 640px) { .sd-insight__byline { flex-direction: row; align-items: flex-start; gap: 12px; } .sd-insight__byline-sub { font-size: 10.5px; letter-spacing: .1em; } } .sd-insight__author-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral)); flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,246,232,0.18); } .sd-insight__author-avatar svg { display: block; } .sd-insight__author-name { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 600; font-size: 15px; color: var(--sd-cream); margin: 0; letter-spacing: -0.005em; } .sd-insight__author-role { font-size: 12.5px; color: var(--sd-on-dark-muted); margin: 0; line-height: 1.35; max-width: 260px; } .sd-insight__divider-slot { position: relative; width: 100%; height: 0; z-index: 3; pointer-events: none; } .sd-insight__divider { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(70px, 10vw, 150px); pointer-events: none; display: block; } .sd-insight__divider svg { width: 100%; height: 100%; display: block; overflow: visible; } .sd-insight__divider svg path { fill: var(--sd-fill, var(--sd-cream)); } .sd-insight__divider--navy      { --sd-fill: var(--sd-navy); } .sd-insight__divider--deep      { --sd-fill: var(--sd-navy-deep); } .sd-insight__divider--darkblue  { --sd-fill: var(--sd-navy-2); } .sd-insight__divider--salmon    { --sd-fill: var(--sd-salmon); } .sd-insight__divider--coral     { --sd-fill: var(--sd-coral); } .sd-insight__divider--sand      { --sd-fill: var(--sd-sand); } .sd-insight__divider--cream     { --sd-fill: var(--sd-cream); } .sd-insight__divider--warm      { --sd-fill: var(--sd-warm); } .sd-insight__divider-slot + .sd-insight__section { padding-top: clamp(110px, 11vw, 170px); } .sd-insight__divider--down { top: 0; bottom: auto; transform: scaleY(-1); transform-origin: center; } .sd-insight__section { position: relative; padding: clamp(56px, 7vw, 96px) 0; } .sd-insight__section--warm      { background: var(--sd-warm); } .sd-insight__section--cream     { background: var(--sd-cream); } .sd-insight__section--warm-deep { background: var(--sd-warm-deep); } .sd-insight__section--darkblue  { background: var(--sd-navy-2); color: var(--sd-cream); } .sd-insight__section--navy      { background: var(--sd-navy); color: var(--sd-cream); } .sd-insight__section--deep      { background: var(--sd-navy-deep); color: var(--sd-cream); } .sd-insight__section--salmon    { background: var(--sd-salmon); color: var(--sd-navy); } .sd-insight__section--intro     { padding-top: clamp(40px, 5vw, 70px); } .sd-insight__section--pdf-cta-band { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); } .sd-insight__section--with-faq { padding-bottom: 0; } .sd-insight__section--pdf-cta-band.sd-insight__section--with-faq .sd-insight__playbook-cta-band-outer { padding-bottom: 100px; } @media (max-width: 768px) { .sd-insight__section--pdf-cta-band.sd-insight__section--with-faq .sd-insight__playbook-cta-band-outer { padding-bottom: 64px; } } .sd-insight__playbook-cta-band-outer { width: 100%; max-width: none; padding: 0 50px; box-sizing: border-box; } .sd-insight__playbook-cta-card { background: linear-gradient(180deg, #235C81 0%, #11314a 55%, #11314a 100%); color: var(--sd-cream); border-radius: 50px; margin-left: auto; margin-right: auto; max-width: 1400px; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); overflow: hidden; position: relative; box-shadow: 0 24px 60px -20px rgba(17, 49, 74, 0.4); } @media (max-width: 1024px) { .sd-insight__playbook-cta-band-outer { padding: 0 32px; } } @media (max-width: 768px) { .sd-insight__playbook-cta-band-outer { padding: 0 20px; } .sd-insight__playbook-cta-card { border-radius: 32px; padding: 36px 24px; } } .sd-insight__playbook-cta-card .sd-playbook-cta { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; margin: 0; width: auto; max-width: none; padding: 0; } .sd-insight__playbook-cta-card .sd-playbook-cta__bg-gradient { display: none; } .sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--deep .sd-insight__section-card { background: rgba(13,31,46,0.35); border: 1px solid rgba(255,246,232,0.12); box-shadow: 0 30px 60px -20px rgba(17, 49, 74, 0.5), inset 0 0 0 1px rgba(255,246,232,0.04); color: var(--sd-cream); } .sd-insight__section--darkblue .sd-insight__section-head h2, .sd-insight__section--navy .sd-insight__section-head h2, .sd-insight__section--deep .sd-insight__section-head h2, .sd-insight__section--darkblue .sd-insight__section-card h2, .sd-insight__section--navy .sd-insight__section-card h2, .sd-insight__section--deep .sd-insight__section-card h2, .sd-insight__section--darkblue .sd-insight__section-card h3, .sd-insight__section--navy .sd-insight__section-card h3, .sd-insight__section--deep .sd-insight__section-card h3, .sd-insight__section--darkblue .sd-insight__section-inner h2, .sd-insight__section--navy .sd-insight__section-inner h2, .sd-insight__section--deep .sd-insight__section-inner h2 { color: var(--sd-cream); } .sd-insight__section--darkblue .sd-insight__section-card p, .sd-insight__section--navy .sd-insight__section-card p, .sd-insight__section--deep .sd-insight__section-card p, .sd-insight__section--darkblue .sd-insight__section-inner > p, .sd-insight__section--navy .sd-insight__section-inner > p, .sd-insight__section--deep .sd-insight__section-inner > p { color: rgba(255,246,232,0.82); } .sd-insight__section--darkblue .sd-insight__section-card strong, .sd-insight__section--navy .sd-insight__section-card strong, .sd-insight__section--deep .sd-insight__section-card strong { color: var(--sd-cream); } .sd-insight__section--darkblue .sd-insight__section-card em, .sd-insight__section--navy .sd-insight__section-card em, .sd-insight__section--deep .sd-insight__section-card em { color: var(--sd-sand); } .sd-insight__section--darkblue .sd-insight__section-num, .sd-insight__section--navy .sd-insight__section-num, .sd-insight__section--deep .sd-insight__section-num { color: var(--sd-sand); } .sd-insight__section--darkblue .sd-insight__section-num::after, .sd-insight__section--navy .sd-insight__section-num::after, .sd-insight__section--deep .sd-insight__section-num::after { background: var(--sd-sand); } .sd-insight__section--darkblue a, .sd-insight__section--navy a, .sd-insight__section--deep a { color: var(--sd-sand); } .sd-insight__section--darkblue a:hover, .sd-insight__section--navy a:hover, .sd-insight__section--deep a:hover { color: var(--sd-cream); } .sd-insight__section--fullbleed > .sd-insight__section-inner { padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); } .sd-insight__section-inner { max-width: var(--sd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); position: relative; } .sd-insight__section-card { background: var(--sd-cream); border-radius: var(--sd-card-radius); padding: clamp(28px, 4vw, 56px) clamp(22px, 3.5vw, 56px); box-shadow: var(--sd-shadow-card-warm); border: 1px solid rgba(17,49,74,0.05); max-width: 880px; margin: 0 auto; } .sd-insight__section--cream .sd-insight__section-card { background: transparent; box-shadow: none; border: 0; padding: 0; max-width: var(--sd-read); } .sd-insight__section-head { display: flex; align-items: baseline; gap: 18px; margin: 0 0 22px; } .sd-insight__section-num { font-family: 'Source Code Pro', ui-monospace, monospace; font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sd-coral); flex-shrink: 0; padding-top: 10px; position: relative; } .sd-insight__section-num::after { content: ""; position: absolute; left: -18px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--sd-coral); box-shadow: 0 0 0 4px var(--sd-warm), 0 0 0 5px rgba(219,99,93,.35); } .sd-insight__section--cream .sd-insight__section-num::after { box-shadow: 0 0 0 4px var(--sd-cream), 0 0 0 5px rgba(219,99,93,.35); } .sd-insight__section-head h2 { margin: 0; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.018em; font-weight: 700; color: var(--sd-navy); } .sd-insight__section-head h2 em { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; color: var(--sd-navy-2); } .sd-insight__section-inner > h2, .sd-insight__section-card > h2 { margin: 40px 0 18px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: var(--sd-navy); } .sd-insight__section-card h3 { margin: 28px 0 12px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(19px, 2vw, 23px); line-height: 1.3; letter-spacing: -0.005em; font-weight: 700; color: var(--sd-navy); } .sd-insight__section-card p, .sd-insight__section-inner > p { margin: 0 0 22px; font-size: 17px; line-height: 1.72; color: var(--sd-navy); max-width: var(--sd-read); } .sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card > p, .sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card p { max-width: none; } .sd-insight__section-card > p:last-child, .sd-insight__section-inner > p:last-child { margin-bottom: 0; } .sd-insight__section-card p strong, .sd-insight__section-inner p strong { color: var(--sd-navy-deep); font-weight: 700; } .sd-insight__section-card em:not(.sd-insight__title-italic):not([class*="title"]), .sd-insight__section-inner em:not(.sd-insight__title-italic):not([class*="title"]) { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; } .sd-insight__section-card ul, .sd-insight__section-inner > ul { margin: 18px 0 26px; padding-left: 26px; max-width: var(--sd-read); } .sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card ul { max-width: none; } .sd-insight__section-card ul li, .sd-insight__section-inner > ul li { margin: 10px 0; line-height: 1.65; } .sd-insight__section-card ul li::marker, .sd-insight__section-inner > ul li::marker { color: var(--sd-coral); } .sd-insight__section-card ol:not(.sd-insight__steps-ol), .sd-insight__section-inner > ol:not(.sd-insight__steps-ol) { margin: 18px 0 26px; padding-left: 26px; max-width: var(--sd-read); } .sd-insight__section-card ol:not(.sd-insight__steps-ol) li, .sd-insight__section-inner > ol:not(.sd-insight__steps-ol) li { margin: 10px 0; line-height: 1.65; } .sd-insight__section-card code, .sd-insight__section-inner code { font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace; background: rgba(17,49,74,0.06); color: var(--sd-navy-deep); padding: 2px 6px; border-radius: 4px; font-size: .92em; } .sd-insight__section-card pre, .sd-insight__section-inner pre { background: var(--sd-navy-deep); color: var(--sd-cream); padding: 20px 24px; border-radius: 12px; overflow-x: auto; margin: 22px 0; box-shadow: var(--sd-shadow-card); } .sd-insight__section-card pre code, .sd-insight__section-inner pre code { background: transparent; color: inherit; padding: 0; font-size: 14px; line-height: 1.6; } .sd-insight__section-card a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q), .sd-insight__section-inner a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q), .sd-insight__tldr a { color: var(--sd-navy-2); text-decoration: none; background-image: linear-gradient(var(--sd-accent), var(--sd-accent)); background-repeat: no-repeat; background-position: 0 calc(100% - 1px); background-size: 100% 1.5px; padding-bottom: 1px; transition: color .2s var(--sd-ease), background-size .2s var(--sd-ease); } .sd-insight__section-card a:hover, .sd-insight__section-inner a:hover, .sd-insight__tldr a:hover { color: var(--sd-coral); background-size: 100% 3px; } .sd-insight__section-inner a[data-external]::after { content: " \2197"; font-size: .75em; opacity: .7; letter-spacing: 0; } .sd-insight__dropcap::first-letter { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; float: left; font-size: 5.6em; line-height: .82; padding: 4px 12px 0 0; color: var(--sd-coral); } .sd-insight__section--tldr-band { padding-top: clamp(36px, 5vw, 72px); } .sd-insight__tldr-card { max-width: 820px; border-left: 4px solid var(--sd-coral); background: var(--sd-cream); padding: clamp(26px, 3vw, 40px) clamp(24px, 3.2vw, 48px); } .sd-insight__tldr-label { display: inline-block; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sd-coral); margin: 0 0 14px; padding: 5px 12px; border: 1px solid var(--sd-coral); border-radius: 999px; } .sd-insight__tldr-body p { margin: 0; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; color: var(--sd-navy-deep); font-weight: 500; letter-spacing: -0.005em; max-width: none; } .sd-insight__tldr-body strong { font-weight: 700; color: var(--sd-navy-deep); } .sd-insight__steps { position: relative; margin: clamp(32px, 4vw, 56px) 0; padding: clamp(40px, 5vw, 72px); background: linear-gradient(180deg, var(--sd-navy-2) 0%, var(--sd-blue) 100%); color: var(--sd-cream); border-radius: var(--sd-card-radius); overflow: hidden; box-shadow: var(--sd-shadow-card); } .sd-insight__steps::before { content: ""; position: absolute; top: 8%; left: 22%; width: 55%; height: 78%; background: linear-gradient(165deg, rgba(246,200,147,0.22), transparent 60%); filter: blur(40px); pointer-events: none; opacity: .7; z-index: 2; } .sd-insight__steps-ol { list-style: none; counter-reset: sd-steps; margin: 0; padding: 0 0 0 clamp(0px, 3vw, 56px); position: relative; z-index: 3; } .sd-insight__steps-ol::before { content: ""; position: absolute; left: calc(clamp(0px, 3vw, 56px) + 34px); top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,246,232,0.28) 10%, rgba(255,246,232,0.28) 90%, transparent); pointer-events: none; } @media (max-width: 820px) { .sd-insight__steps { padding: clamp(32px, 5vw, 48px); } .sd-insight__steps-ol { padding-left: 0; } .sd-insight__steps-ol::before { display: none; } } .sd-insight__steps-ol > li { position: relative; padding: 28px 0 28px calc(84px + clamp(20px, 3vw, 40px)); min-height: 64px; border-top: 1px solid rgba(255,246,232,0.14); color: rgba(255,246,232,0.86); font-size: 16.5px; line-height: 1.65; list-style: none; } .sd-insight__steps-ol > li:first-child { border-top: 0; padding-top: 8px; } .sd-insight__steps-ol > li:last-child { padding-bottom: 8px; border-bottom: 0; } .sd-insight__steps-ol > li::before { counter-increment: sd-steps; content: counter(sd-steps, decimal-leading-zero); position: absolute; left: 0; top: 24px; width: 84px; text-align: left; font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 700; font-size: clamp(42px, 4vw, 60px); line-height: 1; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--sd-salmon) 0%, var(--sd-sand) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .sd-insight__steps-ol > li:first-child::before { top: 4px; } .sd-insight__steps-ol > li::after { content: ""; position: absolute; left: calc(84px + (clamp(20px, 3vw, 40px) / 2) - 4px); top: 38px; width: 8px; height: 8px; border-radius: 50%; background: var(--sd-coral); box-shadow: 0 0 0 4px var(--sd-navy-2), 0 0 0 5px rgba(219,99,93,.5); z-index: 2; } .sd-insight__steps-ol > li:first-child::after { top: 18px; } @media (max-width: 820px) { .sd-insight__steps-ol > li { padding-left: calc(60px + 16px); } .sd-insight__steps-ol > li::before { width: 60px; top: 20px; } .sd-insight__steps-ol > li:first-child::before { top: 4px; } .sd-insight__steps-ol > li::after { display: none; } } .sd-insight__steps-ol > li > strong:first-child { display: block; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.25; color: var(--sd-cream); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.005em; } .sd-insight__steps-ol > li a { color: var(--sd-sand); text-decoration: underline; text-decoration-color: rgba(246,200,147,0.4); text-underline-offset: 3px; } .sd-insight__steps-ol > li a:hover { color: var(--sd-cream); text-decoration-color: var(--sd-cream); } .sd-insight__section-card .sd-insight__steps { margin-left: 20px; margin-right: 20px; } @media (max-width: 720px) { .sd-insight__section-card .sd-insight__steps { margin-left: 0; margin-right: 0; } } @media (max-width: 760px) and (min-width: 721px) { .sd-insight__section-card .sd-insight__steps { margin-left: 20px; margin-right: 20px; } } .sd-insight__section-card table, .sd-insight__section-inner > table, table.sd-insight__table { width: 100%; max-width: none; margin: clamp(28px, 3vw, 40px) 0; border-collapse: separate; border-spacing: 0; background: var(--sd-cream); border: 1px solid var(--sd-border); border-radius: 12px; overflow: hidden; font-size: 15px; box-shadow: var(--sd-shadow-card); } .sd-insight__section-card thead th, .sd-insight__section-inner > table thead th, table.sd-insight__table thead th { background: var(--sd-navy); color: var(--sd-cream); font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; text-align: left; padding: 16px 18px; letter-spacing: 0.01em; border-bottom: 3px solid var(--sd-coral); } .sd-insight__section-card tbody td, .sd-insight__section-inner > table tbody td, table.sd-insight__table tbody td { padding: 14px 18px; border-top: 1px solid var(--sd-border-soft); color: var(--sd-navy); line-height: 1.55; vertical-align: top; } .sd-insight__section-card tbody tr:first-child td, .sd-insight__section-inner > table tbody tr:first-child td, table.sd-insight__table tbody tr:first-child td { border-top: 0; } .sd-insight__section-card tbody tr:nth-child(even) td, .sd-insight__section-inner > table tbody tr:nth-child(even) td, table.sd-insight__table tbody tr:nth-child(even) td { background: rgba(246,200,147,0.09); } .sd-insight__section-card tbody tr:hover td, .sd-insight__section-inner > table tbody tr:hover td, table.sd-insight__table tbody tr:hover td { background: rgba(84,146,182,0.08); } .sd-insight__section-card tbody td:first-child, .sd-insight__section-inner > table tbody td:first-child, table.sd-insight__table tbody td:first-child { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 600; color: var(--sd-navy-deep); } @media (max-width: 720px) { .sd-insight__section-card table, .sd-insight__section-inner > table, table.sd-insight__table { font-size: 14px; display: block; overflow-x: auto; } } .sd-insight__pullquote, .sd-insight__section-card blockquote:not(.sd-insight__pullquote), .sd-insight__section-inner > blockquote:not(.sd-insight__pullquote) { position: relative; margin: clamp(28px, 3vw, 40px) 0; padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 40px); background: linear-gradient(180deg, rgba(246,200,147,0.16), rgba(246,200,147,0.06)); border-left: 4px solid var(--sd-coral); border-radius: 0 12px 12px 0; box-shadow: var(--sd-shadow-card); } .sd-insight__pullquote::before, .sd-insight__section-card blockquote::before { content: "\201C"; position: absolute; top: 0; left: 14px; font-family: 'Bodoni Moda', Georgia, serif; font-size: 64px; line-height: 1; color: var(--sd-coral); opacity: .32; } .sd-insight__pullquote p, .sd-insight__section-card blockquote p { margin: 0; font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.48; color: var(--sd-navy-deep); max-width: none; } .sd-insight__pullquote p + p, .sd-insight__section-card blockquote p + p { margin-top: 12px; } .sd-insight__section--hero-figure-band { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); } .sd-insight__hero-figure { margin: 0 auto; max-width: min(100%, var(--sd-maxw)); border-radius: 18px; overflow: hidden; box-shadow: var(--sd-shadow-card, 0 18px 48px rgba(13,31,46,0.16)); background: #11314a; } .sd-insight__hero-figure-img { display: block; width: 100%; height: auto; } @media (max-width: 600px) { .sd-insight__hero-figure { border-radius: 12px; } } .sd-insight__inline-fig { margin: clamp(28px, 3vw, 40px) 0; border-radius: 14px; overflow: hidden; box-shadow: var(--sd-shadow-card); max-width: var(--sd-read); } .sd-insight__section:not(.sd-insight__section--cream) .sd-insight__section-card .sd-insight__inline-fig { max-width: none; } .sd-insight__inline-fig img { width: 100%; height: auto; display: block; } .sd-insight__inline-callout { display: flex; gap: 18px; align-items: flex-start; padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px); margin: clamp(26px, 3vw, 36px) 0; background: var(--sd-cream); border-left: 4px solid var(--sd-coral); border-radius: 0 12px 12px 0; box-shadow: var(--sd-shadow-card); max-width: var(--sd-read); } .sd-insight__inline-callout-icon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; color: var(--sd-coral); background: rgba(219,99,93,0.10); border-radius: 10px; } .sd-insight__inline-callout-icon svg { width: 22px; height: 22px; } .sd-insight__inline-callout-body { min-width: 0; } .sd-insight__inline-callout-body p { margin: 0 0 10px; line-height: 1.6; } .sd-insight__inline-callout-body p:last-child { margin-bottom: 0; } .sd-insight__callout-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: clamp(30px, 3vw, 42px) 0; } .sd-insight__callout-cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); max-width: 820px; } .sd-insight__callout-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .sd-insight__callout-cards, .sd-insight__callout-cards[data-cols="2"], .sd-insight__callout-cards[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sd-insight__callout-cards, .sd-insight__callout-cards[data-cols="2"], .sd-insight__callout-cards[data-cols="4"] { grid-template-columns: 1fr; } } .sd-insight__callout-card { background: var(--sd-cream); border: 1px solid var(--sd-border); border-radius: 14px; padding: 22px 20px; box-shadow: var(--sd-shadow-card); display: flex; flex-direction: column; gap: 8px; } .sd-insight__callout-card-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--sd-coral); background: rgba(219,99,93,0.10); border-radius: 10px; margin-bottom: 6px; } .sd-insight__callout-card-icon svg { width: 22px; height: 22px; } .sd-insight__callout-card-num { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sd-navy-2); } .sd-insight__callout-card h4 { margin: 0; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--sd-navy); letter-spacing: -0.005em; } .sd-insight__callout-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sd-muted); } .sd-insight__section--faq .sd-insight__section-card { padding-top: clamp(32px, 3vw, 44px); padding-bottom: clamp(32px, 3vw, 44px); } .sd-insight__faq-heading { margin: 0 0 24px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 700; color: var(--sd-navy); letter-spacing: -0.018em; } .sd-insight__faq-item { border-top: 1px solid var(--sd-border); } .sd-insight__faq-item:first-of-type { border-top: 0; } .sd-insight__faq-q { all: unset; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(16px, 1.6vw, 18px); font-weight: 600; color: var(--sd-navy); letter-spacing: -0.005em; line-height: 1.4; } .sd-insight__faq-q:hover { color: var(--sd-coral); } .sd-insight__faq-q-text { flex: 1; } .sd-insight__faq-chev { width: 24px; height: 24px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311314a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform .25s var(--sd-ease); } .sd-insight__faq-item.is-open .sd-insight__faq-chev { transform: rotate(180deg); } .sd-insight__faq-a { overflow: hidden; } .sd-insight__faq-a-inner { padding: 0 0 22px; } .sd-insight__faq-a-inner p { margin: 0; color: var(--sd-muted); line-height: 1.7; max-width: var(--sd-read); } .sd-insight__callout { position: relative; margin: clamp(36px, 4vw, 64px) 0; background: linear-gradient(135deg, var(--sd-navy-deep) 0%, var(--sd-navy) 55%, var(--sd-navy-2) 100%); color: var(--sd-cream); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(13,31,46,0.5), 0 4px 10px -4px rgba(13,31,46,0.3); border: 1px solid rgba(255,246,232,0.08); width: 100%; max-width: none; } .sd-insight__callout::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sd-coral), var(--sd-sand), var(--sd-coral)); z-index: 3; } .sd-insight__callout::after { content: ""; position: absolute; top: -20%; right: -15%; width: 60%; height: 140%; background: radial-gradient(ellipse, rgba(219,99,93,0.2), transparent 58%); filter: blur(60px); pointer-events: none; z-index: 2; } .sd-insight__callout-inner { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; padding: clamp(28px, 3.5vw, 48px); position: relative; z-index: 3; } .sd-insight__callout-cover { aspect-ratio: 3 / 4; min-height: 280px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral)); box-shadow: 0 30px 60px -20px rgba(17, 49, 74, 0.5), 0 2px 6px rgba(17, 49, 74, 0.2); position: relative; } .sd-insight__callout-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .sd-insight__callout-cover--empty::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 135deg, rgba(255,246,232,0.06), rgba(255,246,232,0.06) 2px, transparent 2px, transparent 10px ); } .sd-insight__callout-body { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; } .sd-insight__callout-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sd-sand); margin: 0; } .sd-insight__callout-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-coral); box-shadow: 0 0 0 4px rgba(219,99,93,0.18); } .sd-insight__callout-title { margin: 0; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.14; letter-spacing: -0.02em; color: var(--sd-cream); font-weight: 700; } .sd-insight__callout-desc { margin: 0; color: var(--sd-on-dark); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; } .sd-insight__callout-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .sd-insight__callout-email { flex: 1; min-width: 200px; padding: 14px 16px; font-size: 15px; background: rgba(255,246,232,0.08); color: var(--sd-cream); border: 1px solid rgba(255,246,232,0.2); border-radius: 10px; font-family: inherit; outline: none; transition: border-color .2s var(--sd-ease), background .2s var(--sd-ease); } .sd-insight__callout-email::placeholder { color: rgba(255,246,232,0.5); } .sd-insight__callout-email:focus { border-color: var(--sd-coral); background: rgba(255,246,232,0.14); box-shadow: 0 0 0 3px rgba(219,99,93,0.25); } .sd-insight__callout-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--sd-cream); background: var(--sd-coral); border: 0; border-radius: 10px; cursor: pointer; letter-spacing: 0.005em; box-shadow: 0 10px 22px -8px rgba(219,99,93,0.55), 0 2px 4px rgba(17, 49, 74, 0.15); transition: transform .15s var(--sd-ease), box-shadow .15s var(--sd-ease), background .15s var(--sd-ease); } .sd-insight__callout-btn:hover { background: #DB635D; transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(219,99,93,0.65), 0 2px 4px rgba(17, 49, 74, 0.2); } .sd-insight__callout-btn:disabled { opacity: 0.55; cursor: wait; transform: none; } .sd-insight__callout-reassure { margin: 0; color: rgba(255,246,232,0.6); font-size: 12.5px; letter-spacing: 0.015em; } .sd-insight__callout-status { margin: 0; color: var(--sd-sand); font-size: 13.5px; line-height: 1.5; min-height: 1em; } .sd-insight__callout-status.is-error { color: #F2847D; } .sd-insight__callout-status.is-success { color: #5492B6; } .sd-insight__callout-status a { color: var(--sd-sand); text-decoration: underline; } .sd-insight__callout-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,246,232,0.2); border-top-color: var(--sd-coral); border-radius: 50%; animation: sd-insight-spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; } @keyframes sd-insight-spin { to { transform: rotate(360deg); } } .sd-insight__callout-ghl iframe { width: 100%; min-height: 320px; border: 0; background: rgba(255,246,232,0.04); border-radius: 10px; } @media (max-width: 820px) { .sd-insight__callout-inner { grid-template-columns: 1fr; gap: 22px; } .sd-insight__callout-cover { aspect-ratio: auto; min-height: 280px; max-height: 340px; } .sd-insight__callout-cover img { object-position: center 20%; } } .sd-insight__section--callout-only { padding: clamp(20px, 2.5vw, 40px) 0; } .sd-insight__section--callout-only .sd-insight__section-inner { max-width: 900px; } .sd-insight__cta { position: relative; background: #235C81;  color: var(--sd-cream); padding: clamp(80px, 10vw, 140px) 0; text-align: center; overflow: hidden; isolation: isolate; z-index: 2; } .sd-insight__cta[data-reveal], .sd-insight__cta[data-reveal].is-visible, .sd-insight__cta { opacity: 1 !important; transform: none !important; transition: none !important; } .sd-insight__cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(219,99,93,0.18), transparent 58%); pointer-events: none; z-index: 2; animation: sd-insight-coral-pulse 6s ease-in-out infinite; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } .sd-insight__cta-pulse { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 35% 35% at 30% 30%, rgba(219,99,93,0.20), transparent 58%), radial-gradient(ellipse 30% 30% at 75% 70%, rgba(246,200,147,0.10), transparent 58%); filter: blur(40px); pointer-events: none; animation: sd-insight-coral-pulse 6s ease-in-out infinite reverse; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } @keyframes sd-insight-coral-pulse { 0%, 100% { opacity: 0.7; } 50%      { opacity: 1; } } .sd-insight__cta-inner { position: relative; z-index: 3; max-width: 800px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .sd-insight__cta-eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sd-sand); margin: 0 0 18px; } .sd-insight__cta-h2 { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; color: var(--sd-cream); font-weight: 700; margin: 0 0 16px; letter-spacing: -0.02em; } .sd-insight__cta-h2 em { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; color: var(--sd-sand); } .sd-insight__cta-body { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(255,246,232,0.88); margin: 0 0 32px; max-width: 620px; margin-left: auto; margin-right: auto; } .sd-insight__cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 20px 36px; background: var(--sd-coral); color: var(--sd-cream); font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 600; font-size: 17px; border-radius: 999px; text-decoration: none; letter-spacing: 0.005em; box-shadow: 0 10px 30px -6px rgba(219,99,93,0.55); transition: transform .15s var(--sd-ease), box-shadow .15s var(--sd-ease), background .15s var(--sd-ease); } .sd-insight__cta-btn:hover { transform: translateY(-2px); background: var(--sd-salmon); box-shadow: 0 14px 40px -8px rgba(219,99,93,0.7); color: var(--sd-cream); } .sd-insight__related { background: var(--sd-navy-deep); color: var(--sd-cream); padding: clamp(64px, 8vw, 100px) 0; } .sd-insight__related-inner { max-width: var(--sd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .sd-insight__related-eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sd-sand); margin: 0 0 32px; } .sd-insight__related-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .sd-insight__related-grid { grid-template-columns: 1fr; } } .sd-insight__related-card { display: flex; flex-direction: column; gap: 14px; background: rgba(255,246,232,0.03); border: 1px solid rgba(255,246,232,0.08); border-radius: 14px; padding: 18px; text-decoration: none; transition: transform .2s var(--sd-ease), border-color .2s var(--sd-ease), background .2s var(--sd-ease); } .sd-insight__related-card:hover { transform: translateY(-3px); border-color: rgba(246,200,147,0.3); background: rgba(255,246,232,0.06); } .sd-insight__related-thumb { aspect-ratio: 16/9; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--sd-navy-2); } .sd-insight__related-thumb--empty { background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral)); } .sd-insight__related-title { margin: 0; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sd-cream); letter-spacing: -0.005em; } .sd-insight__related-meta { margin: 0; font-size: 12.5px; color: rgba(255,246,232,0.55); font-family: 'Source Code Pro', ui-monospace, monospace; letter-spacing: 0.02em; } [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sd-ease), transform .6s var(--sd-ease); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } .sd-insight__stats { position: relative; z-index: 3; max-width: var(--sd-maxw); margin: 0 auto; } .sd-insight__section--stats { overflow: hidden; } .sd-insight__section--stats::after { content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 160%; background: radial-gradient(ellipse, rgba(84,146,182,0.3), transparent 58%); filter: blur(40px); pointer-events: none; z-index: 2; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } .sd-insight__stats-head { margin-bottom: 36px; } .sd-insight__stats-head .sd-insight__eyebrow--sand { color: var(--sd-sand); margin-bottom: 14px; } .sd-insight__stats-head .sd-insight__eyebrow-dot--sand { background: var(--sd-sand); } .sd-insight__stats-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--sd-cream); max-width: 820px; margin: 0; } .sd-insight__stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } @media (max-width: 900px) { .sd-insight__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; } } @media (max-width: 520px) { .sd-insight__stats-grid { grid-template-columns: 1fr; } } .sd-insight__stat { color: var(--sd-cream); } .sd-insight__stat-eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sd-sand); margin: 0 0 14px; } .sd-insight__stat-num { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 700; font-size: clamp(44px, 5.2vw, 68px); line-height: 0.95; letter-spacing: -0.035em; color: var(--sd-cream); margin: 0; } .sd-insight__stat-unit { font-size: 0.55em; color: var(--sd-sand); margin-left: 4px; letter-spacing: -0.02em; font-weight: 600; } .sd-insight__stat-label { color: rgba(255,246,232,0.72); font-size: 15px; line-height: 1.55; margin: 12px 0 0; max-width: 240px; } .sd-insight__features { max-width: var(--sd-maxw); margin: 0 auto; } .sd-insight__features-head { margin-bottom: 36px; } .sd-insight__features-head .sd-insight__eyebrow { margin-bottom: 14px; } .sd-insight__features-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--sd-navy); max-width: 820px; margin: 0; } .sd-insight__section--darkblue .sd-insight__features-title, .sd-insight__section--navy .sd-insight__features-title, .sd-insight__section--deep .sd-insight__features-title { color: var(--sd-cream); } .sd-insight__features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sd-insight__features-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .sd-insight__features-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .sd-insight__features-grid, .sd-insight__features-grid[data-cols="2"], .sd-insight__features-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sd-insight__features-grid, .sd-insight__features-grid[data-cols="2"], .sd-insight__features-grid[data-cols="4"] { grid-template-columns: 1fr; } } .sd-insight__feature { background: var(--sd-cream); border: 1px solid var(--sd-border); border-radius: 12px; padding: 28px; position: relative; transition: transform .25s var(--sd-ease), border-color .25s var(--sd-ease), box-shadow .25s var(--sd-ease); } .sd-insight__feature:hover { transform: translateY(-2px); border-color: rgba(219,99,93,0.35); box-shadow: 0 18px 40px -20px rgba(219,99,93,0.25); } .sd-insight__feature-icon { display: grid; place-items: start; width: 32px; height: 32px; color: var(--sd-coral); margin-bottom: 16px; } .sd-insight__feature-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; } .sd-insight__feature-num { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--sd-navy-2); opacity: 0.7; margin: 0 0 6px; } .sd-insight__feature-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--sd-navy); margin: 0 0 10px; } .sd-insight__feature-body { color: var(--sd-muted); font-size: 15px; line-height: 1.6; margin: 0; } .sd-insight__section--darkblue .sd-insight__feature, .sd-insight__section--navy .sd-insight__feature, .sd-insight__section--deep .sd-insight__feature { background: rgba(13,31,46,0.35); border-color: rgba(255,246,232,0.12); } .sd-insight__section--darkblue .sd-insight__feature-title, .sd-insight__section--navy .sd-insight__feature-title, .sd-insight__section--deep .sd-insight__feature-title { color: var(--sd-cream); } .sd-insight__section--darkblue .sd-insight__feature-body, .sd-insight__section--navy .sd-insight__feature-body, .sd-insight__section--deep .sd-insight__feature-body { color: rgba(255,246,232,0.75); } .sd-insight__section--darkblue .sd-insight__feature-num, .sd-insight__section--navy .sd-insight__feature-num, .sd-insight__section--deep .sd-insight__feature-num { color: var(--sd-sand); opacity: 1; } .sd-insight__notfor { max-width: var(--sd-maxw); margin: 0 auto; } .sd-insight__notfor-head { margin-bottom: 36px; } .sd-insight__notfor-head .sd-insight__eyebrow { margin-bottom: 14px; } .sd-insight__notfor-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--sd-navy); max-width: 820px; margin: 0; } .sd-insight__notfor-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; list-style: none; padding: 0; margin: 0; } @media (max-width: 820px) { .sd-insight__notfor-list { grid-template-columns: 1fr; } } .sd-insight__notfor-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid rgba(17,49,74,0.10); margin: 0; } .sd-insight__notfor-item:first-child, .sd-insight__notfor-item:nth-child(2) { border-top: 0; padding-top: 0; } @media (max-width: 820px) { .sd-insight__notfor-item:nth-child(2) { border-top: 1px solid rgba(17,49,74,0.10); padding-top: 18px; } } .sd-insight__notfor-x { width: 22px; height: 22px; border-radius: 50%; background: rgba(219,99,93,0.15); display: grid; place-items: center; color: var(--sd-coral); margin-top: 2px; } .sd-insight__notfor-x svg { width: 11px; height: 11px; } .sd-insight__notfor-body p { color: var(--sd-muted); font-size: 16px; line-height: 1.6; margin: 0; } .sd-insight__notfor-body p b, .sd-insight__notfor-body p strong { color: var(--sd-navy); font-weight: 600; display: block; margin-bottom: 2px; } .sd-insight__section--showcase { position: relative; overflow: hidden; background: #11314a url('//scubadev.com/data/uploads/sites/4/2026/03/sdoffice.jpg') center/cover no-repeat; color: var(--sd-cream); } .sd-insight__section--showcase::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17, 49, 74, 0.86) 0%, rgba(10, 25, 48, 0.95) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } .sd-insight__section--showcase > .sd-insight__section-inner { position: relative; z-index: 1; } .sd-insight__section--showcase .sd-insight__section-card { background: rgba(10, 25, 48, 0.55); border: 1px solid rgba(255, 246, 232, 0.12); color: var(--sd-cream); padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); } .sd-insight__section--showcase .sd-insight__section-card p, .sd-insight__section--showcase .sd-insight__section-inner > p { color: var(--sd-cream); } .sd-insight__section--showcase .sd-insight__section-card h2, .sd-insight__section--showcase .sd-insight__section-card h3, .sd-insight__section--showcase .sd-insight__section-head h2 { color: var(--sd-cream); } .sd-insight__section--showcase .sd-insight__section-card strong, .sd-insight__section--showcase .sd-insight__section-card b { color: #FFF6E8; } .sd-insight__section--showcase .sd-insight__section-card em { color: var(--sd-sand, #F6C893); } .sd-insight__section--showcase .sd-insight__section-num { color: var(--sd-sand, #F6C893); } .sd-insight__section--showcase .sd-insight__section-num::after { background: var(--sd-sand, #F6C893); opacity: 0.6; } .sd-insight__section--showcase a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q) { color: var(--sd-sand, #F6C893); } .sd-insight__section--showcase a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover { color: #FFF6E8; } @media (max-width: 720px) { .sd-insight__section--showcase { background-position: center center; } } body.sd-insight-post .sd-insight__section--what-we-run .sd-insight__section-inner { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 768px) { body.sd-insight-post .sd-insight__section--what-we-run .sd-insight__section-inner { padding-top: 64px; padding-bottom: 64px; } } .sd-insight__divider-slot + .sd-insight__section--what-we-run { padding-top: clamp(110px, 11vw, 170px); } .sd-insight__section--compare-cto.sd-insight__section--cream .sd-insight__section-card { background: var(--sd-cream); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15); border: 1px solid rgba(84, 146, 182, 0.15); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--compare-cto.sd-insight__section--cream .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__section--what-we-ship.sd-insight__section--cream .sd-insight__section-card { background: var(--sd-cream); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15); border: 1px solid rgba(84, 146, 182, 0.15); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--what-we-ship.sd-insight__section--cream .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } @media print { .sd-insight__progress, .sd-insight__divider-slot, .sd-insight__hero-bg, .sd-insight__cta, .sd-insight__related, .sd-insight__callout { display: none !important; } .sd-insight__hero { background: #FFF6E8 !important; color: #11314a !important; padding: 0 !important; } .sd-insight__title, .sd-insight__author-name, .sd-insight__author-role, .sd-insight__eyebrow, .sd-insight__subhead, .sd-insight__freshness { color: #11314a !important; } .sd-insight__section { background: #FFF6E8 !important; padding: 12px 0 !important; } .sd-insight__section-card { background: #FFF6E8 !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } } .sd-insight__lightbox-trigger { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .sd-insight__lightbox-trigger:hover, .sd-insight__lightbox-trigger:focus-visible { transform: scale(1.005); filter: brightness(1.02); box-shadow: 0 24px 60px -30px rgba(13,31,46,0.35); outline: none; } .sd-insight__lightbox-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(219,99,93,0.55), 0 24px 60px -30px rgba(13,31,46,0.35); } #sd-insight-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); background: rgba(13,31,46,0.92); opacity: 0; transition: opacity .22s ease; } #sd-insight-lightbox[data-open="true"] { display: flex; opacity: 1; } #sd-insight-lightbox .sd-insight-lightbox__stage { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 12px; } #sd-insight-lightbox .sd-insight-lightbox__img { max-width: 90vw; max-height: calc(90vh - 64px); width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 40px 100px -40px rgba(17, 49, 74, 0.75); background: rgba(255,246,232,0.04); transform: scale(.98); transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s ease; opacity: 0; } #sd-insight-lightbox[data-open="true"] .sd-insight-lightbox__img { transform: scale(1); opacity: 1; } #sd-insight-lightbox .sd-insight-lightbox__caption { max-width: 90vw; color: rgba(255,246,232,0.86); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; text-align: center; font-style: italic; padding: 4px 8px; } #sd-insight-lightbox .sd-insight-lightbox__close { position: fixed; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,246,232,0.08); color: #DB635D;  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .18s ease, transform .18s ease; } #sd-insight-lightbox .sd-insight-lightbox__close:hover, #sd-insight-lightbox .sd-insight-lightbox__close:focus-visible { background: rgba(219,99,93,0.22); transform: scale(1.08); outline: none; } #sd-insight-lightbox .sd-insight-lightbox__close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; } #sd-insight-lightbox .sd-insight-lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,246,232,0.06); color: #F6C893;  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .18s ease, transform .18s ease; } #sd-insight-lightbox .sd-insight-lightbox__nav:hover, #sd-insight-lightbox .sd-insight-lightbox__nav:focus-visible { background: rgba(246,200,147,0.20); transform: translateY(-50%) scale(1.08); outline: none; } #sd-insight-lightbox .sd-insight-lightbox__nav--prev { left: clamp(10px, 2vw, 24px); } #sd-insight-lightbox .sd-insight-lightbox__nav--next { right: clamp(10px, 2vw, 24px); } #sd-insight-lightbox .sd-insight-lightbox__nav[hidden] { display: none; } #sd-insight-lightbox .sd-insight-lightbox__nav svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 600px) { #sd-insight-lightbox .sd-insight-lightbox__nav { width: 40px; height: 40px; } #sd-insight-lightbox .sd-insight-lightbox__close { width: 40px; height: 40px; } #sd-insight-lightbox .sd-insight-lightbox__img { max-height: calc(90vh - 80px); border-radius: 6px; } } body.sd-insight-lightbox-open { overflow: hidden !important; } ul.sd-insight__stats-grid, ul.sd-insight__features-grid { list-style: none; padding: 0; margin: 0; } li.sd-insight__stat, li.sd-insight__feature { list-style: none; } @media (max-width: 720px) { .sd-insight__section-inner, .sd-insight__section--fullbleed > .sd-insight__section-inner { padding-left: 32px; padding-right: 32px; } .sd-insight__section-num::after { left: 0; } .sd-insight__section-head { gap: 14px; } } body.sd-insight-post h2, .sd-insight-post h2, .sd-insight h2 { scroll-margin-top: 100px; } .sd-insight__toc-card.sd-insight__section-card, .sd-insight__section--toc-band .sd-insight__section-card { background: var(--sd-warm, #FAF0DC); border: 1px solid var(--sd-border-soft, rgba(17,49,74,0.08)); border-radius: var(--sd-card-radius, 18px); padding: 0; overflow: hidden; box-shadow: none; } .sd-insight__toc { margin: 20px 0 0 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; } .sd-insight__toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 24px; background: transparent; border: 0; cursor: pointer; font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-weight: 600; color: var(--sd-navy, #11314a); text-align: left; user-select: none; transition: color 160ms ease, background-color 160ms ease; } .sd-insight__toc-toggle:hover { color: var(--sd-coral, #DB635D); background: rgba(219, 99, 93, 0.04); } .sd-insight__toc-toggle:focus-visible { outline: 2px solid var(--sd-coral, #DB635D); outline-offset: -2px; } .sd-insight__toc-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-navy-2, #235C81); font-weight: 700; } .sd-insight__toc-meta { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; } .sd-insight__toc-count { font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sd-muted, rgba(17,49,74,0.62)); font-weight: 500; } .sd-insight__toc-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; color: var(--sd-navy-2, #235C81); background: rgba(35, 92, 129, 0.08); transition: transform 300ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)), background-color 160ms ease; } .sd-insight__toc-toggle:hover .sd-insight__toc-chevron { background: rgba(219, 99, 93, 0.14); color: var(--sd-coral, #DB635D); } .sd-insight__toc-toggle[aria-expanded="true"] .sd-insight__toc-chevron { transform: rotate(180deg); } .sd-insight__toc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)); } .sd-insight__toc-body > .sd-insight__toc-body-inner { overflow: hidden; min-height: 0; } .sd-insight__toc[data-sd-toc-open="true"] .sd-insight__toc-body { grid-template-rows: 1fr; } .sd-insight__toc-list { list-style: none; margin: 0; padding: 4px 24px 18px; column-count: 1; column-gap: 0; border-top: 1px solid var(--sd-border-soft, rgba(17,49,74,0.08)); } .sd-insight__section-card .sd-insight__toc-list, .sd-insight__section-inner > .sd-insight__toc-list { list-style: none; padding-left: 24px; margin-left: 0; } .sd-insight__toc-item { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(84, 146, 182, 0.10); } .sd-insight__toc-item:first-child { border-top: 0; } .sd-insight__toc-item::marker, .sd-insight__toc-list > li::marker { content: ""; color: transparent; } .sd-insight__toc-link { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; color: var(--sd-navy, #11314a); text-decoration: none; font-size: 15px; line-height: 1.4; font-weight: 500; border: 0; transition: color 160ms ease; } .sd-insight__toc-link:hover, .sd-insight__toc-link:focus-visible { color: var(--sd-coral, #DB635D); text-decoration: none; } .sd-insight__toc-link .toc-num { font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--sd-sand, #F6C893); font-weight: 700; letter-spacing: 0.08em; min-width: 22px; flex-shrink: 0; } .sd-insight__toc-link:hover .toc-num, .sd-insight__toc-link:focus-visible .toc-num { color: var(--sd-coral, #DB635D); } .sd-insight__toc-text { flex: 1; } @media (max-width: 720px) { .sd-insight__toc-toggle { padding: 14px 18px; } .sd-insight__toc-list { padding: 4px 18px 14px; } .sd-insight__toc-link { font-size: 14px; padding: 10px 0; } .sd-insight__toc-card.sd-insight__section-card, .sd-insight__section--toc-band .sd-insight__section-card { border-radius: 14px; } } .sd-insight__read-time { display: inline-block; margin-left: 10px; padding: 2px 10px; font-size: 12px; letter-spacing: 0.06em; font-weight: 600; color: var(--sd-on-dark, rgba(255,246,232,0.82)); background: rgba(255,246,232,0.10); border: 1px solid rgba(255,246,232,0.18); border-radius: 999px; font-style: normal; vertical-align: middle; } .sd-insight__freshness time { color: inherit; text-decoration: none; border-bottom: none; } .sd-insight__section--author-band .sd-insight__section-inner { max-width: var(--sd-read, 720px); } .sd-insight__author-box { display: block; background: var(--sd-warm, #FAF0DC); border: 1px solid var(--sd-border-soft, rgba(17,49,74,0.08)); border-radius: var(--sd-card-radius, 18px); padding: 40px; box-shadow: 0 10px 30px -20px rgba(13,31,46,0.12); position: relative; } .sd-insight__author-box::before { content: ""; position: absolute; left: 40px; top: 0; width: 56px; height: 2px; background: var(--sd-coral); border-radius: 2px; } .sd-insight__author-box-inner { display: grid; grid-template-columns: 90px 1fr; gap: 28px; align-items: start; } .sd-insight__author-box-avatar { width: 90px; height: 90px; border-radius: 50%; display: block; overflow: hidden; background: linear-gradient(135deg, var(--sd-navy-2), var(--sd-coral)); object-fit: cover; object-position: center; box-shadow: 0 0 0 4px var(--sd-cream), 0 8px 20px -10px rgba(13,31,46,0.25); } .sd-insight__author-box-body { min-width: 0; } .sd-insight__author-box-kicker { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sd-navy-2); margin: 0 0 8px; font-weight: 600; } .sd-insight__author-box-name { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--sd-navy); font-weight: 400; margin: 0 0 6px; } .sd-insight__author-box-name strong { font-weight: 700; color: var(--sd-navy); } .sd-insight__author-box-role { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 13px; letter-spacing: .02em; color: var(--sd-navy-2); font-weight: 600; margin: 0 0 14px; } .sd-insight__author-box-bio { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: var(--sd-muted, rgba(17,49,74,0.72)); margin: 0 0 16px; max-width: 56ch; } .sd-insight__author-box-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; } .sd-insight__author-box-links li { margin: 0; padding: 0; } .sd-insight__author-box-links li + li { position: relative; padding-left: 18px; } .sd-insight__author-box-links li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--sd-coral); transform: translateY(-50%); } .sd-insight__author-box-links a { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--sd-navy); text-decoration: none; letter-spacing: 0.01em; border-bottom: 1px solid transparent; transition: color .2s var(--sd-ease), border-color .2s var(--sd-ease); } .sd-insight__author-box-links a:hover, .sd-insight__author-box-links a:focus { color: var(--sd-coral); border-bottom-color: var(--sd-coral); } @media (max-width: 640px) { .sd-insight__author-box { padding: 24px; } .sd-insight__author-box::before { left: 24px; } .sd-insight__author-box-inner { grid-template-columns: 1fr; gap: 18px; } .sd-insight__author-box-avatar { width: 72px; height: 72px; } .sd-insight__author-box-name { font-size: 20px; } .sd-insight__author-box-bio { font-size: 14.5px; } } .sd-insight__section--navy a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q), .sd-insight__section--darkblue a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q), .sd-insight__section--deep a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q) { color: var(--sd-sand, #F6C893); text-decoration-color: var(--sd-coral, #DB635D); } .sd-insight__section--navy a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover, .sd-insight__section--darkblue a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover, .sd-insight__section--deep a:not(.sd-insight__cta-btn):not(.sd-insight__callout-btn):not(.sd-insight__faq-q):hover { color: var(--sd-cream, #FFF6E8); text-decoration-color: var(--sd-sand, #F6C893); } .sd-playbook-cta { position: relative; isolation: isolate; margin: 56px calc(50% - 50vw) 64px; width: 100vw; max-width: 100vw; padding: 72px clamp(20px, 5vw, 64px); color: #FFF6E8; font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow: hidden; background: transparent; } .sd-playbook-cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .sd-playbook-cta__bg-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, #11314a 0%, #11314a 45%, #11314a 100%); } .sd-playbook-cta__caustic { position: absolute; top: -10%; left: -10%; width: 60%; height: 70%; background: radial-gradient(ellipse at 30% 20%, rgba(84, 146, 182, 0.22) 0%, rgba(84, 146, 182, 0) 60%); filter: blur(100px); opacity: 0.9; } .sd-playbook-cta__kelp { position: absolute; bottom: -40px; left: -20px; width: 220px; height: auto; opacity: 0.6; pointer-events: none; } .sd-playbook-cta__bubbles { position: absolute; right: 4%; bottom: 0; width: 180px; height: 100%; pointer-events: none; } .sd-playbook-cta__bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,246,232,0.45), rgba(84,146,182,0.18) 70%, transparent 100%); border: 1px solid rgba(255,246,232,0.18); opacity: 0; animation: sd-playbook-cta-bubble 9s ease-in infinite; } .sd-playbook-cta__bubble--1 { width: 10px; height: 10px; left: 12px;  bottom: -30px; animation-delay: 0s;   animation-duration: 9s;  } .sd-playbook-cta__bubble--2 { width: 16px; height: 16px; left: 60px;  bottom: -40px; animation-delay: 1.6s; animation-duration: 11s; } .sd-playbook-cta__bubble--3 { width: 7px;  height: 7px;  left: 100px; bottom: -20px; animation-delay: 3.1s; animation-duration: 7.5s;} .sd-playbook-cta__bubble--4 { width: 12px; height: 12px; left: 140px; bottom: -50px; animation-delay: 4.3s; animation-duration: 10s; } .sd-playbook-cta__bubble--5 { width: 5px;  height: 5px;  left: 40px;  bottom: -10px; animation-delay: 5.8s; animation-duration: 8s;  } @keyframes sd-playbook-cta-bubble { 0%   { transform: translateY(0) scale(0.8); opacity: 0; } 20%  { opacity: 0.5; } 80%  { opacity: 0.35; } 100% { transform: translateY(-640px) scale(1); opacity: 0; } } .sd-playbook-cta__particles { position: absolute; inset: 0; pointer-events: none; } .sd-playbook-cta__particle { position: absolute; border-radius: 50%; background: #F6C893; box-shadow: 0 0 6px rgba(246,200,147,0.5); animation: sd-playbook-cta-drift 14s linear infinite; } .sd-playbook-cta__particle:nth-child(2n) { animation-duration: 18s; } .sd-playbook-cta__particle:nth-child(3n) { animation-duration: 22s; animation-direction: reverse; } @keyframes sd-playbook-cta-drift { 0%   { transform: translate3d(0,0,0); } 50%  { transform: translate3d(10px,-14px,0); } 100% { transform: translate3d(0,0,0); } } @media (prefers-reduced-motion: reduce) { .sd-playbook-cta__bubble, .sd-playbook-cta__particle { animation: none; opacity: 0.3; } } .sd-playbook-cta__grid { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; } @media (min-width: 900px) { .sd-playbook-cta__grid { grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: 56px; } } .sd-playbook-cta__cover-wrap { position: relative; display: flex; justify-content: center; align-items: center; padding: 16px; } .sd-playbook-cta__cover-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(84,146,182,0.35) 0%, rgba(84,146,182,0) 65%); filter: blur(50px); z-index: 0; pointer-events: none; } .sd-playbook-cta__cover { position: relative; z-index: 1; display: block; width: 100%; max-width: 400px; height: auto; border-radius: 4px; transform: perspective(1500px) rotateY(-4deg); filter: drop-shadow(0 20px 40px rgba(17, 49, 74, 0.5)) drop-shadow(0 6px 16px rgba(17, 49, 74, 0.35)); transition: transform 600ms cubic-bezier(.2,.8,.2,1); } .sd-playbook-cta__cover:hover { transform: perspective(1500px) rotateY(-2deg); } .sd-playbook-cta__cover--empty { width: 320px; height: 420px; background: linear-gradient(135deg, #11314a 0%, #11314a 100%); border: 1px solid rgba(246,200,147,0.18); } .sd-playbook-cta__body { position: relative; z-index: 1; max-width: 560px; } .sd-playbook-cta__eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #F6C893; margin: 0 0 18px; } .sd-playbook-cta__headline { font-family: 'DM Sans', system-ui, sans-serif; font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #FFF6E8; margin: 0 0 18px; } .sd-playbook-cta__italic { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-style: italic; font-weight: 400; color: #DB635D; padding: 0 0.04em; } .sd-playbook-cta__desc { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; color: rgba(255, 246, 232, 0.85); margin: 0 0 28px; } .sd-playbook-cta__form { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; } .sd-playbook-cta__row { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 560px) { .sd-playbook-cta__row { grid-template-columns: 1fr 1fr; } } .sd-playbook-cta__field { display: flex; flex-direction: column; gap: 6px; } .sd-playbook-cta__label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 200, 147, 0.85); padding-left: 2px; } .sd-playbook-cta .sd-playbook-cta__field input, .sd-playbook-cta .sd-playbook-cta__field select, .sd-playbook-cta input[type="text"], .sd-playbook-cta input[type="email"], .sd-playbook-cta select { width: 100% !important; box-sizing: border-box !important; padding: 13px 14px !important; border-radius: 6px !important; background: rgba(255, 246, 232, 0.08) !important; border: 1px solid rgba(17, 49, 74, 0.9) !important; color: #FFF6E8 !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important; line-height: 1.3 !important; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; -webkit-appearance: none; appearance: none; box-shadow: none !important; outline: none; } .sd-playbook-cta__field select { background-image: linear-gradient(45deg, transparent 50%, rgba(246,200,147,0.8) 50%), linear-gradient(135deg, rgba(246,200,147,0.8) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; cursor: pointer; } .sd-playbook-cta .sd-playbook-cta__field input::placeholder { color: rgba(255, 246, 232, 0.42) !important; } .sd-playbook-cta .sd-playbook-cta__field input:focus, .sd-playbook-cta .sd-playbook-cta__field select:focus, .sd-playbook-cta input[type="text"]:focus, .sd-playbook-cta input[type="email"]:focus, .sd-playbook-cta select:focus { outline: none !important; border-color: #DB635D !important; background: rgba(255, 246, 232, 0.12) !important; box-shadow: 0 0 0 3px rgba(219, 99, 93, 0.22) !important; } .sd-playbook-cta__field select option { background: #11314a; color: #FFF6E8; } .sd-playbook-cta button.sd-playbook-cta__submit, .sd-playbook-cta .sd-playbook-cta__submit { position: relative; width: 100% !important; padding: 15px 22px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(180deg, #DB635D 0%, #DB635D 100%) !important; color: #FFF6E8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; cursor: pointer; box-shadow: 0 8px 24px rgba(219, 99, 93, 0.25), inset 0 1px 0 rgba(255, 246, 232, 0.12) !important; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; margin-top: 6px; text-transform: none !important; letter-spacing: 0 !important; } .sd-playbook-cta button.sd-playbook-cta__submit:hover, .sd-playbook-cta .sd-playbook-cta__submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(219, 99, 93, 0.38), inset 0 1px 0 rgba(255, 246, 232, 0.18) !important; background: linear-gradient(180deg, #F2847D 0%, #DB635D 100%) !important; } .sd-playbook-cta__submit:focus-visible { outline: 3px solid rgba(246, 200, 147, 0.9); outline-offset: 3px; } .sd-playbook-cta__submit[disabled], .sd-playbook-cta__submit.is-loading { cursor: wait; opacity: 0.82; } .sd-playbook-cta__submit-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,246,232,0.25); border-top-color: #FFF6E8; margin-left: 10px; vertical-align: -3px; animation: sd-playbook-cta-spin 0.8s linear infinite; } .sd-playbook-cta__submit.is-loading .sd-playbook-cta__submit-spinner { display: inline-block; } .sd-playbook-cta__submit.is-loading .sd-playbook-cta__submit-label { opacity: 0.85; } @keyframes sd-playbook-cta-spin { to { transform: rotate(360deg); } } .sd-playbook-cta__fineprint { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.55; color: rgba(255, 246, 232, 0.6); margin: 4px 0 0; } .sd-playbook-cta__status { min-height: 1em; margin: 10px 0 0; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 246, 232, 0.8); } .sd-playbook-cta__status.is-error { color: #F2847D; } .sd-playbook-cta__success[hidden] { display: none !important; } .sd-playbook-cta__success { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px; background: rgba(255, 246, 232, 0.08); border: 1px solid rgba(246, 200, 147, 0.3); border-radius: 10px; color: #FFF6E8; margin: 4px 0 18px; } .sd-playbook-cta__success-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(246, 200, 147, 0.2); color: #F6C893; display: grid; place-items: center; margin-bottom: 2px; } .sd-playbook-cta__success-title { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700; margin: 0; } .sd-playbook-cta__success-msg { font-size: 14px; margin: 0; color: rgba(255, 246, 232, 0.85); } .sd-playbook-cta__success-msg a { color: #F6C893; text-decoration: underline; text-decoration-color: rgba(246,200,147,0.6); text-underline-offset: 2px; } .sd-playbook-cta__success-msg a:hover { color: #FFF6E8; } .sd-playbook-cta__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 22px 0 0; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 246, 232, 0.5); } .sd-playbook-cta__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(246, 200, 147, 0.4); } @media (max-width: 899px) { .sd-playbook-cta { padding: 56px clamp(20px, 6vw, 40px); margin-top: 40px; margin-bottom: 48px; } .sd-playbook-cta__cover { transform: none; max-width: 280px; } .sd-playbook-cta__cover-wrap { order: -1; } .sd-playbook-cta__kelp { width: 140px; bottom: -30px; } .sd-playbook-cta__bubbles { width: 120px; } } .sd-insight__callout[data-resource-id="4327"] { display: none !important; } .sd-insight__playbook-banner { position: relative; display: flex; align-items: center; gap: 28px; width: auto; max-width: none; margin: 48px 50px; padding: 22px 28px 22px 32px; min-height: 160px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #11314a 0%, #11314a 50%, #235C81 100%); box-shadow: 0 10px 30px -12px rgba(10, 25, 48, 0.45), 0 2px 6px -1px rgba(17, 49, 74, 0.25); isolation: isolate; } .sd-insight__playbook-banner-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(219, 99, 93, 0) 0%, #DB635D 25%, #DB635D 75%, rgba(219, 99, 93, 0) 100%); z-index: 2; pointer-events: none; } .sd-insight__playbook-banner-caustic { position: absolute; top: -40%; left: -6%; width: 300px; height: 300px; background: radial-gradient(circle at 35% 45%, rgba(246, 200, 147, 0.18) 0%, rgba(246, 200, 147, 0.08) 35%, transparent 60%); filter: blur(20px); pointer-events: none; z-index: 1; } .sd-insight__playbook-banner-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .sd-insight__playbook-banner-particle { position: absolute; background: #FFF6E8; border-radius: 50%; opacity: 0.25; animation: sd-playbook-banner-drift 7s ease-in-out infinite; will-change: transform, opacity; } .sd-insight__playbook-banner-particle:nth-child(2) { animation-delay: -2.3s; animation-duration: 9s; } .sd-insight__playbook-banner-particle:nth-child(3) { animation-delay: -4.1s; animation-duration: 11s; } @keyframes sd-playbook-banner-drift { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; } 50%      { transform: translateY(-6px) translateX(-3px); opacity: 0.35; } } .sd-insight__playbook-banner-cover-wrap { position: relative; flex: 0 0 95px; width: 95px; height: 120px; display: block; z-index: 3; text-decoration: none; transform: perspective(1200px) rotateY(-8deg); transform-origin: center center; transition: transform 300ms ease; } .sd-insight__playbook-banner-cover-wrap:hover { transform: perspective(1200px) rotateY(-4deg) translateY(-2px); } .sd-insight__playbook-banner-cover-glow { position: absolute; inset: -8px; background: radial-gradient(circle at 50% 55%, rgba(219, 99, 93, 0.35) 0%, rgba(219, 99, 93, 0.12) 40%, transparent 70%); filter: blur(10px); z-index: -1; pointer-events: none; } .sd-insight__playbook-banner-cover { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 20px -6px rgba(17, 49, 74, 0.5), 0 2px 4px -1px rgba(17, 49, 74, 0.35); border: 1px solid rgba(255, 246, 232, 0.08); } .sd-insight__playbook-banner-cover--empty { background: linear-gradient(135deg, #11314a, #235C81); } .sd-insight__playbook-banner-body { position: relative; flex: 1 1 auto; min-width: 0; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; } .sd-insight__playbook-banner-eyebrow { font-family: 'Source Code Pro', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #F6C893; margin: 0; line-height: 1.2; } .sd-insight__playbook-banner-headline { font-family: 'DM Sans', system-ui, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #FFF6E8; margin: 0; } .sd-insight__playbook-banner-italic { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-style: italic; font-weight: 500; color: #DB635D; padding: 0 2px; } .sd-insight__playbook-banner-sub { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; color: rgba(255, 246, 232, 0.75); margin: 0; } .sd-insight__playbook-banner-cta { position: relative; flex: 0 0 auto; z-index: 3; display: flex; align-items: center; padding-left: 8px; } .sd-insight__playbook-banner-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 190px; padding: 13px 22px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: #FFF6E8 !important; background: #DB635D; border: 0 !important; border-bottom: 0 !important; border-radius: 999px; text-decoration: none !important; text-decoration-line: none !important; text-shadow: none; box-shadow: 0 6px 18px -4px rgba(219, 99, 93, 0.55), 0 1px 3px rgba(10, 25, 48, 0.3), inset 0 1px 0 rgba(255, 246, 232, 0.18); transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; cursor: pointer; white-space: nowrap; } .sd-insight__playbook-banner-btn, .sd-insight__playbook-banner-btn:link, .sd-insight__playbook-banner-btn:visited, .sd-insight__playbook-banner-btn:hover, .sd-insight__playbook-banner-btn:focus, .sd-insight__playbook-banner-btn:active { text-decoration: none !important; border-bottom: 0 !important; } .sd-insight__playbook-banner-btn > span, .sd-insight__playbook-banner-btn > span:hover { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; } .sd-insight__playbook-banner-btn:hover, .sd-insight__playbook-banner-btn:focus { background: #F2847D; transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(219, 99, 93, 0.65), 0 2px 4px rgba(10, 25, 48, 0.35), inset 0 1px 0 rgba(255, 246, 232, 0.25); color: #FFF6E8 !important; } .sd-insight__playbook-banner-btn:active { transform: translateY(0); } .sd-insight__playbook-banner-btn svg { transition: transform 200ms ease; } .sd-insight__playbook-banner-btn:hover svg { transform: translateX(3px); } @media (max-width: 768px) { .sd-insight__playbook-banner { flex-wrap: wrap; gap: 14px 16px; padding: 18px 18px 18px 22px; min-height: 0; margin: 36px 20px; } .sd-insight__playbook-banner-cover-wrap { flex: 0 0 60px; width: 60px; height: 75px; } .sd-insight__playbook-banner-body { flex: 1 1 200px; padding-right: 0; gap: 4px; } .sd-insight__playbook-banner-eyebrow { font-size: 9px; } .sd-insight__playbook-banner-headline { font-size: 17px; } .sd-insight__playbook-banner-sub { font-size: 12px; line-height: 1.4; } .sd-insight__playbook-banner-cta { flex: 1 0 100%; padding-left: 0; padding-top: 4px; } .sd-insight__playbook-banner-btn { width: 100%; min-width: 0; padding: 14px 20px; } } @media (prefers-reduced-motion: reduce) { .sd-insight__playbook-banner-particle { animation: none; } .sd-insight__playbook-banner-cover-wrap { transition: none; } } .sd-playbook-popup { position: fixed; bottom: 24px; left: 24px; width: 320px; z-index: 80; background: linear-gradient(135deg, #11314a 0%, #11314a 50%, #235C81 100%); border-radius: 20px; padding: 18px; padding-left: 22px; box-shadow: 0 16px 40px -8px rgba(17, 49, 74, 0.5), 0 0 24px rgba(84, 146, 182, 0.2); color: var(--sd-cream, #FFF6E8); display: flex; gap: 14px; align-items: center; transform: translateX(-120%); opacity: 0; transition: transform 400ms ease-out, opacity 400ms ease-out; pointer-events: none; will-change: transform, opacity; } .sd-playbook-popup.is-visible { transform: translateX(0); opacity: 1; pointer-events: auto; } .sd-playbook-popup::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px; background: var(--sd-coral, #DB635D); border-radius: 2px; } .sd-playbook-popup__cover-wrap { flex-shrink: 0; position: relative; width: 60px; height: 80px; transform: perspective(800px) rotateY(-6deg); filter: drop-shadow(0 4px 8px rgba(17, 49, 74, 0.4)); } .sd-playbook-popup__cover-wrap::after { content: ""; position: absolute; inset: -6px -10px -6px -6px; background: radial-gradient(ellipse at center, rgba(219, 99, 93, 0.35) 0%, rgba(219, 99, 93, 0) 70%); z-index: -1; filter: blur(6px); } .sd-playbook-popup__cover { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; } .sd-playbook-popup__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .sd-playbook-popup__eyebrow { font-family: 'Source Code Pro', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sd-sand, #F6C893); font-weight: 600; margin: 0; } .sd-playbook-popup__headline { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--sd-cream, #FFF6E8); margin: 0; } .sd-playbook-popup__italic { font-family: 'Bodoni Moda', serif; font-style: italic; color: var(--sd-coral, #DB635D); font-weight: 500; } .sd-playbook-popup__btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px; background: var(--sd-coral, #DB635D); color: #FFF6E8; text-decoration: none; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; line-height: 1; align-self: flex-start; margin-top: 4px; transition: background 0.2s ease, transform 0.2s ease; } .sd-playbook-popup__btn:hover { background: #DB635D; transform: translateX(1px); } .sd-playbook-popup__close { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 246, 232, 0.3); background: rgba(255, 246, 232, 0.05); color: var(--sd-cream, #FFF6E8); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; padding: 0; opacity: 0.6; transition: opacity 0.2s ease, background 0.2s ease; font-family: inherit; } .sd-playbook-popup__close:hover { opacity: 1; background: rgba(255, 246, 232, 0.12); } @media (max-width: 640px) { .sd-playbook-popup { display: none !important; } } .sd-playbook-cta__returning { display: block; } .sd-playbook-cta__returning-greeting { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.45; color: rgba(255, 246, 232, 0.78); margin: 0 0 14px; letter-spacing: 0.01em; } .sd-playbook-cta__returning-greeting strong { color: var(--sd-cream, #FFF6E8); font-weight: 600; } .sd-playbook-cta__returning-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 260px; padding: 14px 26px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.005em; color: #FFF6E8 !important; background: #DB635D; border: 0 !important; border-radius: 999px; text-decoration: none !important; box-shadow: 0 8px 22px -4px rgba(219, 99, 93, 0.6), inset 0 1px 0 rgba(255, 246, 232, 0.2); transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; cursor: pointer; white-space: nowrap; } .sd-playbook-cta__returning-btn:hover, .sd-playbook-cta__returning-btn:focus { background: #F2847D; transform: translateY(-1px); color: #FFF6E8 !important; text-decoration: none !important; } .sd-playbook-cta__returning-fine { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.5; color: rgba(255, 246, 232, 0.58); margin: 14px 0 0; max-width: 360px; } .sd-send-toast { position: fixed; bottom: 24px; right: 24px; max-width: 360px; background: #11314a;  color: #FFF6E8; padding: 14px 18px; border-radius: 12px; border-left: 3px solid #DB635D; box-shadow: 0 12px 32px -8px rgba(17, 49, 74, 0.5); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.4; z-index: 200; transform: translateY(24px); opacity: 0; transition: transform 400ms cubic-bezier(.2,.8,.2,1), opacity 400ms cubic-bezier(.2,.8,.2,1); pointer-events: auto; } .sd-send-toast.is-visible { transform: translateY(0); opacity: 1; } .sd-send-toast strong { font-weight: 600; } @media (max-width: 480px) { .sd-send-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } } .sd-insight__playbook-banner + .sd-insight__divider-slot { display: none !important; } .sd-insight__playbook-banner + .sd-insight__divider-slot + .sd-insight__section { padding-top: clamp(56px, 7vw, 96px) !important; } .sd-insight__section--compare-cto .sd-insight__section-card p, .sd-insight__section--compare-cto .sd-insight__section-card ul, .sd-insight__section--compare-cto .sd-insight__section-card ol, .sd-insight__section--compare-cto .sd-insight__section-card .sd-insight__inline-fig { max-width: none !important; } .sd-insight__section--what-we-ship .sd-insight__section-card p, .sd-insight__section--what-we-ship .sd-insight__section-card ul, .sd-insight__section--what-we-ship .sd-insight__section-card ol, .sd-insight__section--what-we-ship .sd-insight__section-card .sd-insight__inline-fig { max-width: none !important; } .sd-insight__section--productized-def.sd-insight__section--cream .sd-insight__section-card { background: var(--sd-cream); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15); border: 1px solid rgba(84, 146, 182, 0.15); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--productized-def.sd-insight__section--cream .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__section--productized-def .sd-insight__section-card p, .sd-insight__section--productized-def .sd-insight__section-card ul, .sd-insight__section--productized-def .sd-insight__section-card ol, .sd-insight__section--productized-def .sd-insight__section-card .sd-insight__inline-fig { max-width: none !important; } .sd-insight__section--productized-def.sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--productized-def.sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--productized-def.sd-insight__section--deep .sd-insight__section-card { background: rgba(255, 246, 232, 0.04); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.35); border: 1px solid rgba(246, 200, 147, 0.22); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--productized-def.sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--productized-def.sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--productized-def.sd-insight__section--deep .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__section--sow-seven-sections.sd-insight__section--cream .sd-insight__section-card, .sd-insight__section--sow-seven-sections.sd-insight__section--warm .sd-insight__section-card { background: var(--sd-cream); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15); border: 1px solid rgba(84, 146, 182, 0.15); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--sow-seven-sections.sd-insight__section--cream .sd-insight__section-card, .sd-insight__section--sow-seven-sections.sd-insight__section--warm .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__section--sow-seven-sections .sd-insight__section-card p, .sd-insight__section--sow-seven-sections .sd-insight__section-card ul, .sd-insight__section--sow-seven-sections .sd-insight__section-card ol, .sd-insight__section--sow-seven-sections .sd-insight__section-card .sd-insight__inline-fig { max-width: none !important; } .sd-insight__section--sow-seven-sections.sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--sow-seven-sections.sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--sow-seven-sections.sd-insight__section--deep .sd-insight__section-card { background: rgba(255, 246, 232, 0.04); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.35); border: 1px solid rgba(246, 200, 147, 0.22); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--sow-seven-sections.sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--sow-seven-sections.sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--sow-seven-sections.sd-insight__section--deep .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__section--tool-verdict-matrix.sd-insight__section--cream .sd-insight__section-card, .sd-insight__section--tool-verdict-matrix.sd-insight__section--warm .sd-insight__section-card { background: var(--sd-cream); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.15); border: 1px solid rgba(84, 146, 182, 0.15); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--tool-verdict-matrix.sd-insight__section--cream .sd-insight__section-card, .sd-insight__section--tool-verdict-matrix.sd-insight__section--warm .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__section--tool-verdict-matrix .sd-insight__section-card p, .sd-insight__section--tool-verdict-matrix .sd-insight__section-card ul, .sd-insight__section--tool-verdict-matrix .sd-insight__section-card ol, .sd-insight__section--tool-verdict-matrix .sd-insight__section-card table, .sd-insight__section--tool-verdict-matrix .sd-insight__section-card .sd-insight__inline-fig { max-width: none !important; } .sd-insight__section--tool-verdict-matrix.sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--tool-verdict-matrix.sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--tool-verdict-matrix.sd-insight__section--deep .sd-insight__section-card { background: rgba(255, 246, 232, 0.04); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 48px); box-shadow: 0 12px 40px -12px rgba(17, 49, 74, 0.35); border: 1px solid rgba(246, 200, 147, 0.22); max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { .sd-insight__section--tool-verdict-matrix.sd-insight__section--darkblue .sd-insight__section-card, .sd-insight__section--tool-verdict-matrix.sd-insight__section--navy .sd-insight__section-card, .sd-insight__section--tool-verdict-matrix.sd-insight__section--deep .sd-insight__section-card { border-radius: 14px; padding: 28px 24px; } } .sd-insight__red-flags { max-width: var(--sd-maxw); margin: 0 auto; } .sd-insight__red-flags-head { margin-bottom: 36px; } .sd-insight__red-flags-head .sd-insight__eyebrow--sand { color: var(--sd-sand); margin-bottom: 14px; } .sd-insight__red-flags-head .sd-insight__eyebrow-dot--sand { background: var(--sd-sand); } .sd-insight__red-flags-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--sd-cream); max-width: 820px; margin: 0; } .sd-insight__red-flags-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; list-style: none; padding: 0; margin: 0; } @media (max-width: 820px) { .sd-insight__red-flags-grid { grid-template-columns: 1fr; } } .sd-insight__red-flag { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; background: rgba(13, 31, 46, 0.45); border: 1px solid rgba(246, 200, 147, 0.18); border-top: 2px solid rgba(219, 99, 93, 0.85); border-radius: 12px; padding: 24px 26px; transition: transform .25s var(--sd-ease), border-color .25s var(--sd-ease), box-shadow .25s var(--sd-ease); } .sd-insight__red-flag:hover { transform: translateY(-2px); border-color: rgba(246, 200, 147, 0.32); border-top-color: rgba(219, 99, 93, 1); box-shadow: 0 18px 40px -20px rgba(219, 99, 93, 0.45); } .sd-insight__red-flag-icon { display: grid; place-items: start center; width: 44px; height: 44px; flex-shrink: 0; } .sd-insight__red-flag-icon svg { width: 40px; height: 40px; display: block; filter: drop-shadow(0 2px 6px rgba(219, 99, 93, 0.35)); } .sd-insight__red-flag-content { min-width: 0; } .sd-insight__red-flag-label { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sd-cream); margin: 0 0 8px; letter-spacing: -0.01em; } .sd-insight__red-flag-body { color: rgba(255, 246, 232, 0.78); font-size: 15px; line-height: 1.6; margin: 0; } .sd-insight__red-flags--inline { margin: 32px 0 8px; } .sd-insight__red-flags--inline .sd-insight__red-flag { background: rgba(13, 31, 46, 0.92); border: 1px solid rgba(13, 31, 46, 0.92); border-top: 2px solid rgba(219, 99, 93, 0.95); box-shadow: 0 10px 26px -18px rgba(13, 31, 46, 0.45); } .sd-insight__red-flags--inline .sd-insight__red-flag:hover { background: rgba(13, 31, 46, 0.98); border-color: rgba(13, 31, 46, 0.98); border-top-color: rgba(219, 99, 93, 1); } .sd-insight-figure.sd-insight-figure--inline-callout { margin: 20px auto !important; max-width: 420px !important; background: var(--sd-cream); padding: 0; border: 0; box-shadow: none; } .sd-insight-figure.sd-insight-figure--inline-callout img { width: 100%; height: auto; display: block; cursor: default; transition: none !important; transform: none !important; box-shadow: none !important; } .sd-insight-figure.sd-insight-figure--inline-callout img:hover { transform: none !important; box-shadow: none !important; filter: none !important; } .sd-insight-callout-float { max-width: 180px; margin: 8px 0 16px 0; background: transparent; padding: 0; border: 0; box-shadow: none; border-radius: 20px; overflow: hidden; } .sd-insight-callout-float img { width: 100%; height: auto; display: block; cursor: default; border-radius: 20px; overflow: hidden; transition: none !important; transform: none !important; box-shadow: none !important; } .sd-insight-callout-float img:hover { transform: none !important; box-shadow: none !important; filter: none !important; } .sd-insight-callout-float--right { float: right; margin-left: 22px; clear: right; } .sd-insight-callout-float--left { float: left; margin-right: 22px; clear: left; } @media (max-width: 768px) { .sd-insight-callout-float { float: none !important; max-width: 100%; margin: 16px auto !important; } } .sd-insight__share { max-width: var(--sd-maxw); margin: 28px auto 8px; padding: 0 clamp(20px, 4vw, 48px); display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; } .sd-insight__share-label { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-navy); opacity: 0.72; } .sd-insight__share-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; } .sd-insight__share-list > li { margin: 0; padding: 0; display: block; list-style: none; } .sd-insight__share-list > li::before, .sd-insight__share-list > li::marker { content: none; display: none; } .sd-insight__share-btn { --sd-share-size: 42px; display: inline-flex; align-items: center; justify-content: center; width: var(--sd-share-size); height: var(--sd-share-size); border-radius: 50%; background: var(--sd-cream); border: 1px solid var(--sd-navy); color: var(--sd-navy); text-decoration: none; cursor: pointer; padding: 0; position: relative; transition: background 300ms var(--sd-ease), color 300ms var(--sd-ease), border-color 300ms var(--sd-ease), transform 300ms var(--sd-ease), box-shadow 300ms var(--sd-ease); box-shadow: 0 1px 2px rgba(13,31,46,0.06); } .sd-insight__share-btn:hover, .sd-insight__share-btn:focus-visible { background: var(--sd-coral); color: var(--sd-cream); border-color: var(--sd-coral); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(219,99,93,0.55); outline: none; } .sd-insight__share-btn:focus-visible { box-shadow: 0 0 0 3px rgba(219,99,93,0.32); } .sd-insight__share-btn svg { display: block; flex: none; pointer-events: none; } .sd-insight__share-btn--copy .sd-insight__share-icon-check, .sd-insight__share-btn--copy .sd-insight__share-copied { display: none; } .sd-insight__share-btn--copy.is-copied { background: var(--sd-navy); color: var(--sd-cream); border-color: var(--sd-navy); } .sd-insight__share-btn--copy.is-copied .sd-insight__share-icon-default { display: none; } .sd-insight__share-btn--copy.is-copied .sd-insight__share-icon-check { display: block; } .sd-insight__share-btn--copy .sd-insight__share-copied { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--sd-navy); color: var(--sd-cream); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 200ms var(--sd-ease), transform 200ms var(--sd-ease); } .sd-insight__share-btn--copy.is-copied .sd-insight__share-copied { display: block; opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 560px) { .sd-insight__share { gap: 12px; margin-top: 20px; } .sd-insight__share-btn { --sd-share-size: 38px; } .sd-insight__share-btn svg { width: 16px; height: 16px; } } .sd-insight__section--share-band { padding-top: clamp(14px, 2vw, 22px); padding-bottom: 0; position: relative; z-index: 4; } .sd-insight__section--share-band .sd-insight__section-inner { padding-top: 0; padding-bottom: 0; position: relative; z-index: 4; } .sd-insight__section--share-band .sd-insight__share { max-width: none; margin: 0; padding: 0; background: transparent; position: relative; z-index: 4; } @media (max-width: 560px) { .sd-insight__section--share-band { padding-top: 14px; } .sd-insight__section--share-band .sd-insight__share { gap: 12px; } } .sd-insight__section--red-flags { position: relative; overflow: hidden; } .sd-insight__section--red-flags::before { content: ''; position: absolute; inset: 0; background-image: url('https://scubadev.com/data/uploads/sites/4/2026/04/cell-12-red-flag-warning.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.20; z-index: 0; pointer-events: none; } .sd-insight__section--red-flags > .sd-insight__section-inner { position: relative; z-index: 1; } .sd-insight__steps:has(.sd-agent-list) { background: transparent; color: var(--sd-navy-deep); padding: 0; margin: clamp(28px, 3vw, 40px) 0 clamp(36px, 4vw, 48px); box-shadow: none; border-radius: 0; } .sd-insight__steps:has(.sd-agent-list)::before { display: none; } .sd-agent-list, ol.sd-agent-list.sd-insight__steps-ol { list-style: none; counter-reset: none; margin: 0; padding: 0; position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; } .sd-agent-list::before, ol.sd-agent-list.sd-insight__steps-ol::before { display: none !important; content: none !important; } .sd-agent-list > li, ol.sd-agent-list.sd-insight__steps-ol > li { list-style: none; margin: 0; padding: 0; border: 0; min-height: 0; font-size: inherit; line-height: inherit; color: inherit; background: none; } .sd-agent-list > li::before, ol.sd-agent-list.sd-insight__steps-ol > li::before, .sd-agent-list > li::after, ol.sd-agent-list.sd-insight__steps-ol > li::after { display: none !important; content: none !important; background: none !important; -webkit-text-fill-color: initial; } @media (max-width: 720px) { .sd-agent-list, ol.sd-agent-list.sd-insight__steps-ol { grid-template-columns: 1fr; } } .sd-agent-list__group-row { grid-column: 1 / -1; margin: 14px 0 4px; padding: 0; } .sd-agent-list__group-row:first-child { margin-top: 0; } .sd-agent-list__group-label { display: inline-block; font-family: 'Source Code Pro', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-cream); padding: 6px 12px; background: rgba(255, 246, 232, 0.10); border-radius: 999px; border: 1px solid rgba(255, 246, 232, 0.28); } .sd-insight__section--cream .sd-agent-list__group-label, .sd-insight__section--warm  .sd-agent-list__group-label { color: var(--sd-navy-2); background: rgba(84, 146, 182, 0.10); border-color: rgba(84, 146, 182, 0.22); } .sd-agent-list__row { list-style: none; margin: 0; padding: 0; } .sd-agent-list__item { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--sd-cream); border: 1px solid var(--sd-border-soft); border-radius: 12px; color: var(--sd-navy-deep); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; transition: background 180ms var(--sd-ease), border-color 180ms var(--sd-ease), transform 180ms var(--sd-ease), box-shadow 180ms var(--sd-ease); box-shadow: 0 1px 2px rgba(13,31,46,0.04); } .sd-agent-list__item:hover, .sd-agent-list__item:focus-visible { background: #FFF6E8; border-color: var(--sd-coral); color: var(--sd-coral); transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(219,99,93,0.55), 0 1px 2px rgba(13,31,46,0.06); outline: none; } .sd-agent-list__item:focus-visible { outline: 2px solid var(--sd-coral); outline-offset: 2px; } .sd-agent-list__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sd-navy); color: var(--sd-cream); font-family: 'Source Code Pro', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; transition: background 180ms var(--sd-ease); } .sd-agent-list__item:hover .sd-agent-list__num, .sd-agent-list__item:focus-visible .sd-agent-list__num { background: var(--sd-coral); } .sd-agent-list__name { flex: 1 1 auto; min-width: 0; } .sd-agent-list__ship { flex: none; font-family: 'Source Code Pro', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sd-coral); padding: 3px 8px; background: rgba(219,99,93,0.10); border: 1px solid rgba(219,99,93,0.30); border-radius: 999px; white-space: nowrap; } .sd-agent-list__chev { flex: none; font-size: 22px; line-height: 1; color: var(--sd-navy); opacity: 0.45; transition: transform 180ms var(--sd-ease), opacity 180ms var(--sd-ease), color 180ms var(--sd-ease); } .sd-agent-list__item:hover .sd-agent-list__chev, .sd-agent-list__item:focus-visible .sd-agent-list__chev { transform: translateX(3px); opacity: 1; color: var(--sd-coral); } .sd-agent-modal { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100vw - 32px)); max-width: 640px; max-height: calc(100vh - 48px); padding: 0; border: none; border-radius: 20px; background: var(--sd-cream); color: var(--sd-navy-deep); box-shadow: 0 40px 80px -30px rgba(13,31,46,0.55), 0 4px 12px -4px rgba(13,31,46,0.18); overflow: hidden; } .sd-agent-modal::backdrop { background: rgba(13, 31, 46, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sd-agent-modal[open] { animation: sd-agent-modal-in 200ms var(--sd-ease); } @keyframes sd-agent-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to   { opacity: 1; transform: translateY(0) scale(1); } } .sd-agent-modal__close { position: absolute; top: 14px; right: 14px; z-index: 5; appearance: none; -webkit-appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sd-border); background: rgba(255, 246, 232, 0.85); color: var(--sd-navy); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 160ms var(--sd-ease), color 160ms var(--sd-ease), transform 160ms var(--sd-ease); } .sd-agent-modal__close:hover, .sd-agent-modal__close:focus-visible { background: var(--sd-coral); color: var(--sd-cream); border-color: var(--sd-coral); outline: none; transform: scale(1.05); } .sd-agent-modal__inner { padding: clamp(28px, 3.4vw, 40px); overflow-y: auto; max-height: calc(100vh - 48px); color: var(--sd-navy-deep); } .sd-agent-modal, .sd-agent-modal * { color: inherit; } .sd-agent-modal .sd-agent-modal__inner h1, .sd-agent-modal .sd-agent-modal__inner h2, .sd-agent-modal .sd-agent-modal__inner h3, .sd-agent-modal .sd-agent-modal__inner h4, .sd-agent-modal .sd-agent-modal__inner h5 { color: var(--sd-navy-deep); } .sd-agent-modal .sd-agent-modal__inner p, .sd-agent-modal .sd-agent-modal__inner li, .sd-agent-modal .sd-agent-modal__inner dd, .sd-agent-modal .sd-agent-modal__inner dt { color: var(--sd-navy-deep); } .sd-agent-modal .sd-agent-modal__inner a { color: var(--sd-coral); } .sd-agent-modal .sd-insight__pullquote p { color: var(--sd-navy-deep) !important; } .sd-agent-modal__eyebrow { display: inline-block; font-family: 'Source Code Pro', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-coral); margin: 0 0 10px; } .sd-agent-modal h3.sd-agent-modal__title, .sd-agent-modal .sd-agent-modal__title { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-size: clamp(24px, 3vw, 30px); font-weight: 700; line-height: 1.22; color: var(--sd-navy-deep); margin: 0 0 12px; text-transform: none; letter-spacing: -0.01em; } .sd-agent-modal .sd-agent-modal__summary { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-style: normal; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--sd-navy-2); margin: 0 0 18px; font-weight: 500; } .sd-agent-modal__figure { margin: 0 0 18px; border-radius: 12px; overflow: hidden; background: #11314a; } .sd-agent-modal__figure img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; } .sd-agent-modal__body { font-size: 15px; line-height: 1.65; color: var(--sd-navy-deep); } .sd-agent-modal__body p { margin: 0 0 12px; } .sd-agent-modal__body p:last-child { margin-bottom: 0; } .sd-agent-modal__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 18px 0 0; padding: 14px; background: rgba(84,146,182,0.08); border: 1px solid rgba(84,146,182,0.18); border-radius: 12px; } @media (max-width: 520px) { .sd-agent-modal__meta { grid-template-columns: 1fr; } } .sd-agent-modal__meta-row { margin: 0; } .sd-agent-modal__meta dt { display: block; font-family: 'Source Code Pro', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sd-navy-2); margin: 0 0 4px; opacity: 0.78; } .sd-agent-modal__meta dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--sd-navy-deep); line-height: 1.35; } .sd-agent-modal__shipfirst.is-yes dd { color: var(--sd-coral); font-weight: 600; } .sd-agent-modal .sd-insight__pullquote { margin: 22px 0 0; } .sd-agent-modal__cta { margin: 22px 0 0; text-align: right; font-size: 14px; } .sd-agent-modal__cta a { color: var(--sd-coral); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .sd-agent-modal__cta a:hover { color: var(--sd-navy-2); } @media (max-width: 600px) { .sd-agent-modal { width: calc(100vw - 16px); max-height: calc(100vh - 24px); border-radius: 14px; } .sd-agent-modal__inner { padding: 24px 20px; max-height: calc(100vh - 24px); } } html.sd-modal-open, html.sd-modal-open body { overflow: hidden; } .sd-insight__section--group-banner { position: relative; isolation: isolate; background-color: var(--sd-navy); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: clamp(110px, 13vw, 180px) 0; overflow: hidden; } .sd-insight__section--group-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 31, 46, 0.55) 0%, rgba(17, 49, 74, 0.42) 50%, rgba(13, 31, 46, 0.55) 100%); z-index: 1; pointer-events: none; } .sd-insight__section--group-banner::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(70px, 10vw, 150px); background: var(--sd-cream); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; transform: scaleY(-1); z-index: 2; pointer-events: none; } .sd-insight__group-banner-wave-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 10vw, 150px); background: var(--sd-cream); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'><path style='opacity:.1' d='M 1014 264 v 122 h -808 l -172 -86 s 310.42 -22.84 402 -79 c 106 -65 154 -61 268 -12 c 107 46 195.11 5.94 275 137 z'/><path style='opacity:.12' d='M -302 55 s 235.27 208.25 352 159 c 128 -54 233 -98 303 -73 c 92.68 33.1 181.28 115.19 235 108 c 104.9 -14 176.52 -173.06 267 -118 c 85.61 52.09 145 123 145 123 v 74 l -1306 10 z'/><path style='opacity:.18' d='M -286 255 s 214 -103 338 -129 s 203 29 384 101 c 145.57 57.91 178.7 50.79 272 0 c 79 -43 301 -224 385 -63 c 53 101.63 -62 129 -62 129 l -107 84 l -1212 12 z'/><path style='opacity:.33' d='M -24 69 s 299.68 301.66 413 245 c 8 -4 233 2 284 42 c 17.47 13.7 172 -132 217 -174 c 54.8 -51.15 128 -90 188 -39 c 76.12 64.7 118 99 118 99 l -12 132 l -1212 12 z'/><path d='M -12 201 s 70 83 194 57 s 160.29 -36.77 274 6 c 109 41 184.82 24.36 265 -15 c 55 -27 116.5 -57.69 214 4 c 49 31 95 26 95 26 l -6 151 l -1036 10 z'/></svg>"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom center; mask-position: bottom center; z-index: 2; pointer-events: none; } .sd-insight__section--group-banner > .sd-insight__section-inner { position: relative; z-index: 3; text-align: center; max-width: 980px; padding: 0 24px; margin: 0 auto; } .sd-insight__section--group-banner .sd-insight__group-eyebrow, p.sd-insight__group-eyebrow { display: inline-block; font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sd-cream); background: rgba(255, 246, 232, 0.14); border: 1px solid rgba(255, 246, 232, 0.34); border-radius: 999px; padding: 7px 14px; margin: 0 0 18px; max-width: none; font-size: 12px; line-height: 1.2; text-shadow: 0 1px 6px rgba(13, 31, 46, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sd-insight__section--group-banner .sd-insight__group-title, h2.sd-insight__group-title { font-family: "DM Sans", -apple-system, system-ui, sans-serif; font-size: clamp(36px, 5.2vw, 60px); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--sd-cream); margin: 0 0 14px; text-shadow: 0 2px 18px rgba(13, 31, 46, 0.65), 0 0 32px rgba(13, 31, 46, 0.35); } .sd-insight__section--group-banner .sd-insight__group-sub, p.sd-insight__group-sub { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: rgba(255, 246, 232, 0.92); max-width: 620px; margin: 0 auto; text-shadow: 0 1px 8px rgba(13, 31, 46, 0.55); } @media (max-width: 720px) { .sd-insight__section--group-banner { padding: clamp(90px, 18vw, 130px) 0; background-position: center; } .sd-insight__group-title { font-size: clamp(30px, 8vw, 42px); } } .sd-insight__section--group-banner + .sd-insight__section { padding-top: clamp(56px, 7vw, 96px); } .sd-agent-inline-group { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); margin: clamp(28px, 3vw, 44px) auto 0; max-width: 820px; padding: 0 clamp(8px, 2vw, 16px); } .sd-agent-inline { position: relative; background: var(--sd-cream); border: 1px solid var(--sd-border-soft, rgba(17, 49, 74, 0.10)); border-radius: 16px; padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px); color: var(--sd-navy-deep); box-shadow: 0 1px 2px rgba(13, 31, 46, 0.04), 0 12px 28px -22px rgba(13, 31, 46, 0.18); transition: border-color 200ms var(--sd-ease, cubic-bezier(.2,.7,.2,1)), box-shadow 200ms var(--sd-ease, cubic-bezier(.2,.7,.2,1)), transform 200ms var(--sd-ease, cubic-bezier(.2,.7,.2,1)); } .sd-agent-inline:hover { border-color: rgba(219, 99, 93, 0.30); box-shadow: 0 1px 2px rgba(13, 31, 46, 0.04), 0 18px 36px -20px rgba(219, 99, 93, 0.20); transform: translateY(-1px); } .sd-insight__section--cream .sd-agent-inline, .sd-insight__section--warm  .sd-agent-inline { background: #FFF6E8; } .sd-insight__section--darkblue .sd-agent-inline, .sd-insight__section--navy     .sd-agent-inline, .sd-insight__section--deep     .sd-agent-inline { background: var(--sd-cream); border-color: rgba(255, 246, 232, 0.14); } .sd-agent-inline__head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .sd-agent-inline__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sd-navy); color: var(--sd-cream); font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; flex: none; } .sd-agent-inline__shipbadge { display: inline-block; font-family: 'Source Code Pro', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-coral); padding: 4px 10px; background: rgba(219, 99, 93, 0.10); border: 1px solid rgba(219, 99, 93, 0.30); border-radius: 999px; white-space: nowrap; } .sd-agent-inline__title { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.22; color: var(--sd-navy-deep); margin: 6px 0 10px; letter-spacing: -0.01em; } .sd-agent-inline__summary { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-style: normal; font-size: clamp(15px, 1.55vw, 17px); line-height: 1.55; color: var(--sd-navy-2, #5492B6); margin: 0 0 16px; font-weight: 500; } .sd-agent-inline__summary em, .sd-insight__section-card .sd-agent-inline .sd-agent-inline__summary em, .sd-insight__section-inner .sd-agent-inline .sd-agent-inline__summary em, .sd-insight__section-card .sd-agent-inline em, .sd-insight__section-inner .sd-agent-inline em { font-family: 'DM Sans', 'Inter', system-ui, sans-serif !important; font-style: normal !important; font-weight: 600 !important; color: var(--sd-navy-deep) !important; } .sd-agent-inline__body { font-size: 15.5px; line-height: 1.65; color: var(--sd-navy-deep); } .sd-agent-inline__body p { margin: 0 0 12px; } .sd-agent-inline__body p:last-child { margin-bottom: 0; } .sd-agent-inline__body strong { color: var(--sd-navy-deep); font-weight: 700; } .sd-agent-inline__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 14px 16px; background: rgba(84, 146, 182, 0.08); border: 1px solid rgba(84, 146, 182, 0.16); border-radius: 10px; } .sd-agent-inline__meta-row { margin: 0; } .sd-agent-inline__meta dt { display: block; font-family: 'Source Code Pro', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--sd-navy-2); margin: 0 0 4px; opacity: 0.78; } .sd-agent-inline__meta dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--sd-navy-deep); line-height: 1.35; } .sd-agent-inline__cta { margin: 18px 0 0; text-align: right; } .sd-agent-inline__readfull { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 6px 0 4px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--sd-coral); cursor: pointer; border-bottom: 1px solid currentColor; letter-spacing: 0.01em; transition: color 160ms var(--sd-ease, ease), letter-spacing 200ms var(--sd-ease, ease); } .sd-agent-inline__readfull:hover, .sd-agent-inline__readfull:focus-visible { color: var(--sd-navy-2); outline: none; letter-spacing: 0.025em; } .sd-agent-inline__readfull:focus-visible { outline: 2px solid var(--sd-coral); outline-offset: 4px; border-bottom-color: transparent; } @media (max-width: 600px) { .sd-agent-inline { padding: 22px 18px; border-radius: 14px; } .sd-agent-inline__title { font-size: 22px; } .sd-agent-inline__meta { grid-template-columns: 1fr; padding: 12px 14px; } } .sd-agent-modal--iframe { width: min(1100px, calc(100vw - 32px)); max-width: 1100px; height: calc(100vh - 48px); max-height: calc(100vh - 48px); padding: 0; background: var(--sd-cream); border-radius: 18px; overflow: hidden; border: none; } .sd-agent-modal__iframe-wrap { position: relative; width: 100%; height: 100%; background: var(--sd-cream); } .sd-agent-modal__iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--sd-cream); } .sd-agent-modal--iframe .sd-agent-modal__close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sd-border, rgba(17, 49, 74, 0.14)); background: rgba(255, 246, 232, 0.95); color: var(--sd-navy); font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -8px rgba(13, 31, 46, 0.35); transition: background 160ms var(--sd-ease, ease), color 160ms var(--sd-ease, ease), transform 160ms var(--sd-ease, ease); } .sd-agent-modal--iframe .sd-agent-modal__close:hover, .sd-agent-modal--iframe .sd-agent-modal__close:focus-visible { background: var(--sd-coral); color: var(--sd-cream); border-color: var(--sd-coral); outline: none; transform: scale(1.05); } @media (max-width: 600px) { .sd-agent-modal--iframe { width: calc(100vw - 12px); height: calc(100vh - 12px); max-height: calc(100vh - 12px); border-radius: 12px; } } .sd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sd-insight__section--common-patterns { position: relative; overflow: hidden; } .sd-insight__section--common-patterns::before { content: ""; position: absolute; inset: 0; background-image: url('https://scubadev.com/data/uploads/sites/4/2026/02/06-featured-friendly.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.16; z-index: 0; pointer-events: none; mix-blend-mode: screen; } .sd-insight__section--common-patterns > .sd-insight__section-inner { position: relative; z-index: 1; } .sd-insight__section--common-patterns .sd-insight__section-card { position: relative; z-index: 1; } .sd-insight__playbook-banner + .sd-insight__divider-slot { display: block !important; } .sd-insight__playbook-banner + .sd-insight__divider-slot:has(.sd-insight__divider--cream), .sd-insight__playbook-banner + .sd-insight__divider-slot:has(.sd-insight__divider--warm) { display: none !important; } .sd-insight__playbook-banner + .sd-insight__divider-slot + .sd-insight__section { padding-top: clamp(56px, 7vw, 96px) !important; } .sd-insight__playbook-banner + .sd-insight__divider-slot:not(:has(.sd-insight__divider--cream)):not(:has(.sd-insight__divider--warm)) + .sd-insight__section { padding-top: clamp(110px, 11vw, 170px) !important; } .sd-agent-inline__image { margin: 4px 0 18px; border-radius: 12px; overflow: hidden; background: rgba(13, 31, 46, 0.04); aspect-ratio: 16 / 9; border: 1px solid rgba(13, 31, 46, 0.08); } .sd-agent-inline__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--sd-ease, cubic-bezier(.2,.7,.2,1)); } .sd-agent-inline:hover .sd-agent-inline__image img { transform: scale(1.015); } @media (max-width: 600px) { .sd-agent-inline__image { margin: 2px 0 14px; border-radius: 10px; } } .sd-agent-modal--iframe.sd-agent-modal--lightbox-active .sd-agent-modal__close { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 120ms var(--sd-ease, ease); } .sd-agent-inline__cta { margin: 22px 0 0; text-align: right; } .sd-agent-inline__readfull, .sd-insight__section--cream .sd-agent-inline__readfull, .sd-insight__section--warm  .sd-agent-inline__readfull, .sd-insight__section--navy  .sd-agent-inline__readfull, .sd-insight__section--darkblue .sd-agent-inline__readfull, .sd-insight__section--deep .sd-agent-inline__readfull { position: relative; display: inline-flex; align-items: center; gap: 8px; appearance: none; -webkit-appearance: none; background: var(--sd-coral); color: var(--sd-cream); border: 0; border-radius: 999px; padding: 13px 26px; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; box-shadow: 0 10px 30px -6px rgba(219, 99, 93, 0.45); transition: transform 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)), box-shadow 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)), background 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)); } .sd-agent-inline__readfull::after { content: "\2192"; font-size: 16px; line-height: 1; transform: translateX(0); transition: transform 200ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)); } .sd-agent-inline__readfull::before { content: ""; position: absolute; inset: -8px; border-radius: 999px; background: radial-gradient(ellipse, rgba(219, 99, 93, 0.35), transparent 70%); filter: blur(12px); z-index: -1; opacity: 0.55; transition: opacity 300ms var(--sd-ease, cubic-bezier(.2,.8,.2,1)); pointer-events: none; } .sd-agent-inline__readfull:hover, .sd-agent-inline__readfull:focus-visible { background: #DB635D; color: var(--sd-cream); transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px -8px rgba(219, 99, 93, 0.55); letter-spacing: -0.005em; border-bottom-color: transparent; outline: none; } .sd-agent-inline__readfull:hover::after, .sd-agent-inline__readfull:focus-visible::after { transform: translateX(3px); } .sd-agent-inline__readfull:hover::before, .sd-agent-inline__readfull:focus-visible::before { opacity: 1; } .sd-agent-inline__readfull:focus-visible { outline: 2px solid var(--sd-cream); outline-offset: 3px; } @media (max-width: 600px) { .sd-agent-inline__readfull { padding: 12px 22px; font-size: 14px; } } .sd-insight__section--darkblue .sd-agent-inline, .sd-insight__section--navy .sd-agent-inline, .sd-insight__section--deep .sd-agent-inline { color: var(--sd-navy-deep); } .sd-insight__section--darkblue .sd-agent-inline *, .sd-insight__section--navy .sd-agent-inline *, .sd-insight__section--deep .sd-agent-inline * { color: inherit; } .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__title, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__title, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__title, .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__body, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__body, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__body, .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__body strong, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__body strong, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__body strong, .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__body p, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__body p, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__body p, .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__meta dd, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__meta dd, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__meta dd { color: var(--sd-navy-deep); } .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__summary, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__summary, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__summary { color: var(--sd-navy-2, #5492B6); } .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__meta dt, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__meta dt, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__meta dt { color: var(--sd-navy-2, #5492B6); } .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__num, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__num, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__num { color: var(--sd-cream); } .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__shipbadge, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__shipbadge, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__shipbadge { color: var(--sd-coral); } .sd-insight__section--darkblue .sd-agent-inline .sd-agent-inline__readfull, .sd-insight__section--navy .sd-agent-inline .sd-agent-inline__readfull, .sd-insight__section--deep .sd-agent-inline .sd-agent-inline__readfull { color: var(--sd-cream); } .sd-insight__section--darkblue .sd-agent-inline, .sd-insight__section--navy .sd-agent-inline, .sd-insight__section--deep .sd-agent-inline { background: var(--sd-cream); border-color: rgba(17, 49, 74, 0.10); } .sd-insight__section--group-banner:has(+ .sd-insight__section--navy) .sd-insight__group-banner-wave-bottom, .sd-insight__section--group-banner:has(+ .sd-insight__section--darkblue) .sd-insight__group-banner-wave-bottom, .sd-insight__section--group-banner:has(+ .sd-insight__section--deep) .sd-insight__group-banner-wave-bottom { background: var(--sd-navy); } .sd-insight__section--navy + .sd-insight__section--group-banner::after, .sd-insight__section--darkblue + .sd-insight__section--group-banner::after, .sd-insight__section--deep + .sd-insight__section--group-banner::after { background: var(--sd-navy); } .sd-insight-callout-float.sd-insight-callout-float--themed { max-width: 280px; border-radius: 12px; border: 1px solid rgba(15, 38, 60, 0.08); box-shadow: 0 6px 20px -8px rgba(15, 38, 60, 0.12); background: var(--sd-cream); } .sd-insight-callout-float.sd-insight-callout-float--themed img { border-radius: 12px; } .sd-insight-callout-float.sd-insight-callout-float--themed figcaption { font-family: var(--sd-mono); font-style: italic; font-size: 11px; color: var(--sd-navy); text-align: center; padding: 6px 10px 10px; line-height: 1.35; } @media (max-width: 768px) { .sd-insight-callout-float.sd-insight-callout-float--themed { max-width: 100%; } } .sd-insight__group { position: relative; } .sd-insight__group--cream-tan { background: linear-gradient( to bottom, var(--sd-cream) 0%, var(--sd-warm) 100% ); } .sd-insight__group--cream-tan > .sd-insight__section { background: transparent !important; } .sd-insight__hero-figure--in-intro { margin: 0 0 clamp(28px, 3vw, 40px); border-radius: 18px; overflow: hidden; box-shadow: var(--sd-shadow-card, 0 18px 48px rgba(13,31,46,0.16)); background: #11314a; } .sd-insight__hero-figure--in-intro .sd-insight__hero-figure-img { display: block; width: 100%; height: auto; } @media (max-width: 600px) { .sd-insight__hero-figure--in-intro { border-radius: 12px; } } .sd-insight__section--intro-with-figure { padding-top: clamp(28px, 4vw, 56px); } .sd-insight__divider-slot + .sd-insight__section--intro-with-figure { padding-top: clamp(60px, 8vw, 110px); } .sd-insight__group--blue-navy { background: linear-gradient( to bottom, var(--sd-navy-2) 0%, var(--sd-navy) 100% ); } .sd-insight__group--blue-navy > .sd-insight__section { background: transparent !important; } .sd-insight__group--cream-warm { background: linear-gradient( to bottom, var(--sd-cream) 0%, var(--sd-warm) 100% ); padding-top: 0; } .sd-insight__group--cream-warm > .sd-insight__section { background: transparent !important; } .sd-insight__group--cream-warm > .sd-insight__playbook-banner { } .sd-insight__group--cream-warm .sd-insight__playbook-banner + .sd-insight__divider-slot { display: none !important; } .sd-insight__group--cream-warm .sd-insight__playbook-banner + .sd-insight__divider-slot + .sd-insight__section { padding-top: clamp(40px, 5vw, 64px) !important; } .sd-insight__section--stats::after { z-index: 0 !important; } .sd-insight__stats { z-index: 1 !important; } .sd-insight__section--stats { z-index: auto; } .sd-insight__section--stats + .sd-insight__divider-slot, .sd-insight__divider-slot:has(+ .sd-insight__section--stats), .sd-insight__group--blue-navy + .sd-insight__divider-slot, .sd-insight__divider-slot:has(+ .sd-insight__group--blue-navy) { z-index: 4 !important; } .sd-insight__features-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } @media (min-width: 1280px) { .sd-insight__features-grid { gap: 32px; max-width: 1100px; margin-left: auto; margin-right: auto; } } @media (max-width: 700px) { .sd-insight__features-grid { grid-template-columns: 1fr; gap: 20px; } } .sd-insight__features-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); } @media (max-width: 700px) { .sd-insight__features-grid[data-cols="3"] { grid-template-columns: 1fr; } } .sd-insight__feature { padding: 36px 32px; border-radius: 14px; } .sd-insight__feature-title { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; margin-bottom: 14px; } .sd-insight__feature-body { font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.62; } .sd-insight__feature-icon { width: 38px; height: 38px; margin-bottom: 20px; } .sd-insight__feature-num { font-size: 11px; margin-bottom: 8px; } @media (max-width: 700px) { .sd-insight__feature { padding: 28px 24px; } .sd-insight__feature-title { font-size: 18px; } .sd-insight__feature-body { font-size: 15px; } } body.postid-4068 .sd-insight__hero--fieldguide { background: linear-gradient(180deg, #11314a 0%, #235C81 100%); isolation: isolate; overflow: hidden; padding: clamp(96px, 11vw, 160px) 0 clamp(96px, 11vw, 150px); } body.postid-4068 .sd-insight__hero-bg--fieldguide { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 22% 6%, rgba(255,246,232,0.18), transparent 50%), radial-gradient(ellipse at 92% 88%, rgba(17,49,74,0.55), transparent 60%), linear-gradient(180deg, #11314a 0%, #235C81 100%); pointer-events: none; } body.postid-4068 .sd-insight__hero-bg--fieldguide::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,246,232,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,246,232,0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #11314a 30%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 50%, #11314a 30%, transparent 80%); opacity: 0.7; } body.postid-4068 .sd-insight__fg-scene { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } body.postid-4068 .sd-insight__hero-overlay--fieldguide { background: radial-gradient(ellipse 60% 55% at 18% 10%, rgba(255,246,232,0.10), transparent 60%), radial-gradient(ellipse 50% 50% at 92% 88%, rgba(17,49,74,0.40), transparent 60%); } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner { position: relative; z-index: 3; max-width: var(--sd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } body.postid-4068 .sd-insight__eyebrow--fieldguide { display: inline-block; font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #FFF6E8; margin: 0 0 32px; padding: 0; } body.postid-4068 .sd-insight__title--fieldguide { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-size: clamp(40px, 5.6vw, 70px); line-height: 1.06; letter-spacing: -.025em; color: #FFF6E8; font-weight: 700; margin: 0 0 22px; max-width: 920px; } body.postid-4068 .sd-insight__title--fieldguide .sd-insight__title-italic, body.postid-4068 .sd-insight__title--fieldguide em { font-family: 'Bodoni Moda', 'Georgia', serif; font-style: italic; font-weight: 500; color: #F6C893; } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__subhead { font-family: 'Inter', 'DM Sans', system-ui, sans-serif; font-size: clamp(17px, 1.55vw, 19px); line-height: 1.55; color: rgba(255,246,232,0.78); max-width: 720px; margin: 0 0 32px; } body.postid-4068 .sd-insight__byline-kicker { font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #F6C893; margin: 24px 0 12px; width: 100%; display: block; } body.postid-4068 .sd-insight__hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 0; } body.postid-4068 .sd-insight__hero-inner { position: relative; } body.postid-4068 .sd-insight__fg-counter { position: absolute; right: clamp(20px, 4vw, 56px); top: clamp(96px, 12vw, 170px); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; z-index: 4; border-left: 1px solid rgba(255,246,232,0.22); padding-left: 16px; } body.postid-4068 .sd-insight__fg-counter-label { font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,246,232,0.62); } body.postid-4068 .sd-insight__fg-counter-value { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1; color: #F6C893; } body.postid-4068 .sd-insight__fg-counter-sub { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,246,232,0.62); } @media (max-width: 900px) { body.postid-4068 .sd-insight__fg-counter { position: static; align-self: flex-start; align-items: flex-start; border-left: none; border-top: 1px solid rgba(255,246,232,0.22); padding: 16px 0 0; margin-top: 8px; } } @media (prefers-reduced-motion: no-preference) { body.postid-4068 .sd-insight__fg-diver { transform-origin: center; animation: sd-fg-diver-drift 14s ease-in-out infinite alternate; } } @keyframes sd-fg-diver-drift { 0%   { transform: translate(1130px, 290px) rotate(-1deg); } 100% { transform: translate(1130px, 320px) rotate(1.5deg); } } body.postid-4068 .sd-insight__section--utility-bar { background: #FFF6E8; padding: 16px 0 14px; border-bottom: 1px solid rgba(17,49,74,0.10); } body.postid-4068 .sd-insight__section--utility-bar .sd-insight__share--utility { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; } body.postid-4068 .sd-insight__util-pill { display: inline-flex; align-items: center; font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #11314a; padding: 7px 13px; border: 1px solid rgba(17,49,74,0.30); border-radius: 999px; background: transparent; } body.postid-4068 .sd-insight__share--utility .sd-insight__share-list { gap: 8px; } body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn { --sd-share-size: 36px; background: transparent; border: 1px solid rgba(17,49,74,0.30); color: #11314a; box-shadow: none; } body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn:hover, body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn:focus-visible { background: #DB635D; border-color: #DB635D; color: #FFF6E8; } body.postid-4068 .sd-insight__share--utility .sd-insight__share-btn svg { width: 16px; height: 16px; } body.postid-4068 .sd-insight__util-counter { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #11314a; opacity: 0.78; } body.postid-4068 .sd-insight__util-counter-sep { color: #DB635D; opacity: 0.65; font-size: 13px; letter-spacing: 0; } body.postid-4068 .sd-insight__util-counter-value { color: #235C81; } @media (max-width: 640px) { body.postid-4068 .sd-insight__util-counter { display: none; } } body.postid-4068 .sd-insight__tldr-body p::first-letter { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400; float: left; font-size: 4.4em; line-height: 0.85; padding: 6px 14px 0 0; color: #F6C893; text-shadow: 0 1px 0 rgba(17,49,74,0.05); } body.postid-4068 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament) .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4068 .sd-insight__section:not(.sd-insight__section--intro):not(.sd-insight__section--tldr-band):not(.sd-insight__section--utility-bar):not(.sd-insight__section--toc-band):not(.sd-insight__section--callout-only):not(.sd-insight__section--fullbleed):not(.sd-insight__section--showcase):not(.sd-insight__section--faq):not(.sd-insight__section--author-band):not(.sd-insight__section--share-band):not(.sd-insight__section--fg-ornament) .sd-insight__section-head + p::first-letter { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400; float: left; font-size: 4.4em; line-height: 0.85; padding: 6px 14px 0 0; color: #F6C893; } body.postid-4068 .sd-insight__section--darkblue .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4068 .sd-insight__section--navy .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4068 .sd-insight__section--deep .sd-insight__section-card > p:first-of-type::first-letter, body.postid-4068 .sd-insight__section--darkblue .sd-insight__section-head + p::first-letter, body.postid-4068 .sd-insight__section--navy .sd-insight__section-head + p::first-letter, body.postid-4068 .sd-insight__section--deep .sd-insight__section-head + p::first-letter { color: #FFF6E8; } body.postid-4068 .sd-insight__section--fg-ornament { padding: clamp(34px, 5vw, 56px) 0 clamp(20px, 4vw, 36px); background: #FFF6E8; text-align: center; } body.postid-4068 .sd-insight__fg-ornament-phrase { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; color: #F6C893; margin: 0; letter-spacing: 0.005em; position: relative; display: inline-block; padding: 0 50px; } body.postid-4068 .sd-insight__fg-ornament-phrase::before, body.postid-4068 .sd-insight__fg-ornament-phrase::after { content: ""; position: absolute; top: 50%; width: 38px; height: 1px; background: rgba(17,49,74,0.20); } body.postid-4068 .sd-insight__fg-ornament-phrase::before { left: 0; } body.postid-4068 .sd-insight__fg-ornament-phrase::after  { right: 0; } body.postid-4068 .sd-insight__divider-slot + .sd-insight__section--fg-ornament { padding-top: clamp(34px, 5vw, 56px); } @media (max-width: 768px) { body.postid-4068 .sd-insight__hero--fieldguide { padding: clamp(70px, 14vw, 110px) 0 clamp(70px, 14vw, 110px); } body.postid-4068 .sd-insight__title--fieldguide { font-size: clamp(32px, 7vw, 44px); } body.postid-4068 .sd-insight__fg-scene .sd-insight__fg-diver { opacity: 0.55; } } body.postid-4068 .sd-insight__hero--fieldguide { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #11314a; } body.postid-4068 .sd-insight__hero-bg--fieldguide { display: none !important; } body.postid-4068 .sd-insight__hero-overlay--fieldguide { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,49,74,0.55) 0%, rgba(17,49,74,0.85) 100%); pointer-events: none; z-index: 1; } body.postid-4068 .sd-insight__fg-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; mix-blend-mode: screen; } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner { position: relative; z-index: 3; } body.postid-4068 .sd-insight__fg-scene { display: none !important; } @media (max-width: 720px) { body.postid-4068 .sd-insight__fg-annotations { opacity: 0.85; } } body.postid-4068 .sd-insight__hero--fieldguide { position: relative; isolation: isolate; overflow: hidden; min-height: 600px; padding: clamp(120px, 13vw, 184px) 0 clamp(96px, 11vw, 144px); color: #FFF6E8; background-color: #11314a; background-size: cover; background-position: center 40%; background-repeat: no-repeat; } body.postid-4068 .sd-insight__fg-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,0.42) 100%), linear-gradient(180deg, rgba(17,49,74,0.18) 0%, rgba(17,49,74,0.40) 60%, rgba(17,49,74,0.68) 100%); pointer-events: none; } body.postid-4068 .sd-insight__fg-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: repeating-linear-gradient(0deg,  rgba(255,246,232,0.07) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255,246,232,0.07) 0 1px, transparent 1px 40px); } body.postid-4068 .sd-insight__hero-overlay--fieldguide { display: none !important; } body.postid-4068 .sd-insight__fg-scene { display: none !important; } body.postid-4068 .sd-insight__hero-bg--fieldguide { display: none !important; } body.postid-4068 .sd-insight__fg-corner { position: absolute; pointer-events: none; color: #F6C893; opacity: 0.18; z-index: 2; } body.postid-4068 .sd-insight__fg-corner svg { display: block; width: 100%; height: auto; } body.postid-4068 .sd-insight__fg-corner--tl { top: -80px; left: -100px; width: 620px; } body.postid-4068 .sd-insight__fg-corner--br { bottom: -80px; right: -100px; width: 620px; } @media (max-width: 980px) { body.postid-4068 .sd-insight__fg-corner--tl { width: 460px; top: -60px; left: -70px; } body.postid-4068 .sd-insight__fg-corner--br { width: 460px; bottom: -60px; right: -70px; } } @media (max-width: 720px) { body.postid-4068 .sd-insight__fg-corner--tl { width: 320px; top: -30px; left: -50px; } body.postid-4068 .sd-insight__fg-corner--br { width: 320px; bottom: -30px; right: -50px; } } body.postid-4068 .sd-insight__fg-annotations { position: absolute; inset: 0; z-index: 2; pointer-events: none; } body.postid-4068 .sd-insight__fg-cross { position: absolute; width: 11px; height: 11px; opacity: 0.42; } body.postid-4068 .sd-insight__fg-cross::before, body.postid-4068 .sd-insight__fg-cross::after { content: ''; position: absolute; background: #FFF6E8; } body.postid-4068 .sd-insight__fg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } body.postid-4068 .sd-insight__fg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } body.postid-4068 .sd-insight__fg-cross--1 { top: 12%; left: 16%; } body.postid-4068 .sd-insight__fg-cross--2 { top: 22%; left: 70%; } body.postid-4068 .sd-insight__fg-cross--3 { top: 38%; left: 8%;  opacity: 0.30; } body.postid-4068 .sd-insight__fg-cross--4 { top: 50%; left: 82%; } body.postid-4068 .sd-insight__fg-cross--5 { top: 62%; left: 12%; } body.postid-4068 .sd-insight__fg-cross--6 { top: 70%; left: 92%; opacity: 0.25; } body.postid-4068 .sd-insight__fg-cross--7 { top: 84%; left: 22%; opacity: 0.35; } body.postid-4068 .sd-insight__fg-cross--8 { top: 88%; left: 60%; opacity: 0.30; } body.postid-4068 .sd-insight__fg-cross--9 { top: 80%; left: 78%; opacity: 0.25; } body.postid-4068 .sd-insight__fg-coords { position: absolute; right: 32px; top: 220px; font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: #FFF6E8; opacity: 0.55; text-align: right; line-height: 2; } body.postid-4068 .sd-insight__fg-tick-ruler { position: absolute; right: 16px; top: 96px; bottom: 96px; width: 8px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0.35; } body.postid-4068 .sd-insight__fg-tick-ruler i { display: block; height: 1px; background: #FFF6E8; width: 4px; align-self: flex-end; } body.postid-4068 .sd-insight__fg-tick-ruler i:nth-child(5n+1) { width: 8px; } body.postid-4068 .sd-insight__fg-corner-tl, body.postid-4068 .sd-insight__fg-corner-tr { position: absolute; top: 28px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.22em; color: #FFF6E8; opacity: 0.55; line-height: 1.7; text-transform: uppercase; z-index: 3; } body.postid-4068 .sd-insight__fg-corner-tl { left: 32px; text-align: left; } body.postid-4068 .sd-insight__fg-corner-tr { right: 32px; text-align: right; } @media (max-width: 720px) { body.postid-4068 .sd-insight__fg-coords, body.postid-4068 .sd-insight__fg-tick-ruler, body.postid-4068 .sd-insight__fg-corner-tl, body.postid-4068 .sd-insight__fg-corner-tr { display: none; } } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__hero-inner { position: relative; z-index: 3; max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 28px); } body.postid-4068 .sd-insight__eyebrow--fieldguide { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #FFF6E8; opacity: 0.85; margin: 0 0 28px; padding: 0; } body.postid-4068 .sd-insight__eyebrow--fieldguide::before { content: ''; width: 26px; height: 1px; background: #F6C893; opacity: 0.9; } body.postid-4068 .sd-insight__title--fieldguide { font-family: 'DM Sans', 'Inter', system-ui, sans-serif; font-weight: 700; font-size: clamp(38px, 5.6vw, 56px); line-height: 1.04; letter-spacing: -0.005em; color: #FFF6E8; max-width: 760px; margin: 0 0 22px; } body.postid-4068 .sd-insight__title--fieldguide .sd-insight__title-italic, body.postid-4068 .sd-insight__title--fieldguide em { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; color: #F6C893; letter-spacing: -0.01em; } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__subhead { font-family: 'Inter', 'DM Sans', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; max-width: 520px; color: rgba(255,246,232,0.80); margin: 0 0 36px; font-weight: 400; } body.postid-4068 .sd-insight__hero-meta--fieldguide { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; } body.postid-4068 .sd-insight__fg-chip { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.20em; color: #FFF6E8; opacity: 0.65; text-transform: uppercase; padding: 5px 10px; border: 1px solid rgba(255,246,232,0.22); border-radius: 999px; } body.postid-4068 .sd-insight__byline--fieldguide { display: flex; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #11314a; color: #DB635D; border: 1.5px solid rgba(255,246,232,0.40); flex-shrink: 0; overflow: hidden; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-avatar img, body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-meta { font-size: 12px; line-height: 1.45; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-author { display: block; color: #FFF6E8; font-weight: 600; font-size: 13px; letter-spacing: 0.005em; margin-bottom: 2px; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-sub { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,246,232,0.55); font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; flex-wrap: wrap; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-sub time { color: inherit; } body.postid-4068 .sd-insight__byline--fieldguide .sd-insight__byline-sep { color: rgba(255,246,232,0.35); } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__fg-counter { position: absolute; right: clamp(20px, 4vw, 56px); top: clamp(96px, 12vw, 170px); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; z-index: 4; border-left: 1px solid rgba(255,246,232,0.22); padding-left: 16px; } @media (max-width: 720px) { body.postid-4068 .sd-insight__hero--fieldguide { padding: clamp(80px, 14vw, 120px) 0 clamp(72px, 12vw, 96px); min-height: 540px; } body.postid-4068 .sd-insight__title--fieldguide { font-size: clamp(32px, 7vw, 44px); } body.postid-4068 .sd-insight__hero--fieldguide .sd-insight__fg-counter { position: static; align-self: flex-start; align-items: flex-start; border-left: none; border-top: 1px solid rgba(255,246,232,0.22); padding: 16px 0 0; margin-top: 16px; } } body.postid-4068 .sd-insight__cta--fieldguide { overflow: visible; padding-top: clamp(140px, 14vw, 180px); } body.postid-4068 .sd-insight__cta-wave { position: absolute; top: 0; left: 0; right: 0; height: clamp(70px, 10vw, 150px); z-index: 3; pointer-events: none; } body.postid-4068 .sd-insight__cta-wave svg { display: block; width: 100%; height: 100%; color: var(--sd-cream);  transform: scaleY(-1); transform-origin: center; } body.postid-4068 .sd-insight__cta-wave svg path { fill: currentColor; } body.postid-4068 .sd-insight__cta--fieldguide .sd-insight__cta-inner { position: relative; z-index: 4; } @media (max-width: 720px) { body.postid-4068 .sd-insight__cta--fieldguide { padding-top: clamp(96px, 18vw, 130px); } body.postid-4068 .sd-insight__cta-wave { height: clamp(56px, 14vw, 110px); } }