/* =========================================================
   MYFUNADS — ADVERTISERS: CREATIVE STUDIO
   Previews one creative across illustrative placement
   mockups on pages/advertisers.html. Builds on the tokens
   in css/pages.css; behaviour in js/creative-studio.js.

   The stage carries data-platform / data-placement and the
   frame size as custom properties (--ratio, --card-max,
   --media-max-h). The mock is one persistent element whose
   chrome changes per platform, so a playing video keeps
   playing when the placement changes.
========================================================= */


/* =====================================================
   SHELL
===================================================== */

.cs-studio {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "format   stage"
        "creative stage";
    gap: 14px;
    padding: 14px;
    border-radius: var(--mf-radius-xl);
    border: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(244, 123, 32, .24), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(255, 107, 79, .1), transparent 40%),
        linear-gradient(160deg, #1a1414, #0b0909);
    box-shadow: var(--mf-shadow-dark);
}

.cs-panel {
    display: grid;
    align-content: start;
    gap: 26px;
    min-width: 0;
    padding: clamp(18px, 2vw, 26px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
}

.cs-panel--format {
    grid-area: format;
}

.cs-panel--creative {
    grid-area: creative;
}


/* =====================================================
   CONTROLS
===================================================== */

.cs-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: opacity .3s ease;
}

.cs-group[disabled] {
    opacity: .45;
}

.cs-legend {
    margin: 0 0 12px;
    padding: 0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.cs-seg {
    display: grid;
    gap: 8px;
}

.cs-seg--platform,
.cs-seg--fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cs-seg--placement {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.cs-opt {
    position: relative;
    display: block;
    cursor: pointer;
}

/* the real radio covers its pill: native clicks, arrow keys
   and screen-reader semantics, styled through the sibling */
.cs-opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.cs-opt > span {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    min-height: 46px;
    height: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.cs-opt small {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
}

.cs-seg--placement .cs-opt > span,
.cs-seg--fit .cs-opt > span {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.cs-opt:hover > span {
    border-color: rgba(255, 255, 255, .32);
}

.cs-opt input:checked + span {
    border-color: #fff;
    background: #fff;
    color: var(--mf-ink);
}

.cs-opt input:checked + span small {
    color: var(--mf-orange-deep);
}

.cs-opt input:focus-visible + span {
    outline: 2px solid var(--mf-orange);
    outline-offset: 3px;
}

.cs-opt input:disabled {
    cursor: not-allowed;
}

/* small frame glyph on each placement option */
.cs-shape {
    width: var(--w);
    height: var(--h);
    border-radius: 3px;
    border: 1.5px solid currentColor;
    opacity: .7;
}

.cs-opt input:checked + span .cs-shape {
    border-color: var(--mf-orange);
    background: rgba(244, 123, 32, .18);
    opacity: 1;
}


/* ---- upload ---- */

.cs-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 16px;
    border-radius: 18px;
    border: 1.5px dashed rgba(244, 123, 32, .55);
    background: rgba(244, 123, 32, .07);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}

.cs-drop:hover,
.cs-drop.is-over {
    border-color: var(--mf-orange);
    background: rgba(244, 123, 32, .15);
}

.cs-drop.has-error {
    border-color: rgba(255, 138, 115, .8);
}

.cs-file:focus-visible + .cs-drop {
    outline: 2px solid var(--mf-orange);
    outline-offset: 3px;
}

.cs-drop-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mf-orange);
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(244, 123, 32, .35);
}

.cs-drop-text b {
    display: block;
    font-size: 14px;
}

.cs-drop-text small {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.cs-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .55);
}

.cs-file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
}

.cs-file-info[hidden] {
    display: none;
}

.cs-file-meta {
    min-width: 0;
}

.cs-file-meta b,
.cs-file-meta small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-file-meta b {
    font-size: 13px;
}

.cs-file-meta small {
    margin-top: 2px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .6);
}

.cs-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #fff;
    background: #fff;
    color: var(--mf-ink);
    font: 800 11px/1 Inter, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.cs-btn:hover {
    border-color: var(--mf-orange);
    background: var(--mf-orange);
    color: #fff;
}

