/* ============================================
   Custom Carousel — slide stage + page styles
   Canvas: 1080 × 1350 px portrait (4:5)
   Background: #0a0a0a on all slides
   Mirrors conventions from social.css
   ============================================ */

/* ============================================
   Page layout
   ============================================ */

.carousel-page-inner {
    max-width: 740px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Page header (eyebrow -> title -> lede). */
.cc-page-head { margin-bottom: 2rem; }
.cc-page-head .s-section-label { margin-bottom: 0.4rem; }
.cc-page-head .s-lede { margin-top: 0.4rem; }

/* ============================================
   Instruction guidance block
   ============================================ */

.carousel-instructions-block {
    background: var(--s-surface-2);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    margin-bottom: 2rem;
}

.carousel-instructions-block .instr-lead {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--s-text);
    margin-bottom: 0.5rem;
    line-height: 1.45;
}

.carousel-instructions-block .instr-body {
    font-size: 0.88rem;
    color: var(--s-text-2);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.carousel-instructions-block .instr-must {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--s-text);
    margin-bottom: 0.55rem;
}

.carousel-instructions-block ol {
    margin: 0 0 1.25rem 0;
    padding-left: 1.4rem;
}

.carousel-instructions-block ol li {
    font-size: 0.88rem;
    color: var(--s-text-2);
    line-height: 1.6;
    margin-bottom: 0.45rem;
}

.carousel-instructions-block ol li strong {
    color: var(--s-text);
}

.carousel-instructions-block .instr-example-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--s-text);
    margin-bottom: 0.4rem;
}

.carousel-instructions-block blockquote {
    margin: 0 0 1.25rem 0;
    padding: 1rem 1.1rem;
    background: var(--s-surface);
    border-left: 3px solid var(--s-accent);
    border-radius: 0 var(--s-r-sm) var(--s-r-sm) 0;
    font-size: 0.85rem;
    color: var(--s-text-2);
    line-height: 1.6;
}

.carousel-instructions-block blockquote p {
    margin: 0 0 0.5rem 0;
}

.carousel-instructions-block blockquote p:last-child {
    margin-bottom: 0;
}

/* "Things the AI won't do" — functional warning surface (amber state). */
.carousel-instructions-block aside.instr-nope {
    margin-top: 0.25rem;
    padding: 0.9rem 1rem;
    background: var(--s-warn-soft);
    border-left: 3px solid var(--s-warn-border);
    border-radius: 0 var(--s-r-sm) var(--s-r-sm) 0;
    font-size: 0.82rem;
    color: var(--s-warn);
    line-height: 1.6;
}

.carousel-instructions-block aside.instr-nope .nope-title {
    font-weight: 700;
    color: var(--s-warn);
    margin-bottom: 0.4rem;
}

.carousel-instructions-block aside.instr-nope ul {
    margin: 0;
    padding-left: 1.2rem;
}

.carousel-instructions-block aside.instr-nope ul li {
    margin-bottom: 0.2rem;
}

/* ============================================
   Form inputs
   ============================================ */

.carousel-form .input-group {
    margin-bottom: 1.1rem;
}

.carousel-form .input-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--s-text);
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}

.carousel-form .label-optional {
    font-weight: 400;
    color: var(--s-text-3);
    font-size: 0.72rem;
    margin-left: 0.2rem;
}

.carousel-form textarea,
.carousel-form input[type="text"] {
    width: 100%;
    padding: 0.62rem 0.8rem;
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r-md);
    font-family: inherit;
    font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
    color: var(--s-text);
    background: var(--s-surface);
    resize: vertical;
    line-height: 1.5;
    transition: border-color var(--s-t-fast), box-shadow var(--s-t-fast);
    box-sizing: border-box;
}

.carousel-form textarea:focus,
.carousel-form input[type="text"]:focus {
    outline: none;
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px var(--s-focus);
}

.carousel-font-row-custom {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.carousel-font-row-custom label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--s-text-2);
}

.slide-font-select-custom {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r-sm);
    font-family: inherit;
    font-size: 0.85rem;
    background: var(--s-surface);
    color: var(--s-text);
    cursor: pointer;
    transition: border-color var(--s-t-fast), box-shadow var(--s-t-fast);
}

