/* ===========================================================================
   CONTENT MARKETING PAGE — "Content built to compound" (prefix: cm-)
   Editorial / print-inspired presentation. UNIQUE — nothing here mirrors
   other pages:
       · front-page hero: newspaper column rules, ink-settling headline with
         hand-drawn underline draw, fanned "story sheets" deck with stamp
       · magazine table-of-contents rows with sliding cover swatches
       · the pressroom: sheets travelling a production line through stations
       · contact-sheet format grid with crop-mark frames
       · marked-up manuscript with animated red-pen annotations
       · ink-blot CTA with self-drawing underline
   LIGHT / DARK MIX: paper bands (hero, pressroom, manuscript) alternate
   with ink bands (contents, contact sheet, CTA). Paper bands use dark ink
   #17093C and deepened accents (cyan #0E8494, gold #A87400, red #D6336C).
   Palette on theme: navy #080A2B · magenta #B217BA · violet #7B2FF7
   · blue #2A7BFF · cyan #43D2E0 · gold #F0A400 · Afacad (global).
   Loaded only by templates/contentmarketing.html.
   =========================================================================== */

.cm-hero,
.cm-toc,
.cm-press,
.cm-formats,
.cm-ms,
.cm-cta {
    --cm-ink: #ffffff;
    --cm-mute: rgba(255, 255, 255, .74);
    --cm-faint: rgba(255, 255, 255, .46);
    --cm-line: rgba(255, 255, 255, .14);
    --cm-line-strong: rgba(255, 255, 255, .3);
    --cm-magenta: #b217ba;
    --cm-violet: #7b2ff7;
    --cm-blue: #2a7bff;
    --cm-cyan: #43d2e0;
    --cm-gold: #f0a400;
    --cm-navy: #080a2b;
    --cm-grad: linear-gradient(90deg, #b217ba 0%, #2a7bff 100%);
    --cm-wrap: min(88%, 1280px);
    --cm-ease: cubic-bezier(.22, .61, .36, 1);
}

.cm-wrap {
    width: var(--cm-wrap);
    margin-inline: auto;
}

/* ------------------------------ reveal --------------------------------- */
.cm-rise {
    opacity: 1;
    transform: none;
}

.js .cm-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--cm-ease), transform .8s var(--cm-ease);
}

.js .cm-rise.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .js .cm-rise,
    .js .cm-rise.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------ typography ------------------------------ */
.cm-eyebrow {
    display: inline-block;
    font-size: .82rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--cm-gold);
    margin-bottom: 1.1rem;
}

.cm-head h2 {
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.06;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cm-head h2 em {
    font-style: normal;
    background: var(--cm-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cm-head p {
    max-width: 58ch;
    color: var(--cm-mute);
    font-size: 1.12rem;
}

.cm-crumb {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: .86rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cm-faint);
    margin-bottom: 1.4rem;
}

.cm-crumb i {
    font-style: normal;
    color: var(--cm-line-strong);
}

.cm-crumb a:hover {
    color: var(--cm-blue);
}

.cm-crumb b {
    color: var(--cm-blue);
    font-weight: 600;
}

/* hand-drawn underline */
.cm-underline {
    position: absolute;
    left: 0;
    bottom: -.35em;
    width: 100%;
    height: .55em;
    overflow: visible;
}

.cm-hero .cm-underline path {
    stroke: var(--cm-gold);
}

.cm-underline path {
    stroke: var(--cm-gold);
    stroke-width: 5;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    transition: stroke-dashoffset 1.4s var(--cm-ease) .5s;
}

.is-in .cm-underline path,
.cm-hero.is-lit .cm-underline path {
    stroke-dashoffset: 0;
}

/* buttons */
.cm-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.9rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    transition: transform .35s var(--cm-ease), box-shadow .35s var(--cm-ease), background .35s;
}

.cm-btn--fill {
    background: var(--cm-grad);
    color: #fff;
    box-shadow: 0 14px 38px rgba(178, 23, 186, .38);
}

.cm-btn--fill:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(42, 123, 255, .45);
}

.cm-btn--ghost {
    border: 1px solid var(--cm-line-strong);
    color: var(--cm-ink);
    background: transparent;
}

.cm-btn--ghost:hover {
    transform: translateY(-3px);
    border-color: var(--cm-blue);
    background: rgba(42, 123, 255, .1);
}