.cs-btn--ghost {
    border-color: rgba(255, 255, 255, .25);
    background: transparent;
    color: #fff;
}

.cs-btn:focus-visible {
    outline: 2px solid var(--mf-orange);
    outline-offset: 3px;
}

.cs-btn:disabled {
    cursor: not-allowed;
}

.cs-message {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.cs-message:empty {
    display: none;
}

.cs-message.is-error {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 107, 79, .45);
    background: rgba(255, 107, 79, .12);
    color: #ffc6b9;
}


/* ---- crop position ---- */

.cs-range {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
}

.cs-range + .cs-range {
    margin-top: 6px;
}

.cs-range input {
    width: 100%;
    min-height: 32px;
    margin: 0;
    accent-color: var(--mf-orange);
    cursor: pointer;
}

.cs-range input:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.cs-range input:focus-visible {
    outline: 2px solid var(--mf-orange);
    outline-offset: 2px;
}

.cs-range output {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.cs-pos-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}


/* =====================================================
   STAGE
===================================================== */

.cs-stage-wrap {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(circle at 50% 42%, rgba(244, 123, 32, .16), transparent 62%),
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 22px 22px,
        #110d0d;
}

.cs-stage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cs-readout {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px dashed rgba(244, 123, 32, .6);
    background: rgba(244, 123, 32, .12);
    color: #ffb37a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cs-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cs-stage {
    --ratio: .8;
    --card-max: 420px;
    --media-max-h: 440px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: clamp(460px, 66vh, 700px);
    padding: clamp(18px, 3vw, 40px);
}

/* frame width: the placement's cap, the space available, and
   a media height that stays within --media-max-h (and the
   viewport), so the ratio is always exact and never overflows */
.cs-mock,
.cs-page {
    width: min(100%, var(--card-max), calc(min(var(--media-max-h), 62vh) * var(--ratio)));
}

.cs-note {
    display: grid;
    gap: 6px;
    padding: 16px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .5);
}

.cs-guide {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
}


/* =====================================================
   MOCK FRAME (base = Meta-style feed card)
===================================================== */

.cs-mock {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    color: #111;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    font-family: Inter, Arial, sans-serif;
    text-align: left;
}

.cs-mock-label {
    display: none;
    margin: 0;
    padding: 6px 12px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8b8a91;
}

.cs-mock-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.cs-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb170, var(--mf-orange) 55%, var(--mf-coral));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.cs-mock-id {
    min-width: 0;
    line-height: 1.2;
}

.cs-mock-id b,
.cs-mock-id small {
    display: block;
}

.cs-mock-id b {
    font-size: 13px;
}

.cs-mock-id small {
    font-size: 11px;
    color: #707070;
}

.cs-mock-dots {
    margin-left: auto;
    font-size: 9px;
    letter-spacing: .1em;
    color: #9a9a9a;
}

.cs-mock-caption {
    margin: 0;
    padding: 0 14px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #333;
}

.cs-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
    background: #e9e5df;
    container-type: inline-size;
}

.cs-media.is-asset {
    background: #141010;
}

.cs-asset {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.cs-asset[hidden] {
    display: none;
}

.cs-media.is-draggable img.cs-asset {
    cursor: grab;
    touch-action: none;
}

.cs-media.is-dragging img.cs-asset {
    cursor: grabbing;
}

.cs-story-bar,
.cs-ad-badge {
    display: none;
    pointer-events: none;
}

.cs-mock-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f3f1ee;
}

.cs-mock-cta-text {
    min-width: 0;
    line-height: 1.25;
}

.cs-mock-cta-text small,
.cs-mock-cta-text b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-mock-cta-text small {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7a7a7a;
}

.cs-mock-cta-text b {
    font-size: 13px;
}

.cs-mock-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 6px;
    background: #e2dfda;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* faint page context (publisher page around DSP units and banners) */
.cs-page {
    display: none;
}

.cs-page i {
    display: block;
    height: 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
}

.cs-page i + i {
    margin-top: 9px;
}

.cs-page i:nth-child(2) {
    width: 82%;
}

