/* Foreign Income FX v3.9.14 — shared layout for public SEO/guide pages.
   Presentation only; no calculator, checkout or payment logic. */

body.seo-page main{overflow:hidden}
body.seo-page .shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}

/* Hero: still recognisably Foreign Income FX, but editorial rather than billboard-sized. */
body.seo-page .guide-hero{padding:72px 0 54px}
body.seo-page .guide-hero-inner{max-width:980px}
body.seo-page .guide-hero h1{
  max-width:900px;
  font-size:clamp(42px,4.4vw,64px);
  line-height:1.04;
  letter-spacing:-.045em;
  margin:14px 0 20px
}
body.seo-page .guide-hero .lead{
  max-width:780px;
  font-size:clamp(18px,1.45vw,21px);
  line-height:1.65
}

/* Editorial content: readable line length and clear hierarchy. */
body.seo-page .guide-section{padding:56px 0}
body.seo-page .guide-section .guide-copy{max-width:980px}
body.seo-page .guide-section .guide-copy>h2,
body.seo-page .guide-section h2{
  font-size:clamp(30px,2.7vw,40px);
  line-height:1.12;
  letter-spacing:-.035em;
  margin:0 0 18px
}
body.seo-page .guide-section .guide-copy>p,
body.seo-page .guide-section .guide-copy>ul,
body.seo-page .guide-section .guide-copy>ol{
  max-width:980px;
  font-size:17px;
  line-height:1.72
}
body.seo-page .guide-copy h3{font-size:21px;line-height:1.25}

/* Cards stay inside the same visual grid as the product homepage. */
body.seo-page .guide-grid{max-width:1180px;gap:18px}
body.seo-page .guide-card{padding:24px;border-radius:18px}
body.seo-page .guide-note{max-width:980px}

/* BMF tool is the focal point, not the prose below it. */
body.seo-page .bmf-tool-section{padding:30px 0 48px}
body.seo-page .bmf-tool-card{
  max-width:980px;
  margin:0 auto;
  padding:32px;
  border-radius:24px
}
body.seo-page .bmf-tool-head{max-width:720px}
body.seo-page .bmf-tool-head h2{
  font-size:clamp(28px,2.7vw,38px);
  line-height:1.12;
  margin:8px 0 10px
}
body.seo-page .bmf-conversion-section{padding:24px 0 54px}
body.seo-page .bmf-conversion-card{
  max-width:980px;
  margin:0 auto;
  padding:30px 32px
}
body.seo-page .bmf-conversion-card h2{
  font-size:clamp(28px,2.6vw,36px);
  line-height:1.12
}
body.seo-page .bmf-compare-card{
  max-width:860px;
  margin:0;
  padding:30px 32px
}

/* Official source is supporting information, not a primary conversion CTA. */
body.seo-page .bmf-source-button{
  display:inline-flex;
  width:auto;
  min-height:0;
  padding:10px 14px;
  margin-top:8px;
  font-size:14px;
  border-radius:10px
}

/* Final CTA keeps the site's Free-secondary / Pro-primary hierarchy. */
body.seo-page .guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
body.seo-page .guide-actions .button{width:auto}

/* Avoid enormous headings even at very wide viewport sizes. */
@media(min-width:1500px){
  body.seo-page .guide-hero h1{font-size:64px}
  body.seo-page .guide-section .guide-copy>h2,
  body.seo-page .guide-section h2{font-size:40px}
}
@media(max-width:800px){
  body.seo-page .shell{width:min(100% - 32px,1180px)}
  body.seo-page .guide-hero{padding:54px 0 42px}
  body.seo-page .guide-section{padding:44px 0}
  body.seo-page .bmf-tool-card,
  body.seo-page .bmf-conversion-card,
  body.seo-page .bmf-compare-card{padding:24px 20px}
}
@media(max-width:540px){
  body.seo-page .shell{width:min(100% - 24px,1180px)}
  body.seo-page .guide-hero h1{font-size:clamp(36px,11vw,48px)}
  body.seo-page .guide-section .guide-copy>h2,
  body.seo-page .guide-section h2{font-size:clamp(28px,8.5vw,34px)}
  body.seo-page .guide-section .guide-copy>p{font-size:16px}
}


/* v3.9.16 — final SEO-page alignment pass based on deployed desktop review */

/* One consistent editorial axis for ordinary prose sections. */
body.seo-page .guide-section>.shell.guide-copy,
body.seo-page .guide-section>.shell>.guide-copy{
  width:100%;
  max-width:980px;
}
body.seo-page .guide-section>.shell.guide-copy{
  width:min(980px,calc(100% - 48px));
  margin-left:auto;
  margin-right:auto;
}
body.seo-page .guide-section>.shell>.guide-copy{
  margin-left:auto;
  margin-right:auto;
}

/* Guide page: sections that contain only reading content use the same centred
   reading column instead of jumping back to the full shell edge. */
body.seo-page.guide-article .guide-section>.shell.guide-copy{
  max-width:980px;
}
body.seo-page.guide-article .guide-section>.shell.guide-copy>p,
body.seo-page.guide-article .guide-section>.shell.guide-copy>ul,
body.seo-page.guide-article .guide-section>.shell.guide-copy>ol{
  max-width:820px;
}

/* Keep final guide conversion content on the same grid as the article. */
body.seo-page.guide-article .guide-cta{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}

/* BMF: the post-tool sales prompt is a compact product card, not another
   oversized editorial section. */
body.seo-page.bmf-page .bmf-conversion-section{
  padding:18px 0 46px;
}
body.seo-page.bmf-page .bmf-conversion-card{
  max-width:980px;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  padding:26px 30px;
  border-radius:20px;
}
body.seo-page.bmf-page .bmf-conversion-card h2{
  font-size:clamp(27px,2.35vw,34px);
  margin:6px 0 8px;
}
body.seo-page.bmf-page .bmf-conversion-card p{
  max-width:680px;
  font-size:16px;
  line-height:1.6;
  margin:6px 0;
}
body.seo-page.bmf-page .bmf-conversion-card .button{
  padding:13px 17px;
  font-size:14px;
}

/* BMF editorial sections use one centred reading column. */
body.seo-page.bmf-page .guide-section>.shell.guide-copy{
  max-width:980px;
}
body.seo-page.bmf-page .guide-section>.shell.guide-copy>h2{
  font-size:clamp(30px,2.45vw,38px);
}
body.seo-page.bmf-page .guide-section>.shell.guide-copy>p{
  max-width:980px;
}

/* Compare card remains intentionally wider than prose, but aligned/centred. */
body.seo-page.bmf-page .bmf-compare-card{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:800px){
  body.seo-page.bmf-page .bmf-conversion-card{grid-template-columns:1fr}
}


/* v3.9.18 — keep all SEO-page grids inside the visible shell */
body.seo-page .guide-grid{
  width:100%;
  max-width:1180px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.seo-page .guide-grid>*{min-width:0}
body.seo-page .guide-card{min-width:0;overflow-wrap:anywhere}
@media(max-width:1050px){
  body.seo-page .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  body.seo-page .guide-grid{grid-template-columns:1fr}
}

/* v3.9.34 — consistent editorial alignment on every SEO/guide page.
   The reading column and hero share one 980px axis; wider grids remain centered.
   The direct .shell.guide-copy also keeps the normal mobile gutters. */
@media(max-width:800px){
  body.seo-page .guide-section>.shell.guide-copy{width:min(980px,calc(100% - 32px))}
}
@media(max-width:540px){
  body.seo-page .guide-section>.shell.guide-copy{width:min(980px,calc(100% - 24px))}
}