/* ======================= 1 · FRONT-PAGE HERO (light) =================== */
.cm-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 11rem 0 6rem;
    /* HERO RULE: heroes stay dark on every generated page */
    background:
        radial-gradient(900px 520px at 82% 12%, rgba(178, 23, 186, .28), transparent 60%),
        radial-gradient(700px 460px at 8% 92%, rgba(42, 123, 255, .2), transparent 58%),
        linear-gradient(170deg, #26084f 0%, #0a0b2e 62%, #05061c 100%);
    overflow: hidden;
}

/* newspaper column rules — on dark */
.cm-hero__rules {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .05) 0 1px, transparent 1px 12.5%);
    pointer-events: none;
}

.cm-hero__in {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 4rem;
    align-items: center;
}

/* hero inherits the page's dark tokens (white ink) — brand gradient stays bright */
.cm-hero .cm-crumb b,
.cm-hero .cm-crumb a:hover {
    color: var(--cm-cyan);
}

.cm-hero__title {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .32em;
    font-size: clamp(3rem, 6.6vw, 5.6rem);
    line-height: 1.04;
    font-weight: 700;
    margin-bottom: 1.6rem;
}

.cm-word {
    display: inline-block;
}

.cm-hero__em {
    position: relative;
    background: var(--cm-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* headline words settle in like ink */
.js .cm-word {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: opacity .7s ease, filter .7s ease, transform .7s var(--cm-ease);
}

.js .cm-hero.is-lit .cm-word {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

.cm-hero__sub {
    max-width: 54ch;
    font-size: 1.2rem;
    color: var(--cm-mute);
    margin-bottom: 2.2rem;
}

.cm-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.6rem;
}

.cm-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.cm-chips li {
    padding: .55rem 1.15rem;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, .3);
    font-size: .93rem;
    color: var(--cm-ink);
    background: rgba(255, 255, 255, .06);
    transition: all .3s;
}

.cm-chips li:hover {
    background: rgba(255, 255, 255, .13);
    border-color: var(--cm-magenta);
    transform: translateY(-2px);
}

/* The hero card carousel is styled in the scoped workflow section below. */

/* =================== 2 · CONTENTS — magazine TOC (dark) ================ */
.cm-toc {
    background:
        radial-gradient(900px 500px at 12% 10%, rgba(178, 23, 186, .2), transparent 58%),
        linear-gradient(180deg, #0a0b2e 0%, #14093c 100%);
    padding: 7rem 0 8rem;
}

.cm-toc .cm-head {
    margin-bottom: 3.2rem;
}

.cm-toc__list {
    list-style: none;
    border-top: 1px solid var(--cm-line);
}

.cm-row {
    --c: var(--cm-magenta);
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr 120px;
    align-items: center;
    gap: 1.6rem;
    padding: 1.85rem 1.4rem;
    border-bottom: 1px solid var(--cm-line);
    overflow: hidden;
    transition: background .4s, padding-left .4s var(--cm-ease);
}

.cm-row:hover {
    background: rgba(255, 255, 255, .05);
    padding-left: 2.2rem;
}

.cm-row__no {
    font-size: 2.2rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--c) 82%, #fff);
    opacity: .9;
}

.cm-row__text h3 {
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
    margin-bottom: .35rem;
}

.cm-row__text p {
    color: var(--cm-mute);
    font-size: 1.04rem;
}

/* cover swatch slides in on hover */
.cm-row__swatch {
    height: 76px;
    border-radius: 12px;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 30%, transparent));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--cm-ease);
}

.cm-row:hover .cm-row__swatch {
    transform: scaleX(1);
}

/* ===================== 3 · THE PRESSROOM (light) ====================== */
.cm-press {
    --cm-ink: #17093c;
    --cm-mute: rgba(23, 9, 60, .74);
    --cm-faint: rgba(23, 9, 60, .5);
    --cm-line: rgba(23, 9, 60, .14);
    --cm-line-strong: rgba(23, 9, 60, .3);
    color: var(--cm-ink);
    background: linear-gradient(180deg, #f7f2fd 0%, #ece2f8 100%);
    padding: 7rem 0;
}

.cm-press .cm-eyebrow {
    color: #a87400;
}

.cm-press .cm-head h2 em {
    background: linear-gradient(90deg, #94109d, #1f5fd6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cm-press .cm-head {
    margin-bottom: 3.4rem;
}

/* production line */
.cm-line {
    position: relative;
    padding: 3.2rem 0 1.2rem;
}

.cm-line__track {
    position: absolute;
    top: 3.2rem;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(23, 9, 60, .12), rgba(23, 9, 60, .22));
}

/* sheets travelling the line */
.cm-line__sheet {
    position: absolute;
    top: -13px;
    left: 0;
    width: 34px;
    height: 28px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(23, 9, 60, .25);
    box-shadow: 0 10px 22px rgba(23, 9, 60, .22);
    animation: cmTravel 6.6s linear infinite;
    animation-delay: var(--d);
}

.cm-line__sheet::after {
    content: "";
    position: absolute;
    inset: 6px 6px auto;
    height: 3px;
    border-radius: 2px;
    background: var(--cm-magenta);
}

@keyframes cmTravel {
    0% {
        left: -4%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 101%;
        opacity: 0;
    }
}

.cm-line:hover .cm-line__sheet {
    animation-play-state: paused;
}

.cm-line__stations {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    margin-top: 1.6rem;
}

.cm-line__stations li {
    position: relative;
    padding-top: 1.6rem;
    text-align: center;
}

/* station dot on the line */
.cm-line__stations li::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid var(--cm-magenta);
    background: #f7f2fd;
}

