/* Friendnom About Us: standalone page; styles isolated to .fn-about. */
.fn-about {
    --about-ink: #132b4b;
    --about-muted: #62758b;
    --about-blue: #176ff2;
    --about-border: #dfe8f2;
    --about-bg: #f5f8fc;
    min-height: calc(100vh - 75px);
    padding: 24px 28px 64px;
    background: var(--about-bg);
    color: var(--about-ink);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 400;
    font-family: inherit;
    box-sizing: border-box;
}
.fn-about, .fn-about * { box-sizing: border-box; }
.fn-about-shell { width: min(1130px, 100%); margin: 0 auto; }
.fn-about a { text-decoration: none; }
.fn-about-bar { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; padding-bottom: 20px; }
.fn-about-bar-brand { color: #53708e; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.fn-about-bar-brand span { color: #bac8d8; padding: 0 7px; }
.fn-about-close {
    width: 40px; height: 40px; display: grid; place-items: center;
    flex: 0 0 40px; border: 1px solid #dbe5f0; border-radius: 50%;
    background: #fff; color: #516984;
    box-shadow: 0 2px 8px rgba(26,50,80,.05);
    transition: background .16s, color .16s;
}
.fn-about-close:hover, .fn-about-close:focus-visible { background: #e5efff; color: #146ef5; outline: 2px solid transparent; }
.fn-about-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.fn-about-hero {
    display: grid; grid-template-columns: 1.24fr .86fr; gap: 36px; align-items: center;
    padding: 66px 64px; border: 1px solid #dbe7f5; border-radius: 28px;
    background: linear-gradient(120deg, #fff 0%, #f6faff 60%, #ecf4ff 100%);
    overflow: hidden;
}
.fn-about-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 850; color: #1e70d8; letter-spacing: .16em; }
.fn-about-eyebrow-dot { display: inline-block; width: 7px; height: 7px; border-radius: 100%; background: #2782fa; }
.fn-about h1, .fn-about h2, .fn-about h3 { color: var(--about-ink); letter-spacing: -.035em; }
.fn-about h1 { font-size: clamp(39px, 4.3vw, 62px); font-weight: 790; line-height: 1.12; margin: 22px 0 23px; }
.fn-about h1 em, .fn-about h2 em { color: #176ff2; font-style: normal; }
.fn-about-intro { color: #3a546f; line-height: 1.7; font-size: 17px; max-width: 625px; margin: 0 0 13px; }
.fn-about-hero-small { max-width: 560px; color: #667b91; line-height: 1.8; font-size: 13px; margin: 0; }
.fn-about-hero-actions, .fn-about-final-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.fn-about-primary, .fn-about-secondary, .fn-about-outline { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 18px; border-radius: 11px; font-size: 13px; font-weight: 750; }
.fn-about .fn-about-primary { color: #fff; background: #146ef5; }
.fn-about .fn-about-primary:hover { background: #075ccf; }
.fn-about .fn-about-secondary { color: #2f5479; background: #e9f2ff; }
.fn-about .fn-about-secondary:hover { background: #dbeaff; }
.fn-about-visual { position: relative; width: 100%; min-height: 350px; display: grid; place-items: center; }
.fn-about-globe { position: relative; width: min(350px, 100%); aspect-ratio: 1; border-radius: 50%; background: #ddeaff; display: grid; place-items: center; box-shadow: 0 0 0 26px rgba(209,227,254,.3); }
.fn-about-globe > svg { width: 94%; color: #2478ee; }
.fn-about-globe-ring { position: absolute; border: 1px solid rgba(41,109,220,.19); border-radius: 50%; inset: -20px; transform: rotate(20deg) scaleX(.86); }
.fn-about-globe-ring.ring-two { inset: -33px; transform: rotate(-18deg) scaleX(.74); }
.fn-about-dot { position: absolute; width: 9px; height: 9px; background: #126cf1; border-radius: 50%; box-shadow: 0 0 0 5px #fff9; }
.fn-about-dot.d1 { top: 11%; left: 20%; } .fn-about-dot.d2 { top: 31%; right: 2%; width: 11px; height: 11px; }
.fn-about-dot.d3 { bottom: 15%; left: 7%; width: 7px; height: 7px; } .fn-about-dot.d4 { bottom: 1%; right: 34%; width: 7px; height: 7px; }
.fn-about-visual-caption { position: absolute; bottom: -25px; color: #7990ac; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-align: center; }
.fn-about-section-index { display: block; margin-bottom: 16px; color: #3478cf; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.fn-about-statement { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 50px; padding: 84px 26px 78px; }
.fn-about-statement > .fn-about-section-index { grid-column: 1 / -1; margin: 0 0 -25px; }
.fn-about h2 { font-size: clamp(28px, 3vw, 41px); font-weight: 780; line-height: 1.21; margin: 0; }
.fn-about-prose p, .fn-about-audience p, .fn-about-values p { color: #526980; font-size: 14px; line-height: 1.95; margin: 0 0 16px; }
.fn-about-prose p:last-child, .fn-about-audience p:last-child { margin-bottom: 0; }
.fn-about-audiences { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.fn-about-audience { padding: 38px 40px 42px; border: 1px solid var(--about-border); border-radius: 22px; background: #fff; box-shadow: 0 4px 15px rgba(35,68,109,.035); }
.fn-about-card-icon { display: grid; place-items: center; width: 50px; height: 50px; color: #186df1; background: #edf5ff; border-radius: 15px; margin-bottom: 21px; }
.fn-about-card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fn-about-audience > span { font-size: 10px; letter-spacing: .14em; font-weight: 850; color: #3478cf; }
.fn-about-audience h3 { font-size: 25px; line-height: 1.25; margin: 9px 0 17px; }
.fn-about-story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; padding: 100px 26px 85px; }
.fn-about-story-lead h2 { max-width: 430px; }
.fn-about-features { padding: 55px 48px 52px; border: 1px solid var(--about-border); border-radius: 24px; background: #fff; }
.fn-about-section-head { max-width: 670px; margin-bottom: 33px; }
.fn-about-section-head > p { color: var(--about-muted); font-size: 14px; line-height: 1.8; margin: 15px 0 0; }
.fn-about-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.fn-about-feature-grid > article { min-width: 0; overflow: hidden; border-radius: 17px; background: #f3f7fd; }
.fn-about-feature-illustration { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 290 / 193; object-fit: cover; background: #f3f7fd; }
.fn-about-feature-copy { padding: 16px 21px 23px; }
.fn-about-feature-grid h3 { font-size: 17px; line-height: 1.3; margin: 0 0 11px; }
.fn-about-feature-grid p { color: #62758b; line-height: 1.85; font-size: 12.5px; margin: 0; }
.fn-about-values { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; padding: 94px 26px 100px; }
.fn-about-values-copy h3 { margin: 0 0 9px; font-size: 18px; }
.fn-about-values-copy p { margin-bottom: 24px; }
.fn-about-values-copy p:last-child { margin: 0; }
.fn-about-final { padding: 70px 7% 37px; background: #142c4c; color: #ecf5ff; border-radius: 26px; text-align: center; }
.fn-about-final .fn-about-section-index { color: #93bdff; }
.fn-about-final h2 { font-size: clamp(30px,3.8vw,46px); color: #fff; }
.fn-about-final > p { width: min(715px, 100%); margin: 21px auto 0; color: #c8d7e7; font-size: 14px; line-height: 1.95; }
.fn-about-final .fn-about-closing { margin-top: 27px; font-size: 17px; color: #eef7ff; }
.fn-about-final .fn-about-closing strong { color: #fff; }
.fn-about-final-actions { justify-content: center; margin: 29px 0 40px; }
.fn-about-final .fn-about-outline { border: 1px solid #6c86a7; color: #eaf4ff; }
.fn-about-final .fn-about-outline:hover { background: #244261; }
.fn-about-signoff { border-top: 1px solid rgba(255,255,255,.17); padding-top: 26px; font-size: 11px; letter-spacing: .13em; font-weight: 750; color: #c8d9ed; }
.fn-about-signoff span { padding: 0 8px; color: #578cd2; }
@media (max-width: 900px) {
    .fn-about { padding: 18px 16px 45px; }
    .fn-about-hero { grid-template-columns: 1fr; padding: 50px 36px 54px; gap: 25px; }
    .fn-about-visual { min-height: 300px; }
    .fn-about-globe { width: 260px; }
    .fn-about-statement, .fn-about-story, .fn-about-values { grid-template-columns: 1fr; gap: 22px; }
    .fn-about-statement { padding: 62px 12px; }
    .fn-about-statement > .fn-about-section-index { grid-column: 1; margin: 0; }
    .fn-about-story, .fn-about-values { padding: 70px 12px; }
    .fn-about-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .fn-about { padding: 12px 10px 30px; }
    .fn-about-bar { padding: 0 5px 12px; }
    .fn-about-bar-brand { font-size: 9px; }
    .fn-about-hero { padding: 40px 23px; border-radius: 18px; }
    .fn-about h1 { font-size: clamp(32px, 9vw, 43px); }
    .fn-about-intro { font-size: 15px; }
    .fn-about-visual { min-height: 248px; }
    .fn-about-globe { width: 204px; }
    .fn-about-visual-caption { bottom: -13px; font-size: 9px; }
    .fn-about-statement { padding: 53px 12px; }
    .fn-about-audiences { grid-template-columns: 1fr; }
    .fn-about-audience { padding: 27px 24px; }
    .fn-about-story, .fn-about-values { padding: 62px 12px; }
    .fn-about-features { padding: 30px 22px; }
    .fn-about-feature-grid { grid-template-columns: 1fr; }
    .fn-about-feature-copy { padding: 17px 20px 22px; }
    .fn-about-final { border-radius: 18px; padding: 49px 23px 30px; }
}
/* Honor Friendnom theme selection, without overriding global site colors. */
html[data-friendnom-theme="dark"] .fn-about { --about-ink:#e9f2ff; --about-border:#35465b; --about-bg:#171c24; --about-muted:#b2bfd1; }
html[data-friendnom-theme="dark"] .fn-about-hero { background: linear-gradient(120deg, #202e42, #192b48); border-color: #35465b; }
html[data-friendnom-theme="dark"] .fn-about-hero-small,
html[data-friendnom-theme="dark"] .fn-about-intro,
html[data-friendnom-theme="dark"] .fn-about-prose p,
html[data-friendnom-theme="dark"] .fn-about-audience p,
html[data-friendnom-theme="dark"] .fn-about-values p,
html[data-friendnom-theme="dark"] .fn-about-feature-grid p,
html[data-friendnom-theme="dark"] .fn-about-section-head > p { color: #b6c3d6; }
html[data-friendnom-theme="dark"] .fn-about-audience,
html[data-friendnom-theme="dark"] .fn-about-features { background: #222b38; }
html[data-friendnom-theme="dark"] .fn-about-feature-grid > article { background: #2c3b51; }
html[data-friendnom-theme="dark"] .fn-about-close { background: #242f40; color: #e3eeff; border-color:#46566a; }
html[data-friendnom-theme="dark"] .fn-about-secondary { background: #2f4765; color: #e3eeff; }
html[data-friendnom-theme="dark"] .fn-about-bar-brand { color: #a6bad4; }