/* Leo's landing page: only what differs from the shared agent page styles in agent-zoe.css. */
/* Leo's video backdrop is pure white, so the hero matches it and the clip never shows as a box. */
.leo-page .zoe-hero { background: #fff; }
/* Leo fills only 41% of the frame's width and 72% of its height (18%–90%); zoom in around 62% so head and feet both stay inside. */
.leo-page .zoe-media video { transform: scale(1.3); transform-origin: 50% 62%; }
.leo-page .zoe-hero-copy { position: relative; z-index: 3; }
/* The headline is longer than Zoe's or Cleo's; a smaller size keeps it at three lines. */
.leo-page .zoe-hero h1 { font-size: clamp(40px, 3.9vw, 56px); }

/* Hero: a copywriter's desk drifting around the video: a headline test, a subject line, a button, a marked-up line. */
.leo-ornaments { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.leo-ornaments .zoe-social-ornament { display: flex; align-items: center; gap: 7px; border: 1px solid #ece6f8; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 30px rgba(55, 39, 116, .13); color: #251d43; font-size: 12px; font-weight: 650; white-space: nowrap; }
.leo-orn-ab { top: 12%; left: 0; display: grid !important; width: 178px; gap: 6px !important; padding: 10px 12px 11px; white-space: normal !important; }
.leo-orn-ab small { color: #6b6880; font-size: 10px; font-weight: 700; }
.leo-orn-variant { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 3px 7px; font-size: 10.5px; }
.leo-orn-variant b { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 5px; background: #f1eeff; color: var(--p); font-size: 9px; }
.leo-orn-variant em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.leo-orn-variant i { position: relative; grid-column: 2; height: 4px; overflow: hidden; border-radius: 99px; background: #ebe7f7; }
.leo-orn-variant i::after { position: absolute; inset: 0 auto 0 0; border-radius: inherit; content: ""; }
.leo-orn-variant i.is-a::after { width: 42%; background: #c9bcf7; }
.leo-orn-variant i.is-b::after { width: 68%; background: var(--p); }
.leo-orn-variant.is-winner b { background: var(--p); color: #fff; }
.leo-orn-tone { top: 52%; left: 0; padding: 8px 12px 8px 9px; border-radius: 99px !important; }
.leo-orn-tone i { width: 18px; height: 18px; border-radius: 50%; background: #f1eeff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3C/svg%3E") center / 11px no-repeat; }
.leo-orn-highlight { bottom: 12%; left: 2%; flex-direction: column; align-items: flex-start !important; gap: 6px !important; width: 154px; padding: 11px 13px; background: #fffdf8 !important; color: #1b1838 !important; font: italic 600 13.5px/1.3 Georgia, "Times New Roman", serif !important; white-space: normal !important; }
.leo-orn-highlight mark { background: linear-gradient(transparent 55%, #ffe66d 55%); color: inherit; }
.leo-orn-highlight small { color: #8a7f6e; font: 700 8.5px/1 "Inter Variable", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.leo-orn-subject { top: 28%; right: -3%; flex-direction: column; align-items: flex-start !important; gap: 3px !important; width: 172px; padding: 10px 12px 11px; white-space: normal !important; }
.leo-orn-subject small { display: flex; align-items: center; gap: 5px; color: #6b6880; font-size: 9.5px; }
.leo-orn-subject small i { width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6880' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.leo-orn-subject strong { font-size: 12px; line-height: 1.25; }
.leo-orn-subject span { color: #6b6880; font-size: 10px; font-weight: 500; line-height: 1.3; }
.leo-orn-subject b { margin-top: 3px; padding: 2px 7px; border-radius: 99px; background: #e0f4e7; color: #1f7a4d; font-size: 9px; }
.leo-orn-cta { right: 2%; bottom: 7%; padding: 11px 16px; border: 0 !important; border-radius: 99px !important; background: linear-gradient(135deg, #5b3fd6, #8f6bff) !important; box-shadow: 0 14px 28px rgba(109, 74, 255, .35) !important; color: #fff !important; font-size: 12.5px !important; }
.leo-orn-cta span::after { margin-left: 6px; content: "→"; }
.leo-orn-cta i { position: absolute; right: 8px; bottom: -14px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.5L10 19z' fill='%231b1838' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.leo-orn-approved { top: 5%; right: 9%; padding: 8px 12px 8px 8px; border-radius: 99px !important; }
.leo-orn-approved i { width: 18px; height: 18px; border-radius: 50%; background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* The same wandering orbits as Zoe's social icons: every piece drifts its own path, tilts, and pops in and out. */
.leo-ornaments .leo-orn-ab { animation: leo-orbit-ab 10.5s ease-in-out infinite -1.2s; }
.leo-ornaments .leo-orn-approved { animation: leo-orbit-approved 9s ease-in-out infinite -2.4s; }
.leo-ornaments .leo-orn-tone { animation: leo-orbit-tone 9.5s ease-in-out infinite -6.1s; }
.leo-ornaments .leo-orn-highlight { animation: leo-orbit-highlight 11s ease-in-out infinite -4.8s; }
.leo-ornaments .leo-orn-subject { animation: leo-orbit-subject 10s ease-in-out infinite -8.2s; }
.leo-ornaments .leo-orn-cta { animation: leo-orbit-cta 10.5s ease-in-out infinite -3.4s; }
@keyframes leo-orbit-ab {
    0%, 9% { opacity: 0; transform: translate(-12px, 22px) rotate(-7deg) scale(.65); }
    17% { opacity: 1; transform: translate(6px, -8px) rotate(4deg) scale(1.08); }
    48% { opacity: 1; transform: translate(-10px, -15px) rotate(-3deg) scale(1); }
    76% { opacity: 1; transform: translate(7px, 5px) rotate(5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(-14px, 20px) rotate(-5deg) scale(.78); }
}
@keyframes leo-orbit-approved {
    0%, 9% { opacity: 0; transform: translate(14px, 18px) rotate(8deg) scale(.65); }
    17% { opacity: 1; transform: translate(-5px, -7px) rotate(-5deg) scale(1.1); }
    48% { opacity: 1; transform: translate(12px, -12px) rotate(4deg) scale(1); }
    76% { opacity: 1; transform: translate(-7px, 6px) rotate(-4deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(15px, 20px) rotate(6deg) scale(.78); }
}
@keyframes leo-orbit-tone {
    0%, 9% { opacity: 0; transform: translate(-14px, 24px) rotate(9deg) scale(.65); }
    17% { opacity: 1; transform: translate(6px, -9px) rotate(-6deg) scale(1.1); }
    48% { opacity: 1; transform: translate(-12px, -16px) rotate(5deg) scale(1); }
    76% { opacity: 1; transform: translate(8px, 6px) rotate(-5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(-15px, 22px) rotate(7deg) scale(.78); }
}
@keyframes leo-orbit-highlight {
    0%, 9% { opacity: 0; transform: translate(-10px, 26px) rotate(-6deg) scale(.65); }
    17% { opacity: 1; transform: translate(5px, -8px) rotate(4deg) scale(1.07); }
    48% { opacity: 1; transform: translate(-12px, -17px) rotate(-3deg) scale(1); }
    76% { opacity: 1; transform: translate(6px, 5px) rotate(5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(-12px, 22px) rotate(-5deg) scale(.78); }
}
@keyframes leo-orbit-subject {
    0%, 9% { opacity: 0; transform: translate(12px, 26px) rotate(7deg) scale(.65); }
    17% { opacity: 1; transform: translate(-6px, -8px) rotate(-4deg) scale(1.07); }
    48% { opacity: 1; transform: translate(12px, -18px) rotate(3deg) scale(1); }
    76% { opacity: 1; transform: translate(-6px, 5px) rotate(-5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(14px, 24px) rotate(6deg) scale(.78); }
}
@keyframes leo-orbit-cta {
    0%, 9% { opacity: 0; transform: translate(13px, 24px) rotate(-8deg) scale(.65); }
    17% { opacity: 1; transform: translate(-6px, -9px) rotate(5deg) scale(1.08); }
    48% { opacity: 1; transform: translate(10px, -16px) rotate(-4deg) scale(1); }
    76% { opacity: 1; transform: translate(-7px, 6px) rotate(4deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(14px, 22px) rotate(-6deg) scale(.78); }
}
.zoe-media-wrap:hover .leo-ornaments .zoe-social-ornament { animation-play-state: paused; }

/* "Minden mondatnak van feladata": attention, doubt, next step. */
.leo-reasons li.is-attention::before { background: #ffe4ec; color: #be185d; content: "◎"; font-size: 12px; }
.leo-reasons li.is-doubt::before { background: #e7dfff; color: var(--p); content: "?"; font-weight: 800; }
.leo-reasons li.is-step::before { background: #dcfce7; color: #15803d; content: "→"; }

/* Hirdetések: one offer, several angles, testable variants. */
.leo-flow-step { position: relative; display: grid; min-width: 0; flex: 1 1 0; align-content: start; gap: 7px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(52, 34, 120, .1); }
.leo-flow-step small { color: var(--p); font-size: 10.5px; font-weight: 700; }
.leo-flow-step strong { font-size: 13px; line-height: 1.25; }
.leo-flow-step > span { color: var(--m); font-size: 11px; line-height: 1.3; }
.leo-flow-arrow { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 4px 12px rgba(52, 34, 120, .12); }
.leo-art-flow { gap: 8px; padding: 22px 18px; }
.leo-angles, .leo-variants { display: grid; gap: 4px; }
.leo-angles b { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: #f7f5ff; color: var(--i); font-size: 10.5px; font-weight: 650; line-height: 1.2; }
.leo-angles b::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; content: ""; }
.leo-angles .is-problem::before { background: #e5484d; }
.leo-angles .is-outcome::before { background: #22a06b; }
.leo-angles .is-benefit::before { background: var(--p); }
.leo-variants b { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #ece6f8; border-radius: 8px; color: var(--i); font-size: 10px; font-weight: 650; line-height: 1.2; }
.leo-variants i { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border-radius: 4px; background: var(--i); color: #fff; font-size: 9px; font-style: normal; }

/* Értékesítési oldal: the decision path as a numbered page wireframe. */
.leo-art-page { padding: 24px; }
.leo-page-frame { width: 100%; max-width: 380px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(52, 34, 120, .12); }
.leo-page-bar, .leo-browser-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #ece6f8; background: #f7f5fc; }
.leo-page-bar i, .leo-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.leo-page-bar i:nth-child(2), .leo-browser-bar i:nth-child(2) { background: #febc2e; }
.leo-page-bar i:nth-child(3), .leo-browser-bar i:nth-child(3) { background: #28c840; }
.leo-page-bar span, .leo-browser-bar span { margin-left: 8px; padding: 2px 10px; border-radius: 99px; background: #fff; color: #8b86a0; font-size: 9px; }
.leo-page-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px dashed #ece6f8; }
.leo-page-row:last-child { border-bottom: 0; }
.leo-page-row small { display: flex; align-items: center; gap: 6px; color: #4b2fd1; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.leo-page-row small i { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border-radius: 50%; background: var(--p); color: #fff; font-size: 9px; font-style: normal; }
.leo-page-promise, .leo-page-checks { display: grid; gap: 5px; }
.leo-page-promise b { height: 8px; border-radius: 3px; background: #1b1838; }
.leo-page-promise b:last-child { width: 64%; }
.leo-page-checks b { display: flex; align-items: center; gap: 5px; }
.leo-page-checks b::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #22a06b; content: ""; }
.leo-page-checks b::after { width: 78%; height: 5px; border-radius: 3px; background: #e9e6f2; content: ""; }
.leo-page-checks b:nth-child(2)::after { width: 64%; }
.leo-page-checks b:nth-child(3)::after { width: 72%; }
.leo-page-quote { display: flex; align-items: center; gap: 7px; }
.leo-page-quote img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.leo-page-quote b { height: 5px; flex: 1; border-radius: 3px; background: #e9e6f2; }
.leo-page-quote em { color: #f5b301; font-size: 9px; font-style: normal; letter-spacing: -1px; }
.leo-page-button { justify-self: start; padding: 5px 12px; border-radius: 99px; background: var(--p); color: #fff; font-size: 10px; font-weight: 700; }

/* E-mailek: a sequence on a timeline, each letter with its own job and result. */
.leo-art-sequence { padding: 24px; }
.leo-sequence { position: relative; display: grid; width: 100%; max-width: 400px; gap: 10px; margin: 0; padding: 0; list-style: none; }
.leo-sequence::before { position: absolute; top: 22px; bottom: 22px; left: 57px; width: 2px; border-radius: 2px; background: #ddd3ff; content: ""; }
.leo-sequence li { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 14px; }
.leo-sequence li::before { position: absolute; top: 50%; left: 58px; width: 10px; height: 10px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 3px #f5f2ff; content: ""; translate: -50% -50%; }
.leo-sequence-day { justify-self: end; color: var(--m); font-size: 11px; font-weight: 700; white-space: nowrap; }
.leo-sequence-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px rgba(52, 34, 120, .1); }
.leo-sequence-mail small { color: #4b2fd1; font-size: 10px; font-weight: 700; }
.leo-sequence-mail strong { grid-column: 1; font-size: 12px; line-height: 1.25; }
.leo-sequence-mail b { grid-row: 1 / 3; grid-column: 2; padding: 3px 8px; border-radius: 99px; font-size: 9.5px; white-space: nowrap; }
.leo-sequence-mail .is-opened { background: #eef2ff; color: #3730a3; }
.leo-sequence-mail .is-clicked { background: #fff4d6; color: #a16207; }
.leo-sequence-mail .is-replied { background: #e0f4e7; color: #1f7a4d; }

/* A te hangodon: a product feature rewritten as the buyer's benefit. */
.leo-art-voice { align-items: center; padding: 24px 20px; }
.leo-voice-card { display: grid; min-width: 0; flex: 1 1 0; align-content: start; gap: 8px; padding: 14px; border-radius: 14px; }
.leo-voice-card small { color: #4b2fd1; font-size: 10.5px; font-weight: 700; }
.leo-voice-card p { margin: 0; }
.leo-voice-card.is-feature { border: 1px dashed #cfc8e2; background: rgba(255, 255, 255, .7); color: #6b6880; }
.leo-voice-card.is-feature small { color: #8b86a0; }
.leo-voice-card.is-feature p { font: 500 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.leo-voice-card.is-benefit { background: #fffdf8; box-shadow: 0 14px 30px rgba(52, 34, 120, .12); color: #1b1838; }
.leo-voice-card.is-benefit p { font: italic 500 15px/1.4 Georgia, "Times New Roman", serif; }
.leo-voice-card mark { background: linear-gradient(transparent 58%, #ffe66d 58%); color: inherit; }
.leo-voice-turn { display: grid; flex: 0 0 auto; align-content: center; justify-items: center; gap: 5px; color: var(--p); font-size: 10px; font-weight: 700; white-space: nowrap; }
.leo-voice-turn::before { width: 26px; height: 26px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 4px 12px rgba(52, 34, 120, .12); content: ""; }

/* Interactive sample: pick a format and a goal; the same offer is written three ways. */
.leo-studio { overflow-x: clip; background: #fff; }
.leo-studio-head { max-width: 860px; margin-bottom: 48px; }
.leo-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #4b2fd1; font-size: 13px; font-weight: 650; }
.leo-kicker::before { width: 8px; height: 8px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 4px #ebe5ff; content: ""; }
.leo-studio .leo-studio-head h2 { font-size: clamp(36px, 5vw, 66px); letter-spacing: -.055em; line-height: 1.03; text-wrap: balance; }
.leo-studio-lead { max-width: 640px; margin: 20px 0 0; color: var(--m); font-size: 17px; }
.leo-studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
.leo-studio-board { min-width: 0; padding: 28px 32px 24px; border-radius: 32px; background: #f5f2ff; }
.leo-pickers { display: grid; gap: 12px; }
.leo-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.leo-picker > span { width: 74px; color: var(--m); font-size: 13px; font-weight: 600; }
.leo-picker [role=group] { display: flex; flex-wrap: wrap; gap: 8px; }
.leo-chip { min-height: 44px; padding: 0 18px; border: 1px solid #e4ddfa; border-radius: 99px; background: #fff; color: #3c3654; font: 600 14px/1 "Inter Variable", sans-serif; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.leo-chip:hover { border-color: #c9bcf7; }
.leo-chip[aria-pressed=true] { border-color: var(--i); background: var(--i); color: #fff; }
.leo-offer { margin: 18px 0 0; color: var(--m); font-size: 13px; }
.leo-stage { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 44px); margin-top: 18px; }
.leo-notes { display: grid; margin: 0; padding: 6px 22px; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(52, 34, 120, .1); }
.leo-notes > div { padding: 14px 0; border-bottom: 1px solid #f0ecfa; }
.leo-notes > div:last-child { border-bottom: 0; }
.leo-notes dt { display: flex; align-items: center; margin-bottom: 5px; color: #4b2fd1; font-size: 12px; font-weight: 700; }
.leo-notes dd { margin: 0; color: var(--i); font-size: 15px; line-height: 1.45; }
.leo-studio-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #e4ddfa; }
.leo-studio-actions p { max-width: 440px; margin: 0; color: var(--m); font-size: 13px; }
.leo-studio-leo { margin-left: -44px; }
/* Leo fills only 41% of the poster's width; scale it up and trim the white above his head so he reads at full size. */
@media (min-width: 901px) {
    .leo-studio-leo .zoe-lab-figure { overflow: hidden; }
    .leo-studio-leo .zoe-lab-figure img { width: 160%; max-width: none; margin: -36% 0 -12% -30%; }
}

/* Numbered marks tie each part of the sample to its note: 1 opening, 2 argument, 3 call to action. */
.leo-mark { display: inline-grid; width: 17px; height: 17px; margin-right: 7px; place-items: center; border-radius: 50%; color: #1b1838; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; vertical-align: 1px; }
.leo-mark.is-1 { background: #ffe66d; }
.leo-mark.is-2 { background: #d8ccff; }
.leo-mark.is-3 { background: #a7f0c4; }

.leo-preview { width: 100%; max-width: 380px; margin: 0; }
.leo-preview [data-copy] { transition: opacity .17s ease; }
.leo-preview.is-swapping [data-copy] { opacity: 0; }
.leo-mock { display: none; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 60px rgba(33, 22, 90, .16); color: #1c1e21; font-size: 13px; line-height: 1.45; }
.leo-preview[data-format=ad] .leo-mock-ad, .leo-preview[data-format=sales] .leo-mock-sales, .leo-preview[data-format=email] .leo-mock-email { display: block; }
.leo-logo { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #1b1838, #6d4aff); color: #fff; font-size: 14px; font-style: normal; font-weight: 800; }

/* Hirdetés: a social feed ad. */
.leo-ad-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px 8px; }
.leo-ad-head strong { display: block; font-size: 13.5px; line-height: 1.2; }
.leo-ad-head small { color: #65676b; font-size: 11.5px; }
.leo-ad-text { display: grid; gap: 6px; margin: 0; padding: 0 14px 12px; font-size: 13.5px; }
.leo-ad-line { display: block; }
.leo-ad-visual { display: grid; align-content: center; gap: 10px; aspect-ratio: 1.7; padding: 18px 26px; background: linear-gradient(150deg, #efeaff, #dcd2ff 55%, #c7b8ff); }
.leo-ad-note { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px rgba(52, 34, 120, .18); }
.leo-ad-note small { color: #6b6880; font-size: 10.5px; font-weight: 650; }
.leo-ad-note strong { font-size: 12.5px; }
.leo-ad-note.is-due { margin-right: 16%; }
.leo-ad-note.is-done { margin-left: 16%; }
.leo-ad-note.is-done small { color: #1f7a4d; }
.leo-ad-note.is-done small::before { content: "✓ "; }
.leo-ad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #f0f2f5; }
.leo-ad-foot > span:first-child { min-width: 0; }
.leo-ad-foot small { display: block; color: #65676b; font-size: 10.5px; text-transform: uppercase; }
.leo-ad-foot strong { display: block; font-size: 13.5px; line-height: 1.25; }
.leo-ad-action { display: flex; flex: 0 0 auto; align-items: center; }
.leo-ad-action b { padding: 8px 12px; border-radius: 6px; background: #e4e6eb; color: #050505; font-size: 12.5px; font-weight: 650; white-space: nowrap; }

/* Értékesítési oldal: promise, argument with proof, the next step. */
.leo-sales-body { display: grid; gap: 10px; padding: 16px 20px 20px; }
.leo-sales-brand { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; }
.leo-sales-brand .leo-logo { width: 22px; height: 22px; font-size: 11px; }
.leo-sales-title { margin: 2px 0 0; font-size: 21px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.leo-sales-title strong { font-weight: inherit; }
.leo-sales-title .leo-mark, .leo-mail-subject .leo-mark { vertical-align: 3px; }
.leo-sales-sub { margin: 0; color: #5d5a70; font-size: 13px; }
.leo-sales-argue { position: relative; display: grid; gap: 9px; padding: 13px 13px 13px 15px; border-radius: 12px; background: #f7f5ff; }
.leo-sales-argue > .leo-mark { position: absolute; top: -7px; left: -7px; margin: 0; }
.leo-sales-points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.leo-sales-points li { position: relative; padding-left: 21px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.leo-sales-points li::before { position: absolute; top: 2px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; content: ""; }
.leo-sales-proof { margin: 0; color: #5d5a70; font: italic 400 12.5px/1.4 Georgia, "Times New Roman", serif; }
.leo-sales-action { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 2px 0 0; }
.leo-sales-action b { padding: 10px 16px; border-radius: 10px; background: var(--p); color: #fff; font-size: 13px; font-weight: 700; }
.leo-sales-action small { flex-basis: 100%; color: #8b86a0; font-size: 11px; }

/* E-mail: subject line, a short personal argument, one ask. */
.leo-mail-head { display: flex; align-items: center; padding: 14px 18px 10px; border-bottom: 1px solid #f0eef6; }
.leo-mail-from { display: flex; align-items: center; gap: 9px; }
.leo-mail-from i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #ffe7c7; color: #8a4b22; font-style: normal; font-weight: 800; }
.leo-mail-from strong { display: block; font-size: 13px; line-height: 1.2; }
.leo-mail-from small { color: #8b86a0; font-size: 11px; }
.leo-mail-subject { margin: 0; padding: 14px 18px 2px; font-size: 16px; line-height: 1.3; }
.leo-mail-subject strong { font-weight: 750; }
.leo-mail-preview { margin: 0; padding: 0 18px 12px; color: #8b86a0; font-size: 12px; }
.leo-mail-body { display: grid; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid #f0eef6; }
.leo-mail-body p { margin: 0; font-size: 13px; }
.leo-mail-cta { display: inline-block; padding: 9px 14px; border-radius: 10px; background: var(--i); color: #fff; font-size: 12.5px; font-weight: 700; }
.leo-preview[data-goal=reply] .leo-mail-cta { padding: 0 2px; border-radius: 0; background: linear-gradient(transparent 58%, #ffe66d 58%); color: var(--i); }
.leo-mail-sign { color: #5d5a70; }

@media (max-width: 1080px) {
    .leo-studio-layout { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (max-width: 900px) {
    .leo-studio-head { margin-bottom: 36px; }
    .leo-studio-layout { grid-template-columns: minmax(0, 1fr); }
    .leo-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .leo-notes { width: 100%; }
}
@media (max-width: 640px) {
    .leo-studio-board { margin: 0 -6px; padding: 20px 16px 18px; border-radius: 24px; }
    .leo-picker > span { width: 100%; }
    .leo-chip { padding: 0 14px; font-size: 13px; }
    .leo-studio-actions .zoe-button { width: 100%; }
    .leo-art-flow, .leo-art-voice { flex-direction: column; align-items: stretch; }
    .leo-flow-arrow { align-self: center; rotate: 90deg; }
    .leo-voice-turn::before { rotate: 90deg; }
    .leo-art-page, .leo-art-sequence { padding: 18px 14px; }
    .leo-page-row { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 9px 12px; }
}
@media (max-width: 560px) {
    .leo-ornaments .zoe-social-ornament { font-size: 10.5px; }
    .leo-page .zoe-media video { transform: scale(1.18); }
    .leo-orn-ab { width: 128px; }
    .leo-orn-variant em { line-height: 1.2; white-space: normal; }
    .leo-orn-highlight { width: 118px; font-size: 11.5px !important; }
    .leo-orn-subject { right: 0; width: 128px; }
    .leo-orn-cta { right: 0; font-size: 11px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .leo-ornaments .zoe-social-ornament { opacity: 1; animation: none !important; transform: none; }
    .leo-studio *, .leo-preview [data-copy] { transition: none !important; }
}