.cm-line__stations li:nth-child(2)::before {
    border-color: var(--cm-violet);
}

.cm-line__stations li:nth-child(3)::before {
    border-color: var(--cm-blue);
}

.cm-line__stations li:nth-child(4)::before {
    border-color: var(--cm-cyan);
}

.cm-line__stations li:nth-child(5)::before {
    border-color: var(--cm-gold);
}

.cm-line__stations b {
    display: block;
    font-size: 1.15rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.cm-line__stations span {
    font-size: .93rem;
    color: var(--cm-faint);
}

.cm-press__notes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
    margin-top: 3.4rem;
}

.cm-press__notes li {
    padding: 1.5rem 1.65rem;
    border: 1px solid rgba(23, 9, 60, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(23, 9, 60, .08);
}

.cm-press__notes b {
    display: block;
    font-size: 1.12rem;
    margin-bottom: .45rem;
}

.cm-press__notes span {
    color: var(--cm-mute);
    line-height: 1.6;
}

/* ================ 4 · FORMAT CONTACT SHEET (dark) ==================== */
.cm-formats {
    background: linear-gradient(180deg, #14093c 0%, #0a0b2e 100%);
    padding: 7rem 0 8rem;
}

.cm-formats .cm-head {
    margin-bottom: 3.4rem;
}

.cm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

/* crop-mark frame: photographic contact-sheet look */
.cm-frame {
    position: relative;
    padding: 1.5rem;
    border: 1px solid var(--cm-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    transition: transform .45s var(--cm-ease), border-color .45s, background .45s;
}

.cm-frame:hover {
    transform: translateY(-8px);
    border-color: rgba(67, 210, 224, .5);
    background: rgba(255, 255, 255, .07);
}

/* corner crop marks */
.cm-frame::before,
.cm-frame::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--cm-cyan);
    border-style: solid;
    opacity: .55;
    transition: opacity .4s;
}

.cm-frame::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.cm-frame::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

.cm-frame:hover::before,
.cm-frame:hover::after {
    opacity: 1;
}

.cm-frame__box {
    height: 132px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--cm-magenta) 16%, transparent) 0 12px,
            transparent 12px 24px),
        linear-gradient(140deg, rgba(178, 23, 186, .28), rgba(42, 123, 255, .22));
}

.cm-frame__box span {
    font-size: 2.4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .06em;
}

.cm-frame h3 {
    font-size: 1.3rem;
    margin-bottom: .8rem;
}

.cm-frame ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cm-frame li {
    padding: .32rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--cm-line-strong);
    font-size: .86rem;
    color: var(--cm-mute);
}