.cs-page i:nth-child(3) {
    width: 64%;
}


/* =====================================================
   PLATFORM VARIANTS (illustrative styling only)
===================================================== */

/* Google Display: media first, headline row, "Ad" marker */
.cs-stage[data-platform="google"] .cs-mock {
    border-radius: 8px;
}

.cs-stage[data-platform="google"] .cs-mock-head,
.cs-stage[data-platform="google"] .cs-mock-caption {
    display: none;
}

.cs-stage[data-platform="google"] .cs-mock-cta {
    background: #fff;
    border-top: 1px solid #ececec;
}

.cs-stage[data-platform="google"] .cs-mock-btn {
    border-radius: 999px;
    background: var(--mf-ink);
    color: #fff;
}

.cs-stage[data-platform="google"] .cs-ad-badge,
.cs-stage[data-platform="dsp"] .cs-ad-badge,
.cs-stage[data-placement="banner"] .cs-ad-badge {
    display: block;
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: #333;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

/* LinkedIn: squarer avatar, outlined action */
.cs-stage[data-platform="linkedin"] .cs-mock {
    border-radius: 10px;
}

.cs-stage[data-platform="linkedin"] .cs-avatar {
    border-radius: 8px;
}

.cs-stage[data-platform="linkedin"] .cs-mock-cta {
    background: #fff;
    border-top: 1px solid #ececec;
}

.cs-stage[data-platform="linkedin"] .cs-mock-btn {
    border-radius: 999px;
    border: 1.5px solid var(--mf-ink);
    background: transparent;
}

/* DSP: a native unit on a publisher page */
.cs-stage[data-platform="dsp"] .cs-mock {
    border-radius: 6px;
}

.cs-stage[data-platform="dsp"] .cs-mock-label {
    display: block;
}

.cs-stage[data-platform="dsp"] .cs-mock-head,
.cs-stage[data-platform="dsp"] .cs-mock-caption {
    display: none;
}

.cs-stage[data-platform="dsp"] .cs-mock-cta {
    background: #fff;
}

.cs-stage[data-platform="dsp"] .cs-mock-btn {
    padding: 0;
    background: none;
    color: var(--mf-orange-deep);
}

.cs-stage[data-platform="dsp"] .cs-page,
.cs-stage[data-placement="banner"] .cs-page {
    display: block;
}


/* =====================================================
   PLACEMENT VARIANTS
===================================================== */

/* Story: full-bleed vertical with overlaid chrome */
.cs-stage[data-placement="story"] .cs-mock {
    border-radius: 18px;
    background: #000;
}

.cs-stage[data-placement="story"] .cs-mock-label,
.cs-stage[data-placement="story"] .cs-mock-caption,
.cs-stage[data-placement="story"] .cs-mock-cta-text,
.cs-stage[data-placement="story"] .cs-page {
    display: none;
}

.cs-stage[data-placement="story"] .cs-mock-head,
.cs-stage[data-placement="story"] .cs-mock-cta {
    display: flex;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    pointer-events: none;
}

.cs-stage[data-placement="story"] .cs-mock-head {
    top: 14px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.cs-stage[data-placement="story"] .cs-mock-id small,
.cs-stage[data-placement="story"] .cs-mock-dots {
    color: rgba(255, 255, 255, .85);
}

.cs-stage[data-placement="story"] .cs-mock-cta {
    bottom: 0;
    justify-content: center;
    padding: 34px 14px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .5));
}

/* keep the video's own controls clear of the overlaid action */
.cs-stage[data-placement="story"].has-video .cs-mock-cta {
    bottom: 52px;
    background: none;
}

.cs-stage[data-placement="story"] .cs-mock-btn {
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--mf-ink);
}

.cs-stage[data-placement="story"] .cs-story-bar {
    display: flex;
    gap: 4px;
    position: absolute;
    z-index: 3;
    top: 8px;
    left: 10px;
    right: 10px;
}

.cs-story-bar i {
    flex: 1;
    height: 2.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .45);
}

.cs-story-bar i:first-child {
    background: #fff;
}