.slide-font-select-custom:focus {
    outline: none;
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px var(--s-focus);
}

/* Generate button — pairs .s-btn .s-btn-primary with full-width sizing. */
.btn-lg-custom {
    width: 100%;
    height: 48px;
    padding: 0 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0.5rem;
    border-radius: var(--s-r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.carousel-time-note {
    font-size: 0.78rem;
    color: var(--s-text-3);
    text-align: center;
    margin-top: 0.5rem;
}

.btn-spinner-custom {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin-custom 0.7s linear infinite;
    display: inline-block;
}

@keyframes btn-spin-custom {
    to { transform: rotate(360deg); }
}

/* ============================================
   Output / preview section
   ============================================ */

.carousel-output-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--s-border);
}

.carousel-output-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
    color: var(--s-text);
}

/* Render progress */
.carousel-render-progress {
    margin-bottom: 1.25rem;
}

.carousel-render-bar {
    height: 6px;
    background: var(--s-surface-3);
    border-radius: var(--s-r-pill);
    overflow: hidden;
    margin-bottom: 0.45rem;
}

.carousel-render-fill {
    height: 100%;
    background: var(--s-accent);
    width: 0%;
    transition: width var(--s-t);
    border-radius: var(--s-r-pill);
}

.carousel-render-text {
    font-size: 0.78rem;
    color: var(--s-text-2);
    text-align: center;
    margin: 0;
}

/* Preview thumbnail row */
.carousel-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

.carousel-preview-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--s-text-2);
    letter-spacing: 0.02em;
}

.carousel-preview-meta {
    font-size: 0.72rem;
    color: var(--s-text-3);
}

.carousel-preview-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.carousel-preview-row::-webkit-scrollbar {
    height: 6px;
}
.carousel-preview-row::-webkit-scrollbar-thumb {
    background: var(--s-border-strong);
    border-radius: var(--s-r-pill);
}

/* Thumbnails: scaled-down preview of the rendered slide JPEG. */
.cc-thumb {
    flex: 0 0 auto;
    width: 160px;
    height: 200px;
    border-radius: var(--s-r-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--s-surface-3);
    border: 1px solid var(--s-border);
    transition: transform var(--s-t-fast), box-shadow var(--s-t-fast), border-color var(--s-t-fast);
    position: relative;
}

.cc-thumb:hover {
    transform: translateY(-2px);
    box-shadow: var(--s-shadow-md);
    border-color: var(--s-border-strong);
}

.cc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-thumb-index {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    background: rgba(10, 10, 10, 0.55);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: var(--s-r-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.carousel-preview-hint {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--s-text-3);
    line-height: 1.5;
}

/* Download + regenerate row */
.carousel-action-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.carousel-action-row .s-btn {
    height: 44px;
    font-size: 0.9rem;
}

.carousel-action-row > .s-btn:first-child {
    flex: 1;
    min-width: 180px;
}

/* Inline regenerate row (shown on Regenerate click) */
.carousel-regen-row {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: start;
}

.carousel-regen-row textarea {
    width: 100%;
    padding: 0.62rem 0.8rem;
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r-md);
    font-family: inherit;
    font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
    color: var(--s-text);
    background: var(--s-surface);
    resize: vertical;
    min-height: 68px;
    line-height: 1.5;
    transition: border-color var(--s-t-fast), box-shadow var(--s-t-fast);
    box-sizing: border-box;
}

.carousel-regen-row textarea:focus {
    outline: none;
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px var(--s-focus);
}

.carousel-regen-row .s-btn {
    white-space: nowrap;
}

/* ============================================
   Recent carousels section
   ============================================ */

.carousel-history-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--s-border);
}

.carousel-history-section h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
    color: var(--s-text);
}

.carousel-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.carousel-history-empty {
    color: var(--s-text-3);
    font-size: 0.88rem;
}

.carousel-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-md);
    gap: 0.75rem;
    transition: border-color var(--s-t-fast), box-shadow var(--s-t-fast);
}

.carousel-history-item:hover {
    border-color: var(--s-border-strong);
    box-shadow: var(--s-shadow-xs);
}

.carousel-history-info {
    flex: 1;
    min-width: 0;
}

