/* Shared layout contract: editorial content is capped; dense comparisons opt wider.
   Loaded after page styles so all three pages follow the same breakpoints. */
:root {
  --content-max: 1000px;
  --wide-max: 1200px;
  --content-gutter: 20px;
  --section-space: 48px;
  --layout-gap: 16px;
  --tile-padding: 24px;
  --max: var(--content-max);
}
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}
.container--wide { max-width: var(--wide-max); }
.section, .currency-split, .currency-story { padding-block: var(--section-space); }
.section-heading > p:not(.eyebrow):not(.pricing-kicker) { max-width: 600px; }
.faq-list { max-width: none; }
.footer > .container { max-width: var(--content-max); }
.footer-columns { gap: var(--layout-gap); }
.stat-grid { gap: var(--layout-gap); }
.stat-grid article, .account-card-copy { padding: var(--tile-padding); }
.account-card-grid { gap: var(--layout-gap); }
.split, .growth-layout, .currency-split, .pricing-pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  min-height: 0;
}
.split > *, .growth-layout > *, .currency-split > *, .pricing-pay > * { min-width: 0; }
.split-copy, .feature-copy, .pay-copy { max-width: 600px; }
.split-copy p, .split-copy li, .feature-copy > p:not(.kicker):not(.action-note) { font-size: 18px; line-height: 1.5; }
.split-copy h2, .feature-copy h2 { font-size: 40px; }
/* The spending carousel can bleed right, while its copy follows the content edge. */
.spend-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin-left: 0; }
.spend-layout > .split-copy { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: 0 20px; }
.spend-layout .feature-carousel { min-width: 0; }
.growth-visual { margin-left: 0; }
/* One gutter belongs to the outer wrapper; child content gets no second gutter. */
@media (max-width:1199px) {
  .split-copy, .feature-copy, .pay-copy { margin-inline: auto; }
  .currency-split .feature-copy, .growth-layout .split-copy { grid-row: 1; }
  .feature-copy { text-align: center; }
  .feature-copy > p:not(.kicker):not(.action-note) { margin-inline: auto; }
  .visual-stage, .essentials-visual, .growth-visual, .pay-art { width: 100%; max-width: 520px; margin-inline: auto; }
  .visual-stage { height: 560px; }
  .growth-visual { height: 620px; }
  .pricing-pay .pay-copy { grid-row: 1; }
}
@media (min-width:840px) {
  .stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width:1200px) {
  :root { --content-gutter: 0px; --section-space: 64px; --layout-gap: 24px; }
  .split, .growth-layout, .currency-split, .pricing-pay {
    grid-template-columns: 450px 488px;
    gap: 0;
    justify-content: space-between;
  }
  .split-copy h2, .feature-copy h2 { font-size: 48px; }
  .split-copy, .feature-copy, .pay-copy { max-width: none; }
  .spend-layout { grid-template-columns: 450px minmax(0,1fr); gap: 62px; margin-left: max(20px,calc((100% - var(--content-max))/2)); }
  .spend-layout > .split-copy { padding: 0; margin: 0; }
  .growth-visual { height: 680px; }
  .essentials-visual { height: 600px; }
  .currency-hero h1 { max-width: 488px; font-size: 64px; }
  .hero-description { max-width: 450px; }
  .pricing-hero-copy h1 { font-size: 76px; max-width: 500px; }
  .pricing-hero-copy > p:not(.pricing-kicker) { max-width: 450px; }
  .hero-content h1 { max-width: 700px; font-size: 60px; }
  .hero-content p { max-width: 500px; }
  .row-copy h2 { max-width: 650px; font-size: 60px; }
}
@media (min-width:1920px) {
  :root { --content-max: 1432px; --wide-max: 1432px; --section-space: 80px; --tile-padding: 32px; }
  .split, .growth-layout, .currency-split, .pricing-pay { grid-template-columns: 600px 696px; }
  .spend-layout { grid-template-columns: 600px minmax(0,1fr); gap: 136px; }
  .split-copy h2, .feature-copy h2 { font-size: 60px; }
  .split-copy p, .split-copy li, .feature-copy > p:not(.kicker):not(.action-note) { font-size: 21px; }
  .visual-stage { height: 640px; }
  .growth-visual, .essentials-visual { height: 760px; }
  .currency-hero h1 { max-width: 650px; font-size: 82px; }
  .pricing-hero-copy h1 { font-size: 96px; max-width: 620px; }
  .hero-content h1 { max-width: 920px; font-size: 76px; }
  .hero-content p { max-width: 620px; }
}
@media (max-width:700px) {
  .visual-stage { height: 500px; }
  .split-copy h2, .feature-copy h2 { font-size: 38px; }
  .split-copy p, .split-copy li, .feature-copy > p:not(.kicker):not(.action-note) { font-size: 17px; }
  .spend-layout > .split-copy { padding-bottom: 0; }
  .stat-grid { grid-template-columns: minmax(0,1fr); }
  .stat-grid article { min-height: 0; }
  .growth-visual { height: 500px; }
  .currency-cta.container { width: calc(100% - 40px); padding-inline: 0; }
}
/* Menu panels have their own internal padding, independent of page gutters. */
.mega-menu.container { padding: 32px 28px 35px; }
.hero-scroll { left: max(20px,calc((100% - var(--content-max))/2)); }
@media(min-width:1920px){.mega-menu.container{padding:35px 34px 38px}}
.nav.container { width: 100%; padding-inline: var(--content-gutter); }
/* Wide content retains edge clearance before it reaches its larger cap. */
.container--wide { width: calc(100% - 40px); padding-inline: 0; }