.marketing-page{max-width:1440px;margin:auto;padding:clamp(24px,5vw,80px);color:var(--text,#f4f4e9)}
.marketing-page .marketing-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:center;padding:32px 0 72px}
.marketing-page h1{font-size:clamp(2.25rem,4.5vw,4.75rem);line-height:1.06;letter-spacing:-.035em;overflow-wrap:normal;word-break:normal;max-width:19ch}
.marketing-page h2{font-size:clamp(1.6rem,3vw,2.65rem);line-height:1.12;letter-spacing:-.025em;max-width:28ch;margin:0 0 28px}
.marketing-page .marketing-prose{max-width:74ch;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65}
.marketing-prose p{margin:0 0 1.1em}.marketing-prose strong{font-weight:750}.marketing-prose ol{padding-left:1.5em}
.marketing-hero figure{margin:0}.marketing-hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.marketing-section{padding:clamp(32px,5vw,68px) 0;border-top:1px solid currentColor;scroll-margin-top:110px}
.marketing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.marketing-actions .action{font-size:14px;padding:17px 20px;max-width:100%;white-space:normal;line-height:1.35}
.marketing-example{background:#17201b;padding-inline:clamp(16px,3vw,40px);border-top:0;margin:20px 0 44px}.marketing-example h2{padding-top:0}
.marketing-site #packages,.marketing-site #company{padding:clamp(24px,4vw,48px);background:#111f2b;border:1px solid #4179a8;margin:24px 0}
.issue-page .issue-body table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.5}.issue-page .issue-body td,.issue-page .issue-body th{border-bottom:1px solid #b5bec2;padding:14px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.issue-page .issue-body pre{white-space:pre-wrap;overflow-wrap:anywhere;font:clamp(.8rem,1.2vw,1rem)/1.6 ui-monospace,monospace;background:#17201b;padding:20px}
.issue-page .issue-body h3{font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.2;margin:30px 0 20px}.issue-page .issue-intro{margin-bottom:48px}.issue-page .issue-body p{max-width:74ch}
.projectorium-home .marketing-actions{margin-block:24px 36px}.tool-product .tool-price-note{max-width:68ch;line-height:1.65}
@media(max-width:760px){.marketing-page{padding:24px 20px}.marketing-page .marketing-hero{grid-template-columns:1fr;padding:12px 0 36px}.marketing-page h1{max-width:22ch}.marketing-hero figure{max-width:620px}.marketing-actions{flex-direction:column;align-items:stretch}.marketing-actions .action{width:100%;justify-content:space-between}.issue-page .issue-body table{font-size:.9rem}.issue-page .issue-body td,.issue-page .issue-body th{padding:10px 5px}.issue-page .issue-body pre{padding:14px}}
@media(prefers-reduced-motion:reduce){.marketing-page *{scroll-behavior:auto!important}}

.marketing-support-art,.marketing-page .compass-card-art{max-width:620px;margin:32px 0 0}.marketing-support-art img,.marketing-page .compass-card-art img{display:block;width:100%;height:auto}.tool-product .compass-hero-art{max-width:640px;margin-top:40px}.tool-product .compass-hero-art img{width:100%;height:auto}

.issue-001 .issue-intro{padding:40px 5%;font-size:19px;line-height:1.7}.issue-001 .issue-body pre{color:#f2f2e8}.tool-product.marketing-page{background:var(--bg)}
@media(max-width:800px){.issue-001 .issue-intro{padding:32px 22px}}

/* The visual follows the question before the explanation on narrow screens. */
.marketing-page .marketing-hero{grid-template-areas:"title image" "lead image" "actions image";grid-template-rows:auto auto auto;row-gap:22px}
.marketing-hero-title{grid-area:title}
.marketing-hero>.lead{grid-area:lead;align-self:start}
.marketing-hero>figure{grid-area:image;align-self:center}
.marketing-hero>.marketing-actions{grid-area:actions;margin-top:0;align-self:start}
.marketing-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.marketing-offer-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid #586459;background:#17201b}
.marketing-offer-index{display:block;margin-bottom:24px;color:#d4fb25;font-size:13px;font-weight:800;letter-spacing:.14em}
.marketing-offer-card .marketing-prose{flex:1}
.marketing-offer-card .marketing-prose p{margin:0}
.marketing-offer-card .marketing-actions{margin-top:24px}
.marketing-offer-card .marketing-actions .action{min-height:52px}
@media(max-width:900px){.marketing-offer-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 .marketing-page .marketing-hero{grid-template-areas:"title" "image" "lead" "actions";grid-template-columns:minmax(0,1fr);row-gap:18px}
 .marketing-hero img{aspect-ratio:16/9;object-fit:cover}
 .marketing-page .marketing-hero .eyebrow{margin-bottom:20px}
 .marketing-offer-card{padding:20px}
 .marketing-offer-index{margin-bottom:14px}
}
/* Second visual pass: keep the first offer close to the choice action. */
@media(max-width:760px){.marketing-page #products{padding-top:30px;padding-bottom:44px}.marketing-page #products h2{margin-bottom:20px}}
/* On the two main offer pages the action stays visible with the illustration. */
@media(max-width:760px){.marketing-page:is(.marketing-review,.marketing-site) .marketing-hero{grid-template-areas:"title" "image" "actions" "lead"}}