.carousel-history-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--s-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.carousel-history-date {
    font-size: 0.74rem;
    color: var(--s-text-3);
}

.carousel-history-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.carousel-history-btn {
    padding: 0.4rem 0.75rem;
    background: var(--s-surface);
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--s-text-2);
    cursor: pointer;
    transition: background var(--s-t-fast), border-color var(--s-t-fast), color var(--s-t-fast);
}

.carousel-history-btn:hover {
    background: var(--s-surface-2);
    border-color: var(--s-text-3);
    color: var(--s-text);
}

.carousel-history-btn.danger {
    color: var(--s-danger);
    border-color: var(--s-danger-border);
}

.carousel-history-btn.danger:hover {
    background: var(--s-danger-soft);
    border-color: var(--s-danger);
}

/* ============================================
   Toast
   ============================================ */

.cc-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1c1c1e;
    color: #fff;
    padding: 0.7rem 1.1rem;
    border-radius: var(--s-r-pill);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--s-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--s-t), transform var(--s-t);
    z-index: 1000;
    white-space: nowrap;
}

.cc-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   Custom confirm modal
   ============================================ */

.cc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 24, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cc-modal {
    background: var(--s-surface);
    border-radius: var(--s-r-xl);
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--s-shadow-lg);
}

.cc-modal h3 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0;
    color: var(--s-text);
}

.cc-modal p {
    font-size: 0.88rem;
    color: var(--s-text-2);
    line-height: 1.55;
    margin: 0 0 1.5rem 0;
}

.cc-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.cc-modal-actions button {
    height: 40px;
    padding: 0 1.05rem;
    border-radius: var(--s-r-md);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--s-t-fast), border-color var(--s-t-fast), color var(--s-t-fast);
}

.cc-modal-cancel {
    background: transparent;
    color: var(--s-text-2);
}

.cc-modal-cancel:hover {
    background: var(--s-surface-3);
    color: var(--s-text);
}

.cc-modal-confirm {
    background: var(--s-accent);
    color: var(--s-on-accent);
}

.cc-modal-confirm:hover {
    background: var(--s-accent-hover);
}

.cc-modal-confirm.danger {
    background: var(--s-danger);
}

.cc-modal-confirm.danger:hover {
    background: var(--s-danger-hover);
}

/* ============================================
   Lightbox
   ============================================ */

.cc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.cc-lightbox-frame {
    max-width: min(540px, 90vw);
    max-height: 90vh;
    aspect-ratio: 4 / 5;
}

.cc-lightbox-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--s-r-md);
    box-shadow: var(--s-shadow-lg);
}

.cc-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--s-t-fast);
}

.cc-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.cc-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--s-t-fast);
    z-index: 10;
}

.cc-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}

.cc-lightbox-nav.prev { left: 1rem; }
.cc-lightbox-nav.next { right: 1rem; }

/* ============================================
   Slide stage (off-screen rendering area)
   html2canvas requires a real, sized element.
   Position far left so it's invisible to users.
   ============================================ */

#cc-slide-stage {
    position: fixed;
    left: -99999px;
    top: 0;
    width: 1080px;
    height: 1350px;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================
   Design tokens (SKILL.md §3)
   ============================================ */
:root {
    --cc-bg-canvas: #0a0a0a;
    --cc-bg-card-subtle: #1a1a1a;
    --cc-bg-card-inverted: #ffffff;
    --cc-text-primary-dark: #ffffff;
    --cc-text-muted-dark: #bbbbbb;
    --cc-text-fineprint-dark: #888888;
    --cc-text-primary-light: #000000;
    --cc-text-muted-light: #666666;
    --cc-text-fineprint-light: #888888;
    --cc-hairline-subtle: #2a2a2a;
    --cc-hairline-section: #444444;
    --cc-hairline-summary: #666666;
}

/* ============================================
   Slide base (1080 × 1350, all archetypes)
   Flex-column layout with top/middle/bottom regions inside 80px safe margins.
   ============================================ */

.cc-slide {
    position: relative;
    width: 1080px;
    height: 1350px;
    overflow: hidden;
    background: var(--cc-bg-canvas);
    color: var(--cc-text-primary-dark);
    font-family: var(--slide-font, '"DM Sans"'), 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    padding: 80px;
    box-sizing: border-box;
}