.cs-stage[data-placement="story"] .cs-ad-badge {
    top: 58px;
}

/* Banner: the unit alone, on a page */
.cs-stage[data-placement="banner"] .cs-mock {
    border-radius: 3px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.cs-stage[data-placement="banner"] .cs-mock-label,
.cs-stage[data-placement="banner"] .cs-mock-head,
.cs-stage[data-placement="banner"] .cs-mock-caption,
.cs-stage[data-placement="banner"] .cs-mock-cta {
    display: none;
}

.cs-stage[data-placement="banner"] .cs-ad-badge {
    top: 3px;
    left: auto;
    right: 3px;
    padding: 1px 4px;
    font-size: 8px;
}


/* =====================================================
   SAMPLE CREATIVE
   Lays itself out by frame shape (data-shape, set by
   js/creative-studio.js); type scales with the frame
   width through container units (cqi).
===================================================== */

.cs-demo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 210, 171, .55), transparent 40%),
        linear-gradient(150deg, #ff8a3d 0%, var(--mf-orange) 36%, var(--mf-orange-deep) 68%, #6e2604 100%);
}

.cs-demo[hidden] {
    display: none;
}

.cs-demo-orb,
.cs-demo-ring,
.cs-demo-card {
    position: absolute;
    display: block;
}

.cs-demo-orb {
    right: -6cqi;
    top: 6cqi;
    width: 52cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 72% 80%, rgba(90, 25, 0, .45), transparent 55%),
        radial-gradient(circle at 40% 34%, #ffd9b8 0%, #ff9a52 42%, #c2500a 100%);
    box-shadow: 0 6cqi 12cqi rgba(80, 25, 0, .4);
}

.cs-demo-ring {
    right: -16cqi;
    top: 22cqi;
    width: 72cqi;
    height: 20cqi;
    border-radius: 50%;
    border: max(1px, .4cqi) solid rgba(255, 255, 255, .55);
    rotate: -14deg;
}

.cs-demo-card {
    left: 7cqi;
    top: 8cqi;
    display: flex;
    align-items: flex-end;
    gap: 1.6cqi;
    width: 26cqi;
    height: 17cqi;
    padding: 3cqi;
    border-radius: 3.4cqi;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 3cqi 6cqi rgba(80, 25, 0, .2);
}

.cs-demo-card i {
    flex: 1;
    border-radius: 1cqi;
    background: #fff;
}

.cs-demo-card i:nth-child(1) { height: 45%; opacity: .7; }
.cs-demo-card i:nth-child(2) { height: 75%; opacity: .85; }
.cs-demo-card i:nth-child(3) { height: 100%; background: var(--mf-ink); }

.cs-demo-copy {
    position: absolute;
    left: 7cqi;
    right: 7cqi;
    bottom: 7cqi;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4cqi;
}