/* ================ 5 · MARKED-UP MANUSCRIPT (light) ================== */
.cm-ms {
    --cm-ink: #17093c;
    --cm-mute: rgba(23, 9, 60, .74);
    --cm-faint: rgba(23, 9, 60, .5);
    --cm-line: rgba(23, 9, 60, .14);
    --cm-line-strong: rgba(23, 9, 60, .3);
    color: var(--cm-ink);
    background: linear-gradient(180deg, #ece2f8 0%, #f7f2fd 100%);
    padding: 7rem 0;
}

.cm-ms .cm-eyebrow {
    color: #a87400;
}

.cm-ms .cm-head h2 em {
    background: linear-gradient(90deg, #94109d, #1f5fd6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Give the heading its own row so the manuscript aligns with the first
   standards card, not with the centre of the entire left column. */
.cm-ms__in {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas:
        "heading ."
        "standards paper";
    gap: 2.4rem 4rem;
    align-items: start;
}

.cm-ms__in > .cm-head {
    grid-area: heading;
}

.cm-ms__in > .cm-head h2 {
    margin: 0;
}

.cm-ms__in > .cm-standards {
    grid-area: standards;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.cm-ms__in > .cm-paper {
    grid-area: paper;
    min-width: 0;
}

.cm-standards {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-top: 2.4rem;
}

.cm-standards li {
    position: relative;
    padding: 1.15rem 1.45rem 1.15rem 3.2rem;
    border: 1px solid rgba(23, 9, 60, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(23, 9, 60, .07);
}

.cm-standards li::before {
    content: "\270E";
    position: absolute;
    left: 1.15rem;
    top: 1.2rem;
    font-size: 1.35rem;
    color: var(--cm-magenta);
}

.cm-standards b {
    display: block;
    font-size: 1.12rem;
    margin-bottom: .35rem;
}

.cm-standards span {
    color: var(--cm-mute);
    line-height: 1.6;
}

/* manuscript sheet */
.cm-paper {
    position: relative;
    margin: 0;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(23, 9, 60, .14);
    box-shadow: 0 34px 80px rgba(23, 9, 60, .18);
    overflow: hidden;
    transform: rotate(-1deg);
    transition: transform .5s var(--cm-ease);
}

.cm-paper:hover {
    transform: rotate(0deg) translateY(-5px);
}

.cm-paper__cap {
    padding: 1rem 1.6rem;
    border-bottom: 1px dashed rgba(23, 9, 60, .2);
    font-size: .88rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cm-faint);
    background: rgba(23, 9, 60, .03);
}

.cm-paper__body {
    position: relative;
    padding: 2.1rem 2.2rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 320px;
}

.cm-paper__para {
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--cm-ink);
}

.cm-paper__para--faint {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.cm-paper__line {
    height: 11px;
    border-radius: 6px;
    background: rgba(23, 9, 60, .1);
}

.cm-paper__line--short {
    width: 55%;
}

/* editor's opening clause — highlight swipe */
.cm-paper__lead {
    position: relative;
}

.cm-paper__lead::before {
    content: "";
    position: absolute;
    left: -.15em;
    right: -.15em;
    bottom: .05em;
    height: .72em;
    background: rgba(240, 164, 0, .38);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s var(--cm-ease) .45s;
    z-index: -1;
}

.cm-paper.is-marked .cm-paper__lead::before {
    transform: scaleX(1);
}

/* red-pen strike */
.cm-paper__strike {
    position: relative;
    color: var(--cm-faint);
}

.cm-paper__strike::after {
    content: "";
    position: absolute;
    left: 0;
    top: 55%;
    width: 100%;
    height: 2.5px;
    background: #d6336c;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--cm-ease) .9s;
}

.cm-paper.is-marked .cm-paper__strike::after {
    transform: scaleX(1);
}

/* margin notes pop in */
.cm-pen {
    position: absolute;
    font-family: "Segoe Script", "Bradley Hand", cursive;
    font-size: 1.02rem;
    color: #d6336c;
    opacity: 0;
    transform: rotate(-4deg) translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
}

.cm-pen--1 {
    top: 2.2rem;
    right: 1.6rem;
}

.cm-pen--2 {
    top: 48%;
    right: 2.4rem;
}

.cm-pen--3 {
    bottom: 1.6rem;
    right: 1.8rem;
    color: #2e9e63;
}

.cm-paper.is-marked .cm-pen {
    opacity: 1;
    transform: rotate(-4deg) translateY(0);
}

.cm-paper.is-marked .cm-pen--1 {
    transition-delay: 1.15s;
}

.cm-paper.is-marked .cm-pen--2 {
    transition-delay: 1.5s;
}

.cm-paper.is-marked .cm-pen--3 {
    transition-delay: 1.9s;
}

/* ======================= 6 · INK-BLOT CTA (dark) ===================== */
.cm-cta {
    position: relative;
    background:
        radial-gradient(760px 430px at 24% 12%, rgba(178, 23, 186, .28), transparent 58%),
        radial-gradient(760px 430px at 82% 88%, rgba(42, 123, 255, .26), transparent 58%),
        #0d0726;
    padding: 8.5rem 0;
    overflow: hidden;
}

/* ink blot that spreads on reveal */
.cm-cta__blot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 340px;
    height: 340px;
    transform: translate(-50%, -50%) scale(.4);
    background: radial-gradient(circle, rgba(178, 23, 186, .5) 0%, rgba(42, 123, 255, .3) 42%, transparent 68%);
    filter: blur(30px);
    border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    opacity: 0;
    transition: transform 1.6s var(--cm-ease), opacity 1.2s ease;
    pointer-events: none;
}

.cm-cta.is-lit .cm-cta__blot {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 1;
}

.cm-cta__in {
    position: relative;
    text-align: center;
}

.cm-cta__in h2 {
    font-size: clamp(2.5rem, 5.4vw, 4.3rem);
    line-height: 1.08;
    margin-bottom: 1.15rem;
}

.cm-cta__em {
    position: relative;
    display: inline-block;
    font-style: normal;
    background: linear-gradient(90deg, #ffd166, #ff8fae 55%, #7bd7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cm-underline--cta path {
    stroke: rgba(255, 255, 255, .8);
}

.cm-cta__in p {
    color: var(--cm-mute);
    font-size: 1.18rem;
    margin-bottom: 2.3rem;
}

.cm-cta__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cm-cta .cm-btn--ghost {
    color: #fff;
    border-color: var(--cm-line-strong);
}

.cm-cta .cm-btn--ghost:hover {
    border-color: var(--cm-cyan);
    background: rgba(67, 210, 224, .14);
}

@media (prefers-reduced-motion: reduce) {
    .cm-line__sheet {
        animation: none;
        display: none;
    }

    .js .cm-word {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .cm-underline path {
        stroke-dashoffset: 0;
    }
}

/* ============================== RESPONSIVE ============================= */
@media (max-width: 1100px) {
    .cm-hero__in {
        grid-template-columns: 1fr;
    }

    .cm-row {
        grid-template-columns: 80px 1fr 90px;
    }

    .cm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cm-ms__in {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "standards"
            "paper";
    }

    /* Keep the original 4rem separation below the cards on narrow screens. */
    .cm-ms__in > .cm-paper {
        margin-top: 1.6rem;
    }

    .cm-press__notes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .cm-hero {
        padding: 9.5rem 0 4.5rem;
    }

    .cm-row {
        grid-template-columns: 56px 1fr;
        padding: 1.45rem .6rem;
    }

    .cm-row:hover {
        padding-left: .6rem;
    }

    .cm-row__swatch {
        display: none;
    }

    .cm-line__stations {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem 1rem;
    }

    .cm-line__sheet {
        display: none;
    }

    .cm-grid {
        grid-template-columns: 1fr;
    }

    .cm-pen--2 {
        right: 1rem;
    }
}
/* ========================================================================
   CONTENT WORKFLOW HERO - scoped to this page; no shared navbar overrides.
   Four fixed DOM cards share one grid cell. Their tallest natural height
   determines the stack height, so rotating cards never resize the section.
   ======================================================================== */
.cm-hero.hu-hero {
    --cm-card-ease: cubic-bezier(.22, .68, .2, 1);
    padding: max(132px, calc(var(--hdr-full, 108px) + 32px)) 0 60px;
    background:
        radial-gradient(ellipse at 78% 38%, rgba(105, 58, 193, .24), transparent 45%),
        radial-gradient(ellipse at 5% 100%, rgba(45, 84, 171, .16), transparent 40%),
        linear-gradient(135deg, #21103f 0%, #120d2b 52%, #0b1027 100%);
    isolation: isolate;
}
.cm-hero.hu-hero .cm-hero__rules {
    background-image: repeating-linear-gradient(90deg,
        rgba(217, 207, 247, .035) 0 1px, transparent 1px 12.5%);
}
.cm-hero.hu-hero .cm-hero__in.hu-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 78px);
    max-width: 1600px;
}
.cm-hero__copy { min-width: 0; }
.cm-hero.hu-hero .cm-hero__title.hu-title {
    display: block;
    font-size: clamp(3rem, 5.15vw, 5.4rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    margin-bottom: 30px;
}
.cm-hero__line { display: block; }
.cm-hero.hu-hero .cm-hero__em {
    max-width: 100%;
    overflow-wrap: anywhere;
    background-image: linear-gradient(100deg, #c17bff 0%, #9973ff 47%, #62a2ff 100%);
    padding-bottom: .04em;
}
.cm-hero.hu-hero .cm-underline { bottom: -.17em; height: .34em; }
.cm-hero.hu-hero .cm-underline path { stroke: #d7b473; stroke-width: 3; }
.cm-hero.hu-hero .cm-hero__sub.hu-lead {
    color: #c7c3d9;
    max-width: 43ch;
    line-height: 1.5;
    font-size: clamp(1.05rem, 1.42vw, 1.3rem);
    margin-bottom: 28px;
}
.cm-hero.hu-hero .cm-crumb.hu-crumb {
    color: #a6a0bc;
    font-size: .75rem;
    letter-spacing: .13em;
    gap: .45rem;
    margin-bottom: 22px;
}
.cm-hero.hu-hero .cm-crumb.hu-crumb b { color: #8ac9e3; }
.cm-hero.hu-hero .cm-hero__cta.hu-actions { gap: 12px; margin-bottom: 28px; }
.cm-hero.hu-hero .cm-btn.hu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 21px;
    font-size: 1rem;
    line-height: 1.3;
    border-radius: 999px;
}
.cm-hero.hu-hero .cm-btn.hu-btn.hu-btn--primary {
    background: linear-gradient(110deg, #8150d4, #6656c6);
    border: 1px solid rgba(217, 195, 255, .25);
    box-shadow: 0 8px 24px rgba(111, 66, 193, .24), inset 0 1px rgba(255, 255, 255, .12);
}
.cm-hero.hu-hero .cm-btn.hu-btn.hu-btn--secondary {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(224, 217, 245, .48);
    box-shadow: none;
}
.cm-btn__arrow { width: 18px; height: 18px; flex-shrink: 0; }
.cm-hero.hu-hero .cm-chips { gap: 8px; }
.cm-hero.hu-hero .cm-chips li {
    padding: 7px 12px;
    font-size: .84rem;
    line-height: 1.4;
    color: #d3cee4;
    border: 1px solid rgba(208, 194, 240, .15);
    background: rgba(223, 212, 249, .035);
    transition: background-color .2s ease, border-color .2s ease;
}
.cm-hero.hu-hero .cm-chips li:hover {
    transform: none;
    background: rgba(223, 212, 249, .07);
    border-color: rgba(208, 194, 240, .3);
}
.cm-workflow {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 560px;
    justify-self: center;
    color: #211b35;
    /* Isolates card z-indices from the fixed header and other sections. */
    isolation: isolate;
}
.cm-workflow [hidden] { display: none !important; }
.cm-workflow__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 18px 12px;
}
.cm-workflow__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d9cfed;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.cm-workflow__eyebrow > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b498ee;
    box-shadow: 0 0 0 4px rgba(180, 152, 238, .10);
}
.cm-workflow__note { color: #aea5c8; font-size: .81rem; }
.cm-stack {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 130px 23px 24px 13px;
    isolation: isolate;
}
.cm-stack__halo {
    position: absolute;
    z-index: -1;
    inset: 0 -5% -5%;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(123, 85, 208, .2), rgba(102, 87, 186, .06) 58%, transparent 72%);
}
.cm-card {
    position: relative;
    grid-area: 1 / 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 24px;
    border: 1px solid #e5dfef;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 30%, #f7f5fc 100%);
    color: #211b35;
    box-shadow: 0 20px 48px -20px rgba(3, 2, 15, .6), 0 3px 8px rgba(5, 3, 20, .06);
    transform-origin: center top;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 780ms var(--cm-card-ease), opacity 380ms ease;
    /* Front-only pointer access; hidden cards have no interactive children. */
    pointer-events: none;
}
.cm-card[data-position="0"] { z-index: 4; transform: translate3d(0, 0, 0) rotate(-2deg); pointer-events: auto; }
.cm-card[data-position="1"] { z-index: 3; transform: translate3d(10px, -42px, 0) rotate(1deg) scale(.96); }
.cm-card[data-position="2"] { z-index: 2; transform: translate3d(-5px, -84px, 0) rotate(-.6deg) scale(.92); }
.cm-card[data-position="3"] { z-index: 1; transform: translate3d(9px, -126px, 0) rotate(1.4deg) scale(.88); }
.cm-card.is-leaving {
    z-index: 5;
    opacity: 0;
    transform: translate3d(-24px, 44px, 0) rotate(-6deg) scale(.97);
    transition: transform 280ms ease-in, opacity 260ms ease-in;
    pointer-events: none;
}
.cm-card.is-recycling { opacity: 0; transition: none; }
/* Expose only the stage heading on the rear sheets, not clipped body text. */
.cm-card[aria-hidden="true"] .cm-card__head { transform: translateY(-15px) scale(.84); }
.cm-card__body, .cm-card__detail, .cm-card__foot, .cm-card__badge { transition: opacity 500ms ease; }
.cm-card[aria-hidden="true"] .cm-card__body,
.cm-card[aria-hidden="true"] .cm-card__detail,
.cm-card[aria-hidden="true"] .cm-card__foot,
.cm-card[aria-hidden="true"] .cm-card__badge { opacity: 0; }
.cm-card__head {
    transition: transform 600ms var(--cm-card-ease);
    transform-origin: left top;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    min-width: 0;
}
.cm-card__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #7650b7;
    background: #eee7f9;
    border: 1px solid #e8def6;
}
.cm-card__icon svg { width: 23px; height: 23px; }
.cm-card .cm-card__head h3 {
    color: #2a2041;
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -.015em;
}
.cm-card__badge {
    margin-left: auto;
    padding: 5px 9px;
    border: 1px solid #e9e2f3;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 600;
    color: #73549b;
    background: #f3eef9;
    line-height: 1.3;
    white-space: nowrap;
}
.cm-card--review .cm-card__badge { color: #22694f; border-color: #d4e9df; background: #e9f5ee; }
.cm-card__body h4 {
    max-width: 22ch;
    font-size: clamp(1.35rem, 1.8vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.18;
    margin: 0 0 9px;
    color: #282039;
}
.cm-card__body > p {
    font-size: .94rem;
    line-height: 1.5;
    color: #686174;
    margin: 0;
}
.cm-card__detail {
    padding: 14px 16px;
    background: #f1eef7;
    border: 1px solid #e8e2ef;
    border-radius: 12px;
    margin-top: auto;
}
.cm-card__eyebrow {
    display: block;
    font-size: .62rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7a638d;
    margin-bottom: 7px;
}
.cm-card__detail p, .cm-card__detail blockquote {
    color: #4c405f;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
}
.cm-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-card__tags > span {
    background: #fff;
    border: 1px solid #e6dff0;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: .65rem;
    line-height: 1.4;
    color: #76628e;
}
.cm-card__brief { display: grid; gap: 8px; margin: 0; }
.cm-card__brief > div { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 9px; font-size: .85rem; line-height: 1.45; }
.cm-card__brief dt { color: #897796; }
.cm-card__brief dd { margin: 0; color: #4c405f; font-weight: 500; }
.cm-card__checks { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 0; padding: 0; list-style: none; }
.cm-card__checks li { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; line-height: 1.5; color: #516151; }
.cm-card__checks li::before { content: ""; width: 9px; height: 5px; border-left: 1.5px solid #398368; border-bottom: 1.5px solid #398368; transform: rotate(-45deg) translateY(-1px); }
.cm-card__detail .cm-card__distribution { font-size: .78rem; color: #7a6b8a; margin-top: 10px; }
.cm-card__foot {
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 13px;
    border-top: 1px solid #e8e2f0;
}
.cm-card__status { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; line-height: 1.4; color: #736280; }
.cm-card__status > span { width: 5px; height: 5px; border-radius: 50%; background: #9a7ebc; flex-shrink: 0; }
.cm-card--review .cm-card__status > span { background: #398368; }
.cm-card__count { font-size: .66rem; letter-spacing: .09em; color: #8e809d; white-space: nowrap; }
.cm-workflow__controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 3px; }
.cm-workflow__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    flex: 1;
    min-width: 0;
    padding: 4px;
    border: 1px solid rgba(205, 187, 240, .18);
    border-radius: 13px;
    background: rgba(195, 171, 235, .055);
}
.cm-workflow__step, .cm-workflow__toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    color: #b9aecf;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.cm-workflow__step {
    overflow-wrap: anywhere;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 0;
    border-radius: 9px;
    padding: 8px 5px;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.3;
    transition: color .2s ease, background-color .2s ease;
}
.cm-workflow__step-dot { display: inline-block; width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: currentColor; opacity: .6; }
.cm-workflow__step[aria-pressed="true"] { color: #f0e9ff; background: rgba(185, 149, 245, .17); }
.cm-workflow__step[aria-pressed="true"] .cm-workflow__step-dot { color: #c4a5ff; opacity: 1; }
.cm-workflow__step:hover { color: #fff; background: rgba(185, 149, 245, .1); }
.cm-workflow__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid rgba(205, 187, 240, .2); border-radius: 50%; }
.cm-workflow__toggle:hover { background: rgba(185, 149, 245, .1); color: #fff; }
.cm-workflow__toggle svg { width: 19px; height: 19px; }
.cm-workflow__play-icon, .cm-workflow.is-paused .cm-workflow__pause-icon { display: none; }
.cm-workflow.is-paused .cm-workflow__play-icon { display: block; }
.cm-workflow__step:focus-visible, .cm-workflow__toggle:focus-visible, .cm-hero .cm-btn:focus-visible { outline: 2px solid #d3b8ff; outline-offset: 4px; }
.cm-workflow__caption, .cm-workflow__fallback { color: #a99cbc; text-align: center; font-size: .75rem; line-height: 1.5; margin: 13px 0 0; }
.cm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) and (min-width: 901px) {
    .cm-hero.hu-hero .cm-hero__in.hu-inner { gap: 26px; }
    .cm-card { padding: 20px; gap: 15px; }
    .cm-card__badge { font-size: .59rem; padding: 4px 6px; }
    .cm-workflow__intro { margin-inline: 10px; }
    .cm-workflow__note { display: none; }
    .cm-stack { padding-inline: 10px 18px; }
    .cm-hero.hu-hero .cm-btn.hu-btn { padding-inline: 15px; font-size: .93rem; }
}
@media (max-width: 900px) {
    .cm-hero.hu-hero .cm-hero__in.hu-inner { grid-template-columns: minmax(0, 1fr); gap: 46px; max-width: 680px; }
    .cm-hero.hu-hero .cm-hero__title.hu-title { font-size: clamp(2.65rem, 7.5vw, 4.3rem); }
    .cm-hero.hu-hero .cm-hero__sub.hu-lead { max-width: 52ch; }
    .cm-workflow { max-width: 500px; }
    .cm-card__body h4 { font-size: 1.7rem; }
}
@media (max-width: 600px) {
    .cm-hero.hu-hero { padding-top: max(110px, calc(var(--hdr-full, 78px) + 28px)); padding-bottom: 42px; }
    .cm-hero.hu-hero .cm-hero__in.hu-inner { width: calc(100% - 40px); gap: 38px; }
    .cm-hero.hu-hero .cm-hero__title.hu-title { font-size: clamp(2.35rem, 9.3vw, 3.4rem); margin-bottom: 24px; }
    .cm-hero.hu-hero .cm-hero__sub.hu-lead { font-size: 1.05rem; line-height: 1.5; }
    .cm-hero.hu-hero .cm-crumb.hu-crumb { font-size: .65rem; gap: 5px; line-height: 1.6; letter-spacing: .07em; margin-bottom: 18px; }
    .cm-hero.hu-hero .cm-btn.hu-btn { padding: 12px 17px; min-height: 48px; font-size: .95rem; }
    .cm-hero.hu-hero .cm-chips li { font-size: .76rem; padding: 6px 10px; }
    .cm-workflow__intro { margin: 0 0 14px; }
    .cm-workflow__eyebrow { font-size: .63rem; letter-spacing: .12em; }
    .cm-workflow__note { font-size: .72rem; }
    .cm-stack { padding: 91px 0 19px; }
    .cm-card { padding: 20px; gap: 15px; border-radius: 16px; }
    .cm-card[data-position="0"] { transform: translate3d(0, 0, 0); }
    .cm-card[data-position="1"] { transform: translate3d(0, -29px, 0) scale(.96); }
    .cm-card[data-position="2"] { transform: translate3d(0, -58px, 0) scale(.92); }
    .cm-card[data-position="3"] { transform: translate3d(0, -87px, 0) scale(.88); }
    .cm-card.is-leaving { transform: translate3d(0, 25px, 0) scale(.97); }
    .cm-card[aria-hidden="true"] .cm-card__head { transform: translateY(-16px) scale(.78); }
    .cm-card__body h4 { font-size: 1.55rem; }
    .cm-card__body > p { font-size: .91rem; }
    .cm-card__detail { padding: 13px; }
    .cm-workflow__controls { gap: 7px; }
    .cm-workflow__step { font-size: .75rem; padding-inline: 2px; }
    .cm-workflow__step-dot { display: none; }
}
@media (max-width: 360px) {
    .cm-hero.hu-hero .cm-hero__in.hu-inner { width: calc(100% - 32px); }
    .cm-hero.hu-hero .cm-btn.hu-btn { width: 100%; }
    .cm-workflow__note { display: none; }
    .cm-card { padding: 16px; }
    .cm-card__head { gap: 8px; }
    .cm-card__icon { width: 32px; height: 32px; border-radius: 9px; }
    .cm-card .cm-card__head h3 { font-size: 1.12rem; }
    .cm-card__badge { font-size: .59rem; padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .cm-card, .cm-card.is-leaving, .cm-card__head, .cm-card__body,
    .cm-card__detail, .cm-card__foot, .cm-card__badge, .cm-workflow__step, .cm-workflow__toggle,
    .cm-hero.hu-hero .cm-btn.hu-btn, .cm-hero.hu-hero .cm-chips li { transition: none; }
    .cm-hero.hu-hero .cm-word { filter: none; transition: none; }
}