/* v32 desktop-only composition layer. v31 remains authoritative through 900px. */
.v32-desktop-only{display:none}

@media (min-width:901px){
  .green-v32{--v32-shell:min(1312px,calc(100% - 80px));--v32-gap:clamp(32px,3.9vw,56px)}

  .green-v32 .hero>.shell,
  .green-v32 #difference>.shell,
  .green-v32 #formula>.shell,
  .green-v32 #routine>.shell{width:var(--v32-shell);max-width:none}

  /* Equal media/content columns; each side sizes to its own content. */
  .green-v32 .hero-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(5,max-content);
    column-gap:var(--v32-gap);
    row-gap:12px;
    align-items:start;
    align-content:start;
  }
  .green-v32 .hero-grid>.gallery{position:relative;top:auto;width:100%;max-height:none;margin:0;align-self:start}
  .green-v32 .hero-grid>.gallery .gallery-stage{width:100%;margin:0;aspect-ratio:1}
  .green-v32 .hero-grid>.gallery .gallery-preview{width:100%;height:100%;object-fit:cover}
  .green-v32 .hero-grid>.gallery .gallery-preview.contain{object-fit:contain}
  .green-v32 .hero-grid>.hero-intro,
  .green-v32 .hero-grid>.hero-review-link,
  .green-v32 .hero-grid>.v30-creator-shortcut,
  .green-v32 .hero-grid>.hero-offer,
  .green-v32 .hero-grid>.v30-hero-faq{align-self:start}
  .green-v32 .v30-hero-faq{display:grid;grid-template-columns:1fr;gap:5px;padding-top:2px}
  .green-v32 .v30-hero-faq a{display:block;width:max-content;max-width:100%}

  /* Photo-led story: explanation and qualified supports beside one large real-life image. */
  .green-v32 #difference>.shell{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:max-content max-content;
    column-gap:var(--v32-gap);
    row-gap:32px;
    align-items:start;
  }
  .green-v32 #difference .mechanism-v17-core{display:contents}
  .green-v32 #difference .mechanism-v17-copy{grid-column:1;grid-row:1;max-width:none}
  .green-v32 #difference .mechanism-v17-copy h2{font-size:clamp(40px,3vw,44px);line-height:1.04}
  .green-v32 #difference .mechanism-v17-copy>p:not(.eyebrow):not(.mthfr-definition){max-width:60ch;font-size:16px;line-height:1.55}
  .green-v32 #difference .folate-benefits-v16{grid-column:1;grid-row:2;margin:0;padding:0;border:0}
  .green-v32 #difference .folate-benefits-v16>h3{margin:0 0 20px;font-size:30px;line-height:1.1}
  .green-v32 #difference .folate-benefits-v16-grid{display:grid;grid-template-columns:1fr;gap:18px}
  .green-v32 #difference .folate-benefits-v16-grid article{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:start}
  .green-v32 #difference .folate-benefits-v16-grid article img{width:54px;height:54px}
  .green-v32 #difference .folate-benefits-v16-grid article h4{font-size:18px;line-height:1.2}
  .green-v32 #difference .folate-benefits-v16-grid article p{font-size:15px;line-height:1.45}
  .green-v32 #difference .folate-source{margin-top:18px}
  .green-v32 .v32-difference-photo{display:block;grid-column:2;grid-row:1/3;width:100%;margin:0;overflow:hidden;align-self:start;aspect-ratio:1}
  .green-v32 .v32-difference-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

  /* The unchanged comparison becomes one compact supporting strip below both columns. */
  .green-v32 #difference .pathway-v17{grid-column:1/3;grid-row:3;display:grid;width:100%;max-width:none;margin:10px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;border-radius:16px}
  .green-v32 #difference .pathway-v17-label{grid-column:1/3}
  .green-v32 #difference .pathway-v17-row--conversion{grid-column:1}
  .green-v32 #difference .pathway-v17-row--active{grid-column:2;margin-top:0}
  .green-v32 #difference .pathway-v17-caption{grid-column:1/3}

  /* The same equal split and gutter now governs formula and routine. */
  .green-v32 #formula>.shell{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--v32-gap)}
  .green-v32 #formula .formula-visual{width:100%;max-width:none}
  .green-v32 #routine .routine-v11-layout{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--v32-gap)}
}

@media (min-width:901px) and (max-width:1100px){
  .green-v32{--v32-shell:calc(100% - 64px)}
  .green-v32 #difference .mechanism-v17-copy h2{font-size:40px}
  .green-v32 #difference>.shell{row-gap:24px}
  .green-v32 #difference .pathway-v17{font-size:13px}
  .green-v32 #difference .folate-benefits-v16-grid{gap:14px}
  .green-v32 #difference .folate-benefits-v16-grid article{grid-template-columns:50px minmax(0,1fr);gap:12px}
  .green-v32 #difference .folate-benefits-v16-grid article img{width:50px;height:50px}
}