/* --- block 0 --- */ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} /*# sourceURL=wp-img-auto-sizes-contain-inline-css */ /* --- block 1 --- */ .wp-block-group{box-sizing:border-box}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative} /*# sourceURL=https://diopter.ai/blog/wp-includes/blocks/group/style.min.css */ /* --- block 2 --- */ :root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} /*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ /* --- block 3 --- */ :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--base: #FFFFFF;--wp--preset--color--contrast: #111111;--wp--preset--color--accent-1: #FFEE58;--wp--preset--color--accent-2: #F6CFF4;--wp--preset--color--accent-3: #503AA8;--wp--preset--color--accent-4: #686868;--wp--preset--color--accent-5: #FBFAF3;--wp--preset--color--accent-6: color-mix(in srgb, currentColor 20%, transparent);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.156), 1.125rem);--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.312), 1.375rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.312), 2rem);--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.062), 3rem);--wp--preset--font-family--manrope: Manrope, sans-serif;--wp--preset--font-family--fira-code: "Fira Code", monospace;--wp--preset--spacing--20: 10px;--wp--preset--spacing--30: 20px;--wp--preset--spacing--40: 30px;--wp--preset--spacing--50: clamp(30px, 5vw, 50px);--wp--preset--spacing--60: clamp(30px, 7vw, 70px);--wp--preset--spacing--70: clamp(50px, 7vw, 90px);--wp--preset--spacing--80: clamp(70px, 10vw, 140px);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:root { --wp--style--global--content-size: 1440px;--wp--style--global--wide-size: 1601px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 0.8rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 0.8rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 0.8rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 0.8rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 0.8rem;}:root :where(.is-layout-grid){gap: 0.8rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--base);color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--manrope);font-size: var(--wp--preset--font-size--large);font-weight: 300;letter-spacing: -0.1px;line-height: 1.4;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: 0px;--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: 0px;}a:where(:not(.wp-element-button)){color: currentColor;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: none;}h1, h2, h3, h4, h5, h6{font-weight: 400;letter-spacing: -0.1px;line-height: 1.125;}h1{font-size: var(--wp--preset--font-size--xx-large);}h2{font-size: var(--wp--preset--font-size--x-large);}h3{font-size: var(--wp--preset--font-size--large);}h4{font-size: var(--wp--preset--font-size--medium);}h5{font-size: var(--wp--preset--font-size--small);letter-spacing: 0.5px;}h6{font-size: var(--wp--preset--font-size--small);font-weight: 700;letter-spacing: 1.4px;text-transform: uppercase;}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--contrast);border-width: 0;color: var(--wp--preset--color--base);font-family: inherit;font-size: var(--wp--preset--font-size--medium);font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: 1rem;padding-right: 2.25rem;padding-bottom: 1rem;padding-left: 2.25rem;text-decoration: none;text-transform: inherit;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);border-color: transparent;color: var(--wp--preset--color--base);}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){outline-color: var(--wp--preset--color--accent-4);outline-offset: 2px;}:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption){font-size: var(--wp--preset--font-size--small);line-height: 1.4;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-contrast-color{color: var(--wp--preset--color--contrast) !important;}.has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-manrope-font-family{font-family: var(--wp--preset--font-family--manrope) !important;}.has-fira-code-font-family{font-family: var(--wp--preset--font-family--fira-code) !important;}/* Diopter author photos. Single source for the post author box and the author hero. Added 2026-09-11. Revert by clearing styles.css in Global Styles. NOTE: the 2026-09-07 author redesign removed the hero monogram on purpose ("Typography carries the identity"); this reinstates a photo above the name. */ /* Post author box -- fills the existing 52px circle, hides the initials. */ .bl-author:has(.bl-author-name a[href*="/author/surojoy/"]) .bl-author-avatar{background-image:url('https://diopter.ai/blog/wp-content/uploads/2026/09/surojoy-gupta-square.png')} .bl-author:has(.bl-author-name a[href*="/author/rohan-gupta/"]) .bl-author-avatar{background-image:url('https://diopter.ai/blog/wp-content/uploads/2026/09/rohan-gupta.png')} .bl-author:has(.bl-author-name a[href*="/author/surojoy/"]) .bl-author-avatar, .bl-author:has(.bl-author-name a[href*="/author/rohan-gupta/"]) .bl-author-avatar{background-size:cover;background-position:center top;background-repeat:no-repeat;color:transparent} /* Author hero photo. Fluid size; explicit grid-column so it cannot disturb the 2-column hero grid, which places every other child explicitly. */ body.author-surojoy .dauth-hero-inner::before, body.author-rohan-gupta .dauth-hero-inner::before{content:"";display:block;width:clamp(80px,14vw,116px);height:clamp(80px,14vw,116px);border-radius:50%;background-size:cover;background-position:center top;background-repeat:no-repeat;border:1px solid rgba(255,255,255,.18);margin:0 0 22px} body.author-surojoy .dauth-hero-inner::before{background-image:url('https://diopter.ai/blog/wp-content/uploads/2026/09/surojoy-gupta-square.png')} body.author-rohan-gupta .dauth-hero-inner::before{background-image:url('https://diopter.ai/blog/wp-content/uploads/2026/09/rohan-gupta.png')} @media (min-width:941px){body.author-surojoy .dauth-hero-inner::before,body.author-rohan-gupta .dauth-hero-inner::before{grid-column:1}} @media (max-width:640px){body.author-surojoy .dauth-hero-inner::before,body.author-rohan-gupta .dauth-hero-inner::before{margin:0 0 18px}} /* Contrast fixes 2026-09-12. 1. .bl-table-hint never got the accessibility fix that .bl-table-scroll-hint received -- same component, two class names. #A6AFBF on white is 2.21:1. #434752 is the value already chosen for the sibling class (9.28:1). 2. Related Reading secondary text is #6B7A9C on white = 4.30:1, just under AA. #5A6784 (5.66:1) is the slate already used for .bl-author-bio. */ html body .dblog .bl-table-hint,html body .dblog .bl-content p.bl-table-hint,html body p.bl-table-hint{color:#434752!important} html body .dbh-related-label{color:#5A6784!important} html body .dbh-related-excerpt{color:#5A6784!important} /* ---- Table header text: SITE-WIDE fix. 2026-09-12 --------------------- `html body.single-post .dblog.dblog table th{color:#13162F!important}` was forcing navy text onto the navy #13162F header background, so every table header on every single post rendered invisible. Confirmed via CDP getMatchedStylesForNode: computed th colour was rgb(19,22,47) on rgb(19,22,47). Restored white at (0,3,5) specificity to beat it. */ html body.single-post .dblog.dblog table thead th, html body.single-post .dblog.dblog .bl-table thead th, html body.single-post .dblog.dblog .bl-table-wrap thead th, html body.single-post .dblog.dblog .bl-table-scroll thead th{color:#fff!important} /* ---- Post 777 comparison table. Rewritten 2026-09-12 ------------------- Scoped to >=1200px ONLY. Snippet 978 switches tables to stacked cards at <=1199px, not 700px, so the previous version forced a 1200px width onto card mode between 701-1199px and clipped every card (measured: cells computed display:block at 1166px inside a 760px wrapper). Adds .single-post + .bl-content to out-specify the pre-existing (0,3,3) rule at >=1100px that sets width:100%!important;min-width:0!important. */ @media (min-width:1200px){ html body.postid-777.single-post .dblog .bl-content .bl-table{overflow-x:auto!important;overflow-y:visible!important;max-width:100%!important;-webkit-overflow-scrolling:touch} html body.postid-777.single-post .dblog .bl-content .bl-table > table{table-layout:fixed!important;width:1200px!important;min-width:1200px!important;max-width:none!important} html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(1){width:12%!important} /* Tool */ html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(2){width:12%!important} /* Best Fit For */ html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(3){width:17%!important} /* Detects */ html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(4){width:21%!important} /* Core Detection Approach */ html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(5){width:10%!important} /* Delivery Model */ html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(6){width:14%!important} /* Best Fit For (Teams) */ html body.postid-777.single-post .dblog .bl-content .bl-table > table colgroup col:nth-child(7){width:14%!important} /* Key Strengths */ html body.postid-777.single-post .dblog .bl-content .bl-table thead th:first-child{position:sticky!important;left:0;z-index:4} html body.postid-777.single-post .dblog .bl-content .bl-table tbody td:first-child{position:sticky!important;left:0;z-index:2;background:#fff!important;box-shadow:1px 0 0 rgba(0,0,0,.08)} html body.postid-777.single-post .dblog .bl-content .bl-table tbody tr:nth-child(2n) td:first-child{background:#FAFBFC!important} html body.postid-777.single-post .dblog .bl-content .bl-table-hint{display:block!important} } /*# sourceURL=global-styles-inline-css */ /* --- block 4 --- */ /*! This file is auto-generated */ .skip-link.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal!important}.skip-link.screen-reader-text:focus{background-color:#eee;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} /*# sourceURL=/wp-includes/css/wp-block-template-skip-link.min.css */ /* --- block 5 --- */ a{text-decoration-thickness:1px!important;text-underline-offset:.1em}:where(.wp-site-blocks :focus){outline-style:solid;outline-width:2px}.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child){margin-bottom:3px}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{outline-offset:4px}.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content{outline-offset:0}blockquote,caption,figcaption,h1,h2,h3,h4,h5,h6,p{text-wrap:pretty}.more-link{display:block}:where(pre){overflow-x:auto} /*# sourceURL=https://diopter.ai/blog/wp-content/themes/twentytwentyfive/style.min.css */ /* --- block 6 --- */ :root {--global-kb-font-size-sm:clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);--global-kb-font-size-md:clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);--global-kb-font-size-lg:clamp(1.75rem, 1.576rem + 0.543vw, 2rem);--global-kb-font-size-xl:clamp(2.25rem, 1.728rem + 1.63vw, 3rem);--global-kb-font-size-xxl:clamp(2.5rem, 1.456rem + 3.26vw, 4rem);--global-kb-font-size-xxxl:clamp(2.75rem, 0.489rem + 7.065vw, 6rem);}:root {--global-palette1: #3182CE;--global-palette2: #2B6CB0;--global-palette3: #1A202C;--global-palette4: #2D3748;--global-palette5: #4A5568;--global-palette6: #718096;--global-palette7: #EDF2F7;--global-palette8: #F7FAFC;--global-palette9: #ffffff;} /*# sourceURL=kadence-blocks-global-variables-inline-css */ /* --- block 9 --- */ /* Blog hub hero: let the headline and intro fill their container. Measured at 2133px viewport. The .dhp2 hero container gives its children 1132px of content width, and every child uses it: eyebrow 1132, pillar cards 1132, chips 1132, curated sections 1132, subscribe box 1132. Three children did not: the h1 at max-width 892.658px and the two .dhp2-sub paragraphs at 807.897px and 802.696px. So the headline stopped 264px short of its own box and the intro 348px short, leaving a large empty right side while the cards below ran full width. */ html body .dhp2 > h1, html body .dhp2 > p.dhp2-sub { max-width: 100% !important; } /* Subscribe block at the foot of the hub. The hub template printed its own h3 + intro paragraph and then embedded the [bl_subscribe] card, which prints the same heading and subline again. The duplicate pair is removed from the template (snippet 1221), so the card is now the only content in the flex box -- but it was still sitting in the right half, 594px wide starting at x=667. Centre it. */ html body .dhp2-sub-box { justify-content: center !important; } html body .dhp2-sub-box > div { width: 100% !important; max-width: 620px !important; } /* ...and drop the nested panel. With the duplicate heading gone, the outer .dhp2-sub-box was a grey rounded panel (bg #F7F8FA, 1.25px border, 16px radius, 28/32 padding) wrapping a near-identical card (bg #F8FAFC, 1.25px border, 14px radius, 22px padding). Two boxes reading as one. Keep the inner card, strip the outer chrome. */ html body .dhp2-sub-box { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; } /* --- block 10 --- */ /* dblog: body-copy type and edge consistency, all single posts. Measured before, at 1890px: paragraphs 19px #13162F, list items 18px #3D4A63, stat box 16.5px #4A5568, FAQ answers 15px #4A5568. Four sizes, three colours, for what is all body copy. Left edges agreed at 649 but the stat box and FAQ ran to 1537 where the prose stopped at 1409. After: two sizes, two colours, one shared right edge. Specificity. The competing rules are printed in the body by the shell, so a head stylesheet loses any tie on cascade order. Each selector below carries one class more than the rule it overrides. Tables are excluded on purpose: they already scroll and narrowing them makes the seven-column comparison tables worse. */ html body.single-post.single .dblog .bl-content.bl-content ul li, html body.single-post.single .dblog .bl-content.bl-content ol li { font-size: 19px !important; line-height: 31.92px !important; color: #13162F !important; /* The real cause of lists looking smaller than prose: they render at weight 300 (Light) while paragraphs are 400 (Regular). Identical pixel size, visibly lighter and smaller to the eye. */ font-weight: 400 !important; } html body.single-post.single .dblog .bl-content .bl-stat p { font-size: 17px !important; line-height: 28px !important; color: #3D4A63 !important; } html body.single-post.single .dblog.dblog .bl-faq .fq-ans, html body.single-post.single .dblog.dblog .bl-faq .fq-ans p { font-size: 17px !important; line-height: 28px !important; color: #3D4A63 !important; font-weight: 400 !important; } /* Every supporting block shares the prose right edge. Tables are the one deliberate exception: they already scroll and narrowing them makes the seven-column comparison tables worse. */ @media (max-width: 700px) { /* The system drops paragraphs to 18px here. Lists must follow, or the rule above leaves them a pixel LARGER than the prose on phones. */ html body.single-post.single .dblog .bl-content.bl-content ul li, html body.single-post.single .dblog .bl-content.bl-content ol li { font-size: 18px !important; line-height: 29.7px !important; } html body.single-post.single .dblog .bl-content .bl-stat p, html body.single-post.single .dblog.dblog .bl-faq .fq-ans, html body.single-post.single .dblog.dblog .bl-faq .fq-ans p { font-size: 16px !important; line-height: 26px !important; } /* Title hierarchy: h1 was 28px against 18px body, 1.55x, which reads as a subheading rather than a page title. 34px gives 1.9x. */ html body.single-post.single .dblog .bl-hero h1 { font-size: 34px !important; line-height: 1.18 !important; } } /* --------------------------------------------------------------- THE LEDE BLOCK. The shell lifts the first paragraph of every post out of the body and prints it in .bl-intro, which sits in .bl-page-main, OUTSIDE .bl-content. The container cap above therefore never reached it: measured 888px wide ending at x1537 while the body ended at x1409, and set at 18px against 19px body prose. This is the first paragraph on the page, so it was the most visible mismatch on the blog and the hardest to see in measurements that queried .bl-content. --------------------------------------------------------------- */ html body.single-post.single .dblog .bl-intro p { font-size: 19px !important; line-height: 31.92px !important; font-weight: 400 !important; color: #13162F !important; max-width: 100% !important; } @media (max-width: 700px) { html body.single-post.single .dblog .bl-intro p { font-size: 18px !important; line-height: 29.7px !important; } } /* ================================================================ ONE FIXED WIDTH FOR EVERY ARTICLE: 760px. Set on .bl-page-main, the column itself, so nothing inside can be narrower than its own container. Previously the cap sat on .bl-content at 760px while .bl-body and .bl-page-main stayed 888px, which left a 128px empty gutter to the right of the text inside its own column. Everything below it is released to 100% so it fills that one width: the body, the nested wrapper, and the .bl-intro lede block, which sits outside .bl-content in .bl-page-main and was the last thing still running wide. 760px at 19px Outfit is about 81 characters a line. ================================================================ */ html body.single-post.single .dblog .bl-page-main { max-width: 760px !important; } html body.single-post.single .dblog .bl-body, html body.single-post.single .dblog .bl-content, html body.single-post.single .dblog .bl-content .bl-content, html body.single-post.single .dblog .bl-intro { max-width: 100% !important; width: auto !important; } /* --- block 11 --- */ /* Reading measure for body copy inside the nested .bl-content wrapper. The existing cap is written .bl-content > p, a direct-child selector, so on the 21 posts whose body sits inside a second .bl-content the cap never applies and lines run the full column width. 13 of those posts hold body copy in the wrapper, roughly 470 paragraphs. Scoped to the wrapper's own children only, so component internals (tables, tool cards, CTAs, stat boxes, FAQ accordions) are untouched. The class is doubled to outrank the original 4-class rule regardless of stylesheet order, since the shell prints its CSS in the body. */ html body.single-post .dblog .bl-content .bl-content.bl-content > p, html body.single-post .dblog .bl-content .bl-content.bl-content > ul, html body.single-post .dblog .bl-content .bl-content.bl-content > ol, html body.single-post .dblog .bl-content .bl-content.bl-content > h2, html body.single-post .dblog .bl-content .bl-content.bl-content > h3, html body.single-post .dblog .bl-content .bl-content.bl-content > h4 { max-width: 760px !important; } /* --- block 12 --- */ /* Body copy colour parity for paragraphs that carry the Gutenberg wp-block-paragraph class. The type-system rule uses .dblog .bl-content > p:not([class]) so any classed paragraph fell back to the legacy #3D4A63 instead of inheriting #13162F. Affects best-ai-deepfake-audio-detection-tools and ai-social-engineering-detection-methods only. */ .dblog .bl-content > p.wp-block-paragraph { color: inherit; } /* --- block 13 --- */ /* Compact the inline "Test your instincts" CTA. 2026-09-08. Measured on /blog/ai-social-engineering/ at 1512px: the card was 888px wide, the full prose column, with grid columns 36px / 667px / 111px. The 667px middle column held two short lines, so most of the card was empty and the button sat marooned at the far right. It read as a page banner rather than an inline nudge inside the prose. Now it hugs its content and sits left, so it reads as a recommendation in the flow of the article. Content and markup unchanged, layout only. */ html body.single-post .dblog .bl-test-cta{ display: inline-grid !important; grid-template-columns: auto auto auto !important; width: auto !important; max-width: 100% !important; align-items: center !important; gap: 0 14px !important; padding: 12px 16px !important; } /* On a phone it goes back to full width and drops the button to its own row, because three auto columns will not fit 390px. */ @media (max-width: 700px){ html body.single-post .dblog .bl-test-cta{ display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; width: 100% !important; row-gap: 12px !important; } html body.single-post .dblog .bl-test-cta .bl-test-cta-cta{ grid-column: 1 / -1 !important; justify-self: start !important; } } /* --- block 14 --- */ /* dblog: author page extended section, rebuilt. 2026-09-07. The markup for this section lives in each author's dblog_author_extra user meta field, not in a template, so it was rebuilt there with a dxr- prefix. Snippet 888 still supplies the .dauthx wrapper, the two column .dauthx-g grid and the reviewed-articles list below, and was not touched. Its old dx-* rules simply no longer match anything. Why the rebuild. Everything in the old markup was sized for the 340px rail and then used at 1232px: 13px body across a 741px column, a three column Track record grid that stranded the date 60px from the role it dated, four bordered cards holding 30 words each at 11px, and At a glance right-aligning its values so nothing lined up. Copy unchanged. */ /* The section owns its own grid now, rather than borrowing 888's .dauthx-g. Main column takes what is left, the rail is a fixed 340. */ .dxr-g{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 64px;align-items:start} .dxr-g > *{min-width:0} /* The main column sits on its own white panel, the way it did before the rebuild. Without it the narrative floats on the page grid while the rail keeps its cards, and the two sides stop looking like one section. */ .dxr-main{background:#fff;border-radius:14px;padding:34px 38px 38px} .dxr-main > .dxr-h2:first-child{margin-top:0} /* ---- shared -------------------------------------------------- */ .dxr-main p{font-size:16.5px;line-height:1.65;color:#434752;margin:0 0 16px;max-width:68ch} .dxr-main strong{font-weight:600;color:#0C1826} .dxr-h2{font-size:26px;line-height:1.25;letter-spacing:-.02em;font-weight:600;margin:0 0 18px;color:#0C1826} .dxr-h3{font-size:22px;line-height:1.3;letter-spacing:-.015em;font-weight:600;margin:48px 0 22px;color:#0C1826} .dxr-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:#314252;margin:0 0 14px} /* ---- pull quote ---------------------------------------------- */ .dxr-q{margin:28px 0 8px;padding:2px 0 2px 22px;border-left:3px solid #36AC75;border-radius:0} .dxr-q p{font-size:19px !important;line-height:1.5;font-weight:500;color:#0C1826 !important; margin:0 !important;max-width:60ch} .dxr-qs{margin-top:12px;font-size:13px;color:#314252} /* ---- track record, one column with a spine -------------------- */ .dxr-tli{position:relative;padding:0 0 30px 26px;border-left:1px solid #DCE4E8} .dxr-tli.dxr-tlast{padding-bottom:0;border-left-color:transparent} .dxr-tli:before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px; border-radius:50%;background:#36AC75;box-shadow:0 0 0 3px #fff} .dxr-yr{display:block;font-size:11.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:#0B5C3B;margin-bottom:5px} .dxr-role{display:block;font-size:18px;line-height:1.35;font-weight:600;color:#0C1826;margin:0 0 6px} .dxr-tli p{font-size:16px !important;margin:0 !important;max-width:64ch} /* ---- recognition, hairlines not boxes ------------------------- */ .dxr-press{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px} .dxr-pi{padding:18px 0 20px;border-top:1px solid #E1E5EA;min-width:0} .dxr-src{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:#0B5C3B;margin-bottom:7px} .dxr-pt{display:inline-block;font-size:17px;line-height:1.35;font-weight:600; color:#0C1826;text-decoration:none;margin-bottom:6px} .dxr-pt:hover{color:#0B5C3B;text-decoration:underline;text-underline-offset:3px} .dxr-pi p{font-size:15.5px !important;line-height:1.55;margin:0 !important} /* ---- rail ----------------------------------------------------- */ .dxr-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:20px} .dxr-box{border:1px solid #EDEDEF;border-radius:12px;padding:22px;background:#fff} /* At a glance. Label above value, both flush left, so all six rows start at the same x instead of ragging against the right edge. */ .dxr-agr{padding:11px 0;border-top:1px solid #F4F4F6} .dxr-agr:first-child{padding-top:0;border-top:0} .dxr-agr:last-child{padding-bottom:0} .dxr-k{display:block;font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:#314252;margin-bottom:3px} .dxr-v{display:block;font-size:15.5px;line-height:1.45;font-weight:500;color:#0C1826} /* Focus areas. Seven bullets spent 380px of height on 21 words. */ .dxr-chips{display:flex;flex-wrap:wrap;gap:7px} .dxr-chips span{font-size:13.5px;line-height:1;padding:7px 11px;border-radius:999px; background:#F4F4F6;color:#434752;white-space:nowrap} .dxr-ct{font-size:15.5px !important;line-height:1.6;color:#434752;margin:0 !important} .dxr-ct a{color:#0B5C3B;font-weight:600;text-decoration:none} .dxr-ct a:hover{text-decoration:underline;text-underline-offset:2px} /* ---- mobile. The rail dissolves into the stack, it does not move. */ @media (max-width:900px){ .dxr-g{grid-template-columns:minmax(0,1fr);gap:36px 0} .dxr-side{position:static} .dxr-press{grid-template-columns:minmax(0,1fr);gap:0} .dxr-main{padding:24px 22px 26px;border-radius:12px} /* A theme rule shrinks h2 to 19.5px on phones while leaving h3 at 22, which inverts the hierarchy: the section title ends up smaller than the sections inside it. Both are pinned here. */ .dxr-h2{font-size:23px !important;line-height:1.25 !important} .dxr-h3{font-size:19.5px !important;line-height:1.3 !important;margin:38px 0 18px !important} .dxr-role{font-size:17px !important} .dxr-q p{font-size:17.5px !important} .dxr-pt{font-size:16.5px !important} .dxr-h3{margin-top:38px} .dxr-chips span{white-space:normal} } /* --- block 15 --- */ /* Author page redesign, 2026-09-07. Scoped to body.author only. Built against the rendered DOM: .dauth-avatar, .dauth-stat-row (.dauth-stat-num/.dauth-stat-lbl), .dauth-trust-row, .dbh-card-*. Revert by deactivating this snippet. */ /* 1. Monogram removed. Typography carries the identity. */ body.author .dauth-avatar{display:none!important} /* 2. Hero: bio left, stats panel right. Trust row spans full width beneath. */ @media (min-width:941px){ body.author .dauth-hero-inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.9fr);column-gap:72px;align-items:start} body.author .dauth-eyebrow, body.author .dauth-hero-name, body.author .dauth-hero-role, body.author .dauth-hero-bio{grid-column:1} body.author .dauth-hero-inner > div:not([class]){grid-column:1} body.author .dauth-stat-row{grid-column:2;grid-row:1 / span 5;align-self:start} body.author .dauth-trust-row{grid-column:1 / -1} } body.author .dauth-hero-name{font-size:clamp(44px,5.4vw,64px)!important;line-height:1.04!important;letter-spacing:-.025em!important;margin:0 0 14px!important} body.author .dauth-hero-role{display:inline-flex!important;justify-self:start;align-self:start;width:auto!important;margin:0 0 24px!important} body.author .dauth-hero-bio{font-size:17.5px!important;line-height:1.68!important;max-width:60ch!important;margin:0!important} /* 3. Stats become a bordered panel. */ body.author .dauth-stat-row{display:block!important;border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:24px 26px;margin:0!important} body.author .dauth-stat{display:block!important;padding:0!important} body.author .dauth-stat + .dauth-stat{border-top:1px solid rgba(255,255,255,.13);margin-top:18px!important;padding-top:18px!important} body.author .dauth-stat-num{font-size:34px!important;line-height:1!important;letter-spacing:-.02em!important} body.author .dauth-stat-lbl{margin-top:5px!important;opacity:.62} /* 4. Website / LinkedIn as real brand buttons. The original rules are all !important, so every declaration here has to be too. */ body.author .dauth-hero-inner > div:not([class]){ display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important; align-items:center!important;gap:12px!important;justify-self:start;width:auto!important; margin:30px 0 0!important} body.author .dauth-hero-inner > div:not([class]) > a{ font-family:Silka,"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif!important; font-size:14.5px!important;font-weight:600!important;letter-spacing:normal!important; text-transform:none!important;white-space:nowrap!important; padding:12px 24px!important;border-radius:999px!important; min-width:150px!important;width:auto!important;text-align:center!important; display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important; transition:.15s!important;text-decoration:none!important} body.author .dauth-hero-inner > div:not([class]) > a:first-child{ background:#2EE8A4!important;color:#0C1826!important;border:1px solid #2EE8A4!important} body.author .dauth-hero-inner > div:not([class]) > a:first-child:hover{ background:#25d494!important;border-color:#25d494!important} body.author .dauth-hero-inner > div:not([class]) > a:last-child{ background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important} body.author .dauth-hero-inner > div:not([class]) > a:last-child:hover{ background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.40)!important} /* 5. Trust row: quieter, sits under the fold as supporting detail. */ body.author .dauth-trust-row{margin-top:52px!important;padding-top:26px!important;border-top:1px solid rgba(255,255,255,.13)} body.author .dauth-trust-label{opacity:.62} /* 6. Cards: no duplicate badge, no grey title block, aligned meta. */ body.author .dbh-card-glyph{display:none!important} body.author .dbh-card{display:flex!important;flex-direction:column;border-radius:14px;padding:26px 26px 22px!important;transition:.16s} body.author .dbh-card:hover{transform:translateY(-2px)} body.author .dbh-card-head{background:transparent!important;border-bottom:0!important;padding:0!important} body.author .dbh-card-title{font-size:19px!important;line-height:1.32!important;letter-spacing:-.012em!important;margin:14px 0 10px!important} body.author .dbh-card-body{padding:0!important;display:flex;flex-direction:column;flex:1} body.author .dbh-card-summary{font-size:14.8px!important;line-height:1.6!important;margin:0!important} body.author .dbh-card-footer{margin-top:auto!important;padding-top:18px!important;border-top:0!important} /* 7. Mobile. */ @media (max-width:640px){ body.author .dauth-hero-name{font-size:clamp(34px,9vw,44px)!important} body.author .dauth-hero-bio{font-size:16px!important} body.author .dauth-stat-row{margin-top:28px!important;padding:20px 22px} body.author .dauth-hero-inner > div:not([class]){flex-direction:column!important;flex-wrap:wrap!important} body.author .dauth-hero-inner > div:not([class]) > a{flex:none;width:100%} body.author .dauth-trust-row{margin-top:32px!important} body.author .dbh-filter-bar{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none} body.author .dbh-filter-bar::-webkit-scrollbar{display:none} body.author .dbh-filter-btn{flex:none} body.author .dbh-card{padding:22px 22px 20px!important} body.author .dbh-card-title{font-size:18px!important} } /* 8. One CTA, not four. Keep the detector, drop the second dark slab and the solutions widget, which added two more exits on a credibility page. */ body.author .dauth-cta-wrap{display:none!important} body.author .dauth-widget, body.author .dauth-widget-footer{display:none!important} /* 9. The card head kept min-height:150px, sized for the monogram glyph removed in rule 6. That left ~80px of dead space above every card title. */ body.author .dbh-card-head{min-height:0!important} /* 10. The trust row's top border sat flush against the Website/LinkedIn buttons, so the rule read as an underline on them rather than a section divider. Push it clear on all three author archives. */ body.author .dauth-hero-inner > div:not([class]){margin:30px 0 46px!important} @media (max-width:640px){ body.author .dauth-hero-inner > div:not([class]){margin:26px 0 38px!important} } /* 11. Not every author has the Website/LinkedIn row. The Diopter AI Team hero ends at the bio, so rule 10 did nothing there and the divider sat flush against the text. A later rule pins margin-top:0 on the trust row for the full-bleed band, so the space has to come from the element above it. */ body.author .dauth-hero-inner:not(:has(> div:not([class]))) .dauth-hero-bio{margin-bottom:46px!important} @media (max-width:640px){ body.author .dauth-hero-inner:not(:has(> div:not([class]))) .dauth-hero-bio{margin-bottom:38px!important} } /* --- block 17 --- */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap'); /* ===== Diopter author page — Editorial Profile redesign ===== */ :root{ --dio-deep-signal:#0C1826; --dio-night-lens:#314252; --dio-soft-focus:#DCE4E8; --dio-true-mint:#36AC75; --dio-mid-mint:#54D197; --dio-light-mint:#A0EBC3; --dio-slate-focus:#434752; --dio-mist-grey:#EDEDEF; --dio-pale-lens:#F4F4F6; } body.author .dauth-hero, body.author .dauth-hero-name, body.author .dauth-eyebrow, body.author .dauth-hero-role, body.author .dauth-hero-bio, body.author .dauth-section, body.author .dbh-grid, body.author .dbh-card { font-family:'Silka','Instrument Sans',-apple-system,'system-ui','Segoe UI',sans-serif !important; } /* Hero background + accent */ body.author .dauth-hero{ background: var(--dio-deep-signal) !important; position: relative; overflow: hidden; padding-bottom: 0 !important; } body.author .dauth-hero::before{ content:""; position:absolute; top:-120px; right:-120px; width:360px; height:360px; border-radius:50%; background: radial-gradient(circle, rgba(54,172,117,0.20), transparent 70%); pointer-events:none; } body.author .dauth-hero-inner{ position:relative; z-index:1; } body.author .dauth-eyebrow{ color: var(--dio-light-mint) !important; display:flex; align-items:center; gap:8px; } body.author .dauth-eyebrow::before{ content:""; width:16px; height:2px; background: var(--dio-true-mint); display:inline-block; } body.author .dauth-hero-name{ color:#fff !important; letter-spacing:-0.01em !important; } body.author .dauth-hero-role{ display:inline-flex !important; background: rgba(54,172,117,0.14) !important; color: var(--dio-light-mint) !important; border: 1px solid rgba(54,172,117,0.35) !important; border-radius: 999px !important; } body.author .dauth-hero-bio{ color: var(--dio-soft-focus) !important; opacity:0.9; } /* Avatar injected by JS */ body.author .dauth-avatar{ width:88px; height:88px; border-radius:50%; background: linear-gradient(135deg, var(--dio-mid-mint), var(--dio-true-mint)); color: var(--dio-deep-signal); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; flex-shrink:0; box-shadow: 0 0 0 4px rgba(255,255,255,0.06); margin-bottom:20px; } /* Stat row injected by JS */ body.author .dauth-stat-row{ display:flex; gap:32px; padding-top:20px; margin-top:8px; border-top:1px solid rgba(255,255,255,0.1); } body.author .dauth-stat .dauth-stat-num{ font-size:26px; font-weight:800; color:#fff; line-height:1; margin-bottom:4px; } body.author .dauth-stat .dauth-stat-lbl{ font-size:12px; color:var(--dio-soft-focus); opacity:0.6; } /* Trust row -> full-bleed white strip inside the base of the dark hero */ body.author .dauth-trust-row{ background:#fff !important; position: relative !important; left: 50% !important; margin-left: -50vw !important; width: 100vw !important; box-sizing: border-box !important; padding: 28px max(20px, calc(50vw - 616px)) 40px !important; margin-top: 32px !important; margin-bottom: 0 !important; border-top: 1px solid var(--dio-mist-grey); z-index: 2; } body.author .dauth-trust-label{ color: var(--dio-slate-focus) !important; } body.author .dauth-trust-item p, body.author .dauth-trust-item div:not(.dauth-trust-label){ color: var(--dio-night-lens) !important; } /* Section head + filters */ body.author .dauth-section-rule{ background: var(--dio-mist-grey) !important; } body.author .dbh-filter-btn{ border-color: var(--dio-mist-grey) !important; color: var(--dio-night-lens) !important; background:#fff !important; } body.author .dbh-filter-btn.active{ background: var(--dio-deep-signal) !important; color:#fff !important; border-color: var(--dio-deep-signal) !important; } /* Cards */ body.author .dbh-card{ border: 1px solid var(--dio-mist-grey) !important; border-radius: 14px !important; transition: box-shadow .15s, transform .15s; } body.author .dbh-card:hover{ box-shadow: 0 8px 24px rgba(12,24,38,0.08); transform: translateY(-2px); } body.author .dbh-card-glyph{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background: var(--dio-pale-lens) !important; color: var(--dio-slate-focus) !important; } body.author .dbh-card-cat{ color: var(--dio-night-lens) !important; display:flex; align-items:center; gap:6px; } body.author .dbh-card-cat::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--dio-true-mint); display:inline-block; } body.author .dbh-card-title{ color: var(--dio-deep-signal) !important; } body.author .dbh-card-summary{ color: var(--dio-slate-focus) !important; } body.author .dbh-card-arrow{ color: var(--dio-true-mint) !important; font-weight:700 !important; } /* dblog: extended author bio section (.dauthx) - restyle to match Editorial Profile redesign */ body.author .dauthx, body.author .dauthx *{ font-family:'Silka','Instrument Sans',-apple-system,'system-ui','Segoe UI',sans-serif !important; } body.author .dauthx{ background:#fff !important; padding-top:56px !important; padding-bottom:72px !important; } body.author .dauthx-g{ gap:48px !important; } body.author .dx-sec{ margin-bottom:40px; } body.author .dx-sec:last-child{ margin-bottom:0; } body.author .dx-sec h2{ font-size:22px !important; font-weight:800 !important; color: var(--dio-deep-signal) !important; margin:0 0 16px !important; letter-spacing:-0.01em; } body.author .dx-sec > p{ font-size:15px !important; line-height:1.75 !important; color: var(--dio-night-lens) !important; margin:0 0 16px !important; } body.author .dx-sec p strong{ color: var(--dio-deep-signal) !important; font-weight:700 !important; } body.author .dx-pull{ border-left:3px solid var(--dio-true-mint) !important; padding:4px 0 4px 20px !important; margin:24px 0 8px !important; } body.author .dx-pull p{ font-size:18px !important; font-weight:600 !important; line-height:1.5 !important; color: var(--dio-deep-signal) !important; margin:0 !important; } body.author .dx-src{ font-size:12px !important; color: var(--dio-slate-focus) !important; opacity:0.75; margin:0 0 16px 20px !important; } body.author .dx-tr{ display:flex !important; gap:20px; padding:18px 0 !important; border-top:1px solid var(--dio-mist-grey) !important; } body.author .dx-tr:first-of-type{ border-top:none !important; padding-top:0 !important; } body.author .dx-ty{ flex:0 0 100px; font-size:12px !important; font-weight:700 !important; letter-spacing:0.04em; text-transform:uppercase; color: var(--dio-true-mint) !important; padding-top:2px; } body.author .dx-th{ font-size:15px !important; font-weight:700 !important; color: var(--dio-deep-signal) !important; margin:0 0 6px !important; } body.author .dx-td{ font-size:13px !important; line-height:1.6 !important; color: var(--dio-slate-focus) !important; margin:0 !important; } body.author .dx-cols{ display:grid !important; grid-template-columns:1fr 1fr; gap:16px !important; } body.author .dx-card{ background:#fff !important; border:1px solid var(--dio-mist-grey) !important; border-radius:14px !important; padding:18px !important; transition: box-shadow .15s, transform .15s; } body.author .dx-card:hover{ box-shadow:0 8px 24px rgba(12,24,38,0.08); transform: translateY(-2px); } body.author .dx-cd{ font-size:11px !important; font-weight:700 !important; letter-spacing:0.05em; text-transform:uppercase; color: var(--dio-true-mint) !important; margin:0 0 8px !important; } body.author .dx-ct{ font-size:14px !important; font-weight:700 !important; margin:0 0 6px !important; } body.author .dx-ct a{ color: var(--dio-deep-signal) !important; text-decoration:none; } body.author .dx-ct a:hover{ color: var(--dio-true-mint) !important; } body.author .dx-cb{ font-size:12.5px !important; line-height:1.6 !important; color: var(--dio-slate-focus) !important; margin:0 !important; } body.author .dx-box{ background: var(--dio-pale-lens) !important; border:1px solid var(--dio-mist-grey) !important; border-radius:16px !important; padding:22px !important; margin-bottom:20px !important; } body.author .dx-bl{ font-size:11px !important; font-weight:700 !important; letter-spacing:0.06em; text-transform:uppercase; color: var(--dio-slate-focus) !important; margin:0 0 16px !important; } body.author .dx-kv{ display:flex !important; align-items:baseline; justify-content:space-between; padding:9px 0 !important; border-bottom:1px solid var(--dio-mist-grey) !important; } body.author .dx-kv:last-child{ border-bottom:none !important; } body.author .dx-kv b{ font-size:13px !important; font-weight:600 !important; color: var(--dio-night-lens) !important; } body.author .dx-kv span{ font-size:13px !important; font-weight:700 !important; color: var(--dio-deep-signal) !important; text-align:right; } body.author .dx-list{ display:flex !important; flex-direction:column; gap:10px !important; } body.author .dx-list span{ font-size:13px !important; color: var(--dio-night-lens) !important; display:flex; align-items:center; gap:8px; } body.author .dx-list span::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--dio-true-mint); flex-shrink:0; display:inline-block; } @media (max-width: 800px){ body.author .dauthx-g{ grid-template-columns:1fr !important; } body.author .dx-cols{ grid-template-columns:1fr !important; } body.author .dx-tr{ flex-direction:column; gap:6px; } } /* dblog: articles-reviewed list + contact box link colors */ body.author .dx-revlist{ display:flex !important; flex-direction:column; } body.author .dx-rev{ display:flex !important; align-items:center; gap:16px; padding:14px 4px !important; border-bottom:1px solid var(--dio-pale-lens) !important; text-decoration:none !important; } body.author .dx-rev:last-child{ border-bottom:none !important; } body.author .dx-rev:hover .dx-revt{ color: var(--dio-true-mint) !important; } body.author .dx-revc{ flex:0 0 150px; font-size:11px !important; font-weight:700 !important; letter-spacing:0.05em; text-transform:uppercase; color: var(--dio-slate-focus) !important; } body.author .dx-revt{ flex:1; font-size:14px !important; font-weight:700 !important; color: var(--dio-deep-signal) !important; } body.author .dx-revd{ font-size:12px !important; color: var(--dio-slate-focus) !important; white-space:nowrap; } body.author .dx-revsec > p{ color: var(--dio-slate-focus) !important; font-size:13px !important; } body.author .dx-box a{ color: var(--dio-true-mint) !important; font-weight:700 !important; text-decoration:none; } body.author .dx-box a:hover{ text-decoration:underline; } @media (max-width: 800px){ body.author .dx-rev{ flex-wrap:wrap; } body.author .dx-revc{ flex:0 0 100%; } body.author .dx-revd{ margin-left:auto; } } /* dblog: v2 "Cohesive Editorial Profile" rollout - merge hero/trust-row, two-col sticky sidebar, continuous white surface */ body.author{ background: var(--dio-pale-lens) !important; } /* merge trust-row into the dark hero (no gap, dark theme instead of white breakout) */ body.author .dauth-trust-row{ background: var(--dio-deep-signal) !important; margin-top: 0 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 22px !important; padding-bottom: 32px !important; } body.author .dauth-trust-label{ color: var(--dio-light-mint) !important; opacity:0.9; } body.author .dauth-trust-item p, body.author .dauth-trust-item div:not(.dauth-trust-label){ color: var(--dio-soft-focus) !important; opacity:0.85; } /* extended bio area: transparent wrapper on pale-lens page bg, two-col grid becomes main card + sticky sidebar */ body.author .dauthx{ background: transparent !important; padding-top: 40px !important; } body.author .dauthx-g > div:first-child{ background:#fff !important; border-radius: 20px !important; padding: 40px 40px 8px !important; box-shadow: 0 1px 2px rgba(12,24,38,0.04); } body.author .dauthx-g > div:last-child{ position: sticky !important; top: 24px; align-self: start; } body.author .dx-sec.dx-revsec{ background:#fff !important; border-radius: 20px !important; padding: 8px 40px 36px !important; margin-top: 16px; box-shadow: 0 1px 2px rgba(12,24,38,0.04); } /* article grid section (published/reviewed) - continue the white surface, rounded bottom */ body.author .dauth-section:has(#dauthGrid){ background:#fff !important; border-radius: 20px !important; padding: 36px 40px 48px !important; margin-top: 20px !important; box-shadow: 0 1px 2px rgba(12,24,38,0.04); } @media (max-width: 900px){ body.author .dauthx-g > div:first-child{ border-radius: 16px; padding: 28px 22px 8px !important; } body.author .dauthx-g > div:last-child{ position: static !important; } body.author .dx-sec.dx-revsec{ border-radius: 16px; padding: 8px 22px 28px !important; margin-top: 16px; } body.author .dauth-section:has(#dauthGrid){ border-radius: 16px; padding: 28px 22px 36px !important; } } /* dblog: hide the plain 'Articles reviewed' list - redundant with the card grid below */ body.author .dx-revsec{ display: none !important; } /* --- block 19 --- */ /* ~~~~~ RECOVERED PER-POST COMPONENT CSS 2026-08-05 ~~~~~ Today's body-only conversion stripped each legacy post's inline