/* Top region — eyebrow row */
.cc-slide .cc-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 0 0 auto;
}

/* Middle region — archetype-specific content, fills available space */
.cc-slide .cc-middle {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 40px;
    min-height: 0;
}

/* Bottom region — pagination + swipe */
.cc-slide .cc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-fineprint-dark);
}

.cc-slide .cc-footer .cc-page-num { text-align: left; }
.cc-slide .cc-footer .cc-swipe { text-align: right; }
.cc-slide .cc-footer .cc-swipe-spacer { display: inline-block; }

/* ============================================
   Typography scale (SKILL.md §3)
   ============================================ */

.cc-slide .cc-eyebrow {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-fineprint-dark);
    line-height: 1.2;
}

.cc-slide .cc-headline-small {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
}

.cc-slide .cc-headline-medium {
    font-size: 78px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
}

.cc-slide .cc-headline-large {
    font-size: 120px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.94;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
}

/* Hairline section break (#444 2px) — between header block and content */
.cc-slide .cc-hairline-section {
    border-top: 2px solid var(--cc-hairline-section);
    margin: 28px 0;
}

/* ============================================
   Card vocabulary — shared across climax_inverted and hero_number
   ============================================ */

.cc-slide .cc-card {
    border-radius: 12px;
    padding: 36px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cc-slide .cc-card-subtle {
    background: var(--cc-bg-card-subtle);
    color: var(--cc-text-primary-dark);
}

.cc-slide .cc-card-subtle .cc-card-label {
    color: var(--cc-text-muted-dark);
}
.cc-slide .cc-card-subtle .cc-card-subtitle {
    color: var(--cc-text-muted-dark);
}

.cc-slide .cc-card-inverted {
    background: var(--cc-bg-card-inverted);
    color: var(--cc-text-primary-light);
}

.cc-slide .cc-card-inverted .cc-card-label {
    color: var(--cc-text-muted-light);
}
.cc-slide .cc-card-inverted .cc-card-subtitle {
    color: var(--cc-text-muted-light);
}
.cc-slide .cc-card-inverted .cc-card-value {
    color: var(--cc-text-primary-light);
}

.cc-slide .cc-card-label {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
}

.cc-slide .cc-card-value {
    font-size: 110px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
    overflow-wrap: normal;
}

.cc-slide .cc-card-subtitle {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.cc-slide .cc-card-value-medium {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    overflow-wrap: break-word;
}

.cc-slide .cc-card-value-medium-sub {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 8px;
    overflow-wrap: break-word;
}

/* ============================================
   Archetype A — narrative_break
   ============================================ */

.cc-slide-narrative-break {
    background:
        radial-gradient(ellipse 600px 500px at 100% 0%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 70%),
        var(--cc-bg-canvas);
}

/* Override generic .cc-middle space-between for this archetype.
   Stack from top; let margin-top:auto on the hero block push it into the lower-middle
   so the supporting block clusters just above the footer (matches SKILL.md §1 #3). */
.cc-slide-narrative-break .cc-middle {
    justify-content: flex-start;
}

.cc-slide-narrative-break .cc-narrative-hero-block {
    display: flex;
    flex-direction: column;
    /* Push the hero text into the lower-middle of the canvas (~lower half),
       eating the dead space the eyebrow used to leave at the bottom. */
    margin-top: auto;
}

.cc-slide-narrative-break .cc-narrative-headline-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-slide-narrative-break .cc-narrative-line {
    /* uses cc-headline-medium by default */
}

.cc-slide-narrative-break .cc-narrative-accent {
    font-size: 180px;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 0.88;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
    margin: 12px 0;
}

.cc-slide-narrative-break .cc-narrative-support {
    display: flex;
    flex-direction: column;
    /* Sits naturally below hero (hero is margin-top:auto pushed),
       hugging the area just above the footer. */
    margin-top: 32px;
}

.cc-slide-narrative-break .cc-supporting-line {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--cc-text-muted-dark);
    overflow-wrap: break-word;
}

.cc-slide-narrative-break .cc-supporting-line + .cc-supporting-line {
    margin-top: 8px;
}

/* ============================================
   Archetype B — data_stack
   ============================================ */

.cc-slide-data-stack .cc-data-head {
    display: flex;
    flex-direction: column;
}

.cc-slide-data-stack .cc-data-items {
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1 1 auto;
    justify-content: center;
}

.cc-slide-data-stack .cc-data-item {
    display: flex;
    flex-direction: column;
}

.cc-slide-data-stack .cc-data-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cc-slide-data-stack .cc-data-label {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cc-text-muted-dark);
    line-height: 1.2;
}

