.creator-studio-shell {
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
}

.creator-modebar {
    display: flex;
    min-height: 70px;
    padding: .85rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
}

.creator-modebar > div:first-child {
    display: grid;
    gap: .2rem;
}

.creator-modebar .eyebrow { margin: 0; }
.creator-modebar strong { color: var(--text-soft); font-size: .78rem; }

.creator-mode-tabs {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--line);
    background: var(--bg);
}

.creator-mode-tabs button {
    display: inline-flex;
    min-height: 36px;
    padding: .55rem .8rem;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
}

.creator-mode-tabs button:hover,
.creator-mode-tabs button.is-active {
    color: var(--ink);
    background: var(--surface-2);
}

.creator-mode-tabs button.is-active {
    box-shadow: inset 0 -2px 0 var(--brand);
}

.creator-editor-panel { min-width: 0; padding: 1rem; }
.creator-editor-panel[hidden] { display: none !important; }

.creator-document-canvas {
    border: 1px solid var(--line);
    background:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
        var(--bg);
    background-size: 28px 28px;
}

.creator-document-label {
    display: flex;
    margin: calc(clamp(1rem, 3vw, 2.5rem) * -1) calc(clamp(1rem, 3vw, 2.5rem) * -1) 1.5rem;
    padding: .65rem .8rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
    font-size: .58rem;
}

