/* Fixology Hub public-page art direction.
 * Bright, welcoming presentation layer for populated launch pages.
 */
body.fx-page-public { background:#fff; color:#29445A; font-family:"Segoe UI","Avenir Next",Arial,sans-serif; }

body.fx-page-public .fx-page-hero {
  position:relative; overflow:hidden; max-width:none;
  padding:86px max(28px,calc((100vw - 1144px)/2)) 94px;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:72px;
  background:#fff;
  color:#102A43; border-bottom:1px solid #DFE8EE;
}
body.fx-page-public .fx-page-hero::after { display:none; }
body.fx-page-public .fx-page-hero-copy, body.fx-page-public .fx-page-hero-image { position:relative; z-index:1; }
body.fx-page-public .fx-page-hero .fx-eyebrow { color:#008DD2; }
body.fx-page-public .fx-page-hero h1 { max-width:760px; font-size:clamp(48px,4.8vw,63px); line-height:1; letter-spacing:-.045em; color:#102A43; text-wrap:balance; }
body.fx-page-public .fx-page-hero .fx-lede { max-width:650px; color:#647B8B; font-size:19px; text-wrap:pretty; }
body.fx-page-public .fx-page-hero-action { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }
body.fx-page-public .fx-page-hero-action .fx-secondary-button { min-height:52px; padding:14px 22px; border:0; border-radius:12px; background:#E31D24; color:#fff; font-weight:700; box-shadow:0 10px 24px rgba(243,29,36,.16); }
body.fx-page-public .fx-page-hero-action .fx-secondary-button:hover { background:#C9141A; color:#fff; transform:translateY(-1px); }
body.fx-page-public .fx-page-hero-action .fx-secondary-button:focus-visible { outline:3px solid rgba(0,141,210,.28); outline-offset:3px; }
body.fx-page-public .fx-page-hero-image { border-radius:22px; border:1px solid #DFE8EE; box-shadow:0 18px 46px rgba(16,42,67,.08); transform:none; background:#fff; }
body.fx-page-public .fx-page-hero-image::before { display:none; }

body.fx-page-public .fx-page-section { padding-top:88px; padding-bottom:88px; color:#29445A; background:#fff; }
body.fx-page-public .fx-page-section:nth-of-type(even) { background:#fff; }
/* page-public-v2 renders fx-page-section-heading. Keep the older fx-section-heading
 * alias supported for dedicated/shared surfaces, but style the actual runtime
 * class so section typography and measure do not silently fall back. */
body.fx-page-public :is(.fx-page-section-heading,.fx-section-heading) { max-width:760px; }
body.fx-page-public :is(.fx-page-section-heading,.fx-section-heading) h2 { font-size:clamp(36px,4vw,52px); line-height:1.05; letter-spacing:-.035em; color:#102A43; text-wrap:balance; }
body.fx-page-public :is(.fx-page-section-heading,.fx-section-heading) p { max-width:680px; color:#647B8B; font-size:17px; line-height:1.65; text-wrap:pretty; }
body.fx-page-public .fx-page-card-grid { gap:18px; }
body.fx-page-public .fx-page-card { min-height:220px; padding:28px 28px 30px; border:1px solid #DFE8EE; border-radius:20px; background:#fff; color:#29445A; box-shadow:0 6px 18px rgba(16,42,67,.055); }
body.fx-page-public .fx-page-card::before { width:3px; opacity:.72; }
body.fx-page-public .fx-page-card h3 { margin-top:0; font-size:21px; line-height:1.25; letter-spacing:-.02em; color:#102A43; text-wrap:balance; }
body.fx-page-public .fx-page-card p { color:#647B8B; line-height:1.62; }

body.fx-page-public .fx-service-card { border-radius:20px; box-shadow:0 6px 18px rgba(16,42,67,.055); transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
body.fx-page-public .fx-service-card:hover { border-color:#c9e0ec; box-shadow:0 8px 22px rgba(16,42,67,.07); transform:translateY(-1px); }
body.fx-page-public .fx-service-card:focus-visible { outline:3px solid rgba(0,141,210,.28); outline-offset:3px; border-color:#b9d9e8; }

/* Keep long-form public content visually continuous with the homepage canvas.
 * These are sections, not floating dashboard widgets: use whitespace and a
 * restrained divider instead of stacking large shadowed containers. */
body.fx-page-public .fx-page-narrative { max-width:1144px; margin:0 auto 88px; padding:44px 0; border:0; border-top:1px solid #DFE8EE; border-radius:0; background:#fff; color:#29445A; box-shadow:none; }
body.fx-page-public .fx-page-narrative .fx-eyebrow { color:#008DD2; }
body.fx-page-public .fx-page-narrative h2 { font-size:clamp(34px,3.8vw,50px); line-height:1.05; letter-spacing:-.035em; color:#102A43; text-wrap:balance; }
body.fx-page-public .fx-page-narrative-copy p { color:#647B8B; text-wrap:pretty; }
body.fx-page-public .fx-page-cta { margin-top:30px; padding:24px 0 0; border:0; border-top:1px solid #DFE8EE; border-radius:0; background:#fff; box-shadow:none; }
body.fx-page-public .fx-page-cta p { color:#647B8B; }
body.fx-page-public .fx-page-cta .fx-primary { margin-top:0; border-radius:12px; box-shadow:0 10px 24px rgba(243,29,36,.16); }
body.fx-page-public .fx-page-cta .fx-primary:focus-visible { outline:3px solid rgba(0,141,210,.28); outline-offset:3px; }

body.fx-page-public .fx-related { max-width:1144px; margin:0 auto 88px; padding:28px 0 0; border:0; border-top:1px solid #DFE8EE; border-radius:0; background:#fff; color:#29445A; box-shadow:none; }
body.fx-page-public .fx-related strong { color:#102A43; }
body.fx-page-public .fx-related-links a { padding:10px 14px; border-radius:10px; background:#EEF8FD; color:#006B9F; transition:background-color .16s ease,color .16s ease,transform .16s ease; }
body.fx-page-public .fx-related-links a:hover { background:#dff1fa; color:#005f91; transform:translateY(-1px); }
body.fx-page-public .fx-related-links a:focus-visible { outline:3px solid rgba(0,141,210,.28); outline-offset:3px; background:#dff1fa; color:#005f91; }

body.fx-page-public .fx-seo-section, body.fx-page-public .fx-depth-section { color:#29445A; }
body.fx-page-public .fx-seo-section h2, body.fx-page-public .fx-seo-section h3,
body.fx-page-public .fx-depth-section h2, body.fx-page-public .fx-depth-section h3 { color:#102A43; }
body.fx-page-public .fx-seo-section p, body.fx-page-public .fx-seo-section li,
body.fx-page-public .fx-depth-section p, body.fx-page-public .fx-depth-section li { color:#647B8B; }

@media (prefers-reduced-motion:reduce) {
 body.fx-page-public .fx-related-links a, body.fx-page-public .fx-service-card,
 body.fx-page-public .fx-page-hero-action .fx-secondary-button, body.fx-page-public .fx-page-cta .fx-primary { transition:none; }
 body.fx-page-public .fx-related-links a:hover, body.fx-page-public .fx-service-card:hover,
 body.fx-page-public .fx-page-hero-action .fx-secondary-button:hover, body.fx-page-public .fx-page-cta .fx-primary:hover { transform:none; }
}

@media (max-width:980px) {
 body.fx-page-public .fx-page-hero { grid-template-columns:1fr; padding-top:64px; padding-bottom:72px; gap:44px; }
 body.fx-page-public .fx-page-hero-image { width:min(100%,760px); transform:none; }
 body.fx-page-public .fx-page-narrative { margin-left:28px; margin-right:28px; }
 body.fx-page-public .fx-related { margin-left:28px; margin-right:28px; }
}
@media (max-width:680px) {
 body.fx-page-public .fx-page-hero { padding:46px 18px 58px; gap:30px; }
 body.fx-page-public .fx-page-hero h1 { font-size:clamp(38px,10vw,48px); }
 body.fx-page-public .fx-page-hero .fx-lede { font-size:17px; line-height:1.6; }
 body.fx-page-public .fx-page-hero-image { border-radius:20px; }
 body.fx-page-public .fx-page-section { padding:72px 18px; }
 body.fx-page-public .fx-page-card { min-height:0; padding:23px 21px 24px; }
 body.fx-page-public .fx-page-narrative { margin:0 18px 72px; padding:32px 0 0; border-radius:0; }
 body.fx-page-public .fx-page-cta { padding:20px 0 0; }
 body.fx-page-public .fx-related { margin:0 18px 72px; padding:26px 0 0; }
 body.fx-page-public .fx-related-links { display:grid; grid-template-columns:1fr; gap:10px; }
 body.fx-page-public .fx-related-links a { display:flex; min-height:48px; align-items:center; padding:12px 14px; }
}

@media (max-width:430px) {
 body.fx-page-public .fx-page-hero { padding:36px 14px 46px; gap:24px; }
 body.fx-page-public .fx-page-hero h1 { font-size:clamp(34px,10.5vw,42px); line-height:1; }
 body.fx-page-public .fx-page-hero .fx-lede { margin-top:18px; font-size:16px; line-height:1.56; }
 body.fx-page-public .fx-page-hero-action { margin-top:18px; width:100%; }
 body.fx-page-public .fx-page-hero-action .fx-secondary-button { display:flex; width:100%; min-height:52px; align-items:center; justify-content:center; padding:14px 18px; border-radius:12px; text-align:center; }
 body.fx-page-public .fx-page-hero-image { height:210px; max-height:210px; border-radius:18px; overflow:hidden; }
 body.fx-page-public .fx-page-hero-image img { display:block; width:100%; height:100%; object-fit:cover; }
 body.fx-page-public .fx-page-section { padding:58px 14px; }
 body.fx-page-public :is(.fx-page-section-heading,.fx-section-heading) h2 { font-size:clamp(30px,9vw,38px); line-height:1.05; }
 body.fx-page-public :is(.fx-page-section-heading,.fx-section-heading) p { font-size:16px; line-height:1.58; }
 body.fx-page-public .fx-page-card-grid { gap:14px; margin-top:28px; }
 body.fx-page-public .fx-page-card { padding:20px 18px 20px; border-radius:17px; }
 body.fx-page-public .fx-page-card h3 { font-size:20px; }
 body.fx-page-public .fx-page-narrative { margin:0 14px 58px; padding:28px 0 0; border-radius:0; gap:16px; }
 body.fx-page-public .fx-page-narrative h2 { font-size:clamp(30px,9vw,38px); line-height:1.06; }
 body.fx-page-public .fx-page-cta { margin-top:20px; padding:18px 0 0; }
 body.fx-page-public .fx-page-cta .fx-primary { display:flex; width:100%; min-height:52px; align-items:center; justify-content:center; padding:14px 18px; text-align:center; }
 body.fx-page-public .fx-related { margin:0 14px 58px; padding:24px 0 0; border-radius:0; }
}

@media (max-width:600px) {
 body.fx-page-public .fx-service-cards { gap:14px; margin-top:28px; }
 body.fx-page-public .fx-service-card { border-radius:16px; box-shadow:0 5px 16px rgba(16,42,67,.06); }
 body.fx-page-public .fx-service-card .fx-card-image { height:158px; }
 body.fx-page-public .fx-service-card .fx-card-body { padding:17px 18px 19px; }
 body.fx-page-public .fx-service-card .fx-card-body strong { font-size:19px; line-height:1.25; }
 body.fx-page-public .fx-service-card .fx-card-body span { min-height:0; margin-top:6px; font-size:14px; line-height:1.5; }
 body.fx-page-public .fx-service-card .fx-card-body em { margin-top:12px; font-size:13px; }
}