/* One outer frame; internal article measures and full-bleed chrome stay independent. */
:root { --oc-site-max: 1240px; --oc-site-gutter: 32px; --oc-site-frame: min(var(--oc-site-max), calc(100% - 2 * var(--oc-site-gutter))); }
@media (max-width: 1024px) { :root { --oc-site-gutter: 24px; } }
@media (max-width: 600px) { :root { --oc-site-gutter: 16px; } }
body #main.oc-main, body #main.oc-dev { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
body.home #main > :is(.oc-home-hero, .oc-section, .oc-faq-block),
body #main > :is(.oc-page-hero, .oc-author-hero, .oc-slot-hero, .oc-section, .oc-author-strip, .oc-search-heading),
body #main > .oc-payment-guide__inner,
body #main > .oc-dev-container,
body #main .bi-container,
body #main > .oc-blog-guide__hero,
body #main > .oc-payment-guide__editorial,
body #main > .oc-dev-reading,
body #main > .bi-masthead,
body #main > .bi-browse,
body #main > .oc-free-games-hero,
body #main > .oc-free-games-shell,
body #main #reviews-guide > .oc-payment-guide__editorial {
 width: var(--oc-site-frame) !important; max-width: var(--oc-site-max) !important; margin-inline: auto !important; box-sizing: border-box;
}
body #main > .oc-free-games-hero :is(.oc-hero-breadcrumb, .oc-free-games-hero__inner) { width: calc(100% - 2 * var(--oc-site-gutter)) !important; max-width: none !important; }
body #main > .bi-masthead > .bi-container,
body #main > .oc-blog-guide__hero > .oc-payment-guide__inner { padding-inline: var(--oc-site-gutter); box-sizing: border-box; }
/* These bands already own a frame, so their child must not add another outer gutter. */
body #main :is(.oc-payment-guide__editorial, .oc-dev-reading) > :is(.oc-payment-guide__inner, .oc-dev-container),
body #main .oc-blog-guide__hero > .oc-payment-guide__inner,
body #main :is(.bi-masthead, .bi-browse) > .bi-container {
 width: 100% !important; max-width: none !important; margin-inline: 0 !important;
}
body #main > .oc-rs { width: var(--oc-site-frame) !important; max-width: var(--oc-site-max) !important; margin-inline: auto !important; padding-inline: 0 !important; box-sizing: border-box; }
body #main.oc-legal-page { width: var(--oc-site-frame) !important; max-width: var(--oc-site-max) !important; margin-inline: auto !important; }
body #main.oc-legal-page > :is(p, ul, ol) { max-width: 72ch; }
body .oc-site-footer .oc-footer-inner { width: var(--oc-site-frame) !important; max-width: var(--oc-site-max) !important; margin-inline: auto !important; padding-inline: 0 !important; }
body .oc-site-header { padding-inline: max(var(--oc-site-gutter), calc((100% - var(--oc-site-max)) / 2)) !important; }

/* Shared green heroes keep the title and introduction in one readable column. */
:root { --oc-hero-copy-max: 790px; --oc-hero-padding: 36px 42px; --oc-hero-gap: 36px; }
.oc-main :is(.oc-dev-hero, .oc-rd-hero), .oc-dev .oc-dev-hero { padding: var(--oc-hero-padding); }
.oc-main .oc-dev-hero, .oc-dev .oc-dev-hero { gap: var(--oc-hero-gap); }
body .oc-dev-hero > .oc-dev-hero-copy { flex: 1 1 0; min-width: 0; max-width: var(--oc-hero-copy-max); }
body .oc-dev-hero-copy > p:not(.oc-dev-eyebrow) { max-width: var(--oc-hero-copy-max); }
body .oc-dev-hero-copy > :last-child { margin-bottom: 0; }
body .oc-rd-hero > .oc-rd-hero-heading { padding: 0; min-height: 0; border-radius: 0; background: transparent; }
body .oc-page-hero--general .oc-page-hero__copy { max-width: var(--oc-hero-copy-max); }
@media (max-width: 1000px) { :root { --oc-hero-padding: 30px; --oc-hero-gap: 28px; } }
@media (max-width: 760px) {
 :root { --oc-hero-padding: 26px 24px; --oc-hero-gap: 18px; }
 body .oc-rd-hero h1 { margin-bottom: 0; }
}
@media (max-width: 480px) { :root { --oc-hero-padding: 24px 20px; } }