.cc-slide-data-stack .cc-data-value {
    font-size: 78px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--cc-text-primary-dark);
    margin-top: 8px;
    overflow-wrap: break-word;
}

.cc-slide-data-stack .cc-data-item--negative .cc-data-value {
    color: var(--cc-text-muted-dark);
}

.cc-slide-data-stack .cc-data-context {
    font-size: 24px;
    font-weight: 400;
    color: var(--cc-text-muted-dark);
    line-height: 1.3;
    margin-top: 6px;
}

/* Heavier divider precedes the summary item */
.cc-slide-data-stack .cc-data-item--summary {
    margin-top: 12px;
}
.cc-slide-data-stack .cc-data-item--summary .cc-summary-divider {
    border-top: 3px solid var(--cc-hairline-summary);
    margin-bottom: 22px;
}

.cc-slide-data-stack .cc-data-item--summary .cc-data-label-row {
    align-items: center;
}

.cc-slide-data-stack .cc-data-item--summary .cc-data-label {
    font-size: 28px;
    color: var(--cc-text-fineprint-dark);
}

.cc-slide-data-stack .cc-data-value--summary {
    font-size: 100px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--cc-text-primary-dark);
    text-align: right;
    overflow-wrap: break-word;
}

.cc-slide-data-stack .cc-data-kicker {
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    color: var(--cc-text-muted-dark);
    margin-top: 20px;
    line-height: 1.4;
}

/* ============================================
   Archetype C — climax_inverted
   ============================================ */

.cc-slide-climax-inverted .cc-climax-head {
    display: flex;
    flex-direction: column;
}

.cc-slide-climax-inverted .cc-climax-cards {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 20px 0;
}

.cc-slide-climax-inverted .cc-climax-cards .cc-card {
    width: 430px;
    height: 380px;
}

.cc-slide-climax-inverted .cc-climax-payoff {
    display: flex;
    flex-direction: column;
}

.cc-slide-climax-inverted .cc-payoff-headline {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
}

.cc-slide-climax-inverted .cc-payoff-supporting {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cc-text-muted-dark);
    margin-top: 14px;
    overflow-wrap: break-word;
}

/* ============================================
   Archetype D — hero_number
   ============================================ */

.cc-slide-hero-number .cc-hero-head {
    display: flex;
    flex-direction: column;
}

.cc-slide-hero-number .cc-pre-headline {
    font-size: 92px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.98;
    color: var(--cc-text-muted-dark);
    overflow-wrap: break-word;
}

.cc-slide-hero-number .cc-hero-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.cc-slide-hero-number .cc-hero-cards .cc-card {
    width: 100%;
    min-height: 160px;
}

.cc-slide-hero-number .cc-hero-block {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    margin-bottom: auto;
}

.cc-slide-hero-number .cc-lead-label {
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-fineprint-dark);
    margin-bottom: 18px;
}

.cc-slide-hero-number .cc-hero-number {
    line-height: 0.92;
    overflow-wrap: break-word;
}

.cc-slide-hero-number .cc-hero-number-main {
    display: inline;
    font-size: 160px;
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 0.88;
}

.cc-slide-hero-number .cc-hero-tail {
    display: inline;
    font-size: 68px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--cc-text-muted-dark);
}

.cc-slide-hero-number .cc-hero-kicker {
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    color: var(--cc-text-muted-dark);
    margin-top: 20px;
    line-height: 1.4;
}

/* ============================================
   Archetype E — cta (final slide)
   ============================================ */

.cc-slide-cta .cc-cta-headline {
    font-size: 100px;
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
}

.cc-slide-cta .cc-cta-body {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cc-text-muted-dark);
    margin-top: 28px;
    max-width: 920px;
    overflow-wrap: break-word;
}