.creator-document-label span {
    color: var(--text-soft);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Experience Studio v3 — production public-page creator. */
.experience-studio {
    overflow: hidden;
    border: 0;
    background: var(--bg);
}

.experience-studio-header {
    display: flex;
    min-height: 82px;
    padding: 1rem 1.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
}

.experience-studio-header > div:first-child { display: grid; gap: .2rem; }
.experience-studio-header .eyebrow { margin: 0; }
.experience-studio-header h3 {
    display: flex;
    margin: 0;
    align-items: center;
    gap: .5rem;
    color: var(--ink);
    font-size: 1.05rem;
}
.experience-studio-header p:last-child { margin: 0; color: var(--muted); font-size: .65rem; }
.experience-studio-header-actions { display: flex; align-items: center; gap: .55rem; }
.experience-save-state { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .58rem; }
.experience-save-state i { width: 6px; height: 6px; border-radius: 50%; background: #50aa72; box-shadow: 0 0 0 4px rgba(80,170,114,.12); }

.experience-studio-layout {
    grid-template-columns: 248px minmax(520px, 1fr) 260px;
    min-height: min(780px, calc(100vh - 190px));
    max-height: none;
}

.experience-studio-sidebar,
.experience-studio-inspector {
    max-height: min(780px, calc(100vh - 190px));
    background: var(--bg-elev);
}

.experience-document-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .7rem;
    margin-bottom: .9rem;
    padding: .75rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    align-items: center;
}
.experience-document-icon { display: grid; width: 38px; height: 38px; place-items: center; color: #161a17; background: var(--brand); }
.experience-document-card > span:last-child { display: grid; min-width: 0; gap: .1rem; }
.experience-document-card strong { color: var(--ink); font-size: .65rem; }
.experience-document-card small { overflow: hidden; color: var(--muted); font-size: .51rem; text-overflow: ellipsis; white-space: nowrap; }

.experience-studio-nav { display: grid; margin: 0 -1rem 1rem; border-top: 1px solid var(--line); }
.experience-studio-nav button {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: .15rem .6rem;
    width: 100%;
    padding: .72rem 1rem;
    color: var(--muted);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.experience-studio-nav button:hover,
.experience-studio-nav button.is-active { color: var(--ink); background: var(--surface-2); box-shadow: inset 3px 0 var(--brand); }
.experience-studio-nav button > span { grid-row: 1 / 3; color: var(--brand-hi); font-size: .5rem; }
.experience-studio-nav strong { color: currentColor; font-size: .62rem; }
.experience-studio-nav small { color: var(--muted); font-size: .48rem; }

.experience-studio .presentation-choice-group legend {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: .5rem;
}
.experience-studio .presentation-choice-group legend small { color: var(--muted); font-size: .48rem; font-weight: 500; }
.experience-studio .presentation-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.experience-studio .presentation-theme-option { padding: .38rem; }
.experience-studio .presentation-theme-swatch { height: 30px; }
.experience-studio .presentation-template-option { grid-template-columns: 58px minmax(0, 1fr); }
.experience-studio .presentation-template-icon { height: 42px; }

.experience-preview-panel {
    min-height: 0;
    background: color-mix(in srgb, var(--bg) 90%, #000);
}
.experience-device-switch { display: inline-flex; gap: .2rem; }
.experience-device-switch button {
    display: inline-flex;
    min-height: 30px;
    padding: .35rem .55rem;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .52rem;
}
.experience-device-switch button:hover,
.experience-device-switch button.is-active { color: var(--ink); border-color: var(--line); background: var(--surface-2); }

.experience-preview-stage {
    display: grid;
    min-height: 650px;
    padding: clamp(1rem, 2.2vw, 2rem);
    place-items: center;
    overflow: auto;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
        color-mix(in srgb, var(--bg) 92%, #000);
    background-size: 30px 30px;
}
.experience-preview-viewport {
    width: min(100%, 920px);
    aspect-ratio: 16 / 10;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: #101714;
    box-shadow: 0 30px 90px rgba(0,0,0,.28);
    transition: width .32s ease, aspect-ratio .32s ease;
}
.experience-preview-viewport.is-mobile { width: min(330px, 100%); min-height: 590px; aspect-ratio: 9 / 16; }

.experience-public-preview {
    --preview-white: #fffdf7;
    width: 100%;
    min-height: 100%;
    color: var(--preview-white);
    background: var(--public-primary);
    font-family: "DM Sans", "Inter", sans-serif;
    transform-origin: top center;
}
.experience-public-preview * { box-sizing: border-box; }
.experience-public-preview[data-template="gallery"] .experience-cover { letter-spacing: -.01em; }
.experience-public-preview[data-template="evidence"] .experience-cover::after { opacity: .75; }
.experience-public-preview.no-motion *,
.experience-public-preview.no-motion *::before,
.experience-public-preview.no-motion *::after { animation: none !important; transition: none !important; }

.experience-public-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 54px;
    padding: 0 3.5%;
    color: #17201c;
    background: var(--public-paper);
    align-items: center;
}
.experience-public-brand { display: inline-flex; align-items: center; gap: .5rem; }
.experience-public-brand > b { display: grid; width: 29px; height: 29px; place-items: center; color: white; background: var(--public-primary); font-size: .55rem; }
.experience-public-brand > span { display: grid; line-height: 1.15; }
.experience-public-brand strong { font-size: .56rem; }
.experience-public-brand small { color: #778078; font-size: .39rem; letter-spacing: .08em; text-transform: uppercase; }
.experience-public-nav { font-size: .52rem; font-weight: 700; }
.experience-public-topbar > small { display: inline-flex; justify-self: end; align-items: center; gap: .3rem; color: #747c76; font-size: .37rem; letter-spacing: .08em; text-transform: uppercase; }
.experience-public-topbar > small i { width: 4px; height: 4px; border-radius: 50%; background: var(--public-accent); }

.experience-cover {
    position: relative;
    min-height: 446px;
    padding: 8% 5%;
    overflow: hidden;
}
.experience-cover::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(255,255,255,.035) 12.5%);
    content: "";
    pointer-events: none;
}
.experience-cover-copy { position: relative; z-index: 2; width: 57%; }
.experience-cover-copy > span {
    display: block;
    margin-bottom: 1.5rem;
    font-size: .43rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.experience-cover-copy h4 {
    display: grid;
    margin: 0;
    color: white;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(2rem, 4.6vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .92;
}
.experience-cover-copy h4 b,
.experience-cover-copy h4 em { color: inherit; font: inherit; font-style: normal; }
.experience-cover-copy h4 em { color: var(--public-accent); }
.experience-cover-copy h4 em:empty { display: none; }
.experience-cover-copy > p { margin: 1.5rem 0 0; color: rgba(255,255,255,.58); font-size: .55rem; line-height: 1.6; }
.experience-cover-copy > button {
    min-height: 38px;
    margin-top: 1.5rem;
    padding: .55rem .85rem;
    color: #111813;
    border: 0;
    background: var(--public-accent);
    font-size: .5rem;
    font-weight: 800;
}

.experience-proposal-cover { background: radial-gradient(circle at 75% 30%, color-mix(in srgb, var(--public-primary) 55%, #78907f), var(--public-primary) 45%); }
.experience-proposal-stack { position: absolute; z-index: 1; top: 13%; right: 5%; width: 38%; height: 70%; perspective: 1000px; }
.experience-proposal-stack > * { position: absolute; inset: 5%; display: flex; flex-direction: column; padding: 7%; border: 1px solid rgba(255,255,255,.22); box-shadow: -12px 24px 55px rgba(0,0,0,.25); }
.experience-proposal-stack > i:first-child { background: #a94a35; transform: rotate(-8deg) translate(-12%, 5%); }
.experience-proposal-stack > i:nth-child(2) { background: var(--public-paper); transform: rotate(-2deg) translate(-5%, 1%); }
.experience-proposal-stack > b { color: #101714; background: var(--public-accent); transform: rotate(5deg); animation: experience-card-float 7s ease-in-out infinite; }
.experience-proposal-stack small { font-size: .42rem; font-weight: 500; }
.experience-proposal-stack strong { margin-top: auto; font-size: clamp(1.05rem, 2.6vw, 2.6rem); font-weight: 500; letter-spacing: -.08em; line-height: .92; overflow-wrap: anywhere; }
.experience-cover-meta { position: absolute; z-index: 2; right: 5%; bottom: 3%; left: 5%; display: flex; justify-content: space-between; padding-top: .6rem; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.14); font-size: .4rem; letter-spacing: .08em; text-transform: uppercase; }
@keyframes experience-card-float { 50% { transform: rotate(4deg) translateY(-6px); } }

.experience-cma-cover {
    background:
        linear-gradient(90deg, rgba(8,12,10,.9), rgba(8,12,10,.35) 55%, rgba(8,12,10,.1)),
        radial-gradient(circle at 76% 30%, color-mix(in srgb, var(--public-accent) 18%, transparent), transparent 40%),
        var(--public-primary);
}
.experience-cma-cover.has-image {
    background:
        linear-gradient(90deg, rgba(8,12,10,.88), rgba(8,12,10,.32) 55%, rgba(8,12,10,.08)),
        var(--cma-preview-image) center / cover;
}
.experience-cma-cover .experience-cover-copy { top: 18%; }
.experience-cma-prism {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 7%;
    display: grid;
    width: 36%;
    min-height: 32%;
    padding: 2.5%;
    color: #101714;
    background: color-mix(in srgb, var(--public-paper) 95%, transparent);
    box-shadow: 0 24px 55px rgba(0,0,0,.3);
    transform: perspective(900px) rotateY(-5deg) rotateX(2deg);
}
.experience-cma-prism::before { position: absolute; top: 10px; bottom: -9px; left: -9px; width: 9px; background: #a94a35; content: ""; transform: skewY(-40deg); transform-origin: right top; }
.experience-cma-prism > span { font-size: .42rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.experience-cma-prism strong { align-self: center; font-size: clamp(1rem, 2.5vw, 2.3rem); font-weight: 500; letter-spacing: -.06em; overflow-wrap: anywhere; }
.experience-cma-prism small { padding-top: .55rem; color: #69726d; border-top: 1px solid rgba(16,23,20,.16); font-size: .4rem; text-align: right; }

.experience-market-cover {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--public-primary) 60%, #78907f), transparent 36%), var(--public-primary);
    align-items: center;
}
.experience-market-orbit { position: relative; z-index: 2; width: 82%; aspect-ratio: 1; justify-self: end; transform: rotateX(58deg) rotateZ(-16deg); transform-style: preserve-3d; }
.experience-market-orbit > i { position: absolute; inset: 8%; border: 1px solid color-mix(in srgb, var(--public-accent) 55%, transparent); border-radius: 50%; animation: experience-orbit 8s linear infinite; }
.experience-market-orbit > i:nth-child(2) { inset: 25%; border-style: dashed; animation-direction: reverse; }
.experience-market-orbit > b { position: absolute; inset: 35%; display: grid; place-content: center; color: #101714; background: var(--public-accent); border-radius: 50%; text-align: center; transform: translateZ(50px); }
.experience-market-orbit span { max-width: 70px; font-size: clamp(.55rem, 1.6vw, 1.25rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; overflow-wrap: anywhere; }
.experience-market-orbit small { font-size: .34rem; letter-spacing: .1em; text-transform: uppercase; }
.experience-preview-agent { display: flex; margin-top: 1.7rem; align-items: center; gap: .6rem; color: rgba(255,255,255,.55); font-size: .45rem; line-height: 1.45; }
.experience-preview-agent > b { display: grid; width: 30px; height: 30px; place-items: center; color: #101714; background: var(--public-accent); font-size: .48rem; }
.experience-preview-agent strong { color: white; }
@keyframes experience-orbit { to { transform: rotate(360deg); } }

.experience-studio-inspector .presentation-panel-title { margin-top: -1rem; }
.experience-studio-inspector .presentation-brand-controls { padding-top: 1rem; }
.experience-studio-inspector .presentation-brand-controls > small { display: block; margin-top: .2rem; color: var(--muted); font-size: .5rem; line-height: 1.4; }

.experience-preview-viewport.is-mobile .experience-public-topbar {
    grid-template-columns: 1fr auto;
    min-height: 48px;
    padding: 0 5%;
}
.experience-preview-viewport.is-mobile .experience-public-nav { display: none; }
.experience-preview-viewport.is-mobile .experience-public-brand > span { display: none; }
.experience-preview-viewport.is-mobile .experience-cover {
    min-height: 542px;
    padding: 12% 6%;
}
.experience-preview-viewport.is-mobile .experience-cover-copy { width: 100%; }
.experience-preview-viewport.is-mobile .experience-cover-copy h4 { font-size: clamp(2.1rem, 12vw, 3.1rem); }
.experience-preview-viewport.is-mobile .experience-proposal-stack {
    top: auto;
    right: 7%;
    bottom: 7%;
    width: 68%;
    height: 39%;
    opacity: .88;
}
.experience-preview-viewport.is-mobile .experience-proposal-cover .experience-cover-copy { position: relative; z-index: 3; }
.experience-preview-viewport.is-mobile .experience-proposal-cover .experience-cover-copy > p,
.experience-preview-viewport.is-mobile .experience-proposal-cover .experience-cover-copy > button { position: relative; z-index: 4; }
.experience-preview-viewport.is-mobile .experience-cover-meta { display: none; }
.experience-preview-viewport.is-mobile .experience-cma-cover .experience-cover-copy { top: 0; }
.experience-preview-viewport.is-mobile .experience-cma-prism { right: 6%; bottom: 7%; width: 82%; min-height: 25%; }
.experience-preview-viewport.is-mobile .experience-market-cover { display: block; }
.experience-preview-viewport.is-mobile .experience-market-orbit { position: absolute; right: -15%; bottom: 1%; width: 85%; opacity: .7; }
.experience-preview-viewport.is-mobile .experience-market-cover .experience-cover-copy { position: relative; z-index: 3; }

.experience-content-dock {
    width: 100%;
    max-height: 650px;
    padding: 0;
    overflow: auto;
    align-self: stretch;
    background: var(--bg);
}
.experience-content-dock[hidden] { display: none !important; }
.experience-studio.is-content-mode .experience-preview-stage {
    padding: 0;
    place-items: stretch;
    background: var(--bg);
}
.experience-studio.is-content-mode .experience-preview-viewport { display: none; }
.experience-studio.is-content-mode .experience-device-switch { visibility: hidden; }
.experience-content-dock .market-update-editor-workspace,
.experience-content-dock .proposal-workspace-grid,
.experience-content-dock .appraisal-builder-grid { grid-template-columns: 1fr; }
.experience-content-dock .market-update-canvas-panel,
.experience-content-dock .market-update-editor-side,
.experience-content-dock .proposal-main-panel,
.experience-content-dock .proposal-side-panel,
.experience-content-dock .appraisal-builder-side,
.experience-content-dock .appraisal-builder-main {
    min-width: 0;
    border-radius: 0;
}
.experience-content-dock .market-update-editor-side,
.experience-content-dock .proposal-side-panel,
.experience-content-dock .appraisal-builder-side { border-top: 1px solid var(--line); }
.experience-content-dock .creator-document-canvas { min-height: 430px; }

@media (max-width: 1500px) {
    .experience-studio-layout { grid-template-columns: 220px minmax(450px, 1fr) 240px; }
}

@media (max-width: 1220px) {
    .experience-studio-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .experience-studio-inspector {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1.2fr .9fr .9fr;
        gap: 1rem;
        max-height: none;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .experience-studio-inspector .presentation-panel-title { grid-column: 1 / -1; margin: -1rem -1rem 0; }
    .experience-studio-inspector .presentation-cover-fields,
    .experience-studio-inspector .presentation-brand-controls { border-bottom: 0; }
    .experience-studio-sidebar { max-height: 720px; }
}

@media (max-width: 880px) {
    .experience-studio-header { align-items: flex-start; }
    .experience-studio-header-actions { flex-wrap: wrap; justify-content: flex-end; }
    .experience-save-state { display: none; }
    .experience-studio-layout { display: block; }
    .experience-studio-sidebar,
    .experience-studio-inspector { max-height: none; border: 0; border-bottom: 1px solid var(--line); }
    .experience-studio-nav { grid-template-columns: repeat(3, 1fr); }
    .experience-studio-nav button { grid-template-columns: 18px 1fr; }
    .experience-studio-nav small { display: none; }
    .experience-studio .presentation-theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .experience-studio .presentation-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .experience-studio .presentation-template-option { display: block; }
    .experience-studio .presentation-template-option > span:last-child { margin-top: .35rem; }
    .experience-preview-stage { min-height: 560px; }
    .experience-studio-inspector { grid-template-columns: 1fr 1fr; }
    .experience-studio-inspector .presentation-switches { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .creator-editor-panel { padding: .55rem; }
    .experience-studio-header { display: grid; }
    .experience-studio-header-actions { justify-content: stretch; }
    .experience-studio-header-actions .btn { flex: 1; }
    .experience-studio .presentation-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .experience-studio .presentation-template-grid { grid-template-columns: 1fr; }
    .experience-preview-toolbar { align-items: center; }
    .experience-device-switch button span { display: none; }
    .experience-preview-stage { min-height: 520px; padding: .6rem; place-items: start center; }
    .experience-preview-viewport { min-width: 560px; min-height: 350px; transform: scale(.57); transform-origin: top center; margin-bottom: -140px; }
    .experience-preview-viewport.is-mobile { min-width: 0; width: min(300px, 100%); min-height: 534px; margin-bottom: 0; transform: none; }
    .experience-studio-inspector { display: block; }
    .experience-studio-inspector > * + * { margin-top: 1rem; }
}

.presentation-studio-card {
    min-width: 0;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--surface);
}

.creator-editor-panel > .presentation-studio-card { border: 0; }

.presentation-studio-heading {
    display: flex;
    min-height: 72px;
    padding: .9rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
}

.presentation-studio-heading h3 {
    display: flex;
    margin: 0;
    align-items: center;
    gap: .5rem;
    color: var(--ink);
    font-size: 1rem;
}

.presentation-studio-heading p:last-child {
    max-width: 620px;
    margin: .25rem 0 0;
    font-size: .68rem;
}

.presentation-studio-layout {
    display: grid;
    grid-template-columns: 230px minmax(400px, 1fr) 220px;
    min-width: 0;
    min-height: 680px;
}

.presentation-studio-controls,
.presentation-studio-inspector {
    min-width: 0;
    max-height: 760px;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
}

.presentation-studio-controls { border-right: 1px solid var(--line); }
.presentation-studio-inspector { border-left: 1px solid var(--line); }

.presentation-panel-title {
    display: grid;
    gap: .25rem;
    margin: -1rem -1rem 1rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.presentation-panel-title span {
    color: var(--text-soft);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.presentation-panel-title small {
    color: var(--muted);
    font-size: .56rem;
    line-height: 1.45;
}

.presentation-choice-group {
    min-width: 0;
    margin: 0;
    padding: 0 0 1rem;
    border: 0;
}

.presentation-choice-group + .presentation-choice-group {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.presentation-choice-group legend {
    margin-bottom: .65rem;
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 800;
}

.presentation-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.presentation-theme-option,
.presentation-template-option {
    position: relative;
    display: grid;
    min-width: 0;
    gap: .4rem;
    padding: .45rem;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.presentation-theme-option:hover,
.presentation-theme-option.is-selected,
.presentation-template-option:hover,
.presentation-template-option.is-selected {
    color: var(--ink);
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface-2));
}

.presentation-theme-option.is-selected::after,
.presentation-template-option.is-selected::after {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 5px;
    height: 5px;
    content: "";
    background: var(--brand-hi);
    box-shadow: 0 0 10px var(--brand);
}

.presentation-theme-option input,
.presentation-template-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.presentation-theme-option > span:last-child,
.presentation-template-option > span:last-child {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.presentation-theme-option strong,
.presentation-template-option strong {
    overflow: hidden;
    color: currentColor;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.presentation-theme-option small,
.presentation-template-option small {
    color: var(--muted);
    font-size: .48rem;
    line-height: 1.35;
}

.presentation-theme-swatch {
    position: relative;
    display: block;
    height: 38px;
    overflow: hidden;
    background: var(--preset-primary);
}

.presentation-theme-swatch i,
.presentation-theme-swatch b,
.presentation-theme-swatch em,
.presentation-template-icon > * {
    position: absolute;
    display: block;
}

.presentation-theme-swatch i {
    inset: 7px 7px 7px auto;
    width: 34%;
    background: var(--preset-surface);
}

.presentation-theme-swatch b {
    bottom: 8px;
    left: 6px;
    width: 38%;
    height: 3px;
    background: var(--preset-paper);
}

.presentation-theme-swatch em {
    top: 8px;
    left: 6px;
    width: 16%;
    height: 5px;
    background: var(--preset-accent);
}

.presentation-template-grid { display: grid; gap: .5rem; }

.presentation-template-option {
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
}

.presentation-template-icon {
    position: relative;
    display: block;
    height: 48px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg) 72%, var(--surface));
}

.presentation-template-icon i {
    top: 9px;
    left: 7px;
    width: 36%;
    height: 2px;
    background: var(--brand-hi);
}

.presentation-template-icon b {
    bottom: 9px;
    left: 7px;
    width: 52%;
    height: 18px;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}

.presentation-template-icon em {
    right: 6px;
    bottom: 6px;
    width: 28%;
    height: 30px;
    background: var(--brand);
    transform: rotate(6deg);
}

.presentation-template-gallery { background: linear-gradient(135deg, var(--surface-3), var(--bg)); }
.presentation-template-gallery b { width: 72%; }
.presentation-template-gallery em { width: 42%; opacity: .72; }
.presentation-template-evidence em {
    height: 20px;
    background: repeating-linear-gradient(90deg, var(--brand) 0 3px, transparent 3px 6px);
    transform: none;
}

.presentation-brand-controls {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.presentation-cover-fields {
    display: grid;
    gap: .65rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.presentation-cover-fields label {
    display: grid;
    gap: .3rem;
    color: var(--muted);
    font-size: .52rem;
}

.presentation-cover-fields input,
.presentation-cover-fields textarea {
    width: 100%;
    padding: .55rem .6rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface-2);
    font-size: .62rem;
    resize: vertical;
}

.presentation-brand-controls > strong {
    color: var(--text-soft);
    font-size: .65rem;
}

.presentation-colour-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    margin-top: .7rem;
}

.presentation-colour-grid label {
    display: grid;
    gap: .32rem;
    color: var(--muted);
    font-size: .5rem;
}

.presentation-colour-grid input {
    width: 100%;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

.presentation-switches { display: grid; padding-top: .7rem; }

.presentation-switches > label {
    display: flex;
    min-height: 58px;
    padding: .7rem 0;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    border-bottom: 1px solid var(--line);
}

.presentation-switches > label > span { display: grid; gap: .15rem; }
.presentation-switches strong { color: var(--text-soft); font-size: .64rem; }
.presentation-switches small { color: var(--muted); font-size: .52rem; line-height: 1.4; }
.presentation-switches input { accent-color: var(--brand); }

.presentation-snapshot-note {
    display: flex;
    margin-top: 1rem;
    padding: .75rem;
    align-items: flex-start;
    gap: .6rem;
    color: var(--brand-hi);
    border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
    background: var(--brand-soft);
}

.presentation-snapshot-note span { display: grid; gap: .15rem; }
.presentation-snapshot-note strong { color: var(--ink); font-size: .6rem; }
.presentation-snapshot-note small { color: var(--muted); font-size: .5rem; line-height: 1.4; }

.presentation-preview-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    background: color-mix(in srgb, var(--bg) 84%, #000);
}

.presentation-preview-toolbar {
    display: flex;
    min-height: 46px;
    padding: 0 .8rem;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.presentation-preview-toolbar > span { display: flex; align-items: center; gap: .5rem; }
.presentation-preview-toolbar > span i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-hi);
    box-shadow: 0 0 10px var(--brand);
}

.presentation-preview-toolbar > div { display: flex; }
.presentation-preview-toolbar button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--muted);
    border: 0;
    background: transparent;
    cursor: pointer;
}
.presentation-preview-toolbar button.is-active { color: var(--ink); background: var(--surface-2); }

.presentation-preview-stage {
    display: grid;
    min-width: 0;
    min-height: 630px;
    padding: clamp(1rem, 2.5vw, 2.25rem);
    place-items: center;
    overflow: auto;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 28px 28px;
}

.presentation-live-preview {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-width: 900px;
    min-width: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    color: var(--public-paper);
    background: radial-gradient(circle at 76% 22%, color-mix(in srgb, var(--public-primary) 72%, white), var(--public-primary) 46%);
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
    transition: width .2s ease, max-width .2s ease, aspect-ratio .2s ease;
}

.presentation-live-preview > header,
.presentation-live-preview > footer {
    display: flex;
    padding: .8rem 1.1rem;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    color: color-mix(in srgb, var(--public-paper) 62%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--public-paper) 14%, transparent);
    font-size: .48rem;
}

.presentation-live-preview > footer {
    border-top: 1px solid color-mix(in srgb, var(--public-paper) 14%, transparent);
    border-bottom: 0;
}

.presentation-live-preview > header strong {
    margin-right: auto;
    color: var(--public-paper);
    font-size: .56rem;
}

.presentation-preview-mark {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--public-primary);
    background: var(--public-accent);
    font-size: .52rem;
    font-weight: 800;
}

.presentation-preview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(150px, .72fr);
    min-height: 0;
    padding: clamp(1.5rem, 4vw, 3.4rem);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.presentation-preview-copy { position: relative; z-index: 2; min-width: 0; }
.presentation-preview-copy > span {
    color: color-mix(in srgb, var(--public-paper) 54%, transparent);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.presentation-preview-copy h4 {
    margin: .7rem 0;
    color: var(--public-paper);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4.5vw, 4.6rem);
    font-weight: 400;
    letter-spacing: -.07em;
    line-height: .92;
}

.presentation-preview-copy p {
    margin: 0;
    color: color-mix(in srgb, var(--public-paper) 58%, transparent);
    font-size: .58rem;
}

.presentation-preview-copy button {
    margin-top: 1.15rem;
    padding: .6rem .75rem;
    color: var(--public-primary);
    border: 0;
    background: var(--public-accent);
    font-size: .5rem;
    font-weight: 800;
}

.presentation-preview-object { position: relative; min-height: 240px; perspective: 700px; }
.presentation-preview-object > * {
    position: absolute;
    inset: 12%;
    display: grid;
    padding: .8rem;
    place-items: end start;
    overflow: hidden;
    color: var(--public-primary);
    border: 1px solid color-mix(in srgb, var(--public-paper) 30%, transparent);
    background: var(--public-accent);
    box-shadow: -8px 12px 28px rgba(0,0,0,.2);
    font-size: clamp(.7rem, 1.7vw, 1.2rem);
    transform: rotate(6deg);
}

.presentation-preview-object i:first-child {
    background: color-mix(in srgb, var(--public-accent) 45%, #a94a35);
    transform: rotate(-8deg) translate(-18px,4px);
}
.presentation-preview-object i:nth-child(2) {
    background: var(--public-paper);
    transform: rotate(-2deg) translate(-8px);
}

.presentation-live-preview[data-template="gallery"] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--public-primary) 82%, transparent), var(--public-primary));
}
.presentation-live-preview[data-template="gallery"] .presentation-preview-object > i:first-child { inset: 2%; opacity: .7; }
.presentation-live-preview[data-template="evidence"] .presentation-preview-copy h4 { font-family: Inter, sans-serif; font-weight: 600; }
.presentation-live-preview[data-template="evidence"] .presentation-preview-object > b {
    background-image: repeating-linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--public-primary) 18%, transparent) 12% 13%);
}

.presentation-live-preview.is-mobile {
    width: min(100%, 320px);
    max-width: 320px;
    aspect-ratio: 9 / 16;
}

.presentation-live-preview.is-mobile .presentation-preview-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 1.25rem;
    align-items: start;
    gap: .8rem;
}

.presentation-live-preview.is-mobile .presentation-preview-copy h4 { max-width: 100%; font-size: 2rem; }
.presentation-live-preview.is-mobile .presentation-preview-object { min-height: 0; height: 100%; }
.presentation-live-preview.is-mobile .presentation-preview-object > * { inset: 10% 16%; }
.presentation-live-preview.is-mobile > header,
.presentation-live-preview.is-mobile > footer { padding: .65rem .75rem; }

@media (max-width: 1100px) {
    .presentation-studio-layout { grid-template-columns: 260px minmax(380px, 1fr); }
    .presentation-studio-inspector {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(240px, .6fr) minmax(420px, 1fr) minmax(220px, .55fr);
        gap: 1rem;
        max-height: none;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .presentation-studio-inspector .presentation-panel-title { margin: 0; }
    .presentation-studio-inspector .presentation-switches {
        grid-template-columns: repeat(3, 1fr);
        gap: .8rem;
        padding: 0;
    }
    .presentation-studio-inspector .presentation-switches > label { border: 1px solid var(--line); padding: .7rem; }
    .presentation-snapshot-note { margin: 0; }
}

@media (max-width: 980px) {
    .creator-modebar { align-items: flex-start; flex-direction: column; }
    .creator-mode-tabs { width: 100%; }
    .creator-mode-tabs button { flex: 1; justify-content: center; }
    .presentation-studio-layout { grid-template-columns: 1fr; }
    .presentation-studio-controls,
    .presentation-studio-inspector { max-height: none; border: 0; border-bottom: 1px solid var(--line); }
    .presentation-studio-inspector {
        display: block;
        grid-column: auto;
    }
    .presentation-studio-inspector .presentation-panel-title { margin: -1rem -1rem 1rem; }
    .presentation-studio-inspector .presentation-switches { display: grid; grid-template-columns: 1fr; }
    .presentation-studio-inspector .presentation-switches > label { padding: .7rem 0; border: 0; border-bottom: 1px solid var(--line); }
    .presentation-preview-stage { min-height: 560px; }
}

@media (max-width: 720px) {
    .creator-editor-panel { padding: .6rem; }
    .creator-document-label { align-items: flex-start; flex-direction: column; }
    .presentation-studio-heading { align-items: flex-start; flex-direction: column; }
    .presentation-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .presentation-preview-stage { min-height: 530px; padding: .8rem; }
    .presentation-live-preview:not(.is-mobile) { width: 100%; aspect-ratio: 4 / 3; }
    .presentation-preview-hero { padding: 1rem; }
    .presentation-preview-copy h4 { font-size: clamp(1.5rem, 8vw, 2.5rem); }
}

/* Keep v3 studio layout authoritative over the retired generic preview rules above. */
@media (min-width: 1221px) {
    .experience-studio .experience-studio-layout { grid-template-columns: 220px minmax(0, 1fr) 240px; }
}

@media (min-width: 981px) and (max-width: 1220px) {
    .experience-studio .experience-studio-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .experience-studio .experience-studio-inspector {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1.2fr .9fr .9fr;
        gap: 1rem;
        max-height: none;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 980px) {
    .experience-studio .experience-studio-layout { display: block; }
    .experience-studio .experience-studio-inspector { display: block; max-height: none; }
    .experience-studio .experience-preview-stage { min-height: 560px; }
}

@media (max-width: 620px) {
    .experience-studio .experience-preview-stage { min-height: 520px; padding: .6rem; place-items: start center; }
}

/* Live Page Studio v4 — single-canvas public content editor. */
.public-page-studio-page > .page-header { display: none; }
body:has(.public-page-studio-page) .site-footer { display: none; }
body:has(.public-page-studio-page) .app-main {
    height: calc(100vh - 56px);
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.public-page-studio-page {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;
    padding: 8px !important;
    overflow: hidden;
}
.public-page-studio-page > .import-alert {
    position: fixed;
    z-index: 100;
    top: 66px;
    right: 1rem;
    width: min(420px, calc(100vw - 2rem));
    box-shadow: 0 20px 60px rgba(0,0,0,.24);
}
.public-page-studio-page > section:has(> form > .creator-studio-shell),
.public-page-studio-page > .market-update-editor-shell { margin: 0; }
.public-page-studio-page > .appraisal-editor-panel > .more-tile-heading { display: none; }
.public-page-studio-page > .appraisal-editor-panel { gap: 0; }
.public-page-studio-page > section:has(> form > .creator-studio-shell),
.public-page-studio-page > section:has(> form > .creator-studio-shell) > form,
.public-page-studio-page > form:has(> .creator-studio-shell),
.public-page-studio-page > .market-update-editor-shell,
.public-page-studio-page > .market-update-editor-shell > form,
.public-page-studio-page .creator-studio-shell,
.public-page-studio-page .creator-editor-panel {
    height: 100%;
    min-height: 0;
}
.public-page-studio-page .creator-studio-shell { border: 0; background: transparent; }
.public-page-studio-page .creator-modebar { display: none; }
.public-page-studio-page .creator-editor-panel { padding: 0; }
.public-page-studio-page [data-presentation-editor-panel="content"] { display: none !important; }
.public-page-studio-page [data-presentation-editor-panel="design"] { display: block !important; }

.live-page-studio {
    display: grid;
    grid-template-rows: 68px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--bg);
}
.live-page-studio-header {
    display: flex;
    padding: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
}
.live-page-studio-header > div:first-child { display: grid; gap: .08rem; }
.live-page-studio-header .eyebrow { margin: 0; }
.live-page-studio-header h3 { margin: 0; color: var(--ink); font-size: .92rem; }
.live-page-studio-header p:last-child { margin: 0; color: var(--muted); font-size: .72rem; }
.live-page-studio-header > div:last-child { display: flex; align-items: center; gap: .45rem; }
.live-page-studio .experience-save-state { font-size: .7rem; }

.live-page-studio-workspace {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 250px;
    min-width: 0;
    min-height: 0;
}
.live-page-theme-rail,
.live-page-settings-rail {
    min-width: 0;
    min-height: 0;
    padding: .8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-elev);
    scrollbar-width: thin;
}
.live-page-theme-rail { border-right: 1px solid var(--line); }
.live-page-settings-rail { border-left: 1px solid var(--line); }
.live-page-settings-rail { overflow-x: hidden; }
.live-page-rail-heading {
    display: grid;
    gap: .14rem;
    margin: -.8rem -.8rem .8rem;
    padding: .72rem .8rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.live-page-rail-heading span { color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-page-rail-heading small { color: var(--muted); font-size: .65rem; }
.live-page-theme-rail fieldset { margin: 0; padding: 0 0 .9rem; border: 0; }
.live-page-theme-rail fieldset + fieldset { padding-top: .9rem; border-top: 1px solid var(--line); }
.live-page-theme-rail legend { margin-bottom: .55rem; color: var(--text-soft); font-size: .7rem; font-weight: 800; }

.live-page-theme-list { display: grid; grid-template-columns: 1fr 1fr; gap: .42rem; }
.live-page-theme-list label,
.live-page-composition-list label {
    position: relative;
    display: grid;
    gap: .3rem;
    padding: .35rem;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--surface-2);
    cursor: pointer;
}
.live-page-theme-list label:hover,
.live-page-theme-list label.is-selected,
.live-page-composition-list label:hover,
.live-page-composition-list label.is-selected { color: var(--ink); border-color: var(--brand); }
.live-page-theme-list input,
.live-page-composition-list input { position: absolute; opacity: 0; pointer-events: none; }
.live-page-theme-list label > span { position: relative; display: block; height: 30px; overflow: hidden; background: var(--theme-ink); }
.live-page-theme-list label > span i { position: absolute; top: 6px; right: 6px; width: 34%; height: 18px; background: var(--theme-paper); }
.live-page-theme-list label > span b { position: absolute; bottom: 6px; left: 6px; width: 28%; height: 3px; background: var(--theme-accent); }
.live-page-theme-list label > span em { position: absolute; top: 6px; left: 6px; width: 14%; height: 4px; background: var(--theme-paper); }
.live-page-theme-list strong,
.live-page-composition-list strong { overflow: hidden; color: currentColor; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.live-page-composition-list { display: grid; gap: .38rem; }
.live-page-composition-list label { grid-template-columns: 44px 1fr; align-items: center; }
.live-page-composition-list label > span { position: relative; height: 30px; background: var(--bg); }
.live-page-composition-list span i { position: absolute; top: 7px; left: 6px; width: 45%; height: 3px; background: var(--brand); }
.live-page-composition-list span b { position: absolute; right: 5px; bottom: 5px; width: 28%; height: 18px; border: 2px solid var(--line-strong); }

.live-page-canvas-panel { display: grid; grid-template-rows: 52px minmax(0, 1fr); min-width: 0; min-height: 0; background: color-mix(in srgb, var(--bg) 92%, #000); }
.live-page-canvas-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 52px;
    padding: 0 .7rem;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.live-page-canvas-toolbar > span { display: flex; align-items: center; gap: .4rem; }
.live-page-canvas-toolbar > span i { width: 5px; height: 5px; border-radius: 50%; background: #50aa72; }
.live-page-canvas-toolbar > div { display: inline-flex; }
.live-page-canvas-toolbar button { display: grid; width: 30px; height: 30px; place-items: center; color: var(--muted); border: 1px solid transparent; background: transparent; cursor: pointer; }
.live-page-canvas-toolbar button.is-active { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.live-page-canvas-scroll { min-height: 0; padding: 1rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.live-page-preview-viewport {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: #101714;
    box-shadow: 0 28px 80px rgba(0,0,0,.3);
    transition: width .25s ease;
}
.live-page-preview-viewport.is-mobile { width: min(360px, 100%); }
.live-page-preview {
    width: 100%;
    min-height: 100%;
    color: #fff;
    background: var(--public-paper);
    font-family: "DM Sans", Inter, sans-serif;
}
.live-page-preview.no-motion * { animation: none !important; transition: none !important; }
.live-page-studio textarea:not([hidden]) {
    min-height: 34px;
    overflow: hidden;
    resize: none;
}
.live-page-public-header {
    display: flex;
    min-height: 50px;
    padding: 0 4%;
    align-items: center;
    justify-content: space-between;
    color: #17201c;
    background: var(--public-paper);
}
.live-page-public-header > span { display: flex; align-items: center; gap: .45rem; }
.live-page-public-header > span b { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--public-primary); font-size: .7rem; }
.live-page-public-header strong { font-size: .72rem; }
.live-page-public-header > small { display: flex; align-items: center; gap: .3rem; color: #747c76; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.live-page-public-header > small i { width: 4px; height: 4px; border-radius: 50%; background: var(--public-accent); }

.live-page-cover {
    position: relative;
    min-height: clamp(390px, 52vw, 580px);
    padding: 8% 6%;
    overflow: hidden;
    color: white;
    background: radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--public-primary) 55%, #73877c), var(--public-primary) 43%);
}
.live-page-cover-copy { position: relative; z-index: 3; width: 58%; }
.live-page-cover input,
.live-page-cover textarea,
.live-editable-section input,
.live-editable-section textarea,
.live-editable-section select,
.live-page-setting-field input,
.live-page-setting-field select {
    color: inherit;
    border: 1px solid transparent;
    border-radius: 0;
    outline: 0;
    background: transparent;
    font: inherit;
}
.live-page-cover input:hover,
.live-page-cover input:focus,
.live-page-cover textarea:hover,
.live-page-cover textarea:focus,
.live-editable-section input:hover,
.live-editable-section input:focus,
.live-editable-section textarea:hover,
.live-editable-section textarea:focus { border-color: color-mix(in srgb, var(--public-accent) 60%, transparent); background: rgba(255,255,255,.045); }
.live-inline-eyebrow { width: 100%; padding: .35rem; font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .14em; text-transform: uppercase; }
.live-page-cover h1 { display: grid; margin: 1.6rem 0 0; color: white; }
.live-inline-title {
    width: 100%;
    padding: .3rem;
    resize: none;
    color: white !important;
    font-family: Manrope, sans-serif !important;
    font-size: clamp(2.1rem, 5.4vw, 5.4rem) !important;
    font-weight: 500 !important;
    letter-spacing: -.08em;
    line-height: .92;
}
.live-inline-accent { width: 100%; padding: .3rem; color: var(--public-accent) !important; font-family: Manrope, sans-serif !important; font-size: clamp(2rem, 5vw, 5rem) !important; letter-spacing: -.08em; line-height: .92; }
.live-page-cover-copy > p { margin: 1.3rem .35rem; color: rgba(255,255,255,.68); font-size: .78rem; }
.live-inline-summary { width: 100%; max-width: 560px; padding: .4rem; resize: none; color: rgba(255,255,255,.65) !important; font-size: .95rem !important; line-height: 1.6; }
.live-inline-validity { position: absolute; z-index: 4; right: 5%; bottom: 3%; width: 30%; padding: .35rem; color: rgba(255,255,255,.55) !important; font-size: .65rem !important; text-align: right; text-transform: uppercase; }

.live-page-card-stack { position: absolute; z-index: 2; top: 12%; right: 5%; width: 37%; height: 70%; perspective: 900px; }
.live-page-card-stack > * { position: absolute; inset: 5%; display: flex; flex-direction: column; padding: 8%; border: 1px solid rgba(255,255,255,.2); }
.live-page-card-stack > i:first-child { background: #b44b35; transform: rotate(-8deg) translate(-12%,4%); }
.live-page-card-stack > i:nth-child(2) { background: var(--public-paper); transform: rotate(-2deg) translate(-5%); }
.live-page-card-stack > b { color: #101714; background: var(--public-accent); transform: rotate(5deg); }
.live-page-card-stack small { font-size: .65rem; }
.live-page-card-stack textarea { width: 100%; margin-top: auto; resize: none; color: #101714; font-size: clamp(1.1rem, 2.7vw, 2.8rem); font-weight: 500; letter-spacing: -.07em; line-height: .92; }

.live-page-cma-cover.has-image { background: linear-gradient(90deg,rgba(8,12,10,.88),rgba(8,12,10,.25)),var(--cma-preview-image) center/cover; }
.live-page-cover-upload { position: absolute; z-index: 5; top: .75rem; right: .75rem; display: inline-flex; padding: .55rem .7rem; align-items: center; gap: .35rem; color: white; border: 1px solid rgba(255,255,255,.2); background: rgba(10,15,12,.68); cursor: pointer; font-size: .68rem; }
.live-page-cover-upload input { position: absolute; opacity: 0; pointer-events: none; }
.live-page-cma-cover h1 > span { font-family: Manrope,sans-serif; font-size: clamp(2.1rem,5.3vw,5.2rem); font-weight: 500; letter-spacing: -.08em; line-height: .92; }
.live-page-range-card { position: absolute; z-index: 4; right: 4%; bottom: 7%; display: grid; width: 37%; padding: 2.5%; color: #101714; background: var(--public-paper); box-shadow: 0 25px 70px rgba(0,0,0,.32); }
.live-page-range-card > span { font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.live-page-range-card label input { width: 100%; padding: .2rem; color: #101714; font-size: clamp(1.1rem,2.7vw,2.7rem); letter-spacing: -.06em; }
.live-page-range-card > textarea { width: 100%; margin-top: .45rem; padding-top: .45rem; resize: none; overflow: hidden; color: #64706a; border-top-color: rgba(16,23,20,.14); font-size: .65rem; text-align: right; }
.live-page-market-cover { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; }
.live-page-market-orbit { position: relative; z-index: 2; width: 72%; aspect-ratio: 1; justify-self: end; transform: rotateX(58deg) rotateZ(-16deg); }
.live-page-market-orbit i { position: absolute; inset: 8%; border: 1px solid color-mix(in srgb,var(--public-accent) 55%,transparent); border-radius: 50%; }
.live-page-market-orbit i:nth-child(2) { inset: 26%; border-style: dashed; }
.live-page-market-orbit b { position: absolute; inset: 36%; display: grid; place-items: center; color: #101714; background: var(--public-accent); border-radius: 50%; font-size: .7rem; }

.live-page-section-builder { color: #17201c; background: var(--public-paper); }
.live-page-sections { display: grid; }
.live-editable-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px,.55fr) minmax(0,1.45fr);
    gap: clamp(1.4rem,5vw,5rem);
    padding: clamp(2rem,6vw,6rem) 6%;
    color: #17201c;
    border-bottom: 1px solid rgba(23,32,28,.15);
    background: var(--public-paper);
}
.live-editable-section:nth-child(even) { background: color-mix(in srgb,var(--public-paper) 94%,var(--public-primary)); }
.live-section-actions { position: absolute; z-index: 3; top: .7rem; right: .7rem; display: flex; opacity: .25; transition: opacity .15s; }
.live-editable-section:hover .live-section-actions { opacity: 1; }
.live-section-actions button,
.live-market-section-controls button { display: grid; width: 28px; height: 28px; place-items: center; color: #17201c; border: 1px solid rgba(23,32,28,.15); background: var(--public-paper); cursor: pointer; }
.live-section-meta { display: grid; align-content: start; gap: 1rem; }
.live-section-meta > span { color: color-mix(in srgb,var(--public-primary) 55%,transparent); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.live-section-meta select { width: min(170px,100%); padding: .5rem; color: #53605a; border-color: rgba(23,32,28,.18); font-size: .7rem; }
.live-section-title { grid-column: 2; width: 100%; padding: .3rem; color: #17201c !important; font-family: Manrope,sans-serif !important; font-size: clamp(1.8rem,4vw,4rem) !important; font-weight: 500 !important; letter-spacing: -.07em; }
.live-section-image { grid-column: 2; position: relative; display: grid; min-height: 110px; place-items: center; overflow: hidden; color: #66716b; border: 1px dashed rgba(23,32,28,.24); cursor: pointer; font-size: .72rem; }
.live-section-image img { width: 100%; max-height: 420px; object-fit: cover; }
.live-section-image input[type=file],
.live-section-columns input[type=file] { position: absolute; opacity: 0; pointer-events: none; }
.live-section-body { grid-column: 2; width: 100%; min-height: 130px; padding: .45rem; resize: vertical; color: #59625d !important; font-size: 1rem !important; line-height: 1.7; }
.live-section-columns { grid-column: 1 / -1; display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid rgba(23,32,28,.14); background: rgba(23,32,28,.14); }
.live-editable-section[data-layout="two"] .live-section-columns,
.live-editable-section[data-layout="three"] .live-section-columns { display: grid; }
.live-editable-section[data-layout="three"] .live-section-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
.live-editable-section[data-layout="two"] .live-section-columns article:nth-child(3) { display: none; }
.live-section-columns article { position: relative; display: grid; gap: .55rem; padding: 1rem; background: var(--public-paper); }
.live-section-columns article > input:not([type=hidden]) { width: 100%; padding: .35rem; color: #17201c; font-weight: 700; }
.live-section-columns article textarea { width: 100%; padding: .35rem; resize: vertical; color: #59625d; line-height: 1.6; }
.live-section-columns article label { position: relative; padding: .5rem; color: #66716b; border: 1px dashed rgba(23,32,28,.2); cursor: pointer; font-size: .7rem; }
.live-section-columns article img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.live-page-add-section { display: flex; width: calc(100% - 12%); min-height: 48px; margin: 1.2rem 6% 2rem; align-items: center; justify-content: center; gap: .45rem; color: #17201c; border: 1px dashed rgba(23,32,28,.3); background: transparent; cursor: pointer; font-weight: 800; }

.live-market-content { display: grid; gap: 0; outline: 0; }
.live-market-section { position: relative; min-height: 260px; padding: clamp(2rem,6vw,6rem) 8%; color: #17201c; border-bottom: 1px solid rgba(23,32,28,.15); }
.live-market-section:nth-child(even) { background: color-mix(in srgb,var(--public-paper) 94%,var(--public-primary)); }
.live-market-section h2 { max-width: 760px; color: #17201c; font-family: Manrope,sans-serif; font-size: clamp(2rem,4.5vw,4.8rem); letter-spacing: -.07em; }
.live-market-section p { max-width: 760px; color: #59625d; line-height: 1.75; }
.live-market-section img { width: 100%; max-height: 460px; margin: 1rem 0; object-fit: cover; }
.live-market-section-controls { position: absolute; top: .7rem; right: .7rem; display: flex; gap: 2px; opacity: .25; }
.live-market-section:hover .live-market-section-controls { opacity: 1; }
.live-market-section-controls label { position: relative; display: flex; padding: .45rem .6rem; align-items: center; gap: .3rem; color: #17201c; border: 1px solid rgba(23,32,28,.15); background: var(--public-paper); cursor: pointer; font-size: .68rem; }
.live-market-section-controls input[type=file] { position: absolute; opacity: 0; pointer-events: none; }

.live-page-palette { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.live-page-palette label { display: grid; gap: .25rem; color: var(--muted); font-size: .68rem; }
.live-page-palette input { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--line); background: var(--surface-2); }
.live-page-setting-field { display: grid; gap: .35rem; padding: .8rem 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .7rem; }
.live-page-setting-field input,
.live-page-setting-field select { width: 100%; padding: .6rem; color: var(--ink); border-color: var(--line); background: var(--surface-2); font-size: .78rem; }
.live-page-evidence-summary { display: grid; gap: .2rem; margin-top: .8rem; padding: .7rem; border: 1px solid var(--line); background: var(--surface-2); }
.live-page-evidence-summary strong { color: var(--brand-hi); font-size: 1.5rem; }
.live-page-evidence-summary span { color: var(--ink); font-size: .72rem; }
.live-page-evidence-summary small { color: var(--muted); font-size: .66rem; line-height: 1.4; }
.live-page-content-templates {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: .55rem;
    margin-bottom: .8rem;
    padding: .75rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    overflow: hidden;
}
.live-page-content-templates > * { min-width: 0; max-width: 100%; }
.live-page-content-templates > strong { color: var(--ink); font-size: .78rem; overflow-wrap: anywhere; }
.live-page-content-templates > small { color: var(--muted); font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.live-page-content-templates select,
.live-page-template-save input {
    width: 100%;
    min-width: 0;
    padding: .58rem;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--bg-elev);
    font-size: .74rem;
    text-overflow: ellipsis;
}
.live-page-content-templates > .btn,
.live-page-template-save .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: .5rem;
    justify-content: center;
    white-space: normal;
    overflow-wrap: anywhere;
}
.live-page-template-save { display: grid; width: 100%; min-width: 0; gap: .45rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.live-page-studio .presentation-switches strong { font-size: .76rem; }
.live-page-studio .presentation-switches small { font-size: .68rem; line-height: 1.45; }

.live-page-preview-viewport.is-mobile .live-page-public-header strong { display: none; }
.live-page-preview-viewport.is-mobile .live-page-cover { min-height: 580px; padding: 12% 7%; }
.live-page-preview-viewport.is-mobile .live-page-cover-copy { width: 100%; }
.live-page-preview-viewport.is-mobile .live-inline-title,
.live-page-preview-viewport.is-mobile .live-inline-accent { font-size: clamp(2rem,11vw,3rem) !important; }
.live-page-preview-viewport.is-mobile .live-page-card-stack { top: auto; right: 7%; bottom: 8%; width: 70%; height: 38%; opacity: .78; }
.live-page-preview-viewport.is-mobile .live-page-range-card { right: 7%; bottom: 7%; width: 86%; }
.live-page-preview-viewport.is-mobile .live-page-market-cover { display: block; }
.live-page-preview-viewport.is-mobile .live-page-market-orbit { position: absolute; right: -10%; bottom: 1%; width: 80%; opacity: .7; }
.live-page-preview-viewport.is-mobile .live-editable-section { grid-template-columns: 1fr; gap: 1rem; padding: 3rem 7%; }
.live-page-preview-viewport.is-mobile .live-section-title,
.live-page-preview-viewport.is-mobile .live-section-image,
.live-page-preview-viewport.is-mobile .live-section-body { grid-column: 1; }
.live-page-preview-viewport.is-mobile .live-section-columns,
.live-page-preview-viewport.is-mobile .live-editable-section[data-layout="three"] .live-section-columns { grid-template-columns: 1fr; }

@media (max-width: 1180px) {
    .live-page-studio-workspace { grid-template-columns: 170px minmax(0,1fr); }
    .live-page-settings-rail { display: none; }
}
@media (max-width: 860px) {
    body:has(.public-page-studio-page) .app-main { height: auto; min-height: calc(100vh - 56px); overflow: visible; }
    .public-page-studio-page { height: auto; overflow: visible; }
    .public-page-studio-page > section:has(> form > .creator-studio-shell),
    .public-page-studio-page > section:has(> form > .creator-studio-shell) > form,
    .public-page-studio-page > form:has(> .creator-studio-shell),
    .public-page-studio-page > .market-update-editor-shell,
    .public-page-studio-page > .market-update-editor-shell > form,
    .public-page-studio-page .creator-studio-shell,
    .public-page-studio-page .creator-editor-panel { height: auto; }
    .live-page-studio { height: auto; min-height: 0; overflow: visible; }
    .live-page-studio-workspace { display: block; }
    .live-page-theme-rail { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
    .live-page-theme-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .live-page-composition-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .live-page-settings-rail { display: block; max-height: none; border: 0; border-top: 1px solid var(--line); }
    .live-page-canvas-panel { min-height: 720px; }
}
@media (max-width: 620px) {
    .live-page-studio-header { align-items: flex-start; }
    .live-page-studio-header > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
    .live-page-studio-header .experience-save-state { display: none; }
    .live-page-theme-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .live-page-composition-list { grid-template-columns: 1fr; }
    .live-page-canvas-scroll { padding: .5rem; }
}

/* Inline comparable evidence — part of the CMA live page, not a separate form. */
.live-comparable-builder { padding: clamp(28px,5vw,64px); background: color-mix(in srgb,var(--public-paper) 92%,var(--public-primary)); border-top: 1px solid color-mix(in srgb,var(--public-primary) 18%,transparent); }
.live-comparable-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.live-comparable-heading span { color: var(--public-primary); font-size: clamp(24px,4vw,46px); letter-spacing: -.045em; }
.live-comparable-heading small { max-width: 260px; color: color-mix(in srgb,var(--public-primary) 60%,transparent); line-height: 1.45; }
.live-comparable-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.live-comparable-card { position: relative; display: grid; gap: 12px; padding: 12px; color: var(--public-primary); background: color-mix(in srgb,var(--public-paper) 97%,white); border: 1px solid color-mix(in srgb,var(--public-primary) 18%,transparent); }
.live-comparable-actions { display: flex; align-items: center; justify-content: space-between; }
.live-comparable-actions span { font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.live-comparable-actions button { width: 30px; height: 30px; color: inherit; background: transparent; border: 1px solid color-mix(in srgb,var(--public-primary) 20%,transparent); }
.live-comparable-image { position: relative; display: grid; min-height: 120px; place-items: center; overflow: hidden; color: color-mix(in srgb,var(--public-primary) 65%,transparent); background: color-mix(in srgb,var(--public-primary) 7%,var(--public-paper)); cursor: pointer; }
.live-comparable-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live-comparable-image input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.live-comparable-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.live-comparable-fields input,
.live-comparable-card textarea { width: 100%; min-width: 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--public-primary) 24%,transparent); border-radius: 0; }
.live-comparable-fields input:first-child { grid-column: span 2; }
.live-comparable-card textarea { resize: vertical; }
.live-page-preview-viewport.is-mobile .live-comparable-list,
.live-page-preview-viewport.is-mobile .live-comparable-fields { grid-template-columns: 1fr; }
.live-page-preview-viewport.is-mobile .live-comparable-fields input:first-child { grid-column: auto; }

/* Studio structure controls live in the rail, leaving the preview content-only. */
.live-page-section-manager { display: grid; gap: .65rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.live-page-section-manager-list { display: grid; gap: .45rem; }
.live-page-manager-row { display: grid; gap: .45rem; padding: .55rem; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.live-page-manager-row:hover,
.live-page-manager-row.is-selected { border-color: var(--brand); background: color-mix(in srgb,var(--brand) 8%,var(--surface-2)); }
.live-page-manager-row-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .35rem; }
.live-page-manager-row-heading > span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.live-page-manager-row-heading > strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.live-page-manager-actions { display: flex; }
.live-page-manager-actions button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.live-page-manager-actions button:hover { color: var(--ink); background: var(--surface-3); }
.live-page-manager-row label { display: grid; grid-template-columns: 1fr; gap: .25rem; color: var(--muted); font-size: .68rem; }
.live-page-manager-row select { width: 100%; min-width: 0; padding: .48rem; color: var(--ink); border: 1px solid var(--line); background: var(--bg-elev); font-size: .72rem; }
.live-page-manager-image,
.live-page-manager-add { display: flex; min-height: 38px; padding: .45rem .55rem; align-items: center; justify-content: center; gap: .3rem; color: var(--ink); border: 1px dashed var(--line); background: transparent; cursor: pointer; font-size: .7rem; font-weight: 750; }
.live-page-manager-add { width: 100%; border-color: color-mix(in srgb,var(--brand) 55%,var(--line)); }
.live-editable-section.is-manager-selected { box-shadow: inset 3px 0 0 var(--public-accent); }

/* Text fields grow and wrap instead of clipping content in the scaled canvas. */
.live-page-preview textarea,
.live-page-preview input,
.live-page-preview h1,
.live-page-preview h2,
.live-page-preview h3,
.live-page-preview p,
.live-page-preview strong {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.live-page-preview { container-type: inline-size; }
.live-inline-title { font-size: clamp(1.8rem,7cqw,4rem) !important; }
.live-inline-accent { font-size: clamp(1.7rem,6.5cqw,3.8rem) !important; }
.live-page-cma-cover h1 > span { font-size: clamp(1.8rem,7cqw,4rem); }
.live-page-card-stack textarea { font-size: clamp(1rem,3.5cqw,2.2rem); }
.live-page-range-card label input { font-size: clamp(1rem,3.5cqw,2.2rem); }
.live-section-title { font-size: clamp(1.6rem,6cqw,3.6rem) !important; }
.live-market-section h2 { font-size: clamp(1.7rem,6.5cqw,4rem); }
.live-inline-title,
.live-inline-eyebrow,
.live-inline-accent,
.live-inline-summary,
.live-inline-validity,
.live-section-title,
.live-section-body {
    overflow: hidden;
    white-space: pre-wrap;
}
.live-inline-accent { resize: none; }
.live-editable-section { grid-template-columns: minmax(0,1fr); gap: clamp(1rem,3vw,2.4rem); }
.live-section-title,
.live-section-image,
.live-section-body { grid-column: 1; }

/* Agent-selected column proportions. */
.live-editable-section[data-column-widths="60-40"] .live-section-columns { grid-template-columns: minmax(0,3fr) minmax(0,2fr); }
.live-editable-section[data-column-widths="40-60"] .live-section-columns { grid-template-columns: minmax(0,2fr) minmax(0,3fr); }
.live-editable-section[data-column-widths="70-30"] .live-section-columns { grid-template-columns: minmax(0,7fr) minmax(0,3fr); }
.live-editable-section[data-column-widths="30-70"] .live-section-columns { grid-template-columns: minmax(0,3fr) minmax(0,7fr); }
.live-editable-section[data-column-widths="50-25-25"] .live-section-columns { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); }
.live-editable-section[data-column-widths="25-50-25"] .live-section-columns { grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); }
.live-editable-section[data-column-widths="25-25-50"] .live-section-columns { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); }

/* Composition presets deliberately change hierarchy, not just the selected button. */
.live-page-preview[data-template="gallery"] .live-page-cover-copy { width: 48%; }
.live-page-preview[data-template="gallery"] .live-page-card-stack { top: 8%; width: 44%; height: 78%; }
.live-page-preview[data-template="gallery"] .live-section-image { min-height: 190px; border-style: solid; }
.live-page-preview[data-template="gallery"] .live-editable-section { padding-right: 4%; padding-left: 4%; }
.live-page-preview[data-template="evidence"] .live-page-cover-copy { width: 68%; }
.live-page-preview[data-template="evidence"] .live-page-card-stack { top: 18%; width: 28%; height: 58%; }
.live-page-preview[data-template="evidence"] .live-inline-title,
.live-page-preview[data-template="evidence"] .live-inline-accent { font-weight: 650 !important; letter-spacing: -.055em; }
.live-page-preview[data-template="evidence"] .live-editable-section { padding-top: 3.2rem; padding-bottom: 3.2rem; }

/* Composition v2: three deliberately different page systems. */
.live-page-preview[data-template="editorial"] .live-editable-section {
    grid-template-columns: minmax(130px,.45fr) minmax(0,1fr);
}
.live-page-preview[data-template="editorial"] .live-section-title { grid-column: 1; align-self: start; }
.live-page-preview[data-template="editorial"] .live-section-image,
.live-page-preview[data-template="editorial"] .live-section-body { grid-column: 2; }
.live-page-preview[data-template="editorial"] .live-section-columns { grid-column: 1 / -1; }

.live-page-preview[data-template="gallery"] .live-page-cover {
    min-height: 640px;
    background: linear-gradient(145deg,var(--public-primary),color-mix(in srgb,var(--public-primary) 68%,var(--public-accent)));
}
.live-page-preview[data-template="gallery"] .live-page-cover-copy { position: absolute; bottom: 10%; left: 5%; width: 44%; }
.live-page-preview[data-template="gallery"] .live-page-card-stack { top: 5%; right: 2%; width: 50%; height: 86%; }
.live-page-preview[data-template="gallery"] .live-page-market-orbit { width: 96%; transform: rotateX(48deg) rotateZ(-8deg) scale(1.12); }
.live-page-preview[data-template="gallery"] .live-editable-section {
    grid-template-columns: minmax(0,1.18fr) minmax(170px,.82fr);
    min-height: 420px;
    gap: 3%;
    padding: 4%;
}
.live-page-preview[data-template="gallery"] .live-section-image { grid-column: 1; grid-row: 1 / span 2; min-height: 300px; }
.live-page-preview[data-template="gallery"] .live-section-title,
.live-page-preview[data-template="gallery"] .live-section-body { grid-column: 2; }
.live-page-preview[data-template="gallery"] .live-section-columns { grid-column: 1 / -1; }

.live-page-preview[data-template="evidence"] .live-page-cover {
    min-height: 500px;
    color: var(--public-primary);
    border-bottom: 8px solid var(--public-accent);
    background:
        linear-gradient(color-mix(in srgb,var(--public-primary) 9%,transparent) 1px,transparent 1px),
        linear-gradient(90deg,color-mix(in srgb,var(--public-primary) 9%,transparent) 1px,transparent 1px),
        var(--public-paper);
    background-size: 42px 42px;
}
.live-page-preview[data-template="evidence"] .live-page-cma-cover.has-image {
    background:
        linear-gradient(90deg,rgba(8,12,10,.94),rgba(8,12,10,.5)),
        var(--cma-preview-image) center/cover;
}
.live-page-preview[data-template="evidence"] .live-page-cma-cover.has-image h1,
.live-page-preview[data-template="evidence"] .live-page-cma-cover.has-image .live-inline-title { color: white !important; }
.live-page-preview[data-template="evidence"] .live-page-cover h1,
.live-page-preview[data-template="evidence"] .live-inline-title { color: var(--public-primary) !important; }
.live-page-preview[data-template="evidence"] .live-page-cover-copy > p,
.live-page-preview[data-template="evidence"] .live-inline-summary,
.live-page-preview[data-template="evidence"] .live-inline-validity { color: color-mix(in srgb,var(--public-primary) 62%,transparent) !important; }
.live-page-preview[data-template="evidence"] .live-page-card-stack { top: 16%; right: 5%; width: 25%; height: 52%; perspective: none; }
.live-page-preview[data-template="evidence"] .live-page-card-stack > i { display: none; }
.live-page-preview[data-template="evidence"] .live-page-card-stack > b { inset: 0; color: var(--public-paper); border: 0; background: var(--public-primary); transform: none; }
.live-page-preview[data-template="evidence"] .live-page-market-orbit { width: 58%; transform: none; }
.live-page-preview[data-template="evidence"] .live-page-market-orbit i { border-radius: 0; }
.live-page-preview[data-template="evidence"] .live-editable-section {
    grid-template-columns: minmax(180px,.75fr) minmax(0,1.25fr);
    gap: 4%;
    padding: 3rem 5%;
    border-left: 8px solid var(--public-accent);
}
.live-page-preview[data-template="evidence"] .live-section-title { grid-column: 1; }
.live-page-preview[data-template="evidence"] .live-section-image,
.live-page-preview[data-template="evidence"] .live-section-body { grid-column: 2; }
.live-page-preview[data-template="evidence"] .live-section-columns { grid-column: 1 / -1; }

.live-page-manager-note { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.live-page-range-card .live-page-number-hint {
    display: block;
    margin: -.15rem 0 .25rem;
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: .62rem;
    font-weight: 500;
    line-height: 1.35;
}

.presentation-delivery-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
}
.presentation-delivery-tabs button {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    min-height: 2rem;
    padding: .35rem .7rem;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}
.presentation-delivery-tabs button.is-active {
    color: var(--ink);
    background: var(--surface-raised, var(--surface));
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.presentation-email-preview {
    width: 100%;
    margin: 0 auto;
}
.presentation-email-preview iframe {
    display: block;
    width: 100%;
    height: 760px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #0d0f13;
}
.presentation-email-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-raised, var(--surface));
}
.presentation-email-preview-bar span { display: grid; gap: .15rem; }
.presentation-email-preview-bar small { color: var(--muted); }
.presentation-email-preview > p {
    margin: .65rem 0 0;
    color: var(--muted);
    text-align: center;
    font-size: .78rem;
}
.presentation-email-preview-empty {
    min-height: 420px;
    display: grid;
    place-content: center;
    gap: .7rem;
    padding: 2rem;
    color: var(--muted);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 12px;
}
.presentation-email-preview-empty[hidden],
.presentation-email-preview[hidden] { display: none; }
.presentation-email-preview-empty i { font-size: 2rem; }
.live-page-email-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.live-page-email-toggle span { display: grid; gap: .2rem; }
.live-page-email-toggle small,
.live-page-setting-help { color: var(--muted); }

.email-design-workspace {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.live-page-studio.is-email-mode .live-page-canvas-scroll {
    display: grid;
    min-height: 0;
    overflow: hidden;
}
.live-page-studio.is-email-mode .presentation-email-preview,
.live-page-studio.is-email-mode .email-design-workspace { height: 100%; min-height: 0; }
.live-page-studio.is-email-mode .email-design-workspace {
    height: min(100%, calc(100dvh - 205px));
    min-height: 420px;
    margin-bottom: 0;
}
.email-block-library,
.email-block-canvas {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-raised, var(--surface));
}
.email-block-library { padding: 1rem; }
.email-block-library > strong { display: block; margin-top: .2rem; }
.email-block-library > p { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.email-block-library > div { display: grid; gap: .4rem; }
.email-block-library button {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .55rem .65rem;
    color: var(--ink);
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
}
.email-block-library button:hover { border-color: var(--accent); }
.email-merge-library { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.email-merge-library > strong { display: block; margin-top: .2rem; }
.email-merge-library > p { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.email-merge-library > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.email-merge-library button {
    width: auto;
    padding: .35rem .5rem;
    color: var(--text-soft);
    border-radius: 999px;
    font-size: .7rem;
}
.email-block-canvas { padding: 1rem; }
.email-block-canvas > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}
.email-block-canvas > header > span:first-child { display: grid; gap: .15rem; }
.email-block-canvas > header small { color: var(--muted); }
.email-block-list { display: grid; gap: .55rem; }
.email-block-card {
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}
.email-block-card.is-dragging { opacity: .45; border-color: var(--accent); }
.email-block-card > header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .65rem;
}
.email-block-card > header > span:nth-child(2) { display: grid; gap: .1rem; }
.email-block-card > header small { color: var(--muted); font-size: .72rem; }
.email-block-handle { color: var(--muted); cursor: grab; }
.email-block-actions { display: flex; gap: .25rem; }
.email-block-actions button {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.email-block-actions button:disabled { opacity: .35; cursor: not-allowed; }
.email-block-copy,
.email-block-button-label { margin-top: .7rem; }
.email-block-copy label,
.email-block-button-label label,
.email-block-settings label { display: grid; gap: .25rem; color: var(--muted); font-size: .72rem; }
.email-block-copy textarea,
.email-block-button-label input,
.email-block-settings select {
    width: 100%;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-raised, var(--surface));
}
.email-block-copy textarea { min-height: 80px; padding: .55rem; resize: vertical; }
.email-block-button-label input,
.email-block-settings select { min-height: 2.15rem; padding: .35rem .45rem; }
.email-block-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .7rem;
}
@media (max-width: 900px) {
    .email-design-workspace { grid-template-columns: 1fr; }
    .email-block-library > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .email-block-settings { grid-template-columns: 1fr; }
    .email-block-library > div { grid-template-columns: 1fr; }
}

/* The email editor is the preview: controls sit around an email-safe canvas. */
.email-visual-editor {
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #d9d6cf;
}
.live-page-studio.is-email-mode .live-page-studio-workspace { grid-template-columns: minmax(0, 1fr) 250px; }
.live-page-studio.is-email-mode .live-page-theme-rail { display: none; }
.email-visual-editor-bar {
    margin: 0 !important;
    padding: .8rem 1rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    background: var(--surface-raised, var(--surface));
}
.email-visual-editor-bar > span:last-child { display: flex; align-items: center; gap: .5rem; }
.email-visual-page {
    width: min(100% - 2rem, 700px);
    margin: 1.25rem auto;
    color: #202622;
    background: #fff;
    box-shadow: 0 18px 55px rgba(17, 23, 19, .2);
}
.email-visual-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 40px 18px;
    color: var(--email-primary);
    border-bottom: 1px solid #dedbd3;
}
.email-visual-brand > span { display: flex; align-items: center; gap: .65rem; }
.email-visual-brand b {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: #fff;
    border-radius: 4px;
    background: var(--email-primary);
}
.email-visual-brand small { color: #7a827e; text-transform: uppercase; letter-spacing: .08em; }
.email-visual-brand-editor { padding: 0; border-bottom: 0; }
.email-visual-brand-editor input {
    min-width: 0;
    color: inherit;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-weight: 800;
}
.email-visual-brand-editor > input { max-width: 11rem; color: #7a827e; text-align: right; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.email-visual-hero {
    padding: 38px 40px 34px;
    color: var(--email-primary);
    border-left: 7px solid var(--email-accent);
}
.email-visual-hero small { color: var(--email-accent); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.email-visual-hero h2 { margin: .65rem 0 0; color: inherit; font: 600 2.3rem/1.08 Georgia, serif; }
.email-visual-hero-editor { padding: 12px 0; }
.email-visual-hero-editor input,
.email-visual-hero-editor textarea {
    display: block;
    width: 100%;
    padding: 0;
    color: inherit;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
}
.email-visual-hero-editor input { color: var(--email-accent); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.email-visual-hero-editor textarea { margin-top: .65rem; font: 600 2.3rem/1.08 Georgia, serif; }
.email-visual-page .email-block-list { display: block; }
.email-visual-page .email-block-card {
    position: relative;
    margin: 0;
    padding: 18px 40px;
    color: #202622;
    border: 1px solid transparent;
    border-radius: 0;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.email-visual-page .email-block-card:hover,
.email-visual-page .email-block-card:focus-within {
    z-index: 2;
    border-color: var(--email-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--email-accent) 22%, transparent);
}
.email-visual-page .email-block-card[data-email-spacing="compact"] { padding-top: 8px; padding-bottom: 8px; }
.email-visual-page .email-block-card[data-email-spacing="spacious"] { padding-top: 32px; padding-bottom: 32px; }
.email-visual-page .email-block-card[data-email-align="center"] { text-align: center; }
.email-visual-page .email-block-card[data-email-background="paper"] { background: var(--email-paper); }
.email-visual-page .email-block-card[data-email-background="primary"] { border-left: 5px solid var(--email-primary); }
.email-visual-page .email-block-card[data-email-background="accent"] { border-left: 5px solid var(--email-accent); }
.email-visual-page .email-block-card[data-email-width="inset"] { width: 88%; margin-right: auto; margin-left: auto; }
.email-visual-page .email-block-card[data-email-width="narrow"] { width: 72%; margin-right: auto; margin-left: auto; }
.email-block-toolbar {
    position: absolute;
    top: 5px;
    right: 7px;
    left: 7px;
    z-index: 3;
    display: flex !important;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .15s, transform .15s;
}
.email-block-card:hover > .email-block-toolbar,
.email-block-card:focus-within > .email-block-toolbar { opacity: 1; transform: none; }
.email-block-toolbar > span { pointer-events: auto; }
.email-block-toolbar > span:nth-child(2) {
    margin-right: auto;
    padding: .25rem .5rem;
    color: #202622;
    border: 1px solid #dedbd3;
    border-radius: 999px;
    background: #fff;
    font-size: .7rem;
}
.email-block-toolbar .email-block-handle,
.email-block-toolbar .email-block-actions { padding: .15rem; border-radius: 7px; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.email-block-visual-content { min-height: 12px; }
.email-block-copy { margin: 0; }
.email-block-copy textarea {
    display: block;
    width: 100%;
    min-height: 76px;
    padding: 0;
    color: #3f4843;
    border: 0;
    outline: 0;
    background: transparent;
    font: 400 1rem/1.65 Arial, sans-serif;
    resize: vertical;
}
.email-block-copy textarea:focus { box-shadow: inset 0 -1px 0 var(--email-accent); }
.email-block-card[data-email-block-type="greeting"] .email-block-copy textarea { min-height: 38px; color: #202622; font-size: 1.05rem; }
.email-block-card[data-email-block-type="signature"] .email-block-copy textarea { min-height: 92px; padding-top: 18px; border-top: 1px solid #dedbd3; }
.email-block-card[data-email-block-type="documentContent"] .email-block-copy textarea:placeholder-shown { min-height: 44px; margin-top: .55rem; color: #8a918d; font-size: .82rem; }
.email-block-button-label { margin: 0; text-align: inherit; }
.email-block-button-label input {
    display: inline-block;
    width: auto;
    min-width: 160px;
    max-width: 100%;
    padding: 13px 18px;
    color: #050505;
    border: 0;
    border-radius: 6px;
    outline: 0;
    background: var(--email-accent);
    font-weight: 760;
    text-align: center;
}
.email-visual-heading-editor { display: grid; gap: .35rem; }
.email-visual-heading-editor input {
    width: 100%;
    padding: 0;
    color: #111713;
    border: 0;
    outline: 0;
    background: transparent;
}
.email-visual-heading-editor input[data-email-block-eyebrow] { color: var(--email-accent); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.email-visual-heading-editor input[data-email-block-heading] { font: 700 1.75rem/1.2 Arial, sans-serif; }
.email-visual-custom-image,
.email-visual-gallery > div,
.email-visual-flex-preview > div {
    min-height: 150px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #8a918d;
    border: 1px dashed #c8cbc7;
    background: var(--email-paper);
}
.email-visual-custom-image img,
.email-visual-gallery img,
.email-visual-flex-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.email-visual-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.email-visual-flex-preview { display: grid; grid-template-columns: minmax(130px, 42%) 1fr; gap: 16px; align-items: center; margin-bottom: .7rem; }
.email-visual-flex-preview input {
    width: 100%;
    color: #111713;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1.35rem;
    font-weight: 750;
}
.email-media-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .5rem;
    margin-top: .75rem;
    padding: .65rem;
    border: 1px solid #dedbd3;
    border-radius: 7px;
    background: #f7f5f0;
}
.email-media-fields label { display: grid; gap: .2rem; color: #68716c; font-size: .7rem; }
.email-media-fields input { min-width: 0; padding: .42rem .5rem; color: #202622; border: 1px solid #dedbd3; border-radius: 5px; background: #fff; }
.email-visual-greeting { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.email-visual-property-hero {
    min-height: 230px;
    display: grid;
    place-items: center;
    color: #68716c;
    border: 1px dashed #c8cbc7;
    background: var(--email-paper) center/cover no-repeat;
}
.email-visual-property-hero.has-image span { padding: .4rem .6rem; color: #fff; background: rgba(0,0,0,.55); }
.email-visual-facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #dedbd3; border-bottom: 1px solid #dedbd3; }
.email-visual-facts > span { display: grid; gap: .3rem; padding: 14px 10px 14px 0; }
.email-visual-facts small,
.email-visual-range small,
.email-visual-connected > small { color: #8a7850; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.email-visual-facts strong { font-size: .92rem; }
.email-visual-range { display: grid; gap: .45rem; padding: 20px 0; border-top: 1px solid #dedbd3; border-bottom: 1px solid #dedbd3; }
.email-visual-range strong { color: #111713; font-size: 1.8rem; }
.email-visual-connected { padding-top: 8px; border-top: 1px solid #dedbd3; }
.email-visual-connected h3 { margin: .55rem 0 .35rem; color: #111713; font-size: 1.35rem; }
.email-visual-connected p { margin: 0; color: #68716c; line-height: 1.55; }
.email-document-content-editor { display: grid; gap: .45rem; }
.email-document-content-editor input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: inherit;
    border: 0;
    outline: 0;
    background: transparent;
}
.email-document-content-editor [data-email-block-eyebrow] { color: var(--email-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.email-document-content-editor [data-email-block-heading] { color: #111713; font-size: 1.35rem; font-weight: 800; }
.email-visual-signature { padding-top: 18px; color: #3f4843; border-top: 1px solid #dedbd3; line-height: 1.6; }
.email-visual-divider { height: 1px; margin: 0; border: 0; background: #dedbd3; }
.email-visual-spacer { height: 28px; display: grid; place-items: center; color: #a0a6a2; border: 1px dashed #dedbd3; font-size: .7rem; }
.email-block-inspector { margin-top: .5rem; color: #68716c; font-size: .72rem; }
.email-block-inspector summary { width: max-content; margin-left: auto; cursor: pointer; }
.email-block-inspector[open] { padding: .55rem; border: 1px solid #dedbd3; border-radius: 7px; background: #f7f5f0; }
.email-visual-footer { padding: 25px 40px; color: #68716c; border-top: 4px solid var(--email-accent); background: var(--email-paper); font-size: .75rem; }
.presentation-email-preview.is-mobile .email-visual-page { max-width: 390px; }
.presentation-email-preview.is-mobile .email-visual-facts { grid-template-columns: 1fr; }
@media (max-width: 720px) {
    .email-visual-page { width: calc(100% - 1rem); margin: .5rem; }
    .email-visual-brand,
    .email-visual-hero,
    .email-visual-page .email-block-card,
    .email-visual-footer { padding-left: 22px; padding-right: 22px; }
    .email-visual-hero h2 { font-size: 1.8rem; }
    .email-media-fields,
    .email-visual-flex-preview { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .live-page-studio.is-email-mode .live-page-canvas-scroll { overflow: auto; }
    .live-page-studio.is-email-mode .presentation-email-preview,
    .live-page-studio.is-email-mode .email-design-workspace { height: auto; }
    .email-block-library,
    .email-block-canvas { overflow: visible; }
}
@media (max-width: 1180px) {
    .live-page-studio.is-email-mode .live-page-studio-workspace { grid-template-columns: minmax(0, 1fr); }
}

.live-page-preview-viewport.is-mobile .live-page-preview[data-template] .live-editable-section {
    grid-template-columns: 1fr;
}
.live-page-preview-viewport.is-mobile .live-page-preview[data-template] .live-section-title,
.live-page-preview-viewport.is-mobile .live-page-preview[data-template] .live-section-image,
.live-page-preview-viewport.is-mobile .live-page-preview[data-template] .live-section-body {
    grid-column: 1;
}