.cs-demo-brand {
    display: inline-flex;
    align-items: center;
    gap: 1.6cqi;
    font-size: clamp(9px, 3.4cqi, 14px);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cs-demo-brand i {
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset -.25em -.25em 0 var(--mf-orange);
}

.cs-demo-title {
    max-width: 11ch;
    font-size: clamp(14px, 10cqi, 54px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 800;
}

.cs-demo-sub {
    max-width: 26ch;
    font-size: clamp(9px, 3.8cqi, 17px);
    line-height: 1.35;
    opacity: .92;
}

.cs-demo-cta {
    margin-top: 1.2cqi;
    padding: 1.8cqi 3.8cqi;
    border-radius: 999px;
    background: var(--mf-ink);
    font-size: clamp(9px, 3.2cqi, 14px);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* tall (story): larger type, copy clear of the overlaid action */
.cs-media[data-shape="tall"] .cs-demo-orb {
    right: 8cqi;
    top: 22cqi;
    width: 78cqi;
}

.cs-media[data-shape="tall"] .cs-demo-ring {
    right: -4cqi;
    top: 50cqi;
    width: 104cqi;
    height: 28cqi;
}

.cs-media[data-shape="tall"] .cs-demo-card {
    top: auto;
    bottom: 96cqi;
    left: auto;
    right: 9cqi;
    width: 34cqi;
    height: 22cqi;
}

.cs-media[data-shape="tall"] .cs-demo-copy {
    /* clear of the story's overlaid action at every size */
    bottom: max(30cqi, 96px);
    gap: 3.4cqi;
}

.cs-media[data-shape="tall"] .cs-demo-title {
    font-size: clamp(16px, 13.5cqi, 60px);
}

.cs-media[data-shape="tall"] .cs-demo-sub {
    font-size: clamp(10px, 4.6cqi, 18px);
}

/* wide (landscape): copy left, visual right */
.cs-media[data-shape="wide"] .cs-demo-orb {
    right: 6cqi;
    top: 50%;
    width: 34cqi;
    translate: 0 -50%;
}

.cs-media[data-shape="wide"] .cs-demo-ring {
    right: -2cqi;
    top: 50%;
    width: 46cqi;
    height: 12cqi;
    translate: 0 -50%;
}

.cs-media[data-shape="wide"] .cs-demo-card {
    left: auto;
    right: 36cqi;
    top: 5cqi;
    width: 15cqi;
    height: 10cqi;
    padding: 1.8cqi;
}

.cs-media[data-shape="wide"] .cs-demo-copy {
    left: 6cqi;
    right: 48cqi;
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
    gap: 1.6cqi;
}

.cs-media[data-shape="wide"] .cs-demo-brand {
    font-size: clamp(9px, 1.9cqi, 13px);
}

.cs-media[data-shape="wide"] .cs-demo-title {
    font-size: clamp(14px, 6cqi, 46px);
}

.cs-media[data-shape="wide"] .cs-demo-sub {
    font-size: clamp(9px, 2.2cqi, 16px);
}

.cs-media[data-shape="wide"] .cs-demo-cta {
    padding: 1.1cqi 2.4cqi;
    font-size: clamp(9px, 1.8cqi, 13px);
}

/* strip (banner): one row */
.cs-media[data-shape="strip"] .cs-demo-orb {
    right: 22cqi;
    top: 50%;
    width: 9cqi;
    translate: 0 -50%;
}

.cs-media[data-shape="strip"] .cs-demo-ring,
.cs-media[data-shape="strip"] .cs-demo-card,
.cs-media[data-shape="strip"] .cs-demo-sub {
    display: none;
}

.cs-media[data-shape="strip"] .cs-demo-copy {
    inset: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.4cqi;
    /* right padding keeps the action clear of the "Ad" marker */
    padding: 0 max(2.6cqi, 28px) 0 3cqi;
}

/* small banners (e.g. 320 × 50): no room for the orb or the
   brand label beside the headline and action */
@container (max-width: 400px) {
    .cs-media[data-shape="strip"] .cs-demo-orb,
    .cs-media[data-shape="strip"] .cs-demo-brand {
        display: none;
    }
}

.cs-media[data-shape="strip"] .cs-demo-brand {
    font-size: clamp(9px, 1.5cqi, 12px);
}

.cs-media[data-shape="strip"] .cs-demo-title {
    max-width: none;
    margin-right: auto;
    font-size: clamp(10px, 3.2cqi, 26px);
    white-space: nowrap;
}

.cs-media[data-shape="strip"] .cs-demo-cta {
    margin: 0;
    padding: 1cqi 2.2cqi;
    font-size: clamp(9px, 1.5cqi, 12px);
    white-space: nowrap;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 960px) {

    .cs-studio {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "format"
            "stage"
            "creative";
    }

    .cs-stage {
        min-height: 0;
    }
}

@media (max-width: 640px) {

    .cs-studio {
        gap: 10px;
        padding: 10px;
        border-radius: var(--mf-radius-lg);
    }

    .cs-panel,
    .cs-stage-wrap {
        border-radius: 22px;
    }

    .cs-stage {
        padding: 18px 12px;
    }

    .cs-stage-head,
    .cs-note {
        padding-inline: 16px;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .cs-group,
    .cs-opt > span,
    .cs-drop,
    .cs-btn {
        transition: none;
    }
}