
:root{--navy:#051d3b;--navy2:#082e5b;--blue:#087cfa;--sky:#22a7ff;--slate:#617180;--ink:#12283d;--muted:#5e6f7e;--light:#f2f6fa;--line:#dce5ed}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:16px/1.65 'Segoe UI',Arial,sans-serif;background:#fff}a{color:inherit;text-decoration:none}button{font:inherit} .container{width:min(1180px,calc(100% - 48px));margin:auto}.topline{height:5px;background:linear-gradient(90deg,#667d8e 0 25%,#0069d9 25% 75%,#00a0ff 75%)}header{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 20px #071c3614}nav{min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:22px}.logo{width:345px;max-width:43vw;height:auto;display:block}.navlinks{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:650}.navlinks a:hover{color:#006ed6}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:4px;background:var(--blue);color:white;font-size:13px;font-weight:750;letter-spacing:.03em;border:1px solid var(--blue);transition:.2s}.btn:hover{background:#0064d2}.btn.outline{background:transparent;border-color:#ffffff80;color:#fff}.btn.outline:hover{background:#ffffff22}.menu{display:none;border:0;background:transparent;font-size:26px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 35%,#11477e 0,#06274d 40%,#041a34 83%);color:#fff}.hero:after{content:'';position:absolute;right:-100px;top:-150px;width:470px;height:850px;transform:rotate(28deg);background:linear-gradient(105deg,#8298aa 0 17%,transparent 17% 21%,#0050b8 21% 53%,#008efa 53% 71%,transparent 71%);opacity:.65;clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}.hero:before{content:'';position:absolute;right:180px;top:-90px;width:170px;height:800px;transform:rotate(28deg);background:linear-gradient(#006af0,#001e4b);opacity:.6}.hero .container{position:relative;z-index:2;min-height:625px;display:flex;align-items:center}.hero-content{max-width:790px;padding:90px 0 105px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#67bdff}.hero h1{font-size:clamp(43px,5.5vw,76px);line-height:1.09;letter-spacing:-.045em;margin:21px 0 27px;font-weight:760}.hero h1 span{color:#62bdff}.hero p{font-size:20px;max-width:630px;color:#d3e2ef;line-height:1.65;margin:0 0 34px}.actions{display:flex;gap:14px;flex-wrap:wrap}.strap{background:#f6f9fc;border-bottom:1px solid var(--line);padding:22px 0;text-align:center;font-size:13px;font-weight:800;letter-spacing:.19em;color:#0a2e5b}.strap span{color:#1488e8;margin:0 18px}section{padding:95px 0}.section-label{color:#0073db;font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:800}.section-title{font-size:clamp(31px,3.4vw,47px);line-height:1.2;letter-spacing:-.035em;margin:14px 0 21px;color:#09284b}.lead{font-size:19px;color:var(--muted);max-width:800px}.grid{display:grid;gap:22px}.three{grid-template-columns:repeat(3,1fr)}.five{grid-template-columns:repeat(5,1fr)}.card{border:1px solid var(--line);background:#fff;padding:30px;border-radius:7px;box-shadow:0 12px 35px #0a31500a}.card h3{font-size:20px;line-height:1.25;color:#092b50;margin:12px 0}.card p{color:var(--muted);margin:0}.number{font-size:14px;color:#0078e8;font-weight:800;letter-spacing:.08em}.tint{background:var(--light)}.challenge{border-top:3px solid #007ef2}.challenge h3{margin-top:0}.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.dark{background:linear-gradient(125deg,#041b35,#0a3767);color:#fff}.dark .section-title{color:#fff}.dark .lead,.dark p{color:#c9d9e8}.pillar{padding:25px 21px;border-top:3px solid #128bf6;background:#fff;border-radius:4px;box-shadow:0 7px 26px #08274310}.pillar h3{font-size:17px;line-height:1.3;margin:12px 0}.pillar p{font-size:14px;color:var(--muted);line-height:1.65}.framework-intro{max-width:820px;margin-bottom:35px}.steps{display:grid;gap:16px}.step{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid #ffffff33}.step strong{color:#69c2ff;font-size:22px}.step div{font-size:16px}.quote{background:#eaf3fb;border-left:4px solid var(--blue);padding:30px 36px;font-size:22px;line-height:1.5;color:#12395e;font-weight:550}.credential{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.credential-box{background:#082b52;padding:44px;color:white;border-radius:6px;position:relative;overflow:hidden}.credential-box:after{content:'';position:absolute;right:-30px;top:-80px;width:110px;height:430px;background:linear-gradient(#008efa,#00489a);transform:rotate(28deg);opacity:.65}.credential-box h3{font-size:30px;line-height:1.25;margin:0 0 12px;position:relative;z-index:1}.credential-box p{position:relative;z-index:1;color:#c7d9e9}.cta{text-align:center;background:#eef5fb}.cta .lead{margin:0 auto 30px}.footer{background:#04182f;color:#a9c0d4;padding:55px 0 24px}.footer-inner{display:flex;justify-content:space-between;gap:30px}.footer h3{color:#fff;font-size:21px;margin:0 0 12px}.footer a{color:#b7d7f5}.footer-brand-logo{display:block;width:300px;max-width:100%;height:auto;margin:0 0 12px}.footer-small{border-top:1px solid #ffffff20;margin-top:45px;padding-top:20px;font-size:12px;display:flex;justify-content:space-between;gap:20px}.text-link{color:#0077df;font-weight:750}.mini{font-size:13px;color:var(--muted)}@media(max-width:1050px){.navlinks{gap:13px}.logo{width:280px}.five{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.container{width:min(100% - 34px,1180px)}nav{min-height:76px}.logo{width:250px;max-width:75vw}.menu{display:block}.navlinks{display:none;position:absolute;top:81px;left:0;right:0;background:white;flex-direction:column;align-items:stretch;padding:20px 25px;box-shadow:0 14px 18px #0002}.navlinks.open{display:flex}.hero .container{min-height:570px}.hero-content{padding:75px 0}.hero:after{opacity:.22;right:-300px}.hero:before{opacity:.2}.hero p{font-size:17px}.strap{font-size:11px;letter-spacing:.06em}.strap span{margin:0 7px}section{padding:65px 0}.three,.five,.split,.credential{grid-template-columns:1fr}.footer-inner,.footer-small{flex-direction:column}.credential{gap:28px}}
.history{background:#fff}.history-layout{display:grid;grid-template-columns:1.5fr .65fr;gap:65px;align-items:center}.history-badge{background:linear-gradient(145deg,#052243,#0b4277);color:#fff;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:6px;position:relative;overflow:hidden}.history-badge:after{content:"";position:absolute;width:120px;height:420px;right:-45px;top:-40px;transform:rotate(25deg);background:linear-gradient(#009aff,#0054b5);opacity:.55}.history-badge span{font-size:12px;letter-spacing:.18em;position:relative;z-index:1}.history-badge strong{font-size:clamp(72px,9vw,118px);line-height:1.1;letter-spacing:-.06em;position:relative;z-index:1}.about-hero{background:linear-gradient(120deg,#051d3b,#0a3c70);padding:95px 0;color:white}.about-hero h1{font-size:clamp(40px,5vw,66px);line-height:1.13;max-width:940px;margin:18px 0}.about-hero p{max-width:850px;font-size:19px;color:#d3e2ef}.prose{max-width:900px}.prose p{color:#526575;font-size:17px;line-height:1.85}.about-section{padding:82px 0}.about-section h2{font-size:clamp(29px,3.3vw,44px);line-height:1.2;color:#09284b}.about-section h3{color:#0a3561}.about-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}.about-pillars article{padding:20px 23px;border-left:3px solid #087cfa;background:#fff}.about-pillars h3{margin:0 0 5px}.about-pillars p{margin:0;color:#526575}.leadership-tag{font-size:13px;letter-spacing:.13em;font-weight:800;color:#0073db;text-transform:uppercase}.about-quote{border-left:4px solid #087cfa;padding:20px 26px;background:#eaf3fb;font-size:21px;color:#103b63;font-weight:600;margin:25px 0}.about-cta{background:#eef5fb;text-align:center}@media(max-width:760px){.history-layout,.about-pillars{grid-template-columns:1fr}.history-badge{min-height:235px}.about-hero{padding:70px 0}.about-section{padding:60px 0}}

.blog-shell{max-width:1000px;margin:65px auto 100px;padding:0 22px}.blog-shell h1{font-size:clamp(2rem,5vw,3.4rem);color:var(--navy);line-height:1.15}.blog-intro{font-size:1.13rem;color:#52627a;margin:20px 0 36px}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px}.blog-card{border:1px solid #dce3eb;border-radius:14px;overflow:hidden;background:white}.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.blog-card-body{padding:24px}.blog-card h2{font-size:1.35rem;line-height:1.3}.blog-card a{color:var(--navy);text-decoration:none}.blog-meta{color:#617086;font-size:.9rem}.article-body{line-height:1.8;overflow-wrap:anywhere}.article-body img{max-width:100%;height:auto}.article-body h2,.article-body h3{margin-top:1.6em}.article-body pre{overflow:auto}.article-hero{max-width:100%;height:auto;border-radius:12px;margin:25px 0}.article-head{margin-bottom:40px}.blog-back{display:inline-block;margin:35px 0;color:var(--navy)}
.footer-connect{color:#fff}
.blog-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:44px 0 0}
.blog-pagination a,.blog-pagination .current{display:inline-flex;min-width:40px;min-height:40px;padding:8px 12px;align-items:center;justify-content:center;border:1px solid #dce3eb;border-radius:5px;text-decoration:none;color:#082e5b}
.blog-pagination a:hover,.blog-pagination .current{background:#087cfa;color:#fff;border-color:#087cfa}
.article-body table{max-width:100%;display:block;overflow-x:auto;border-collapse:collapse}
.article-body th,.article-body td{padding:9px 12px;border:1px solid #dce3eb}
/* Blog pagination */

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 48px auto 32px;
    flex-wrap: wrap;
}

.blog-pagination a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #d5dce5;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

.blog-pagination a:hover {
    background: #f1f4f8;
}

.blog-pagination span {
    font-size: 14px;
    opacity: 0.75;
}

/* GrandRanker article presentation */

.article-body .article-answer {
    margin: 1.5rem 0;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.article-body .article-answer > p:first-child {
    margin-top: 0;
}

.article-body figure {
    margin: 2rem 0;
    text-align: center;
}

.article-body figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.article-body figcaption {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: #64748b;
    text-align: center;
}

.article-body .cta-inline {
    margin: 24px 0;
    padding: 16px 20px;
    background: #f0f7ff;
    border-left: 4px solid #087cfa;
    border-radius: 0 8px 8px 0;
}

.article-body .cta-inline a {
    color: #087cfa;
    font-weight: 600;
    text-decoration: underline;
}

.article-body .cta-button-container {
    margin: 32px 0;
    text-align: center;
}

.article-body a.cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: #087cfa;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.article-body a.cta-button:hover {
    background: #0668d2;
}

.article-body table {
    width: 100%;
    margin: 2rem 0;
}

.article-body th {
    background: #f8f9fa;
    color: #111827;
    font-weight: 600;
    text-align: left;
}

.article-body th,
.article-body td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.article-body h2[id],
.article-body h3[id] {
    scroll-margin-top: 100px;
}

/* GrandRanker article formatting refinements */

/* Tables: horizontal separators without vertical grid lines */
.article-body table th,
.article-body table td {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #dce3eb;
}

/* Google preferred-source reference */
.article-body a[href^="https://www.google.com/preferences/source"] {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 68px;
    padding: 16px 20px;
    margin: 24px 0;

    border: 1px solid #d4d4d4;
    border-radius: 13px;
    background: #ffffff;

    color: #1e293b;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    box-sizing: border-box;
}

.article-body a[href^="https://www.google.com/preferences/source"]:hover {
    border-color: #b8b8b8;
    background: #fafafa;
}

.article-body a[href^="https://www.google.com/preferences/source"] img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.article-body a[href^="https://www.google.com/preferences/source"] span {
    overflow-wrap: anywhere;
}

.article-body a[href^="https://www.google.com/preferences/source"] strong {
    font-weight: 700;
}