.cc-slide-cta .cc-cta-contact-block {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: auto;
}

.cc-slide-cta .cc-cta-identity {
    display: flex;
    flex-direction: column;
}

/* Business-card identity row: circular headshot + name/brokerage.
   Only present when branding.headshot is a valid image data URL. */
.cc-slide-cta .cc-cta-identity-row {
    display: flex;
    align-items: center;
    gap: 34px;
}

.cc-slide-cta .cc-cta-identity-row .cc-cta-identity {
    flex: 1 1 auto;
    min-width: 0;
}

/* Rendered as a background-image div (never an <img>) so the slide keeps no
   image descendants for html2canvas. Border (not box-shadow) for the ring —
   html2canvas 1.4.1 renders borders reliably but not box-shadows. */
.cc-slide-cta .cc-cta-headshot {
    flex: 0 0 156px;
    width: 156px;
    height: 156px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #2a2a2a;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cc-slide-cta .cc-cta-name {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--cc-text-primary-dark);
    overflow-wrap: break-word;
}

.cc-slide-cta .cc-cta-brokerage {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--cc-text-muted-dark);
    margin-top: 6px;
}

.cc-slide-cta .cc-cta-contact {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.cc-slide-cta .cc-cta-contact div small {
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--cc-text-fineprint-dark);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.cc-slide-cta .cc-cta-contact div strong {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cc-text-primary-dark);
    letter-spacing: -0.005em;
    display: block;
    overflow-wrap: break-word;
}

/* ============================================
   Legacy fallback (backwards-compat for stale D1 records)
   ============================================ */

.cc-slide-legacy .cc-legacy-message {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 18px;
    color: var(--cc-text-muted-dark);
}

.cc-slide-legacy .cc-legacy-title {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cc-text-primary-dark);
}

.cc-slide-legacy .cc-legacy-body {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 720px;
}

/* ============================================================
   Editor v3 (Custom Carousel) — in-place text editor surface.
   GATED: scoped to markup the editor_v3_social path creates, inert
   when the flag is OFF. Custom Carousel is in-place edit ONLY (never
   free-move) — the SKILL grammar composes the layout (§3.1 constraint).
   The .s-edit-* rings come from editor-suite.css.
   ============================================================ */
.cc-edit-modebar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
}
.cc-edit-modebar .s-edit-seg { margin-left: auto; }

.s-edit-cc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
}
.s-edit-cc-wrap { display: flex; flex-direction: column; align-items: center; }
.s-edit-cc-celllabel {
    font: 600 0.72rem/1 var(--s-font, inherit);
    color: var(--s-text-3, #8a8a8a);
    margin-bottom: 0.4rem;
    text-align: center;
}
.s-edit-cc-cell {
    width: 300px;
    height: 375px;
    overflow: hidden;
    border: 1px solid var(--s-border, #e8e8e8);
    border-radius: var(--s-r-sm, 8px);
    background: #0a0a0a;
    position: relative;
    flex: 0 0 auto;
}
/* MUST match CC_EDIT_SCALE in social-carousel.js (single source of truth). */
.s-edit-cc-cell .cc-slide { transform: scale(0.27778); transform-origin: top left; }
/* In-place caret only — never a move cursor on grammar slides. */
.s-edit-cc-cell .s-edit-text,
.s-edit-cc-cell .s-edit-text--inplace { cursor: text; }

.s-edit-banner.cc-edit-banner { border-radius: var(--s-r-sm, 8px); margin-bottom: 0.85rem; }

/* Per-slide validation warning surfaced after a Save edit (SKILL §9). */
.s-edit-cc-warn {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--s-warn, #b4720a);
    text-align: center;
    max-width: 300px;
}

/* Reorder affordance on the cc thumbs. */
.cc-thumb.s-edit-reorderable { cursor: grab; }
.cc-thumb.s-edit-reorderable:active { cursor: grabbing; }
.cc-thumb.s-edit-dragging { opacity: 0.5; }
.cc-thumb.s-edit-drop-target { outline: 2px solid var(--s-accent, #0a0a0a); outline-offset: 2px; }
.cc-thumb.s-edit-locked { cursor: default; }