/* FINLY public design language. Page-specific layers follow this shared foundation. */
body.finly-clarity-site {
  margin: 0;
  color: var(--fin-navy);
  background: #fff;
  font-family: var(--fin-font-body);
  -webkit-font-smoothing: antialiased;
}
.finly-clarity-site .wrap { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.finly-clarity-site a { text-underline-offset: 5px; }
.finly-clarity-site .finly-header { background: rgba(255,255,255,.97); border-bottom: 1px solid #e6edf4; box-shadow: none; }
.finly-clarity-site .finly-nav-shell { max-width: 1360px; }
.finly-clarity-site .finly-check-link,
.finly-clarity-site .finly-mobile-cta { color: #fff; background: var(--fin-navy); border-color: var(--fin-navy); }
.finly-clarity-site .finly-portal-link { background: transparent; border-color: transparent; }
/* Locking overflow creates a new sticky scroll container. Keep the open drawer in the viewport. */
.finly-clarity-site.finly-nav-open { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
.finly-clarity-site.finly-nav-open .finly-header { position: fixed; inset-inline: 0; }
.finly-clarity-site :is(.fin-btn, .g-btn, .btn.primary, .cta) {
  min-height: 54px; border: 1px solid transparent; border-radius: 10px;
  padding-inline: 27px; color: #fff; background: var(--fin-navy);
  font-weight: 600; box-shadow: 0 10px 24px #0e2e5e1f;
}
.finly-clarity-site :is(.fin-btn, .g-btn, .btn.primary, .cta):hover { background: var(--fin-blue); }
.finly-clarity-site :is(.fin-btn--ghost, .btn.ghost) {
  color: var(--fin-navy); background: #fff; border: 1px solid var(--fin-line-strong);
  border-radius: 10px; box-shadow: none;
}
.finly-clarity-site :is(.fin-btn--ghost, .btn.ghost):hover { color: var(--fin-navy); background: var(--fin-blue-50); }
/* Legacy service buttons force white text; preserve readable variants on light heroes. */
body.finly-clarity-site .service-hero .fin-btn,
body.finly-clarity-site:has(.service-hero) :is(.final-cta, .upload-box) .fin-btn {
  color: #fff !important;
  background: var(--fin-navy);
  border: 1px solid transparent;
  box-shadow: 0 10px 24px #0e2e5e1f;
}
body.finly-clarity-site .service-hero .fin-btn:not(.fin-btn--ghost):hover,
body.finly-clarity-site:has(.service-hero) :is(.final-cta, .upload-box) .fin-btn:hover {
  background: var(--fin-blue);
  box-shadow: 0 14px 28px #0953ba33;
}
body.finly-clarity-site .service-hero .fin-btn--ghost {
  color: var(--fin-navy) !important;
  background: #fff;
  border: 1px solid var(--fin-line-strong);
  box-shadow: none;
  backdrop-filter: none;
}
body.finly-clarity-site .service-hero .fin-btn--ghost:hover,
body.finly-clarity-site .service-hero .fin-btn--ghost:focus-visible {
  color: var(--fin-navy) !important;
  background: var(--fin-blue-50);
  box-shadow: none;
}
body.finly-clarity-site:has(.service-hero) :is(.service-hero, .final-cta, .upload-box) .fin-btn:focus-visible {
  outline: 3px solid var(--fin-navy);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px #fff;
}
.finly-clarity-site :focus-visible { outline: 3px solid var(--fin-navy); outline-offset: 4px; box-shadow: 0 0 0 8px #fff; }
.finly-clarity-site :is(.hero, .g-hero) { background: #fff; border: 0; box-shadow: none; }
.finly-clarity-site .hero { padding-block: 80px 64px; }
.finly-clarity-site .hero::before,
.finly-clarity-site .float-syms { display: none; }
.finly-clarity-site .hero h1 { font: 700 clamp(44px, 6.5vw, 88px)/1.09 var(--fin-font-display); letter-spacing: -.055em; }
.finly-clarity-site :is(.eyebrow, .fin-eyebrow) { color: var(--fin-teal-ink); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.finly-clarity-site .shimmer { color: var(--fin-blue); background: none; -webkit-text-fill-color: currentColor; animation: none; }
.finly-clarity-site .lead { color: var(--fin-text-soft); font-size: 18px; line-height: 1.85; }
.finly-clarity-site .fin-narrative-rail { background: var(--fin-blue-50); color: var(--fin-text-soft); border-block: 1px solid #e2ecf3; box-shadow: none; }
.finly-clarity-site .fin-narrative-rail::before { content: none; }
.finly-clarity-site .fin-narrative-static i,
.finly-clarity-site .fin-narrative-copy i { color: var(--fin-teal-ink); }
.finly-clarity-site .fin-narrative-rail .fin-narrative-toggle { color: var(--fin-navy); background: #fff; border-color: var(--fin-line-strong); }
/* Guides read like a publication: open articles, ruled indexes, generous line spacing. */
.finly-clarity-site .g-hero { max-width: 820px; padding-block: 74px 36px; }
.finly-clarity-site .g-hero h1 { font: 700 clamp(34px, 4.6vw, 60px)/1.16 var(--fin-font-display); letter-spacing: -.04em; }
.finly-clarity-site .g-hero .eyebrow { margin-bottom: 21px; }
.finly-clarity-site .g-article { max-width: 820px; padding: 24px 0 40px; border: 0; border-top: 1px solid #dae6ef; border-radius: 0; background: #fff; box-shadow: none; font-size: 18px; line-height: 1.9; }
.finly-clarity-site .g-article::before { content: none; }
.finly-clarity-site .g-article h2 { margin-top: 48px; font: 600 clamp(24px, 3vw, 32px)/1.35 var(--fin-font-display); }
.finly-clarity-site .g-article h3 { font-size: 21px; }
.finly-clarity-site .g-article p { margin-bottom: 22px; }
.finly-clarity-site .g-tool { padding: 30px; background: var(--fin-teal-50); border: 0; border-inline-start: 3px solid var(--fin-teal-ink); border-radius: 0; }
.finly-clarity-site .g-banks a { border-radius: 8px; padding: 12px 18px; }
.finly-clarity-site .g-cluster { padding-top: 68px; }
.finly-clarity-site .g-cluster h2 { font: 600 clamp(25px, 3vw, 36px)/1.25 var(--fin-font-display); }
.finly-clarity-site .g-cluster h2::before { width: 9px; height: 9px; background: var(--fin-teal-ink); border-radius: 50%; }
.finly-clarity-site .g-cluster-sub { max-width: 680px; margin: 15px 0 24px; font-size: 16px; line-height: 1.75; }
.finly-clarity-site .g-cluster + .cards { gap: 0 35px; padding-bottom: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finly-clarity-site .g-cluster + .cards .mini { padding: 28px 0 32px; border: 0; border-top: 1px solid #dbe6ef; border-radius: 0; background: #fff; box-shadow: none; }
.finly-clarity-site .g-cluster + .cards .mini::before { content: none; }
.finly-clarity-site .g-cluster + .cards .mini strong { font: 500 23px/1.45 var(--fin-font-display); }
.finly-clarity-site .g-cluster + .cards .mini span { margin-top: 12px; font-size: 16px; line-height: 1.8; }
.finly-clarity-site .g-cluster + .cards .mini:hover { transform: none; border-color: var(--fin-teal-ink); }
.finly-clarity-site .g-cluster + .cards .mini:hover strong { color: var(--fin-blue); }
.finly-clarity-site .g-cta { max-width: 1180px; margin-top: 65px; padding: 65px 35px; color: var(--fin-navy); background: linear-gradient(120deg, var(--fin-teal-50), var(--fin-blue-50)); border: 0; border-radius: 0; }
.finly-clarity-site .g-cta::before { content: none; }
.finly-clarity-site .g-cta h2 { font: 600 clamp(30px, 4vw, 48px)/1.2 var(--fin-font-display); }
.finly-clarity-site .g-cta :is(.g-sub, .g-honesty, .g-alt) { color: var(--fin-text-soft); font-size: 15px; line-height: 1.8; }
.finly-clarity-site .g-alt a { color: var(--fin-blue); }
/* Contact and reference pages use the same open, ruled hierarchy. */
.finly-clarity-site .contact-page { padding-block: 80px 95px; }
.finly-clarity-site .contact-page h1 { margin: 20px 0 25px; font-size: clamp(44px, 7vw, 86px); letter-spacing: -.05em; }
.finly-clarity-site .contact-page .lead { margin-bottom: 50px; }
.finly-clarity-site .contact-channels { gap: 28px; margin-bottom: 68px; }
.finly-clarity-site .contact-channels li { display: flex; flex-direction: column; padding: 24px 0; border: 0; border-top: 2px solid var(--fin-teal-ink); border-radius: 0; box-shadow: none; }
.finly-clarity-site .contact-channels b { font: 600 25px/1.4 var(--fin-font-display); margin-bottom: 12px; }
.finly-clarity-site .contact-channels p { flex: 1; }
.finly-clarity-site .contact-channels a { overflow-wrap: anywhere; }
.finly-clarity-site .contact-page h2 { font: 600 27px/1.4 var(--fin-font-display); margin-bottom: 18px; }
.finly-clarity-site .business-card { margin-top: 45px; padding: 30px; border: 0; border-radius: 0; background: var(--fin-blue-50); }
/* A quiet navy footer is shared by every public surface. */
.finly-clarity-site > footer { margin: 0; background: var(--fin-navy); color: #fff; }
.finly-clarity-site > footer::before { content: none; }
.finly-clarity-site > footer .footrow { padding-block: 65px 30px; }
.finly-clarity-site > footer .footer-logo { background: transparent; padding: 0; width: 150px; }
.finly-clarity-site > footer .footer-logo img { width: 150px; height: auto; }
.finly-clarity-site > footer .footer-brand p { color: #e1eaf6; font-size: 15px; }
.finly-clarity-site > footer .footer-nav b { color: #fff; font-size: 15px; }
.finly-clarity-site > footer .footer-nav a { color: #d0deef; font-size: 14px; padding-block: 7px; }
.finly-clarity-site > footer .footer-note { color: #c6d6e9; font-size: 13px; }
@media (max-width: 1000px) {
  .finly-clarity-site .wrap { width: calc(100% - 48px); }
}
@media (max-width: 700px) {
  .finly-clarity-site .wrap { width: calc(100% - 36px); }
  .finly-clarity-site .hero { padding-block: 45px; }
  .finly-clarity-site .hero h1 { font-size: clamp(37px, 10.5vw, 62px); }
  .finly-clarity-site .lead { font-size: 16px; }
  .finly-clarity-site .g-hero { padding-block: 42px 26px; }
  .finly-clarity-site .g-article { font-size: 17px; }
  .finly-clarity-site .g-article h2 { margin-top: 35px; }
  .finly-clarity-site .g-cluster { padding-top: 44px; }
  .finly-clarity-site .g-cluster + .cards { grid-template-columns: 1fr; }
  .finly-clarity-site .g-cluster + .cards .mini strong { font-size: 22px; }
  .finly-clarity-site .g-cta { padding: 44px 22px; margin-block: 40px 55px; }
  .finly-clarity-site .contact-page { padding-block: 45px 60px; }
  .finly-clarity-site .contact-channels { gap: 10px; }
  .finly-clarity-site .business-card { padding: 23px; }
  .finly-clarity-site > footer .footrow { padding-block: 44px 28px; gap: 34px; }
}
@media (max-width: 560px) {
  .finly-clarity-site.finly-nav-open { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .finly-clarity-site :is(.fin-btn, .g-btn, .btn, .cta, .mini, .g-banks a) { transition: none; transform: none; }
}