/* Code-owned Marketing Ops. All selectors are scoped; no global navigation changes. */
.marketing-ops {
    --mo-ink: #1e1e1e;
    --mo-paper: #f9f5ec;
    --mo-grey: #dee1e6;
    --mo-lime: #e4f2b3;
    --mo-orange: #ff5d02;
    color: var(--mo-ink);
    background: var(--mo-grey);
    font: 400 16px/20px "PolySans", sans-serif;
    margin: 0;
    width: 100%;
}
.marketing-ops *, .marketing-ops *::before, .marketing-ops *::after { box-sizing: border-box; }
.marketing-ops :where(h1,h2,h3,p,figure) { margin: 0; color: inherit; }
.marketing-ops :where(h1,h2,h3) { font-family: "PolySans", sans-serif; text-wrap: initial; }
.marketing-ops :where(a,button,input,summary):focus-visible { outline: 3px solid var(--mo-orange); outline-offset: 5px; }
.marketing-ops a { color: inherit; }
.marketing-ops button, .marketing-ops input { font: inherit; }
.marketing-ops [hidden] { display: none !important; }
.marketing-ops .mo-container { width: min(100% - 128px, 1440px); margin-inline: auto; }
.marketing-ops .mo-section { padding-block: 104px; }
.marketing-ops .mo-dark { background: var(--mo-ink); color: var(--mo-paper); }
.marketing-ops .mo-eyebrow { font: 400 14px/15px "Azeret Mono", ui-monospace, monospace; }
.marketing-ops .mo-heading .mo-eyebrow { margin-bottom: 16px; }
.marketing-ops h1 { font-size: 64px; line-height: 75px; font-weight: 300; letter-spacing: 0; }
.marketing-ops h2 { font-size: 48px; line-height: 55px; font-weight: 300; letter-spacing: 0; }
.marketing-ops .mo-heading strong { display: block; font-weight: 500; }
.marketing-ops p + p { margin-top: 20px; }
.marketing-ops .mo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.marketing-ops .mo-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 16px;
    min-height: 72px; padding: 24px 32px; border-radius: 100px;
    font: 400 20px/24px "Azeret Mono", ui-monospace, monospace;
    text-decoration: none; border: 1px solid transparent;
}
.marketing-ops .mo-button span { font-family: sans-serif; font-size: 24px; }
.marketing-ops .mo-button:hover { filter: brightness(.94); }
.marketing-ops .mo-button--orange { background: var(--mo-orange); color: var(--mo-ink); }
.marketing-ops .mo-button--dark { background: var(--mo-ink); color: var(--mo-paper); }
.marketing-ops .mo-button--lime { background: var(--mo-lime); color: var(--mo-ink); }
.marketing-ops .mo-button--small { min-height: 40px; padding: 8px 16px; border: 0; font-size: 16px; line-height: 20px; }
.marketing-ops .mo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 88px; }
.marketing-ops .mo-header > a:first-child { flex: 0 1 auto; min-width: 0; }
.marketing-ops .mo-header img { display: block; width: 106px; max-width: 100%; height: auto; }
.marketing-ops .mo-header .mo-button { flex: 0 0 auto; min-width: 177px; }
.marketing-ops .mo-header .mo-button span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; font-size: 24px; line-height: 24px; }
.marketing-ops .mo-hero { padding-top: 64px; }
/* Allow for the browser scrollbar while keeping the desktop title on two lines. */
.marketing-ops .mo-hero .mo-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 8vw, 116px); }
.marketing-ops .mo-hero-copy .mo-button { margin-top: 32px; }
.marketing-ops .mo-illustration { display: block; }
.marketing-ops .mo-illustration img { display: block; width: 100%; height: auto; }
.marketing-ops .mo-hero > .mo-illustration { margin-top: 64px; border-radius: 8px 8px 0 0; overflow: hidden; }
.marketing-ops .mo-description { color: #c2c3c5; }
.marketing-ops .mo-difference { padding-bottom: 64px; }
.marketing-ops .mo-difference .mo-illustration { margin-top: 72px; }
.marketing-ops .mo-platform, .marketing-ops .mo-faq, .marketing-ops .mo-footer { background: var(--mo-paper); }
.marketing-ops .mo-features { display: grid; gap: 88px; margin-top: 72px; }
.marketing-ops .mo-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: start; }
.marketing-ops .mo-feature h3 { display: flex; gap: 24px; font-weight: 400; font-size: 32px; line-height: 40px; letter-spacing: 1px; margin-bottom: 32px; }
.marketing-ops .mo-number { flex: 0 0 24px; color: var(--mo-orange); font: 400 14px/20px "Azeret Mono", ui-monospace, monospace; }
.marketing-ops .mo-feature p { max-width: 526px; }
.marketing-ops .mo-feature--reverse .mo-feature-copy { grid-column: 2; grid-row: 1; }
.marketing-ops .mo-feature--reverse .mo-illustration { grid-column: 1; grid-row: 1; }
.marketing-ops .mo-intro { min-width: 0; }
.marketing-ops .mo-calendar .mo-illustration { margin-top: 72px; }
.marketing-ops .mo-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.marketing-ops .mo-metric { background: var(--mo-lime); color: var(--mo-ink); border-radius: 8px; padding: 24px; min-height: 258px; display: flex; flex-direction: column; justify-content: space-between; }
.marketing-ops .mo-metric p { margin: 0; }
.marketing-ops .mo-metric-value { font-weight: 300; font-size: clamp(60px, 6.67vw, 96px); line-height: 1.2; }
.marketing-ops .mo-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.marketing-ops .mo-faq-items { display: grid; gap: 24px; }
.marketing-ops .mo-faq details { padding-bottom: 16px; border-bottom: 1px solid #c2c3c5; }
.marketing-ops .mo-faq summary { position: relative; padding-right: 40px; list-style: none; cursor: pointer; font-size: 20px; line-height: 30px; }
.marketing-ops .mo-faq summary::-webkit-details-marker { display: none; }
.marketing-ops .mo-faq summary span { position: absolute; right: 0; top: 14px; width: 12px; height: 1px; background: currentColor; }
.marketing-ops .mo-faq details:not([open]) summary span::after { content: ""; position: absolute; width: 1px; height: 12px; left: 5px; top: -5px; background: currentColor; }
.marketing-ops .mo-answer { margin-top: 16px; }
.marketing-ops .mo-early-access { position: relative; min-height: 850px; display: grid; place-items: center; isolation: isolate; background: #1e1e1e url('../images/marketing-ops/early-access-background.webp') center / cover; color: var(--mo-paper); }
.marketing-ops .mo-early-access::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 40%); z-index: -1; }
.marketing-ops .mo-early-access > .mo-illustration { position: absolute; width: min(79%, 1136px); top: 5.1%; left: 50%; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.marketing-ops .mo-early-access-copy { max-width: 352px; text-align: center; }
.marketing-ops .mo-early-access-copy h2 { font-size: 32px; line-height: 40px; font-weight: 400; }
.marketing-ops .mo-early-access-copy .mo-button { margin-top: 24px; }
.marketing-ops .mo-wordmark { height: clamp(180px, 26.12vw, 418px); padding: 80px 64px 0; background: var(--mo-ink); overflow: hidden; }
.marketing-ops .mo-wordmark img { width: 100%; height: auto; display: block; }
.marketing-ops .mo-footer-content { padding-block: 64px; }
.marketing-ops .mo-footer-top { display: flex; justify-content: space-between; gap: 48px; align-items: start; }
.marketing-ops .mo-footer-top img { display: block; }
.marketing-ops .mo-newsletter { width: 412px; max-width: 100%; }
.marketing-ops .mo-newsletter h2 { font-size: 24px; line-height: 30px; letter-spacing: 1px; font-weight: 400; margin-bottom: 24px; }
.marketing-ops .mo-email-row { display: flex; border-bottom: 1px solid var(--mo-ink); }
.marketing-ops .mo-email-row input { border: 0; border-radius: 0; background: transparent; min-width: 0; width: 100%; color: var(--mo-ink); padding: 0 0 12px; box-shadow: none; }
.marketing-ops .mo-email-row input::placeholder { color: #4f4f50; opacity: 1; }
.marketing-ops .mo-email-row button { border: 0; border-radius: 0; background: transparent; color: var(--mo-ink); padding: 0 0 12px 16px; min-width: 44px; cursor: pointer; font-size: 24px; }
.marketing-ops .mo-email-row button:disabled { opacity: .5; cursor: wait; }
.marketing-ops .mo-form-status:not(:empty) { margin-top: 16px; }
.marketing-ops .mo-legal { margin-top: 64px; color: #4f4f50; text-align: center; font: 400 12px/15px "Azeret Mono", ui-monospace, monospace; }
.marketing-ops .mo-legal a { text-decoration: none; }
.marketing-ops .mo-legal a:hover, .marketing-ops .mo-legal button:hover { text-decoration: underline; }
.marketing-ops .mo-legal button { appearance: none; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; }
.marketing-ops .mo-sr-only, .marketing-ops .mo-skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.marketing-ops .mo-skip:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 16px; background: var(--mo-paper); color: var(--mo-ink); }
@media (min-width: 701px) {
    .marketing-ops .mo-button--medium-desktop { min-height: 56px; padding: 16px 24px; font-size: 16px; line-height: 20px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
    .marketing-ops .mo-container { width: calc(100% - 64px); }
    .marketing-ops .mo-split, .marketing-ops .mo-hero .mo-split { grid-template-columns: 1fr 1fr; gap: 32px; }
    .marketing-ops h1 { font-size: 48px; line-height: 55px; }
    .marketing-ops h2 { font-size: 40px; line-height: 48px; }
    .marketing-ops .mo-feature, .marketing-ops .mo-faq-grid { gap: 32px; }
    .marketing-ops .mo-early-access { min-height: 650px; }
    .marketing-ops .mo-early-access > .mo-illustration { width: 95%; }
    .marketing-ops .mo-early-access-copy { max-width: 260px; }
}
/* iPad-sized landscape: spend less width on the gap, not on smaller type. */
@media (min-width: 1150px) and (max-width: 1439px) {
    .marketing-ops .mo-hero .mo-split { grid-template-columns: fit-content(75%) minmax(0, 1fr); gap: 32px; }
}
/* Stack the hero at narrower tablet widths instead of squeezing both columns. */
@media (min-width: 701px) and (max-width: 1149px) {
    .marketing-ops .mo-hero .mo-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .marketing-ops .mo-hero h1 { font-size: 48px; line-height: 55px; }
}
@media (max-width: 700px) {
    .marketing-ops .mo-container { width: calc(100% - 32px); }
    .marketing-ops .mo-section { padding-block: 48px; }
    .marketing-ops .mo-header { min-height: 68px; }
    .marketing-ops .mo-header img { width: 140px; }
    .marketing-ops .mo-header .mo-button { min-width: 137px; min-height: 36px; }
    .marketing-ops .mo-header .mo-button span { display: none; }
    .marketing-ops h1 { font-size: 48px; line-height: 55px; }
    .marketing-ops h2 { font-size: 32px; line-height: 40px; letter-spacing: 1px; }
    .marketing-ops .mo-hero { padding-top: 48px; }
    .marketing-ops .mo-split, .marketing-ops .mo-hero .mo-split { grid-template-columns: 1fr; gap: 32px; }
    .marketing-ops .mo-hero .mo-split { gap: 16px; }
    .marketing-ops .mo-hero h1 { max-width: 345px; }
    .marketing-ops .mo-hero-copy, .marketing-ops .mo-description, .marketing-ops .mo-feature p { font-size: 14px; line-height: 15px; }
    .marketing-ops .mo-hero > .mo-illustration { margin-top: 64px; }
    .marketing-ops .mo-hero-copy .mo-button { margin-top: 32px; }
    .marketing-ops .mo-description p + p { margin-top: 15px; }
    .marketing-ops .mo-difference .mo-illustration { margin-top: 48px; }
    .marketing-ops .mo-features { margin-top: 88px; gap: 64px; }
    .marketing-ops .mo-feature { display: flex; flex-direction: column-reverse; gap: 24px; }
    .marketing-ops .mo-feature h3 { display: block; margin-bottom: 16px; }
    .marketing-ops .mo-number { display: block; margin-bottom: 16px; line-height: 15px; }
    .marketing-ops .mo-feature .mo-illustration { width: 100%; }
    .marketing-ops .mo-calendar .mo-illustration { margin-top: 48px; }
    .marketing-ops .mo-metrics { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
    .marketing-ops .mo-metric { min-height: 216px; }
    .marketing-ops .mo-metric-value { font-size: 80px; line-height: 96px; }
    .marketing-ops .mo-faq-grid { grid-template-columns: 1fr; gap: 48px; }
    .marketing-ops .mo-faq h2 { font-size: 24px; line-height: 40px; }
    .marketing-ops .mo-faq h2 strong { display: inline; margin-left: .25em; }
    .marketing-ops .mo-early-access { min-height: 914px; }
    .marketing-ops .mo-early-access > .mo-illustration { top: 49px; width: min(calc(100% - 52px), 338px); }
    .marketing-ops .mo-early-access-copy { max-width: 268px; }
    .marketing-ops .mo-early-access-copy h2 { letter-spacing: 0; }
    .marketing-ops .mo-wordmark { height: 26.11vw; padding: 22px 16px 0; }
    .marketing-ops .mo-footer-content { width: calc(100% - 96px); padding-block: 48px; }
    .marketing-ops .mo-footer-top { flex-direction: column; gap: 32px; }
    .marketing-ops .mo-footer-top img { width: 37px; height: 32px; }
    .marketing-ops .mo-legal { font-size: 10px; line-height: 15px; text-align: left; margin-top: 32px; }
}